Public projects me model table correction round 2

src/components/PublicProjects/MEModels/MEModelTable.tsx

@@ -8,6 +8,8 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
+import Image from 'next/image';
+
 import { useState } from 'react';
 import { MEModelsProps } from '../type';
 
@@ -17,6 +19,7 @@ export function DownloadButton({ url }: { url: string }) {
       href={url}
       className="my-2 rounded-3xl border border-solid border-primary-9 bg-white px-6 py-2 text-base text-primary-9 transition-colors duration-300 ease-in-out hover:bg-primary-9 hover:text-white"
       download
+      target="_blank"
     >
       Download
     </a>
@@ -46,18 +49,32 @@ const columns: Column[] = [
     cell: (info) => nameFormating(info.getValue(), 40),
     size: 250,
   },
-  {
-    accessorKey: 'file',
-    header: 'File',
-    cell: ({ getValue }) => <DownloadButton url={getValue()} />,
-    size: 100,
-  },
   {
     accessorKey: 'brainRegion',
     header: 'Brain Region',
     cell: (info) => nameFormating(info.getValue(), 30),
     size: 200,
   },
+  {
+    accessorKey: 'species',
+    header: 'Species',
+    cell: (info) => info.getValue(),
+    size: 36,
+  },
+  {
+    accessorKey: 'trace',
+    header: 'Trace',
+    cell: ({ getValue }) => (
+      <Image
+        src={getValue()}
+        alt="Image of trace"
+        width={100}
+        height={100}
+        className="h-auto w-full"
+      />
+    ),
+    size: 116,
+  },
   {
     accessorKey: 'validated',
     header: 'Validated',
@@ -77,18 +94,24 @@ const columns: Column[] = [
     size: 112,
   },
   {
-    accessorKey: 'morphologyId',
-    header: 'Morphology File',
-    cell: ({ getValue }) => <DownloadButton url={getValue()} />,
-    size: 112,
-  },
-  {
-    accessorKey: 'traceFileId',
-    header: 'Trace File',
+    accessorKey: 'file',
+    header: 'File',
     cell: ({ getValue }) => <DownloadButton url={getValue()} />,
-    size: 112,
+    size: 100,
   },
   // {
+  //   accessorKey: 'morphologyId',
+  //   header: 'Morphology File',
+  //   cell: ({ getValue }) => <DownloadButton url={getValue()} />,
+  //   size: 112,
+  // },
+  // {
+  //   accessorKey: 'traceFileId',
+  //   header: 'Trace File',
+  //   cell: ({ getValue }) => <DownloadButton url={getValue()} />,
+  //   size: 112,
+  // },
+  // {
   //   accessorKey: 'morphology',
   //   header: 'Morphology',
   //   cell: ({ getValue }) => (
@@ -102,24 +125,15 @@ const columns: Column[] = [
   //   ),
   //   size: 116,
   // },
-  // {
-  //   accessorKey: 'trace',
-  //   header: 'Trace',
-  //   cell: ({ getValue }) => (
-  //     <Image
-  //       src={getValue()}
-  //       alt="Image of trace"
-  //       width={100}
-  //       height={100}
-  //       className="h-auto w-full"
-  //     />
-  //   ),
-  //   size: 116,
-  // },
 ];
 
 export default function MEModelTable({ content }: { content: MEModelsProps[] }) {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: 'brainRegion',
+      desc: false,
+    },
+  ]);
 
   const table = useReactTable({
     data: content,

src/components/PublicProjects/PublicProjectMain.tsx

@@ -19,6 +19,7 @@ const isShowCaseProjectProps = (data: unknown): data is ShowCaseProjectQueryType
   return tryType('ShowCaseProjectProps', data, {
     name: 'string',
     slug: 'string',
+    species: ['|', 'undefined', 'string'],
     introduction: 'string',
     heroImage: 'string',
     authorsList: [

src/components/PublicProjects/SingleArtifact.tsx

@@ -9,7 +9,8 @@ export default function SingleArtifact({ content }: { content: LinkAndDownloadAr
           <a
             href={content.file}
             className="border border-solid border-primary-9 bg-white px-6 py-3 text-lg transition-colors duration-300 hover:bg-primary-9 hover:text-white"
-            download
+            download={content.title}
+            target="_blank"
           >
             Download
           </a>

src/components/PublicProjects/api/fetchSingleCase.ts

@@ -30,6 +30,7 @@ const singleCaseQuery = (slug: string) =>
         meModelsList[] {
             'file': file.asset->url,
             name,
+            species,
             brainRegion,
             validated,
             mType,

src/components/PublicProjects/type/index.ts

@@ -36,6 +36,7 @@ export type LinkAndDownloadArtifactProps = {
 export type MEModelsProps = {
   file: string;
   name: string;
+  species: string;
   brainRegion: string;
   validated: boolean;
   mType: string;