Feature/291-fix - Change the dot size of populations - NEW (after cha…

…nges) (#320) * #255 feat: Allow adding populations to existent experiment * #261 feat: Add instant feedback on population updates * #246 feat: WIP - Add residential populations * #246 fix: Fix residential populations race condition * #246 fix: Fix UI misalignments on resident populations * #246 fix: Fix color picker not opening * #246 fix: Fix residential populations race condition * #243 feat: WIP - Update heatmap to contour plot * #246 feat: Update sidebar design * #246 feat: Update sidebar width * #246 feat: Add complete data for residential populations; Update migration * #246 chore: Remove unnecessary print * #243 feat: WIP - Update contour creator * #242 feat: WIP - Add atlas upscale service * #243 feat: WIP - Update probability map calculations * #242 fix: Fix interpolate_atlas_section * #242 chore: Rename annotation to grey_and_white_matter * #242 fix: Fix canal image offset * #242 feat: Upscale grid dimensions * #242 fix: Fix gray and white matter image generation * #242 fix: Update hidden canvas dimensions * #242 fix: Update white and grey matter image generation * #242 fix: Fix centroids plot points position * #242 fix: Update centroids plot points size * #243 feat: Add contour plot image creator * #243 feat: Add overlay to contours * #243 feat: Rename probability map overlay to contour plot * #243 chore: Improve resources management for plotting * #243 chore: Rename density map type * #243 chore: Add management command to update static images of all populations * chore: Update geppetto-meta * chore: Update codefresh-dev * chore: Update codefresh-dev * chore: Add missing icon * chore: Update local setup script * #243 feat: Make contour plot creator generate 2 images * #243 feat: Add grid to contour plot UI control * #242 feat: Update 3D meshes * #243 fix: Update contour plot creator * #243 feat: Update residential populations * #243 fix: Fix typo in neuronal location switch * #243 feat: Update contour levels * #243 feat: Consider intensity on drawColoredImage * #242 chore: Add 3D meshes * #chore: Remove deprecated annotation changes * #274 fix: Update download populations to work with residential populations * #243 feat: Update static images creators * #243 chore: Update residential populations data * #243 fix: Update drawColoredImageCallback to allow for skipping intensity changes * #243 chore: Update residential populations * #243 fix: Fix background image generation * #284 changes made * #257 feat: Update cordmap * #284 population entry ui changed * #284 code cleaning * #284 small changes * #284 changes made * #284 Integrating the populations with hierarchy accordion * fix: Fix indentation typo * #285 chore: Fix itk * #284 cleanup and split function into two * #284 disable subpopulation color change * #285 fix: Fix indentation typo * feat: Add residential populations back * #243 chore: WIP - Merge with develop * #284 feat: Connect show all * #284 feat: Connect parent switch * #284 feat: Connect color picker * #284 feat: Connect download populations * #284 fix: Fix population grouping * #284 chore: Fix linting * #243-b ui changes made * #291 dot size modal * 290 Add z-axis position in the 2D viewer (#311) * #develop changed some styling * Revert "#develop changed some styling" This reverts commit a85b1f8. * #290 added indicator cord image and label --------- Co-authored-by: afonso pinto <[email protected]> * #291 feat: dot size adjustment for each population and all at once. * #291 feat: improving UI * #291 threeDViewer without active refresh * #291 correct import from PIL instead of tkinter * #291-fix: UI fixed * #291-fix: Adding fixes and threeDViewer data flow * #291 active refresh to threeDViewer active-refresh - on change of the value in the dotsize dialog, it instantly reflects in the threeDViewer * #291-fix cleanup * #291 remove cached changes from 243 git rm --cached -r --ignore-unmatch applications/portal/frontend/src/assets/atlas/ * #291-fix type change cleanup --------- Co-authored-by: afonso <[email protected]> Co-authored-by: Aiga115 <[email protected]> Co-authored-by: Aigul Zhyldyzbekova <[email protected]>
MetaCell · Nov 6, 2023 · f595f1b · f595f1b
1 parent 42fee24
commit f595f1b
Show file tree

Hide file tree

Showing 15 changed files with 693 additions and 132 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,5 +11,7 @@ skaffold.yaml
 applications/workspaces/backend/static
 .overrides
 **/*.sqlite3
+
 applications/portal/frontend/src/assets/atlas/salk_cord_10um/*
-applications/portal/backend/persistent/*
+applications/portal/backend/persistent/*
+applications/portal/backend/data/*
diff --git a/applications/portal/.gitignore b/applications/portal/.gitignore
@@ -3,3 +3,4 @@ dist
 node_modules
 .vscode
 backend/static/*
+frontend/src/assets/atlas/*
diff --git a/applications/portal/backend/api/helpers/density_map/common_plot_helpers.py b/applications/portal/backend/api/helpers/density_map/common_plot_helpers.py
@@ -1,4 +1,4 @@
-from tkinter import Image
+from PIL.Image import Image
 from typing import Tuple, Any
 
 import numpy as np

diff --git a/applications/portal/frontend/src/components/common/ExperimentDialogs/NeuronDotSize.jsx b/applications/portal/frontend/src/components/common/ExperimentDialogs/NeuronDotSize.jsx
@@ -0,0 +1,259 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Typography, Slider, Divider, IconButton, Dialog, DialogTitle, DialogContent, Button } from '@material-ui/core';
+import { getRGBAString, getRGBAColor, areAllPopulationsWithChildrenSelected } from "../../../utilities/functions";
+import { headerBorderColor } from "../../../theme";
+import CLOSE from "../../../assets/images/icons/close.svg";
+import { EXPERIMENTAL_POPULATION_NAME, RESIDENTIAL_POPULATION_NAME } from "../../../utilities/constants";
+
+
+const useStyles = makeStyles((theme) => ({
+  dialogContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(2),
+
+    '& .title': {
+      fontWeight: 500,
+      fontSize: '0.75rem',
+    },
+    '& .MuiDivider-root': {
+      margin: '1.5rem 0',
+      borderColor: headerBorderColor
+    },
+    '& .MuiTypography-body1': {
+      fontWeight: 400,
+      fontSize: '0.75rem',
+    },
+
+    '& .population-color': {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: '0.938rem',
+      fontWeight: 400,
+      fontSize: '0.75rem',
+    },
+    '& .square': {
+      width: '0.75rem',
+      height: '0.75rem',
+      borderRadius: '0.1rem',
+      marginRight: theme.spacing(1),
+    },
+    '& .row-container': {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: theme.spacing(1),
+    },
+    '& .row-slider': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing(2),
+    },
+    '& .disable-text': {
+      fontWeight: 400,
+      fontSize: '0.75rem',
+      color: '#999999',
+    },
+
+  },
+  slider: {
+    width: '80%',
+  },
+  closeButton: {
+    marginTop: theme.spacing(2),
+  },
+  popupContainer: {
+    position: 'absolute',
+    width: '100%',
+    maxWidth: '25rem',
+    margin: '0rem',
+    '& .MuiDialogContent-root': {
+      padding: '0rem',
+    },
+    '& .MuiButton-label': {
+      padding: 0,
+    },
+    '& .MuiButton-root': {
+      padding: '0.4rem',
+      minWidth: '40px',
+    },
+    '& .MuiDialogTitle-root': {
+      padding: '0.125rem 0.25rem 0.125rem 0.8rem',
+    },
+
+  },
+  dialogContainer: {
+    '& .MuiDialog-container': {
+      display: 'block',
+    },
+  },
+}));
+
+const NeuronDotSize = ({
+  open, onClose, populations, anchorElement,
+  activePopulations, handleSubPopulationDotSizeChange,
+  dialogPopulationsSelected, populationDotSizes,
+}) => {
+  const classes = useStyles();
+  const [globalDotSize, setGlobalDotSize] = React.useState({
+    [RESIDENTIAL_POPULATION_NAME]: 1,
+    [EXPERIMENTAL_POPULATION_NAME]: 1,
+  });
+
+  const marks = [
+    {
+      value: 0,
+    },
+    {
+      value: 25,
+    },
+    {
+      value: 50,
+    },
+    {
+      value: 75,
+    },
+    {
+      value: 100,
+    },
+  ];
+  const getPositionStyles = () => {
+    if (!anchorElement) {
+      return {};
+    }
+    return {
+      marginLeft: anchorElement?.left + anchorElement?.width + 60,
+      marginTop: anchorElement?.top,
+    };
+  };
+
+
+
+  const populationSelected = dialogPopulationsSelected?.populations;
+  const populationType = dialogPopulationsSelected?.type;
+
+  const changeAllDotSize = useCallback((newValue) => {
+    let allSubPopulations = []
+    Object.keys(populationSelected).map((populationName) => {
+      allSubPopulations = [...allSubPopulations, ...populationSelected[populationName].children]
+    })
+    handlePopulationDotSizeChange(allSubPopulations, newValue / 100)
+
+    setGlobalDotSize({
+      ...globalDotSize,
+      [populationType]: newValue / 100,
+    });
+  }, [populations, handlePopulationDotSizeChange, activePopulations]);
+
+
+  const getPopulationSize = (subPopulationList) => {
+    // Detail: All subpopulations have the same size - get the size of the first one
+    return populationDotSizes[subPopulationList[0]] * 100;
+  }
+
+  const handlePopulationDotSizeChange = useCallback((subPopulationList, newValue) => {
+    const newPopulationDotSizes = { ...populationDotSizes };
+    subPopulationList ? subPopulationList.forEach((pId) => {
+      newPopulationDotSizes[pId] = newValue;
+    }) : null;
+    handleSubPopulationDotSizeChange(newPopulationDotSizes);
+  }, [handleSubPopulationDotSizeChange]);
+
+  return (
+    <Dialog open={open} onClose={onClose}
+      classes={{
+        paper: classes.popupContainer,
+      }}
+      className={classes.dialogContainer}
+      fullWidth={true}
+      style={{ ...getPositionStyles() }}
+    >
+      <DialogTitle>
+        Neuron Size
+        <IconButton onClick={onClose}>
+          <img src={CLOSE} alt="close" />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+
+        <Box className={classes.dialogContent}>
+          <Box >
+            {
+              dialogPopulationsSelected?.showAll && (
+                <Box>
+                  <Typography variant="body1" gutterBottom>
+                    Global
+                  </Typography>
+                  <Typography variant="body1" className='disable-text' gutterBottom>
+                    This will affect all the populations in this data library
+                  </Typography>
+                  <Box className='row-slider'>
+
+                    <Slider
+                      className={classes.slider}
+                      value={globalDotSize[populationType] * 100}
+                      onChange={(event, newValue) => changeAllDotSize(newValue)}
+                      marks={marks}
+                      min={0}
+                      max={100}
+                    />
+                    <Button className='disable-text' onClick={() => changeAllDotSize(100)}>
+                      <Typography className="disable-text">
+                        Reset
+                      </Typography>
+                    </Button>
+                  </Box>
+
+                  <Divider />
+                </Box>
+              )
+            }
+            {
+              populationSelected && Object.keys(populationSelected).map((populationName) => (
+                <Box key={populationName}>
+                  <Box className='row-container'>
+                    <span className='population-color'>
+                      <Box style={{ backgroundColor: populationSelected[populationName].color }}
+                        component="span"
+                        className='square' />
+                    </span>
+                    <Typography variant="body1">
+                      {populationName}
+                    </Typography>
+                  </Box>
+                  <Box className='row-slider'>
+                    <Slider
+                      className={classes.slider}
+                      value={getPopulationSize(populationSelected[populationName].children)}
+                      onChange={(event, newValue) => handlePopulationDotSizeChange(populationSelected[populationName].children, newValue / 100)}
+                      marks={marks}
+                      min={0}
+                      max={100}
+                    />
+                    <Button onClick={() => handlePopulationDotSizeChange(populationSelected[populationName].children, 1)}>
+                      <Typography className="disable-text">
+                        Reset
+                      </Typography>
+                    </Button>
+                  </Box>
+                </Box>
+              ))
+            }
+          </Box>
+        </Box>
+      </DialogContent>
+
+    </Dialog>
+  );
+};
+
+NeuronDotSize.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  value: PropTypes.number.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
+
+export default NeuronDotSize;
diff --git a/applications/portal/frontend/src/components/common/SwitchLabel.jsx b/applications/portal/frontend/src/components/common/SwitchLabel.jsx
@@ -2,7 +2,6 @@ import { MAX_STR_LENGTH_SIDEBAR, POPULATION_FINISHED_STATE } from "../../utiliti
 import { Tooltip, Typography, Box } from "@material-ui/core";
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import NavigationControlIcon from "../../assets/images/icons/navigation_control_icon.svg"
 
 
 const useStyles = makeStyles({
@@ -25,10 +24,9 @@ const SwitchLabel = ({ label, isParentLabel }) => {
                         {label.substr(0, MAX_STR_LENGTH_SIDEBAR)}
                     </Typography>
                     {
-                        isParentLabel && <span style={{ color: 'rgba(255, 255, 255, 0.40)', fontWeight: 400, marginRight: '0.5rem' }}> - parent</span>
+                        isParentLabel && <span style={{ color: 'rgba(255, 255, 255, 0.40)', fontWeight: 400, fontSize: '0.65rem' }}> -parent</span>
                     }
                 </div>
-                <img src={NavigationControlIcon} className="nav_control" alt='' style={{ marginRight: '0.5rem' }} />
             </Box>
         </Tooltip>
     )

diff --git a/applications/portal/frontend/src/components/icons.tsx b/applications/portal/frontend/src/components/icons.tsx
@@ -76,4 +76,10 @@ export const TrailEndIcon = (props: SvgIconProps) => (
     <SvgIcon width="9" height="28" viewBox="0 0 9 28" fill="none" {...props}>
         <path d="M1 0L1 7.99988C1 12.4182 4.58172 15.9999 9 15.9999V15.9999" fill="none" stroke="#505050" />
     </SvgIcon>
-);
+);
+
+export const SliderIcon = (props: SvgIconProps) => (
+    <SvgIcon viewBox={"0 0 12 12"} {...props}>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 2.62493H9.3375C9.16005 1.75106 8.39171 1.12305 7.5 1.12305C6.60829 1.12305 5.83995 1.75106 5.6625 2.62493H0.75V3.37493H5.6625C5.83995 4.2488 6.60829 4.87681 7.5 4.87681C8.39171 4.87681 9.16005 4.2488 9.3375 3.37493H11.25V2.62493ZM7.5 4.12493C6.87868 4.12493 6.375 3.62125 6.375 2.99993C6.375 2.37861 6.87868 1.87493 7.5 1.87493C8.12132 1.87493 8.625 2.37861 8.625 2.99993C8.625 3.62125 8.12132 4.12493 7.5 4.12493ZM0.75 9.37493H2.6625C2.83995 10.2488 3.60829 10.8768 4.5 10.8768C5.39171 10.8768 6.16005 10.2488 6.3375 9.37493H11.25V8.62493H6.3375C6.16005 7.75106 5.39171 7.12305 4.5 7.12305C3.60829 7.12305 2.83995 7.75106 2.6625 8.62493H0.75V9.37493ZM3.375 8.99993C3.375 8.37861 3.87868 7.87493 4.5 7.87493C5.12132 7.87493 5.625 8.37861 5.625 8.99993C5.625 9.62125 5.12132 10.1249 4.5 10.1249C3.87868 10.1249 3.375 9.62125 3.375 8.99993Z" fill="white" fill-opacity="0.8" />
+    </SvgIcon>
+)