From 9bf731ffb4a9970725a0698088f5d4e70e89f3ca 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 +++++++++++----
 3 files changed, 27 insertions(+), 16 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),
     };