wip

HumanBrainProject · Mar 4, 2024 · 91ba634 · 91ba634
1 parent 56e2f7d
commit 91ba634
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 99 deletions.
diff --git a/apps/nar-v3/src/components/DatasetCard.jsx b/apps/nar-v3/src/components/DatasetCard.jsx
@@ -24,8 +24,7 @@ const UNITS_SYMBOLS = {
 const styles = {
   entity: { borderRadius: 5, width: "600px", padding: 2 },
   activity: { width: "800px", padding: 2 },
-}
-
+};
 
 function formatUnits(units) {
   return UNITS_SYMBOLS[units.name] || units.name;
@@ -104,8 +103,10 @@ function SubjectCard(props) {
         </p>
         {/* todo: add subject group information */}
         <dl>
-          <dt>Species</dt><dd>TO DO</dd>
-          <dt>Strain</dt><dd>TO DO</dd>
+          <dt>Species</dt>
+          <dd>TO DO</dd>
+          <dt>Strain</dt>
+          <dd>TO DO</dd>
           <dt>Age</dt>
           <dd>
             <AgeDisplay age={subject.states[0].age} />
@@ -363,83 +364,99 @@ function DatasetCard(props) {
     }
   };
 
+  console.log("Rendering dataset in DatasetCard.jsx");
+  console.log(dataset);
+
   return (
     <div>
       <h1>{dataset.fullName}</h1>
       <h2>
-        <Link href={getKGSearchUrl(dataset["@id"])} target="_blank">
+        <Link
+          href={getKGSearchUrl(dataset["@id"] || dataset.id)}
+          target="_blank"
+        >
           KG Search
         </Link>
       </h2>
 
-    <Stack direction="column" alignItems="center" spacing={2} sx={{marginBottom: 5}}>
-      <SubjectCard
-        subjects={dataset.subjects}
-        index={subjectIndex}
-        setIndex={setSubjectIndex}
-      />
-
-      <Connection />
-
-      <SlicePreparationCard
-        activity={dataset.subjects[subjectIndex].states[0].slicePreparation[0]}
-      />
-
-      <Connection />
-
-      <SliceCard
-        slices={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices
-        }
-        index={sliceIndex}
-        setIndex={setSliceIndex}
-      />
-
-      <Connection />
-
-      <CellPatchingCard
-        activity={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices[
-            sliceIndex
-          ].cellPatching[0]
-        }
-      />
-
-      <Connection />
-
-      <PatchedCellCard
-        cell={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices[
-            sliceIndex
-          ].cellPatching[0].patchedCells[0]
-        }
-      />
-
-      <Connection />
-
-      <RecordingCard
-        recording={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices[
-            sliceIndex
-          ].cellPatching[0].patchedCells[0].recordingActivity[0]
-        }
-        stimulation={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices[
-            sliceIndex
-          ].cellPatching[0].patchedCells[0].stimulationActivity[0]
-        }
-      />
-
-      <Connection />
-
-      <DataFileCard
-        fileObj={
-          dataset.subjects[subjectIndex].states[0].slicePreparation[0].slices[
-            sliceIndex
-          ].cellPatching[0].patchedCells[0].recordingActivity[0].files[0]
-        }
-      />
-      </Stack>
+      {dataset.subjects ? (
+        <Stack
+          direction="column"
+          alignItems="center"
+          spacing={2}
+          sx={{ marginBottom: 5 }}
+        >
+          <SubjectCard
+            subjects={dataset.subjects}
+            index={subjectIndex}
+            setIndex={setSubjectIndex}
+          />
+
+          <Connection />
+
+          <SlicePreparationCard
+            activity={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+            }
+          />
+
+          <Connection />
+
+          <SliceCard
+            slices={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices
+            }
+            index={sliceIndex}
+            setIndex={setSliceIndex}
+          />
+
+          <Connection />
+
+          <CellPatchingCard
+            activity={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices[sliceIndex].cellPatching[0]
+            }
+          />
+
+          <Connection />
+
+          <PatchedCellCard
+            cell={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices[sliceIndex].cellPatching[0].patchedCells[0]
+            }
+          />
+
+          <Connection />
+
+          <RecordingCard
+            recording={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices[sliceIndex].cellPatching[0].patchedCells[0]
+                .recordingActivity[0]
+            }
+            stimulation={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices[sliceIndex].cellPatching[0].patchedCells[0]
+                .stimulationActivity[0]
+            }
+          />
+
+          <Connection />
+
+          <DataFileCard
+            fileObj={
+              dataset.subjects[subjectIndex].states[0].slicePreparation[0]
+                .slices[sliceIndex].cellPatching[0].patchedCells[0]
+                .recordingActivity[0].files[0]
+            }
+          />
+        </Stack>
+      ) : (
+        ""
+      )}
     </div>
   );
 }

