Improve the visualization of injection and recording #189 (#1021)

* First painter

* wip

* Tooltip when hovering a segment

* Display stimuli in the interactive view

* Start to work on the zoom slider

* Compoute offset for the whole section, not just the segment

* Labels for the recordings

* Fixed color of tip

* Fixed camera issues

* Enhance neurites highlight

* Upgrade WebGL lib"

Author: tolokoban

package.json

@@ -70,7 +70,7 @@
     "@tanstack/react-query-devtools": "^5.84.1",
     "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/user-event": "^14.5.1",
-    "@tolokoban/tgd": "^2.0.49",
+    "@tolokoban/tgd": "^2.0.55",
     "@types/d3": "^7.4.0",
     "ajv": "^8.17.1",
     "antd": "^5.13.3",

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+
+type Props = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function IconCenter({ className, style }: Props) {
+  return (
+    <svg
+      className={className}
+      style={{
+        width: '1.5em',
+        height: '1.5em',
+        ...style,
+      }}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>image-filter-center-focus</title>
+      <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M19,19H15V21H19A2,2 0 0,0 21,19V15H19M19,3H15V5H19V9H21V5A2,2 0 0,0 19,3M5,5H9V3H5A2,2 0 0,0 3,5V9H5M5,15H3V19A2,2 0 0,0 5,21H9V19H5V15Z" />{' '}
+    </svg>
+  );
+}

src/components/icons/Center.tsx

@@ -14,7 +14,6 @@ import type {
   TNeuronViewerHoverData,
 } from '@/services/bluenaas-single-cell/renderer';
 import { WebglNeuronSelector } from '@/ui/segments/workflows/simulate/single-neuron/shared/steps/webgl-neuron-selector';
