fix: Changed mask modal to be a toggle, increased max masking % to 20…

…0% (#109) * fix: Changed mask modal to be a toggle, increased max masking % to 200% * Updated legend to not show masking % when masking is disabled
BioAnalyticResource · Mar 29, 2024 · e25cac4 · e25cac4
1 parent 58dc17b
commit e25cac4
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 69 deletions.
diff --git a/Eplant/views/eFP/EFPPreview.tsx b/Eplant/views/eFP/EFPPreview.tsx
@@ -36,6 +36,7 @@ export type EFPPreviewProps = {
   colorMode: 'absolute' | 'relative'
   data: EFPData
   maskThreshold: number
+  maskingEnabled: boolean
 } & BoxProps
 
 export default function EFPPreview({
@@ -45,6 +46,7 @@ export default function EFPPreview({
   colorMode,
   data,
   maskThreshold,
+  maskingEnabled,
   ...boxProps
 }: EFPPreviewProps) {
   const colorModeDeferred = useDeferredValue(colorMode)
@@ -67,6 +69,7 @@ export default function EFPPreview({
             renderAsThumbnail: true,
             colorMode: colorModeDeferred,
             maskThreshold: maskThreshold,
+            maskingEnabled: maskingEnabled,
           }}
           geneticElement={gene}
           dispatch={() => {}}
@@ -88,7 +91,15 @@ export default function EFPPreview({
         </div>
       </EFPPreviewContainer>
     )
-  }, [gene, view.id, colorModeDeferred, dataDeferred, selected])
+  }, [
+    gene,
+    view.id,
+    colorModeDeferred,
+    dataDeferred,
+    selected,
+    maskThreshold,
+    maskingEnabled,
+  ])
   return draw ? (
     component
   ) : (

diff --git a/Eplant/views/eFP/Viewer/MaskModal.tsx b/Eplant/views/eFP/Viewer/MaskModal.tsx
@@ -33,7 +33,6 @@ const MaskModal = ({ state, onClose, onSubmit }: MaskModalProps) => {
 
   const handleSubmit = () => {
     onSubmit(sliderValue)
-    onClose()
   }
   return (
     <Modal open={state.maskModalVisible} onClose={handleClose}>
@@ -64,7 +63,7 @@ const MaskModal = ({ state, onClose, onSubmit }: MaskModalProps) => {
           valueLabelDisplay='on'
           valueLabelFormat={(value) => `${value}%`}
           min={0}
-          max={100}
+          max={200}
           sx={{ width: 400 }}
         />
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>

diff --git a/Eplant/views/eFP/Viewer/index.tsx b/Eplant/views/eFP/Viewer/index.tsx
@@ -45,6 +45,7 @@ type EFPListProps = {
   height: number
   colorMode: 'absolute' | 'relative'
   maskThreshold: number
+  maskingEnabled: boolean
 }
 
 interface ICitationProps {
@@ -77,6 +78,7 @@ const EFPListItem = memo(
               })
             }}
             colorMode={data.colorMode}
+            maskingEnabled={data.maskingEnabled}
           />
         </div>
       </Tooltip>
@@ -88,7 +90,9 @@ const EFPListItem = memo(
       prev.data.colorMode === next.data.colorMode &&
       prev.data.geneticElement.id === next.data.geneticElement.id &&
       prev.data.activeView === next.data.activeView &&
-      prev.index == next.index
+      prev.index == next.index &&
+      prev.data.maskingEnabled == next.data.maskingEnabled &&
+      prev.data.maskThreshold == next.data.maskThreshold
     )
   }
 )
@@ -138,6 +142,7 @@ export default class EFPViewer
         zoom: 1,
       },
       sortBy: 'name',
+      maskingEnabled: false,
       maskThreshold: 100,
       maskModalVisible: false,
     }
@@ -216,6 +221,25 @@ export default class EFPViewer
               ? ('relative' as const)
               : ('absolute' as const),
         }
+      case 'toggle-mask-modal':
+        if (state.maskingEnabled) {
+          return {
+            ...state,
+            maskingEnabled: !state.maskingEnabled,
+          }
+        } else {
+          return {
+            ...state,
+            maskModalVisible: !state.maskModalVisible,
+          }
+        }
+      case 'set-mask-threshold':
+        return {
+          ...state,
+          maskThreshold: action.threshold,
+          maskingEnabled: !state.maskingEnabled,
+          maskModalVisible: !state.maskModalVisible,
+        }
       default:
         return state
     }