diff --git a/apps/nar-v3/src/components/DatasetList.jsx b/apps/nar-v3/src/components/DatasetList.jsx
@@ -1,13 +1,19 @@
+import { Link as RouterLink } from "react-router-dom";
 
-
+import { uuidFromUri } from "../utility";
 
 function DatasetList(props) {
-
-    return <ul>
-        {props.datasets.map((dataset) => (
-            <li key={dataset.id}>{dataset.fullName || dataset.isVersionOf.fullName}</li>
-        ))}
-    </ul>;
+  return (
+    <ul>
+      {props.datasets.map((dataset) => (
+        <li key={dataset.id}>
+          <RouterLink to={uuidFromUri(dataset.id)}>
+            {dataset.fullName || dataset.isVersionOf.fullName}
+          </RouterLink>
+        </li>
+      ))}
+    </ul>
+  );
 }
 
-export default DatasetList;
+export default DatasetList;
diff --git a/apps/nar-v3/src/components/PatchClampRecordingList.jsx b/apps/nar-v3/src/components/PatchClampRecordingList.jsx
@@ -1,19 +1,22 @@
-
 import { Link as RouterLink } from "react-router-dom";
 
-
 function uuidFromUri(uri) {
-    const parts = uri.split("/");
-    return parts[parts.length - 1];
+  const parts = uri.split("/");
+  return parts[parts.length - 1];
 }
 
 function PatchClampRecordingList(props) {
-
-    return <ul>
-        {props.tissueSamples.map((tissueSample) => (
-            <li key={tissueSample.id}><RouterLink to={uuidFromUri(tissueSample.id)}>{tissueSample.lookupLabel}</RouterLink></li>
-        ))}
-    </ul>;
+  return (
+    <ul>
+      {props.tissueSamples.map((tissueSample) => (
+        <li key={tissueSample.id}>
+          <RouterLink to={uuidFromUri(tissueSample.id)}>
+            {tissueSample.lookupLabel}
+          </RouterLink>
+        </li>
+      ))}
+    </ul>
+  );
 }
 
-export default PatchClampRecordingList;
+export default PatchClampRecordingList;
diff --git a/apps/nar-v3/src/routes/dataset.jsx b/apps/nar-v3/src/routes/dataset.jsx
@@ -1,12 +1,25 @@
 import React from "react";
 import { Await, defer, useLoaderData } from "react-router-dom";
 
+import { buildKGQuery, simpleProperty as S, linkProperty as L, reverseLinkProperty as R } from "../queries";
 import { datastore } from "../datastore";
-//import Navigation from "../components/Navigation";
+import { uuidFromUri } from "../utility.js";
+import Navigation from "../components/Navigation";
 import DatasetCard from "../components/DatasetCard";
 import ProgressIndicator from "../components/ProgressIndicator";
 
-const query = null;
+const query = buildKGQuery("core/DatasetVersion", [
+  S("@id"),
+  S("fullName"),
+  S("description"),
+  S("shortName"),
+  S("versionIdentifier"),
+  R("isVersionOf", "hasVersion", [
+    S("fullName"),
+    S("description"),
+    S("shortName"),
+  ]),
+]);
 
 export async function loader({ params }) {
   const datasetPromise = datastore.getKGItem(
@@ -23,14 +36,23 @@ function Dataset(props) {
 
   return (
     <div id="dataset">
-      {/* <Navigation location={["Datasets"]} /> */}
-
       <React.Suspense fallback={<ProgressIndicator />}>
         <Await
           resolve={data.dataset}
           errorElement={<p>Error loading dataset.</p>}
         >
-          {(dataset) => <DatasetCard dataset={dataset} />}
+          {(dataset) => {
+            console.log("Resolving dataset in dataset.jsx");
+            console.log(dataset);
+            return (
+              <>
+                <Navigation
+                  location={["Datasets", uuidFromUri(dataset.id)]}
+                />
+                <DatasetCard dataset={dataset} />
+              </>
+            );
+          }}
         </Await>
       </React.Suspense>
     </div>

diff --git a/apps/nar-v3/src/routes/datasets.jsx b/apps/nar-v3/src/routes/datasets.jsx
@@ -3,7 +3,7 @@ import { Await, defer, useLoaderData } from "react-router-dom";
 
 import { buildKGQuery, simpleProperty as S, linkProperty as L, reverseLinkProperty as R } from "../queries";
 import { datastore } from "../datastore";
-//import Navigation from "../components/Navigation";
+import Navigation from "../components/Navigation";
 import DatasetList from "../components/DatasetList";
 import ProgressIndicator from "../components/ProgressIndicator";
 
@@ -34,7 +34,7 @@ function Datasets(props) {
 
   return (
     <div id="datasets">
-      {/* <Navigation location={["Datasets"]} /> */}
+      <Navigation location={["Datasets"]} />
 
       <React.Suspense fallback={<ProgressIndicator />}>
         <Await