Enable displaying constrast maps descriptions

api/src/brain_cockpit/endpoints/features_explorer.py

@@ -184,7 +184,7 @@ def load_data(df, config_path=None, dataset_path=None):
     meshes, subjects, tasks_contrasts, sides = parse_metadata(df)
 
     # ROUTES
-    # Define a series of enpoints to expose contrasts, meshes, etc
+    # Define a series of endpoints to expose contrasts, meshes, etc
     info_endpoint = f"/datasets/{id}/info"
     subjects_endpoint = f"/datasets/{id}/subjects"
     contrasts_endpoint = f"/datasets/{id}/contrast_labels"

web/src/components/colorbar/index.tsx

@@ -114,7 +114,7 @@ const Colorbar = ({
           <foreignObject
             className="unit-container"
             x={-margin.right - 25}
-            y={offset - 5}
+            y={offset - 15}
             width="100"
             height="20"
             textAnchor="middle"

web/src/components/paneControls/index.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonGroup, Colors, Icon, Switch } from "@blueprintjs/core";
 import { IconName } from "@blueprintjs/icons";
+import { Tooltip2 } from "@blueprintjs/popover2";
 import { Select2 } from "@blueprintjs/select";
 import React from "react";
 
@@ -31,6 +32,7 @@ interface PaneControlsInput {
   title?: string;
   iconLeft?: IconName;
   iconRight?: IconName;
+  tooltip?: string;
 }
 
 interface PaneControlsRow {
@@ -187,6 +189,18 @@ const PaneControls = ({ rows }: IProps) => {
                       break;
                   }
 
+                  if (input.tooltip) {
+                    element = (
+                      <Tooltip2
+                        content={input.tooltip}
+                        placement={"right"}
+                        key={`input-${inputIndex}`}
+                      >
+                        {element}
+                      </Tooltip2>
+                    );
+                  }
+
                   return element;
                 }
               )}

web/src/components/paneControls/style.scss

@@ -21,7 +21,6 @@
 
     & .bp4-button,
     & .custom-button {
-      background-color: $light-gray5;
       height: 30px;
     }
 

web/src/constants/index.tsx

@@ -84,7 +84,13 @@ export interface DatasetDescriptions {
   [protocol: string]: {
     description: string;
     maps: {
-      [condition: string]: string;
+      [condition: string]: {
+        contrast: boolean;
+        description?: string;
+        conditions?: {
+          [condition: string]: number;
+        };
+      };
     };
   };
 }

web/src/views/surface/index.tsx

@@ -126,14 +126,17 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
   const [meshTypeLabels, setMeshTypeLabels] = useState<string[]>([]);
   const [hemiLabels, setHemiLabels] = useState<string[]>([]);
   const [unit, setUnit] = useState<string | undefined>(undefined);
-  const [datasetDescriptions] = useState<any>({});
+  const [descriptions, setDescriptions] = useState<any>({});
 
   // Load state from url
   const [state, setState] = useSurfaceState();
 
   // Initialise all pane state variables
   useEffect(() => {
     const datasetInfo = server.get<DatasetInfo>(`/datasets/${datasetId}/info`);
+    const datasetDescriptions = server.get<DatasetInfo>(
+      `/datasets/${datasetId}/descriptions`
+    );
 
     datasetInfo.then((value) => {
       setSubjectLabels(value.data.subjects);
@@ -156,10 +159,14 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
       setUnit(value.data.unit);
     });
 
+    datasetDescriptions.then((value) => {
+      setDescriptions(value.data);
+    });
+
     if (state.panes === undefined) {
       setState({ panes: {} });
     }
-  }, [datasetId, setState]);
+  }, [datasetId, setState, state.panes]);
 
   const selectedVoxels = Object.keys(state.panes).map((paneId: any) => [
     paneId,
@@ -543,7 +550,7 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
                   meshTypeLabels={meshTypeLabels}
                   hemiLabels={hemiLabels}
                   unit={unit}
-                  datasetDescriptions={datasetDescriptions}
+                  datasetDescriptions={descriptions}
                   filterSurface={filterSurface}
                   thresholdLow={thresholdLow}
                   thresholdHigh={thresholdHigh}

web/src/views/surface/surfacePane/index.tsx

@@ -479,31 +479,28 @@ const SurfacePane = ({
       newDescriptions.push([task, datasetDescriptions[task]?.description]);
     }
 
-    // Add contrast / condition description
+    // Add contrast / conditions description
     const contrast = contrastLabels[state.contrast ?? 0]?.contrast;
-    if (contrast !== undefined) {
-      newDescriptions.push([
-        contrast,
-        datasetDescriptions[task]?.maps[contrast],
-      ]);
-    }
-
-    // If map is contrast, try to add the descriptions
-    // of all conditions it results from
-    if (
-      task !== undefined &&
-      contrast !== undefined &&
-      datasetDescriptions[task] !== undefined &&
-      contrast.indexOf("-") !== -1
-    ) {
-      const conditions = contrast.split("-");
-      for (const condition of conditions) {
-        if (condition in datasetDescriptions[task]?.maps) {
+    const entry = datasetDescriptions[task]?.maps[contrast];
+
+    if (entry !== undefined) {
+      if (entry.contrast) {
+        newDescriptions.push([
+          "This contrast map combines the following conditions:",
+        ]);
+        for (const condition in entry.conditions) {
           newDescriptions.push([
-            condition,
-            datasetDescriptions[task]?.maps[condition],
+            `(${entry.conditions[condition] >= 0 ? "+" : ""}${
+              entry.conditions[condition]
+            }) ${condition}`,
+            datasetDescriptions[task].maps[condition].description,
           ]);
         }
+      } else {
+        newDescriptions.push([
+          contrast,
+          datasetDescriptions[task]?.maps[contrast].description,
+        ]);
       }
     }
 
@@ -520,7 +517,13 @@ const SurfacePane = ({
               {descriptions.map((description: any) => {
                 return (
                   <p key={`description-${description[0]}`}>
-                    <strong>{description[0]}:</strong> {description[1]}
+                    {description.length > 1 ? (
+                      <>
+                        <strong>{description[0]}:</strong> {description[1]}
+                      </>
+                    ) : (
+                      description[0]
+                    )}
                   </p>
                 );
               })}
@@ -620,6 +623,7 @@ const SurfacePane = ({
                   iconLeft: "person",
                   iconRight: "people",
                   title: "Mean across subjects",
+                  tooltip: "Toggle subjects' mean",
                 },
               ],
             },
@@ -657,6 +661,7 @@ const SurfacePane = ({
                     }
                   },
                   iconActive: "manual",
+                  tooltip: "Toggle description",
                 },
               ],
             },