add missing viewer icons + add tooltips + 3D viewer settings popover

MetaCell · Jul 8, 2024 · caf0e2f · caf0e2f
1 parent 61f3e89
commit caf0e2f
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 30 deletions.
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/CustomFormControlLabel.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/CustomFormControlLabel.tsx
@@ -0,0 +1,57 @@
+import { FormControlLabel, Tooltip, Box, Stack, Typography } from '@mui/material';
+import CustomSwitch from "../../ViewerContainer/CustomSwitch.tsx";
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import {vars} from "../../../theme/variables.ts"; // Adjust the import path as needed
+
+const {gray50, gray600, gray400B} = vars
+const CustomFormControlLabel = ({ label, tooltipTitle, helpText }) => {
+  return (
+    <FormControlLabel
+      control={<Tooltip title={helpText}><CustomSwitch /></Tooltip>}
+      sx={{
+        width: '100%',
+        p: '.5rem .5rem .5rem .5rem',
+        margin: 0,
+        alignItems: "baseline",
+        '&:hover': {
+          background: gray50,
+          borderRadius: '.5rem',
+        },
+        "& .MuiFormControlLabel-label": {
+          width: "100%",
+        },
+        "& .MuiIconButton-root": {
+          borderRadius: '.25rem',
+        }
+      }}
+      label={
+        <Box>
+          <Stack
+            direction="row"
+            alignItems="center"
+            width={1}
+            spacing=".5rem"
+            justifyContent='space-between'
+          >
+            <Typography color={gray600} variant="subtitle1">
+              {label}
+            </Typography>
+            <Tooltip title={tooltipTitle}>
+              <HelpOutlineIcon
+                sx={{
+                  color: gray400B,
+                  fontSize: "1rem",
+                  width: "1rem",
+                  height: "1rem",
+                }}
+              />
+            </Tooltip>
+          </Stack>
+        </Box>
+      }
+      value={undefined}
+    />
+  );
+};
+
+export default CustomFormControlLabel;
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx
@@ -1,10 +1,39 @@
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import {Box, Divider, IconButton} from "@mui/material";
-import {GridOffOutlined, GridOnOutlined, HomeOutlined} from "@mui/icons-material";
+import {
+  Box,
+  Divider,
+  IconButton, Popover, Typography,
+} from "@mui/material";
+import {
+  GetAppOutlined,
+  HomeOutlined,
+  PlayArrowOutlined,
+  RadioButtonCheckedOutlined,
+  SettingsOutlined,
+  TonalityOutlined
+} from "@mui/icons-material";
+import Tooltip from "@mui/material/Tooltip";
+import {useState} from "react";
+import {vars} from "../../../theme/variables.ts";
+import CustomFormControlLabel from "./CustomFormControlLabel.tsx";
+
+const {gray500} = vars
 
 function SceneControls({cameraControlRef, isWireframe, setIsWireframe}) {
-    return (
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'settings-popover' : undefined;
+  const handleOpenSettings = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseSettings = () => {
+    setAnchorEl(null);
+  };
+
+  return (
         <Box
           sx={{
             display: 'flex',
@@ -20,29 +49,99 @@ function SceneControls({cameraControlRef, isWireframe, setIsWireframe}) {
             padding: '0.25rem'
           }}
         >
+          <Tooltip title='Change settings' placement="right-start">
+            <IconButton onClick={handleOpenSettings}>
+              <SettingsOutlined />
+            </IconButton>
+          </Tooltip>
+          <Popover
+            id={id}
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleCloseSettings}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left',
+            }}
+            slotProps={{
+              paper: {
+                sx: {
+                  width: '13.75rem',
+                  padding: '0.25rem 0rem',
+                  borderRadius: '0.5rem',
+
+                  '& .MuiDivider-root': {
+                    margin: '.25rem 0'
+                  }
+                }
+              }
+            }}
+          >
+            <Box sx={{
+              padding: '0.5rem 0.25rem 0.5rem 0'
+            }}>
+              <Typography color={gray500} variant='subtitle1' mb='.5rem' ml='.5rem'>3D viewer settings</Typography>
+              <CustomFormControlLabel
+                label="Neurons"
+                tooltipTitle="tooltip"
+                helpText="data.helpText"
+              />
+
+              <CustomFormControlLabel
+                label="Synapses"
+                tooltipTitle="tooltip"
+                helpText="data.helpText"
+              />
+            </Box>
+          </Popover>
+          <Divider />
+          <Tooltip title='Switch theme' placement="right-start">
+            <IconButton onClick={() => setIsWireframe(!isWireframe)}>
+              <TonalityOutlined />
+            </IconButton>
+          </Tooltip>
+          <Divider />
+          <Tooltip title='Zoom in' placement="right-start">
             <IconButton onClick={() => {
                 cameraControlRef.current?.zoom(cameraControlRef.current?._camera.zoom / 2, true);
             }} title="Zoom In">
                 <ZoomInIcon/>
             </IconButton>
+          </Tooltip>
+          <Tooltip title='Return to original size' placement="right-start">
             <IconButton onClick={() => {
               cameraControlRef.current?.reset(true);
             }} title="Reset">
               <HomeOutlined />
             </IconButton>
+          </Tooltip>
+          <Tooltip title='Zoom out' placement="right-start">
             <IconButton onClick={() => {
                 cameraControlRef.current?.zoom(-cameraControlRef.current?._camera.zoom / 2, true);
             }} title="Zoom Out">
                 <ZoomOutIcon/>
             </IconButton>
+          </Tooltip>
             <Divider />
-            <IconButton
-                color="default"
-                onClick={() => setIsWireframe(!isWireframe)}
-                title="Toggle Wireframe"
-            >
-                {isWireframe ? <GridOnOutlined /> : <GridOffOutlined />}
+          <Tooltip title='Play 3D viewer' placement="right-start">
+            <IconButton>
+                <PlayArrowOutlined />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Record viewer' placement="right-start">
+          <IconButton>
+                <RadioButtonCheckedOutlined />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Download graph' placement="right-start">
+            <IconButton>
+              <GetAppOutlined />
             </IconButton>
+          </Tooltip>
         </Box>
     );
 }

