feat: added responsiveness to extraction page

Author: nicoalee

compose/neurosynth-frontend/src/hooks/useGetWindowWidth.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+const useGetWindowWidth = (debounceMs: number = 150) => {
+    const [windowWidth, setWindowWidth] = useState(0);
+
+    useEffect(() => {
+        let timeoutId: NodeJS.Timeout;
+
+        const handleResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                const currentWindowSize = window.innerWidth;
+                if (currentWindowSize) {
+                    setWindowWidth(currentWindowSize);
+                }
+            }, debounceMs);
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize();
+
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [debounceMs]);
+    return windowWidth;
+};
+
+export default useGetWindowWidth;

compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.styles.ts

@@ -3,12 +3,6 @@ import { Box, Typography } from '@mui/material';
 import LoadingButton from 'components/Buttons/LoadingButton';
 import { IMetadataRowModel, getType } from 'components/EditMetadata/EditMetadata.types';
 import AddMetadataRow from 'components/EditMetadata/AddMetadataRow';
-import {
-    createColumns,
-    hotDataToAnnotationNotes,
-    hotSettings,
-} from 'pages/Annotations/components/EditAnnotationsHotTable.helpers';
-import AnnotationsHotTableStyles from 'pages/Annotations/components/EditAnnotationsHotTable.styles';
 import useEditAnnotationsHotTable from 'pages/Annotations/hooks/useEditAnnotationsHotTable';
 import { noteKeyArrToObj } from 'components/HotTables/HotTables.utils';
 import { CellCoords } from 'handsontable';
@@ -20,14 +14,13 @@ import useUserCanEdit from 'hooks/useUserCanEdit';
 import { useSnackbar } from 'notistack';
 import { useProjectUser } from 'pages/Project/store/ProjectStore';
 import React, { useEffect, useRef } from 'react';
