From 4e31af81a194bf838ad9e5482595289f943a67ad Mon Sep 17 00:00:00 2001
From: Andrew Davison <andrew.davison@cnrs.fr>
Date: Sat, 27 Jul 2024 21:30:53 +0200
Subject: [PATCH] Add tooltips to SlicePreparationCard

---
 apps/nar-v3/src/components/ControlledTerm.jsx | 15 ++++++++
 apps/nar-v3/src/components/SliceCard.jsx      | 13 +------
 .../src/components/SlicePreparationCard.jsx   | 15 +++++---
 apps/nar-v3/src/routes/queryLibrary.js        | 34 +++++++++++++++++--
 4 files changed, 58 insertions(+), 19 deletions(-)
 create mode 100644 apps/nar-v3/src/components/ControlledTerm.jsx

diff --git a/apps/nar-v3/src/components/ControlledTerm.jsx b/apps/nar-v3/src/components/ControlledTerm.jsx
new file mode 100644
index 0000000..a8e22fa
--- /dev/null
+++ 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
index 9c9f700..bc1d209 100644
--- 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
index 1d59c6e..65c4cbd 100644
--- 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
index 1bd907e..3883240 100644
--- 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(