diff --git a/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDMenu.tsx b/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDMenu.tsx
@@ -17,10 +17,15 @@ import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import { GRAPH_LAYOUTS, ZOOM_DELTA } from "../../../settings/twoDSettings.tsx";
 import { applyLayout } from "../../../helpers/twoD/twoDHelpers.ts";
 import { ColoringOptions } from "../../../helpers/twoD/coloringStrategy/ColoringStrategy.ts";
-import {FileDownloadOutlined, HomeOutlined, TuneOutlined, VisibilityOutlined} from "@mui/icons-material";
+import {
+  GetAppOutlined,
+  HomeOutlined,
+  TuneOutlined,
+  VisibilityOutlined
+} from "@mui/icons-material";
 import { vars } from "../../../theme/variables.ts";
 import QuantityInput from "./NumberInput.tsx";
-import CustomSwitch from "../../ViewerContainer/CustomSwitch.tsx"; // Import NumberInput component
+import CustomSwitch from "../../ViewerContainer/CustomSwitch.tsx";
 
 const { gray500 } = vars;
 
@@ -102,20 +107,27 @@ const TwoDMenu = ({
       padding: '0.25rem',
       zIndex: 1,
     }}>
-      <IconButton onClick={onZoomIn}>
-        <ZoomInIcon />
-      </IconButton>
-      <IconButton onClick={onResetView}>
-        <HomeOutlined />
-      </IconButton>
-      <IconButton onClick={onZoomOut}>
-        <ZoomOutIcon />
-      </IconButton>
+      <Tooltip title='Zoom in' placement="right-start">
+        <IconButton onClick={onZoomIn}>
+          <ZoomInIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title='Return to original size' placement="right-start">
+        <IconButton onClick={onResetView}>
+          <HomeOutlined />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title='Zoom out' placement="right-start">
+        <IconButton onClick={onZoomOut}>
+          <ZoomOutIcon />
+        </IconButton>
+      </Tooltip>
       <Divider />
-      <IconButton onClick={handleOpenSettings}>
-        <TuneOutlined />
-      </IconButton>
-
+      <Tooltip title='Set parameters' placement="right-start">
+        <IconButton onClick={handleOpenSettings}>
+          <TuneOutlined />
+        </IconButton>
+      </Tooltip>
       <Popover
         id={id}
         open={open}
@@ -255,13 +267,17 @@ const TwoDMenu = ({
           </FormGroup>
         </Box>
       </Popover>
-      <IconButton>
-        <VisibilityOutlined />
-      </IconButton>
+      <Tooltip title='Show/Hide neurons' placement="right-start">
+        <IconButton>
+          <VisibilityOutlined />
+        </IconButton>
+      </Tooltip>
       <Divider />
-      <IconButton>
-        <FileDownloadOutlined />
-      </IconButton>
+      <Tooltip title='Download graph' placement="right-start">
+        <IconButton>
+          <GetAppOutlined />
+        </IconButton>
+      </Tooltip>
     </Box>
   );
 };