Add tooltips to SlicePreparationCard

HumanBrainProject · Jul 27, 2024 · 4e31af8 · 4e31af8
1 parent 4dfa715
commit 4e31af8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 19 deletions.
diff --git a/apps/nar-v3/src/components/ControlledTerm.jsx b/apps/nar-v3/src/components/ControlledTerm.jsx
@@ -0,0 +1,15 @@
+import Tooltip from "@mui/material/Tooltip";
+
+function ControlledTerm(props) {
+  if (props.term.definition) {
+    return (
+      <Tooltip title={props.term.definition + props.term.description}>
+        <span>{props.term.name}</span>
+      </Tooltip>
+    );
+  } else {
+    return props.term.name;
+  }
+}
+
+export default ControlledTerm;
diff --git a/apps/nar-v3/src/components/SliceCard.jsx b/apps/nar-v3/src/components/SliceCard.jsx
@@ -19,24 +19,13 @@ limitations under the License.
 import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
-import Tooltip from "@mui/material/Tooltip";
 
 import Connection from "./Connection";
 import KeyValueTable from "./KeyValueTable";
+import ControlledTerm from "./ControlledTerm";
 import { NavigateNext, NavigatePrevious } from "./Navigation";
 import styles from "../styles";
 
-function ControlledTerm(props) {
-  if (props.term.definition) {
-    return (
-      <Tooltip title={props.term.definition + props.term.description}>
-        <span>{props.term.name}</span>
-      </Tooltip>
-    );
-  } else {
-    return props.term.name;
-  }
-}
 
 function SliceCard(props) {
   if (props.slices) {

diff --git a/apps/nar-v3/src/components/SlicePreparationCard.jsx b/apps/nar-v3/src/components/SlicePreparationCard.jsx
@@ -23,6 +23,7 @@ import Paper from "@mui/material/Paper";
 import { formatQuant, formatSolution } from "../utility";
 import Connection from "./Connection";
 import KeyValueTable from "./KeyValueTable";
+import ControlledTerm from "./ControlledTerm";
 import styles from "../styles";
 
 
@@ -39,14 +40,20 @@ function SlicePreparationCard(props) {
 
   if (activity) {
     const data = {
-      "Description": activity.description,
+      Description: activity.description,
       "Device name": activity.device[0].device.name,
-      "Device type": activity.device[0].device.deviceType,
+      "Device type": <ControlledTerm term={activity.device[0].device.deviceType} />,
       Manufacturer: formatManufacturer(activity.device[0].device.manufacturer),
       "Slice thickness": formatQuant(activity.device[0].sliceThickness),
-      "Slicing plane": activity.device[0].slicingPlane,
+      "Slicing plane": <ControlledTerm term={activity.device[0].slicingPlane} />,
       "Slicing angle": formatQuant(activity.device[0].slicingAngle),
-      "Study targets": activity.studyTarget.join(", "),
+      "Study targets": (
+        <>
+          {activity.studyTarget.map((item) => (
+            <ControlledTerm key={item.name} term={item} />
+          ))}
+        </>
+      ),
       Temperature: formatQuant(activity.temperature),
       "Dissecting solution": formatSolution(activity.tissueBathSolution),
     };

diff --git a/apps/nar-v3/src/routes/queryLibrary.js b/apps/nar-v3/src/routes/queryLibrary.js
@@ -43,7 +43,15 @@ const deviceProperty = L("device", [
   S("internalIdentifier"),
   S("description"),
   L("material/name"),
-  L("deviceType/name"),
+  L("deviceType", [
+    S("name"),
+    S("@type"),
+    S("definition"),
+    S("description"),
+    S("interlexIdentifier"),
+    S("knowledgeSpaceLink"),
+    S("preferredOntologyIdentifier"),
+  ]),
   L("manufacturer", [S("shortName", S("longName"))]),
 ]);
 
@@ -138,12 +146,32 @@ const patchClampDatasetQuery = buildKGQuery("core/DatasetVersion", [
                     S("lookupLabel"),
                     deviceProperty,
                     L("sliceThickness", quantValProperties),
-                    L("slicingPlane/name"),
+                    L("slicingPlane", [
+                      S("name"),
+                      S("@type"),
+                      S("definition"),
+                      S("description"),
+                      S("interlexIdentifier"),
+                      S("knowledgeSpaceLink"),
+                      S("preferredOntologyIdentifier"),
+                    ]),
                     L("slicingAngle", quantValProperties),
                   ],
                   MULTIPLE
                 ),
-                L("studyTarget/name", [], MULTIPLE),
+                L(
+                  "studyTarget",
+                  [
+                    S("name"),
+                    S("@type"),
+                    S("definition"),
+                    S("description"),
+                    S("interlexIdentifier"),
+                    S("knowledgeSpaceLink"),
+                    S("preferredOntologyIdentifier"),
+                  ],
+                  MULTIPLE
+                ),
                 L("temperature", [S("value"), L("unit/name")]),
                 L("tissueBathSolution", solutionProperties),
                 L(