finalize concept modal proper sizing

helxplatform · Sep 11, 2024 · 10153a6 · 10153a6
1 parent a1f1d55
commit 10153a6
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 27 deletions.
diff --git a/src/components/search/concept-modal/concept-modal.css b/src/components/search/concept-modal/concept-modal.css
@@ -12,9 +12,6 @@
   width: 100%;
 }
 
-.concept-modal {
-}
-
 .concept-modal > .ant-modal-content {
   display: flex;
   flex-direction: column;
@@ -28,11 +25,35 @@
 .concept-modal .ant-modal-body > .ant-space {
   /* Override the inline-flex */
   display: flex;
+  align-items: stretch;
   max-height: 60vh;
 }
+.concept-modal .ant-modal-body > .ant-space > .ant-space-item {
+  overflow: auto;
+}
+
+/* Space item container for concept-modal-tabs  */
+.concept-modal .ant-modal-body .ant-space .ant-space-item:first-child {
+  flex: none;
+}
+
+.concept-modal-tabs {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.concept-modal-tabs .ant-menu-item {
+  display: inline-flex !important;
+  width: auto !important;
+}
+.concept-modal-tabs .ant-menu-title-content {
+  flex: none !important;
+  overflow: visible !important;
+}
 
 .concept-modal-body > .ant-space-item:nth-child(2) {
-  width: 100% !important;
+  /* width: 100% !important; */
   flex-grow: 1;
 }
 

diff --git a/src/components/search/concept-modal/concept-modal.js b/src/components/search/concept-modal/concept-modal.js
@@ -310,6 +310,7 @@ export const ConceptModalBody = ({ result }) => {
         defaultSelectedKeys={ ['overview'] }
         mode="inline"
         theme="light"
+        className="concept-modal-tabs"
         selectedKeys={ [currentTab] }
       >
         {

diff --git a/src/components/search/concept-modal/tabs/studies/study.js b/src/components/search/concept-modal/tabs/studies/study.js
@@ -29,7 +29,7 @@ export const Study = ({ study, highlight, collapsed, ...panelProps }) => {
               (<Link to={ study.c_link } onClick={ studyLinkClicked }>{ study.c_id }</Link>)
             </Text>
           }
-          extra={ <Text>{ study.elements.length } variable{ study.elements.length === 1 ? '' : 's' }</Text> }
+          extra={ <Text style={{ whiteSpace: "nowrap" }}>{ study.elements.length } variable{ study.elements.length === 1 ? '' : 's' }</Text> }
           {...panelProps}
         >
           <StudyVariables variables={ study.elements } highlight={ highlight } />

diff --git a/src/hooks/use-local-storage.js b/src/hooks/use-local-storage.js
@@ -2,7 +2,7 @@
  * Source: https://github.com/RENCI/ncdot-road-safety-client/blob/53c147c434d6d29d9ecbb0d682a3127c08086559/src/hooks/use-local-storage.js
  */
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 /** `storage` events do not fire on the same tab.
  * this code monkey patches a global, custom `localStorageModified`
@@ -57,7 +57,11 @@ export const useLocalStorage = (key, initialValue, observeOtherPages=true) => {
       // Get from local storage by key
       const item = window.localStorage.getItem(key)
       // Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : initialValue
+      if (item) return JSON.parse(item)
+      else {
+        window.localStorage2.setItem(key, JSON.stringify(initialValue))
+        return initialValue
+      }
     } catch (error) {
       // If error also return initialValue
       console.log(error)
@@ -67,20 +71,22 @@ export const useLocalStorage = (key, initialValue, observeOtherPages=true) => {
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
-  const setValue = value => {
+  const setValue = useCallback((value) => {
     try {
-      // Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(storedValue) : value
       // Save state
-      setStoredValue(valueToStore)
-      // Save to local storage
-      // Use the non-monkey patched version to avoid double-calling setState in the effect.
-      window.localStorage2.setItem(key, JSON.stringify(valueToStore))
+      setStoredValue((existingValue) => {
+        // Allow value to be a function so we have same API as useState
+        const valueToStore = value instanceof Function ? value(existingValue) : value
+        // Save to local storage
+        // Use the non-monkey patched version to avoid double-calling setState in the effect.
+        window.localStorage2.setItem(key, JSON.stringify(valueToStore))
+        return valueToStore
+      })
     } catch (error) {
       // A more advanced implementation would handle the error case
       console.log(error)
     }
-  }
+  }, [])
 
   useEffect(() => {
     const storageCallback = (e) => {

diff --git a/src/hooks/use-synthetic-dom-mask.tsx b/src/hooks/use-synthetic-dom-mask.tsx
@@ -1,6 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { v4 as uuid } from 'uuid'
 
+interface SyntheticDOMMaskOptions {
+    padding?: number
+    resizeInterval?: number
+    selectorInterval?: number
+    blockClicks?: boolean
+}
+
 const prepareMaskContainer = (): HTMLDivElement => {
     const mask = document.createElement("div")
     mask.id = "mask-" + uuid()
@@ -15,15 +22,28 @@ const prepareMaskContainer = (): HTMLDivElement => {
 
 export const useSyntheticDOMMask = (
     selector: string,
-    padding: number = 0,
-    resizeInterval: number = 0,
-    selectorInterval: number = 10
+    options: SyntheticDOMMaskOptions = {}
 ) => {
+    const { padding, resizeInterval, selectorInterval, blockClicks } = {
+        padding: 0,
+        resizeInterval: 0,
+        selectorInterval: 10,
+        blockClicks: false,
+        ...options
+    }
+
     const [mask] = useState<HTMLDivElement>(prepareMaskContainer)
     const [elements, setElements] = useState<Element[] | undefined>(undefined)
     const [elementMasks, setElementMasks] = useState<Map<Element, HTMLElement> | undefined>(undefined)
     const [show, setShow] = useState<boolean>(false)
 
+    const context = useMemo(() => ({
+        showMask: () => setShow(true),
+        hideMask: () => setShow(false),
+        selector: "#" + mask.id,
+        element: mask
+    }) as const, [mask])
+
     const resize = useCallback((element: HTMLElement, bb: DOMRect) => {
         const elBB = element.getBoundingClientRect()
         if (elBB.x !== bb.x) element.style.left = (bb.x) + "px"
@@ -46,6 +66,10 @@ export const useSyntheticDOMMask = (
         return new DOMRect(x1, y1, x2 - x1, y2 - y1)
     }, [padding])
 
+    useEffect(() => {
+        mask.style.pointerEvents = blockClicks ? "auto" : "none"
+    }, [mask, blockClicks])
+
     // Maintain up-to-date list of DOM elements matching the given selector
     useEffect(() => {
         const interval = window.setInterval(() => {
@@ -72,7 +96,6 @@ export const useSyntheticDOMMask = (
     // Make sure the mask displays properly and maintains correct position/size
     useEffect(() => {
         const observers: IntersectionObserver[] = []
-        let interval: number
         let cancelled = false
         if (!mask || !elementMasks) return
         if (!show) mask.style.display = "none"
@@ -129,7 +152,6 @@ export const useSyntheticDOMMask = (
 
         return () => {
             observers.forEach((observer) => observer.disconnect())
-            window.clearInterval(interval)
             cancelled = true
         }
     }, [mask, elementMasks, show, resizeInterval, computeMinimumBounds])
@@ -159,10 +181,5 @@ export const useSyntheticDOMMask = (
         }
     }, [])
 
-    return {
-        showMask: () => setShow(true),
-        hideMask: () => setShow(false),
-        selector: "#" + mask.id,
-        element: mask
-    } as const
+    return context
 }