@@ -252,18 +276,21 @@ export default class EFPViewer
     const efp = useMemo(() => {
       const Component = sortedEfps[activeViewIndex].component
       return (
-        <Component
-          activeData={{
-            ...sortedViewData[activeViewIndex],
-          }}
-          state={{
-            colorMode: state.colorMode,
-            renderAsThumbnail: false,
-            maskThreshold: state.maskThreshold,
-          }}
-          geneticElement={geneticElement}
-          dispatch={() => {}}
-        />
+        <>
+          <Component
+            activeData={{
+              ...sortedViewData[activeViewIndex],
+            }}
+            state={{
+              colorMode: state.colorMode,
+              renderAsThumbnail: false,
+              maskThreshold: state.maskThreshold,
+              maskingEnabled: state.maskingEnabled,
+            }}
+            geneticElement={geneticElement}
+            dispatch={() => {}}
+          />
+        </>
       )
     }, [
       activeViewIndex,
@@ -272,6 +299,7 @@ export default class EFPViewer
       sortedViewData[activeViewIndex],
       state.colorMode,
       state.maskThreshold,
+      state.maskingEnabled,
     ])
     const ref = useRef<HTMLDivElement>(null)
     const dimensions = useDimensions(ref)
@@ -366,6 +394,7 @@ export default class EFPViewer
               views={sortedEfps}
               colorMode={state.colorMode}
               maskThreshold={state.maskThreshold}
+              maskingEnabled={state.maskingEnabled}
             />
           </Box>
           {/* main canvas area */}
@@ -420,8 +449,9 @@ export default class EFPViewer
                   data={{
                     ...activeData.viewData[activeViewIndex],
                   }}
-                  colorMode={state.colorMode}
                   maskThreshold={state.maskThreshold}
+                  colorMode={state.colorMode}
+                  maskingEnabled={state.maskingEnabled}
                 />
                 <PanZoom
                   sx={(theme) => ({
@@ -476,15 +506,6 @@ export default class EFPViewer
       render: () => <>Mask data</>,
     },
   ]
-  header: View<EFPViewerData, EFPViewerState, EFPViewerAction>['header'] = (
-    props
-  ) => (
-    <Typography variant='h6'>
-      {props.activeData.views.find((v) => v.id == props.state.activeView)?.name}
-      {': '}
-      {props.geneticElement?.id}
-    </Typography>
-  )
 
   citation = ({ activeData, state, gene }: ICitationProps) => {
     const [xmlData, setXMLData] = useState<string[]>([])

diff --git a/Eplant/views/eFP/Viewer/legend.tsx b/Eplant/views/eFP/Viewer/legend.tsx
@@ -6,12 +6,14 @@ import { ColorMode, EFPData, EFPState } from '../types'
 interface ILegendProps {
   data: EFPData
   colorMode: ColorMode
+  maskingEnabled?: boolean
   maskThreshold?: number
 }
 const GRADIENT_STEPS = 11
 export default styled(function Legend({
   data,
   colorMode,
+  maskingEnabled,
   maskThreshold,
   ...rest
 }: ILegendProps) {
@@ -77,15 +79,19 @@ export default styled(function Legend({
         }}
       >
         {gradient}
-        <Box
-          sx={{
-            width: '15px',
-            height: '15px',
-            backgroundColor: 'gray',
-            display: 'inline-block',
-            fontSize: 10,
-          }}
-        ></Box>
+        {maskThreshold && maskingEnabled ? (
+          <Box
+            sx={{
+              width: '15px',
+              height: '15px',
+              backgroundColor: 'gray',
+              display: 'inline-block',
+              fontSize: 10,
+            }}
+          ></Box>
+        ) : (
+          <></>
+        )}
       </Box>
       <Box
         sx={{
@@ -101,8 +107,10 @@ export default styled(function Legend({
             </Box>
           )
         })}
-        {maskThreshold ?? (
+        {maskThreshold && maskingEnabled ? (
           <Box sx={{ fontSize: 10 }}>{`Masked (≥${maskThreshold}% RSE)`}</Box>
+        ) : (
+          <></>
         )}
       </Box>
     </Box>

diff --git a/Eplant/views/eFP/Viewer/types.tsx b/Eplant/views/eFP/Viewer/types.tsx
@@ -18,6 +18,7 @@ export type EFPViewerState = {
   transform: Transform
   colorMode: ColorMode
   sortBy: EFPViewerSortTypes
+  maskingEnabled: boolean
   maskModalVisible: boolean
   maskThreshold: number
 }
@@ -28,5 +29,6 @@ export type EFPViewerAction =
   | { type: 'set-transform'; transform: Transform }
   | { type: 'toggle-color-mode' }
   | { type: 'sort-by'; by: EFPViewerSortTypes }
+  | { type: 'toggle-masking' }
   | { type: 'toggle-mask-modal' }
   | { type: 'set-mask-threshold'; threshold: number }