Create E-Model card on summary

src/app/build/(virtual-lab)/me-model/electrophysiology/page.tsx

@@ -2,24 +2,52 @@
 
 import { useSetAtom } from 'jotai';
 import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 
 import ExploreSectionListingView from '@/components/explore-section/ExploreSectionListingView';
 import { DataType } from '@/constants/explore-section/list-views';
-import { meModelSectionAtom } from '@/state/virtual-lab/build/me-model';
+import { selectedEModelAtom, meModelSectionAtom } from '@/state/virtual-lab/build/me-model';
 import MorphologyCard from '@/components/build-section/virtual-lab/me-model/MorphologyCard';
+import { Btn } from '@/components/Btn';
+import { ESeModel, ExploreESHit, ExploreResource } from '@/types/explore-section/es';
 
 export default function ElectrophysiologyPage() {
   const setMEModelSection = useSetAtom(meModelSectionAtom);
+  const setSelectedEModel = useSetAtom(selectedEModelAtom);
+  const router = useRouter();
 
   useEffect(() => setMEModelSection('electrophysiology'), [setMEModelSection]);
 
+  const onEModelPicked = (selectedRows: ExploreESHit<ExploreResource>[]) => {
+    if (selectedRows.length > 1) {
+      throw new Error('Multiple e-models selected for ME-Model building. Only one is allowed');
+    }
+
+    const emodel = selectedRows[0]._source as ESeModel;
+    setSelectedEModel(emodel);
+    router.push('/build/me-model/summary');
+  };
+
   return (
     <>
       <div className="p-10">
         <MorphologyCard />
       </div>
       <div className="h-full px-10" id="explore-table-container-for-observable">
-        <ExploreSectionListingView dataType={DataType.CircuitEModel} brainRegionSource="selected" />
+        <ExploreSectionListingView
+          dataType={DataType.CircuitEModel}
+          brainRegionSource="selected"
+          enableDownload
+          selectionType="radio"
+          renderButton={({ selectedRows }) => (
+            <Btn
+              className="fit-content sticky bottom-0 ml-auto w-fit bg-secondary-2"
+              onClick={() => onEModelPicked(selectedRows)}
+            >
+              Validate
+            </Btn>
+          )}
+        />
       </div>
     </>
   );

src/app/build/(virtual-lab)/me-model/summary/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAtomValue } from 'jotai';
+
+import { selectedEModelAtom, selectedMModelAtom } from '@/state/virtual-lab/build/me-model';
+import MorphologyCard from '@/components/build-section/virtual-lab/me-model/MorphologyCard';
+import EModelCard from '@/components/build-section/virtual-lab/me-model/EModelCard';
+
+export default function SummaryPage() {
+  const selectedEModel = useAtomValue(selectedEModelAtom);
+  const selectedMModel = useAtomValue(selectedMModelAtom);
+
+  if (!selectedEModel || !selectedMModel) {
+    return (
+      <h2 className="flex h-full items-center justify-center">
+        Select Morpholgy and EModel first.
+      </h2>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-10 p-10">
+      <div className="text-2xl font-bold text-primary-8">Single Neuron</div>
+      <MorphologyCard />
+      <EModelCard />
+    </div>
+  );
+}

src/components/build-section/virtual-lab/me-model/EModelCard.tsx

@@ -0,0 +1,72 @@
+import { useAtomValue } from 'jotai';
+import { Empty } from 'antd';
+
+import { selectedEModelAtom } from '@/state/virtual-lab/build/me-model';
+import { classNames } from '@/util/utils';
+import EModelTracePreview from '@/components/explore-section/ExploreSectionListingView/EModelTracePreview';
+import { ESeModel } from '@/types/explore-section/es';
+
+const subtitleStyle = 'uppercase font-thin text-slate-600';
+
+export default function EModelCard() {
+  const selectedEModel = useAtomValue(selectedEModelAtom);
+
+  if (!selectedEModel) return null;
+
+  return (
+    <div className="w-full border p-10">
+      <div className="flex justify-between">
+        <div className={classNames('text-2xl', subtitleStyle)}>E-Model</div>
+        <a href={selectedEModel['@id']} target="_blank" className="font-bold text-primary-8">
+          More details
+        </a>
+      </div>
+
+      <div className="mt-2 flex gap-10">
+        <EModelThumbnail emodel={selectedEModel} />
+        <div className="flex-grow">
+          <div className={subtitleStyle}>NAME</div>
+          <div className="my-1 text-3xl font-bold text-primary-8">{selectedEModel.name}</div>
+          <Details emodel={selectedEModel} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Details({ emodel }: { emodel: ESeModel }) {
+  return (
+    <div className="mt-4 grid grid-cols-3 gap-4 text-primary-8">
+      <div>
+        <div className={subtitleStyle}>Examplar morphology</div>
+        <div>Unknown</div>
+      </div>
+
+      <div>
+        <div className={subtitleStyle}>Optimization target</div>
+        <div>Unknown</div>
+      </div>
+
+      <div>
+        <div className={subtitleStyle}>Brain Region</div>
+        <div>{emodel.brainRegion?.label || 'Unknown'}</div>
+      </div>
+
+      <div>
+        <div className={subtitleStyle}>E-Type</div>
+        <div>{emodel.eType?.label || 'Unknown'}</div>
+      </div>
+    </div>
+  );
+}
+
+function EModelThumbnail({ emodel }: { emodel: ESeModel }) {
+  if (!emodel.image)
+    return <Empty description="No thumbnail available" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+
+  return (
+    <div className="border border-black">
+      <EModelTracePreview images={emodel.image} height={200} width={200} />
+    </div>
+  );
+}

src/components/build-section/virtual-lab/me-model/MorphologyCard.tsx

@@ -14,7 +14,7 @@ export default function MorphologyCard() {
   if (!selectedMModel) return null;
 
   return (
-    <div className="border p-10">
+    <div className="w-full border p-10">
       <div className="flex justify-between">
         <div className={classNames('text-2xl', subtitleStyle)}>M-Model</div>
         <a href={selectedMModel['@id']} target="_blank" className="font-bold text-primary-8">

src/state/virtual-lab/build/me-model.ts

@@ -2,9 +2,12 @@ import { atom } from 'jotai';
 
 import { MEModelMorphologyType, MEModelSection } from '@/types/virtual-lab/build/me-model';
 import { ReconstructedNeuronMorphology } from '@/types/explore-section/es-experiment';
+import { ESeModel } from '@/types/explore-section/es';
 
 export const meModelSectionAtom = atom<MEModelSection>('morphology');
 
 export const morphologyTypeAtom = atom<MEModelMorphologyType>('reconstructed');
 
 export const selectedMModelAtom = atom<ReconstructedNeuronMorphology | null>(null);
+
+export const selectedEModelAtom = atom<ESeModel | null>(null);