Improve the visualization of injection and recording #189

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",

src/components/icons/Center.tsx

@@ -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/neuron-viewer/neuron-viewer-with-actions.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/tooltip/tooltip.module.css

@@ -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.tsx

@@ -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/features/brain-atlas-viewer/brain-atlas-viewer-gltf/camera.ts

@@ -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/services/bluenaas-single-cell/labels.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/ui/segments/workflows/simulate/single-neuron/shared/steps/neuron-visualizer.tsx

@@ -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/webgl-neuron-selector/add-recording-dialog/add-recording-dialog.module.css

@@ -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;
+        }
+      }
+    }
+  }
+}

src/ui/segments/workflows/simulate/single-neuron/shared/steps/webgl-neuron-selector/add-recording-dialog/add-recording-dialog.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useAtom } from 'jotai';
+
+import { PainterManager } from '../painter';
+import { RecordLocationConfigurationAtomFamily } from '../../../context';
+import { RECORDING_LOCATION_CONFIGURATION_SESSION_KEY } from '../../../constant';
+import { getSessionKey } from '../../../helpers';
+import { getColor } from '../colors';
+
+import { classNames } from '@/util/utils';
+import { IconClose } from '@/components/LandingPage/icons/IconClose';
+
+import styles from './add-recording-dialog.module.css';
+
+export interface AddRecordingDialogProps {
+  className?: string;
+  sessionId: string;
+  painterManager: PainterManager;
+}
+
+export default function AddRecordingDialog({
+  className,
+  sessionId,
+  painterManager,
+}: AddRecordingDialogProps) {
+  const key = getSessionKey(RECORDING_LOCATION_CONFIGURATION_SESSION_KEY, sessionId);
+  const [state, update] = useAtom(RecordLocationConfigurationAtomFamily(key));
+  const [open, setOpen] = React.useState(false);
+  const { offset, item } = painterManager.eventTap.useValue({
+    offset: 0,
+    item: null,
+  });
+  React.useEffect(() => {
+    if (item) setOpen(true);
+  }, [item, offset]);
+  const handleMoveInjection = () => {
+    setOpen(false);
+    if (!item) return;
+
+    const injection = state.find(({ origin }) => origin === 'injection');
+    if (injection) {
+      injection.offset = offset;
+      injection.section = item.sectionName;
+      update([...state]);
+    } else {
+      update([
+        ...state,
+        {
+          offset,
+          origin: 'injection',
+          color: getColor(state.length),
+          record_currents: false,
+          section: item.sectionName,
+        },
+      ]);
+    }
+  };
+  const handleAddRecording = () => {
+    setOpen(false);
+    if (!item) return;
+
+    update([
+      ...state,
+      {
+        offset,
+        origin: 'recording',
+        color: getColor(state.length),
+        record_currents: false,
+        section: item.sectionName,
+      },
+    ]);
+  };
+
+  return (
+    <div className={classNames(className, styles.addRecordingDialog, open && styles.open)}>
+      <div>
+        <h2>{item?.name}</h2>
+        <div className={styles.buttons}>
+          <button type="button" onClick={handleMoveInjection}>
+            Move injection here
+          </button>
+          <button type="button" onClick={handleAddRecording}>
+            Add recording
+          </button>
+        </div>
+        <hr />
+        <footer>
+          <button type="button" onClick={() => setOpen(false)}>
+            <IconClose />
+            <div>Cancel</div>
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/ui/segments/workflows/simulate/single-neuron/shared/steps/webgl-neuron-selector/add-recording-dialog/index.ts

@@ -0,0 +1 @@
+export { default } from './add-recording-dialog';