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

Eplant/state/index.tsx

@@ -33,7 +33,6 @@ export const pageLoad = (() => {
     },
     done() {
       finished++
-      // console.log(finished / waiting)
       watchers.forEach((w) => w(finished / waiting))
     },
     watch(cb: (progress: number) => void) {

Eplant/util/Storage/index.tsx

@@ -65,7 +65,6 @@ export default class KeyValDB<K extends string, V> {
   }
 
   async clear() {
-    // console.log(await this.keys())
     ;(await this.keys()).forEach((key: K) => this.delete(key))
   }
 

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' }}>

Eplant/views/eFP/Viewer/index.tsx

@@ -138,6 +138,7 @@ export default class EFPViewer
         zoom: 1,
       },
       sortBy: 'name',
+      maskingEnabled: false,
       maskThreshold: 100,
       maskModalVisible: false,
     }
@@ -217,14 +218,23 @@ export default class EFPViewer
               : ('absolute' as const),
         }
       case 'toggle-mask-modal':
-        return {
-          ...state,
-          maskModalVisible: !state.maskModalVisible,
+        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
@@ -276,6 +286,7 @@ export default class EFPViewer
               colorMode: state.colorMode,
               renderAsThumbnail: false,
               maskThreshold: state.maskThreshold,
+              maskingEnabled: state.maskingEnabled,
             }}
             geneticElement={geneticElement}
             dispatch={() => {}}
@@ -289,12 +300,10 @@ export default class EFPViewer
       sortedViewData[activeViewIndex],
       state.colorMode,
       state.maskThreshold,
+      state.maskingEnabled,
     ])
     const ref = useRef<HTMLDivElement>(null)
     const dimensions = useDimensions(ref)
-    {
-      // console.log(props)
-    }
 
     if (!geneticElement) return <></>
     return (
@@ -430,6 +439,7 @@ export default class EFPViewer
                     colorMode: state.colorMode,
                     renderAsThumbnail: false,
                     maskThreshold: state.maskThreshold,
+                    maskingEnabled: state.maskingEnabled,
                   }}
                 />
                 <PanZoom

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 }

Eplant/views/eFP/index.tsx

@@ -23,6 +23,7 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
     colorMode: 'absolute',
     renderAsThumbnail: false,
     maskThreshold: 100,
+    maskingEnabled: false,
   })
   tooltipComponent: (props: {
     el: SVGElement | null
@@ -191,7 +192,8 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
       id,
       props.activeData,
       props.state.colorMode,
-      props.state.maskThreshold
+      props.state.maskThreshold,
+      props.state.maskingEnabled
     )
     useEffect(() => {
       const el = document.createElement('style')

Eplant/views/eFP/svg.tsx

@@ -87,15 +87,16 @@ export function getColor(
   theme: Theme,
   colorMode: ColorMode,
   tissueStd?: number,
-  maskThreshold?: number
+  maskThreshold?: number,
+  maskingEnabled?: boolean
 ): string {
   const extremum = Math.max(
     Math.abs(Math.log2(group.min / control)),
     Math.log2(group.max / control),
     1
   )
   const masked =
-    maskThreshold && tissueStd
+    maskingEnabled && maskThreshold && tissueStd
       ? isNaN(group.std) || tissueStd >= value * (maskThreshold / 100)
       : false
   const norm = Math.log2(value / control) / extremum
@@ -117,7 +118,8 @@ export function useStyles(
   id: string,
   { groups, control }: EFPData,
   colorMode: ColorMode,
-  maskThreshold?: number
+  maskThreshold?: number,
+  maskingEnabled?: boolean
 ) {
   const theme = useTheme()
   const samples = groups
@@ -133,7 +135,8 @@ export function useStyles(
             theme,
             colorMode,
             tissue.std,
-            maskThreshold
+            maskThreshold,
+            maskingEnabled
           )} !important; }`
       )
     )

Eplant/views/eFP/types.tsx

@@ -26,6 +26,7 @@ export type EFPState = {
   colorMode: 'absolute' | 'relative'
   renderAsThumbnail: boolean
   maskThreshold: number
+  maskingEnabled: boolean
 }
 
 export type EFPSVG = { svg: string; xml: string; id: EFPId }