+import { createColumns, hotDataToAnnotationNotes, hotSettings } from './EditAnnotationsHotTable.helpers';
 
 registerAllModules();
 
 const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((props) => {
     const { enqueueSnackbar } = useSnackbar();
-    const { mutate, isLoading: updateAnnotationIsLoading } = useUpdateAnnotationById(
-        props.annotationId
-    );
+    const { mutate, isLoading: updateAnnotationIsLoading } = useUpdateAnnotationById(props.annotationId);
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
     const hotTableRef = useRef<HotTable>(null);
@@ -47,7 +40,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
     } = useEditAnnotationsHotTable(props.annotationId, !canEdit);
 
     useEffect(() => {
-        let timeout: any = setTimeout(() => {
+        const timeout: any = setTimeout(() => {
             if (!hotTableRef.current?.hotInstance) return;
             const sizes = [
                 '64px', // NAV_HEIGHT
@@ -88,11 +81,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
             return;
         }
 
-        const updatedAnnotationNotes = hotDataToAnnotationNotes(
-            hotData,
-            hotDataToStudyMapping,
-            noteKeys
-        );
+        const updatedAnnotationNotes = hotDataToAnnotationNotes(hotData, hotDataToStudyMapping, noteKeys);
         const updatedNoteKeyObj = noteKeyArrToObj(noteKeys);
 
         mutate(
@@ -138,11 +127,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         });
     };
 
-    const handleCellMouseUp = (
-        event: MouseEvent,
-        coords: CellCoords,
-        TD: HTMLTableCellElement
-    ): void => {
+    const handleCellMouseUp = (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement): void => {
         const target = event.target as HTMLButtonElement;
         if (coords.row < 0 && (target.tagName === 'svg' || target.tagName === 'path')) {
             handleRemoveHotColumn(TD.innerText);
@@ -179,10 +164,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         if (noteKeys.find((x) => x.key === trimmedKey)) return false;
 
         setAnnotationsHotState((prev) => {
-            const updatedNoteKeys = [
-                { key: trimmedKey, type: getType(row.metadataValue) },
-                ...prev.noteKeys,
-            ];
+            const updatedNoteKeys = [{ key: trimmedKey, type: getType(row.metadataValue) }, ...prev.noteKeys];
 
             return {
                 ...prev,
@@ -227,8 +209,17 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         <Box>
             {theUserOwnsThisAnnotation && canEdit && (
                 <Box
-                    className="neurosynth-annotation-component"
-                    sx={[AnnotationsHotTableStyles.addMetadataRow]}
+                    sx={{
+                        mb: 1,
+                        width: {
+                            xs: '100%',
+                            md: '60%',
+                            lg: '50%',
+                        },
+                        display: 'grid',
+                        gridTemplateColumns: 'auto 1fr auto',
+                        gap: 4,
+                    }}
                 >
                     <AddMetadataRow
                         keyPlaceholderText="New Annotation Key"
@@ -258,8 +249,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
                     />
                 ) : (
                     <Typography sx={{ color: 'warning.dark' }}>
-                        There are no analyses to annotate. Get started by adding analyses to your
-                        studies.
+                        There are no analyses to annotate. Get started by adding analyses to your studies.
                     </Typography>
                 )}
             </Box>
@@ -275,7 +265,7 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
                         xs: '90%',
                         md: '80%',
                     },
-                    zIndex: 1000,
+                    zIndex: 999,
                 }}
             >
                 <LoadingButton

compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.tsx

@@ -82,12 +82,14 @@ const EditStudyPage: React.FC = () => {
                         xs: 'column-reverse',
                         md: 'row',
                     },
-                    boxSizing: 'border-box',
                 }}
             >
                 <Box
                     sx={{
-                        flexGrow: 1,
+                        width: {
+                            xs: '100%',
+                            md: 'calc(100% - 62px - 1rem)',
+                        },
                         mr: {
                             xs: 0,
                             md: 2,
@@ -137,11 +139,9 @@ const EditStudyPage: React.FC = () => {
                 </Box>
                 <Box
                     sx={{
-                        position: 'sticky', // this is needed when the toolbar is on top of the eidt study content
+                        position: 'sticky', // this is needed when the toolbar is on top of the edit study content
                         top: '0',
-                        pt: 1,
-                        backgroundColor: 'white',
-                        zIndex: 1000,
+                        zIndex: 999,
                         mb: 1,
                     }}
                 >

compose/neurosynth-frontend/src/pages/Study/EditStudyPage.tsx

@@ -1,7 +1,7 @@
 import { Add } from '@mui/icons-material';
 import { Box, Button, Divider, Typography } from '@mui/material';
-import EditStudyComponentsStyles from 'pages/Study/components/EditStudyComponents.styles';
 import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
+import EditStudyComponentsStyles from 'pages/Study/components/EditStudyComponents.styles';
 import { useAddOrUpdateAnalysis, useStudyAnalyses, useStudyId } from 'pages/Study/store/StudyStore';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useCreateAnnotationNote } from 'stores/AnnotationStore.actions';
@@ -68,7 +68,7 @@ const EditStudyAnalyses: React.FC = React.memo(() => {
             accordionSummarySx={EditStudyComponentsStyles.accordionSummary}
             TitleElement={<Typography sx={EditStudyComponentsStyles.accordionTitle}>Analyses</Typography>}
         >
-            <Box sx={{ width: '100%', margin: '0.5rem 0' }}>
+            <Box sx={{ padding: '0.5rem 0' }}>
                 <Box sx={{ marginBottom: '1rem' }}>
                     {analyses.length === 0 && (
                         <Typography sx={{ color: 'warning.dark' }} gutterBottom>
@@ -89,15 +89,21 @@ const EditStudyAnalyses: React.FC = React.memo(() => {
                     <>
                         <Divider />
                         <Box sx={{ display: 'flex' }}>
-                            <EditStudyAnalysesList
-                                analyses={analyses}
-                                selectedAnalysisId={selectedAnalysisId}
-                                onSelectAnalysis={handleSelectAnalysis}
-                            />
+                            <Box>
+                                <EditStudyAnalysesList
+                                    analyses={analyses}
+                                    selectedAnalysisId={selectedAnalysisId}
+                                    onSelectAnalysis={handleSelectAnalysis}
+                                />
+                            </Box>
                             <Box
                                 sx={{
+                                    boxSizing: 'border-box',
                                     padding: '1rem 0 1rem 1rem',
-                                    // width: 'calc(100% - 250px - 1rem)',
+                                    width: {
+                                        xs: 'calc(100% - 150px)',
+                                        md: 'calc(100% - 250px)',
+                                    },
                                 }}
                             >
                                 <EditStudyAnalysis

compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalyses.tsx

@@ -1,4 +1,4 @@
-import { Box, List } from '@mui/material';
+import { List } from '@mui/material';
 import { IStoreAnalysis } from 'pages/Study/store/StudyStore.helpers';
 import { useCallback } from 'react';
 import StudyAnalysesListItem from './StudyAnalysesListItem';
@@ -18,37 +18,28 @@ const EditStudyAnalysesList: React.FC<{
     );
 
     return (
-        <Box
+        <List
             sx={{
                 borderLeft: '1px solid lightgray',
                 borderRight: '1px solid lightgray',
                 width: {
                     xs: '150px',
                     md: '250px',
                 },
+                maxHeight: '946px',
+                overflow: 'auto',
             }}
+            disablePadding
         >
-            <List
-                sx={{
-                    width: {
-                        xs: '150px',
-                        md: '250px',
-                    },
-                    maxHeight: '946px',
-                    overflow: 'auto',
-                }}
-                disablePadding
-            >
-                {analyses.map((analysis) => (
-                    <StudyAnalysesListItem
-                        key={analysis.id}
-                        analysis={analysis}
-                        onSelectAnalysis={handleSelectAnalysis}
-                        selected={(analysis.id || null) === (selectedAnalysisId || undefined)}
-                    />
-                ))}
-            </List>
-        </Box>
+            {analyses.map((analysis) => (
+                <StudyAnalysesListItem
+                    key={analysis.id}
+                    analysis={analysis}
+                    onSelectAnalysis={handleSelectAnalysis}
+                    selected={(analysis.id || null) === (selectedAnalysisId || undefined)}
+                />
+            ))}
+        </List>
     );
 };
 

compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysesList.tsx

@@ -30,7 +30,7 @@ const EditStudyAnalysis: React.FC<{
     };
 
     return (
-        <Box sx={{ marginBottom: '2rem', width: '100%' }}>
+        <Box sx={{ marginBottom: '2rem' }}>
             <StudyAnalysisWarnings analysisId={props.analysisId} />
             <EditStudyAnalysisDetails analysisId={props.analysisId} />
             <EditStudyAnalysisPoints analysisId={props.analysisId} />

compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysis.tsx

@@ -5,19 +5,17 @@ import EditStudyAnalysisPointSpaceAndStatistic from 'pages/Study/components/Edit
 
 const EditStudyAnalysisPoints: React.FC<{ analysisId?: string }> = (props) => {
     return (
-        <Box sx={{ marginTop: '2rem', width: '100%' }}>
+        <Box sx={{ marginTop: '2rem' }}>
             <Box sx={{ display: 'flex', alignItems: 'center', margin: '0.5rem 0' }}>
-                <Typography sx={{ fontWeight: 'bold', marginRight: '1rem' }}>
-                    Analysis Coordinates
-                </Typography>
+                <Typography sx={{ fontWeight: 'bold', marginRight: '1rem' }}>Analysis Coordinates</Typography>
                 <Tooltip
                     title="To add or remove rows, right click on a cell to open the context menu. You must enter all coordinates in order to save the overall study. Please note that the ordering of points is not guaranteed."
                     placement="right"
                 >
                     <HelpIcon color="primary" />
                 </Tooltip>
             </Box>
-            <EditStudyAnalysisPointSpaceAndStatistic analysisId={props.analysisId} />
+            {/* <EditStudyAnalysisPointSpaceAndStatistic analysisId={props.analysisId} /> */}
             <EditStudyAnalysisPointsHotTable analysisId={props.analysisId} />
         </Box>
     );

compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnalysisPoints.tsx

@@ -76,7 +76,7 @@ export const EditStudyAnalysisPointsDefaultConfig: HotTableProps = {
     undo: false,
     manualColumnResize: false,
     allowInsertColumn: false,
-    colWidths: [50, 50, 50, 150, 150, 100],
+    colWidths: [50, 50, 50, 100, 140, 100],
 };
 
 export const getHotTableInsertionIndices = (selectedCoords: [number, number, number, number][]) => {