-// import { WebglNeuronSelector } from '@/ui/segments/workflows/simulate/single-neuron/shared/steps/webgl-neuron-selector/webgl-neuron-selector';
 
 type Props = {
   meModelId: string;
@@ -45,7 +44,7 @@ export function NeuronViewerContainer({
     useState<TNeuronViewerClickData | null>(null);
   const [neuronViewerHoverData, setNeuronViewerOnHoverData] =
     useState<TNeuronViewerHoverData | null>(null);
-  const newViewer = false;
+  const newViewer = true;
 
   return (
     <ErrorBoundary
@@ -123,6 +122,7 @@ export function NeuronViewerContainer({
             projectId={projectId}
             virtualLabId={virtualLabId}
             meModelId={meModelId}
+            sessionId={sessionId}
           />
         )}
       </DefaultLoadingSuspense>

src/components/neuron-viewer/neuron-viewer-with-actions.tsx

@@ -1,18 +1,18 @@
 .container {
   position: relative;
-  --backColor: #fff;
-  --foreColor: #000;
+  --custom-backColor: #fff;
+  --custom-foreColor: #000;
   --arrowWidth: 16px;
   --arrowHeight: 16px;
-  --borderColor: var(--foreColor);
-  --borderColor: color-mix(in srgb, var(--foreColor) 50%, transparent 50%);
+  --borderColor: var(--custom-foreColor);
+  --borderColor: color-mix(in srgb, var(--custom-foreColor) 50%, transparent 50%);
 }
 
 .tooltip {
   border-radius: 0.25em;
   padding: 0.5em 1em;
-  color: var(--foreColor, #000);
-  background-color: var(--backColor, #fff);
+  color: var(--custom-foreColor, #000);
+  background-color: var(--custom-backColor, #fff);
   position: absolute;
   /* width: fit-content; */
   z-index: 999999;
@@ -45,7 +45,7 @@
   .arrow {
     width: var(--arrowWidth);
     height: var(--arrowHeight);
-    fill: var(--backColor);
+    fill: var(--custom-backColor);
     stroke: var(--borderColor);
     position: absolute;
 

src/components/tooltip/tooltip.module.css

@@ -7,6 +7,8 @@ import styles from './tooltip.module.css';
 export interface TooltipProps {
   className?: string;
   classNameTooltip?: string;
+  backColor?: string;
+  foreColor?: string;
   arrow?: 'top' | 'topLeft' | 'topRight';
   arrowWidth?: number;
   arrowHeight?: number;
@@ -21,10 +23,18 @@ export default function Tooltip({
   arrow = 'top',
   arrowWidth = 16,
   arrowHeight = 16,
+  backColor = '#fff',
+  foreColor = '#000',
   children,
 }: TooltipProps) {
   return (
-    <div className={classNames(className, styles.container)}>
+    <div
+      className={classNames(className, styles.container)}
+      style={{
+        '--custom-backColor': backColor,
+        '--custom-foreColor': foreColor,
+      }}
+    >
       {children}
       <div className={classNames(styles.tooltip, styles[arrow], classNameTooltip)}>
         {tooltip}

src/components/tooltip/tooltip.tsx

@@ -20,21 +20,24 @@ export function setCamera(context: TgdContext, eventChange: GenericEvent<TgdCame
   };
   context.camera = new TgdCameraPerspective({
     near: 1,
-    far: 40000,
+    far: 80000,
     fovy: tgdCalcDegToRad(55),
     transfo: { ...restTransfo },
   });
   const controller = new TgdControllerCameraOrbit(context, {
     inertiaOrbit: 1000,
-    speedZoom: 1000,
-    minDistance: 5000,
-    maxDistance: 30000,
+    speedZoom: 1,
+    minZoom: 0.5,
+    maxZoom: 20,
   });
   controller.eventChange.addListener((camera) => eventChange.dispatch(camera));
   return () => {
     context.animSchedule({
       action: tgdActionCreateCameraInterpolation(context.camera, { ...restTransfo }),
       duration: 0.5,
+      onEnd: () => {
+        controller.resetZoom();
+      },
     });
   };
 }

src/features/brain-atlas-viewer/brain-atlas-viewer-gltf/camera.ts

@@ -38,7 +38,7 @@ interface LabelsOptions {
  *
  * For better clarity and to avoid labels overlapping, we divide the screen
  * in four parts: topLeft, topRight, bottomLeft and bottomRight.
- * Then we distribute the lables in these regions evenly.
+ * Then we distribute the labels in these regions evenly.
  */
 export class Labels {
   private _canvas: HTMLCanvasElement | null = null;

src/services/bluenaas-single-cell/labels.ts

@@ -100,8 +100,7 @@ export function NeuronVisualizer({ sessionId, memodelId }: Props) {
           </button>
         ) : (
           <div className="relative flex h-full w-full flex-col rounded-lg">
-            <div className="absolute top-4 right-4 left-4 z-10 flex items-center justify-between gap-2">
-              <div>Zoom controller</div>
+            <div className="absolute top-4 right-4 z-10 flex items-center justify-between gap-2">
               <div className="flex items-center gap-2">
                 <button
                   type="button"

src/ui/segments/workflows/simulate/single-neuron/shared/steps/neuron-visualizer.tsx

@@ -0,0 +1,92 @@
+.addRecordingDialog {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background-color: #000a;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+
+  &.open {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  > div {
+    background-color: #3333;
+    backdrop-filter: blur(6px);
+    color: #fff;
+    padding: 1em;
+    border-radius: 0.5em;
+    border: 2px solid #fff4;
+
+    > h2 {
+      font-size: 200%;
+      margin-bottom: 1em;
+    }
+
+    hr {
+      margin: 2em 0;
+      width: 100%;
+      height: 1px;
+      border: none;
+      background: linear-gradient(to right, transparent, currentColor, transparent);
+    }
+
+    .buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1em;
+
+      > button {
+        font: inherit;
+        border: none;
+        font-weight: bolder;
+        text-align: center;
+        display: grid;
+        place-items: center;
+        height: 3em;
+        border-radius: 99vmax;
+        background-color: #05a;
+        border: 1px solid #fff7;
+        color: #fffe;
+        padding: 0 1em;
+        box-shadow: 0 0.125em 0.25em #000;
+        transition: all 0.3s;
+
+        &:hover,
+        &:active {
+          filter: brightness(120%);
+        }
+      }
+    }
+
+    > footer {
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: flex-end;
+
+      > button {
+        font: inherit;
+        font-weight: bold;
+        color: #7bf;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0.5em;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}