Variable view rewrite & consistent data source coloring

.eslintrc.json

@@ -25,7 +25,8 @@
                 "ignoreParameters": true,
                 "ignoreProperties": true
             }
-        ]
+        ],
+        "@typescript-eslint/no-var-requires": "off"
     },
     "settings": {
         "react": {

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "homepage": "/static/frontend",
   "dependencies": {
-    "@ant-design/plots": "^1.0.9",
+    "@ant-design/plots": "^1.2.5",
     "@ant-design/pro-form": "^1.74.7",
     "@antv/g2plot": "^2.4.8",
     "@gatsbyjs/reach-router": "^1.3.9",
@@ -25,6 +25,7 @@
     "js-cookie": "^3.0.1",
     "lunr": "^2.3.9",
     "nanoevents": "^6.0.2",
+    "rc-texty": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-highlight-words": "^0.18.0",
@@ -69,9 +70,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/js-cookie": "^3.0.1",
+    "@types/lunr": "^2.3.7",
     "@types/node": "^18.11.9",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
+    "@types/react-highlight-words": "^0.20.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "babel-loader": "^9.1.2",

src/components/info-helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './info-tooltip'
+export * from './info-popover'
 export * from './info-button'

src/components/info-helpers/info-popover.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+import { Popover, PopoverProps } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+import { InfoIcon, InfoIconProps } from './info-icon'
+
+type InfoPopoverProps = PopoverProps & {
+    iconProps?: InfoIconProps
+}
+
+export const InfoPopover = ({
+    iconProps={},
+    ...popoverProps
+}: InfoPopoverProps) => {
+    return (
+        <Popover
+            className="info-popover"
+            trigger="click"
+            {...popoverProps }
+        >
+            <InfoIcon { ...iconProps } />
+        </Popover>
+    )
+}

src/components/layout/back-top.js

@@ -3,7 +3,7 @@ import { ArrowUpOutlined } from '@ant-design/icons'
 
 const { useBreakpoint } = Grid
 
-export const BackTop = ({ style, ...props }) => {
+export const BackTop = ({ style={}, ...props }) => {
   const { md } = useBreakpoint()
   return (
     <AntBackTop

src/components/search/context.js

@@ -57,6 +57,7 @@ export const HelxSearch = ({ children }) => {
   const [isLoadingVariableResults, setIsLoadingVariableResults] = useState(false);
   const [variableError, setVariableError] = useState({})
 
+  const variablesAbortController = useRef()
   const inputRef = useRef()
   const navigate = useNavigate()
   const [searchHistory, setSearchHistory] = useLocalStorage('search_history', [])
@@ -418,6 +419,9 @@ export const HelxSearch = ({ children }) => {
 
       study.elements.forEach((variable, indexByVariable) => {
         const variableToUpdate = Object.assign({}, variable);
+        // NOTE: We don't want to store the actual study inside here, since the histogram
+        // will try to do a deep clone on it, which can become very performance heavy for large searches.
+        variableToUpdate["study_id"] = study.c_id
         variableToUpdate["study_name"] = study.c_name
         variableToUpdate["withinFilter"] = "none"
         variables.push(variableToUpdate)
@@ -447,12 +451,14 @@ export const HelxSearch = ({ children }) => {
     const fetchAllVariables = async () => {
       setIsLoadingVariableResults(true)
       try {
+        variablesAbortController.current?.abort()
+        variablesAbortController.current = new AbortController()
         const params = {
           index: 'variables_index',
           query: query,
           size: MAX_SEARCH_VAR_ALL_VARIABLES_SIZE,
         }
-        const response = await axios.post(`${helxSearchUrl}/search_var`, params)
+        const response = await axios.post(`${helxSearchUrl}/search_var`, params, { signal: variablesAbortController.current.signal })
         if (response.status === 200 && response.data.status === 'success' && response?.data?.result && Object.keys(response?.data?.result).length > 0 && response?.data?.result.total_items !== 0) {
 
           // Data structure of studies matches API response 
@@ -482,9 +488,11 @@ export const HelxSearch = ({ children }) => {
           setIsLoadingVariableResults(false)
         }
       } catch (variableError) {
-        console.log(variableError)
-        setVariableError({ message: 'An variable error occurred!' })
-        setIsLoadingVariableResults(false)
+        if (!axios.isCancel(variableError)) {
+          console.log(variableError)
+          setVariableError({ message: 'An variable error occurred!' })
+          setIsLoadingVariableResults(false)
+        }
       }
     }