Skip to content

Commit

Permalink
feat: creating new annotation study table with store
Browse files Browse the repository at this point in the history
  • Loading branch information
nicoalee committed Oct 15, 2023
1 parent 3b22d11 commit 6954ca7
Show file tree
Hide file tree
Showing 29 changed files with 19,723 additions and 14,589 deletions.
33,891 changes: 19,468 additions & 14,423 deletions compose/neurosynth-frontend/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions compose/neurosynth-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@
"fast-xml-parser": "^4.2.5",
"handsontable": "^12.3.3",
"html-to-image": "^1.11.11",
"i": "^0.3.7",
"jose": "^4.14.4",
"notistack": "^2.0.5",
"npm": "^10.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-query": "^3.39.2",
Expand Down
15 changes: 1 addition & 14 deletions compose/neurosynth-frontend/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,6 @@
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
crossorigin="anonymous"
/>

<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/rii-mango/Papaya@build-1449/release/current/standard/papaya.css"
crossorigin="anonymous"
/>

<script
defer
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/rii-mango/Papaya@build-1449/release/current/standard/papaya.js"
></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0L9Y0HT9NR"></script>
<script>
Expand Down Expand Up @@ -76,5 +62,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import NeurosynthTableStyles from 'components/Tables/NeurosynthTable/NeurosynthT
import { EPropertyType } from 'components/EditMetadata';
import { useGetAnnotationById } from 'hooks';
import { NoteCollectionReturn } from 'neurostore-typescript-sdk';
import { AnnotationNoteValue } from 'components/EditAnnotations/helpers/utils';
import { AnnotationNoteValue } from 'components/HotTables/helpers/utils';

export const getFilteredAnnotationNotes = (
annotationNotes: NoteCollectionReturn[],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,6 @@ const MoveToExtractionIngest: React.FC<{
the database, you will have the option of either <b>creating a brand new study</b>{' '}
or <b>adding the existing neurostore study to your studyset</b>.
</Typography>
<Typography gutterBottom color="secondary">
We recommend using the existing neurostore study as that will often have
automatically extracted data available which may save you some time.
</Typography>
<Typography sx={{ marginBottom: '1rem' }} gutterBottom>
To get started, click "START INGESTION" below
</Typography>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { HotTable } from '@handsontable/react';
import { Box, Typography } from '@mui/material';
import { registerAllModules } from 'handsontable/registry';
import styles from 'components/EditAnnotations/AnnotationsHotTable/AnnotationsHotTable.module.css';
import styles from 'components/HotTables/AnnotationsHotTable/AnnotationsHotTable.module.css';
import { IStorePoint, MapOrSpaceType } from 'pages/Studies/StudyStore.helpers';
import { useEffect, useRef } from 'react';

Expand Down Expand Up @@ -44,6 +44,8 @@ const DisplayPoints: React.FC<{
};
}, []);

console.log(hotData.length);

return (
<Box sx={{ width: '100%' }}>
<Typography sx={{ fontWeight: 'bold', marginBottom: '0.5rem' }} gutterBottom>
Expand Down Expand Up @@ -79,7 +81,7 @@ const DisplayPoints: React.FC<{
No coordinates have been added yet
</Typography>
) : (
<div style={{ width: '100%' }}>
<div style={{ width: '100%', height: '100%' }}>
<HotTable
ref={hotTableRef}
data={hotData}
Expand All @@ -105,7 +107,6 @@ const DisplayPoints: React.FC<{
},
]}
colHeaders={['X', 'Y', 'Z', 'Value', 'Cluster Size (mm^3)', 'Subpeak?']}
preventOverflow={true}
stretchH="all"
width="100%"
licenseKey="non-commercial-and-evaluation"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ColumnSettings } from 'handsontable/settings';
import { useGetAnnotationById, useUpdateAnnotationById } from 'hooks';
import { NoteCollectionReturn } from 'neurostore-typescript-sdk';
import { useCallback, useEffect, useRef, useState } from 'react';
import AnnotationsHotTable from './AnnotationsHotTable/AnnotationsHotTable';
import AnnotationsHotTable from 'components/HotTables/AnnotationsHotTable/AnnotationsHotTable';
import {
AnnotationNoteValue,
NoteKeyType,
Expand All @@ -15,7 +15,7 @@ import {
hotDataToAnnotationNotes,
noteKeyArrToObj,
noteKeyObjToArr,
} from './helpers/utils';
} from '../HotTables/helpers/utils';
import { useAuth0 } from '@auth0/auth0-react';
import { useSnackbar } from 'notistack';

Expand Down Expand Up @@ -149,6 +149,7 @@ const EditAnnotations: React.FC<{ annotationId: string }> = (props) => {
hardCodedReadOnlyCols={hardCodedColumns}
allowRemoveColumns
onChange={handleChange}
wordWrap={true}
size="fitToPage"
/>
<LoadingButton
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import ConfirmationDialog from 'components/Dialogs/ConfirmationDialog/Confirmati
import DisplayAnalysisWarnings from 'components/DisplayStudy/DisplayAnalyses/DisplayAnalysisWarnings/DisplayAnalysisWarnings';
import { useDeleteAnalysis } from 'pages/Studies/StudyStore';
import { useState } from 'react';
import EditAnalysisDetails from '../EditAnalysisDetails/EditAnalysisDetails';
import EditAnalysisPoints from '../EditAnalysisPoints/EditAnalysisPoints';
import EditAnalysisDetails from 'components/EditStudyComponents/EditAnalyses/EditAnalysisDetails/EditAnalysisDetails';
import EditAnalysisPoints from 'components/HotTables/EditAnalysisPointsHotTable/EditAnalysisPoints';
import EditAnalysisPointSpaceAndStatistic from 'components/EditStudyComponents/EditAnalyses/EditAnalysisPoints/EditAnalysisPointSpaceAndStatistic/EditAnalysisPointSpaceAndStatistic';

const EditAnalysis: React.FC<{ analysisId?: string; onDeleteAnalysis: () => void }> = (props) => {
const deleteAnalysis = useDeleteAnalysis();
Expand Down Expand Up @@ -46,6 +47,7 @@ const EditAnalysis: React.FC<{ analysisId?: string; onDeleteAnalysis: () => void
<HelpIcon color="primary" />
</Tooltip>
</Box>
<EditAnalysisPointSpaceAndStatistic analysisId={props.analysisId} />
<EditAnalysisPoints analysisId={props.analysisId} />
</Box>
{/* TODO: This can be added back later when we have a better understanding of where it fits in as currently, all meta-analysis algorithms do not use this */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ const EditAnalysisPointSpaceAndStatistic: React.FC<{ analysisId?: string }> = (p
margin: '1rem 0',
display: 'flex',
justifyContent: 'space-between',
width: '550px',
width: '100%',
maxWidth: '550px',
}}
>
<FormControl sx={{ width: '250px' }} size="small" fullWidth>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Box, Typography } from '@mui/material';
import AnnotationsHotTable from 'components/EditAnnotations/AnnotationsHotTable/AnnotationsHotTable';
import AnnotationsHotTable from 'components/HotTables/AnnotationsHotTable/AnnotationsHotTable';
import {
AnnotationNoteValue,
NoteKeyType,
annotationNotesToHotData,
createColumns,
hotDataToAnnotationNotes,
} from 'components/EditAnnotations/helpers/utils';
} from 'components/HotTables/helpers/utils';
import EditStudyComponentsStyles from 'components/EditStudyComponents/EditStudyComponents.styles';
import NeurosynthAccordion from 'components/NeurosynthAccordion/NeurosynthAccordion';
import StateHandlerComponent from 'components/StateHandlerComponent/StateHandlerComponent';
Expand All @@ -24,6 +24,7 @@ import {
useUpdateAnnotationNotes,
} from 'stores/AnnotationStore.actions';
import { useAnnotationNotes } from 'stores/AnnotationStore.getters';
import EditStudyAnnotationsHotTable from 'components/HotTables/EditStudyAnnotationsHotTable/EditStudyAnnotationsHotTable';

const hardCodedColumns = ['Analysis', 'Description'];

Expand Down Expand Up @@ -118,11 +119,9 @@ const EditStudyAnnotations: React.FC = (props) => {
return (
<NeurosynthAccordion
elevation={0}
defaultExpanded
expandIconColor="secondary.main"
sx={[
EditStudyComponentsStyles.accordion,
{ borderTop: '1px solid', borderColor: 'secondary.main' },
]}
sx={EditStudyComponentsStyles.accordion}
accordionSummarySx={EditStudyComponentsStyles.accordionSummary}
TitleElement={
<Typography sx={EditStudyComponentsStyles.accordionTitle}>
Expand All @@ -132,6 +131,7 @@ const EditStudyAnnotations: React.FC = (props) => {
>
<Box sx={{ height: initialAnnotationHotState.size, padding: '1rem 0' }}>
<StateHandlerComponent isLoading={isLoading} isError={isError}>
<EditStudyAnnotationsHotTable />
<AnnotationsHotTable
{...initialAnnotationHotState}
hardCodedReadOnlyCols={hardCodedColumns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ const EditStudyDetails: React.FC = React.memo((props) => {
<NeurosynthAccordion
elevation={0}
expandIconColor="secondary.main"
sx={EditStudyComponentsStyles.accordion}
sx={[
EditStudyComponentsStyles.accordion,
{ borderTop: '1px solid', borderColor: 'secondary.main' },
]}
accordionSummarySx={EditStudyComponentsStyles.accordionSummary}
TitleElement={
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { AnnotationNoteValue, NoteKeyType } from '../helpers/utils';
import { CellCoords } from 'handsontable';
import React from 'react';
import { createColumnHeader, createColumns } from '../helpers/utils';
import AnnotationsHotTableStyles from 'components/EditAnnotations/AnnotationsHotTable/AnnotationsHotTable.styles';
import AnnotationsHotTableStyles from 'components/HotTables/AnnotationsHotTable/AnnotationsHotTable.styles';

const hotSettings: HotTableProps = {
fillHandle: false,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { HotTableProps } from '@handsontable/react';
import { CellValue } from 'handsontable/common';
import styles from 'components/HotTables/AnnotationsHotTable/AnnotationsHotTable.module.css';
import { ColumnSettings } from 'handsontable/settings';

const nonEmptyNumericValidator = (value: CellValue, callback: (isValid: boolean) => void) => {
const isNumber = !isNaN(value);
if (
isNumber &&
value !== 'e' &&
value !== true &&
value !== false &&
value !== null &&
value !== '' // all these things are considered numbers
) {
callback(true);
} else {
callback(false);
}
};

export const hotTableColHeaders = ['X', 'Y', 'Z', 'Value', 'Cluster Size (mm^3)', 'Subpeak?'];
export const hotTableColumnSettings: ColumnSettings[] = [
{
validator: nonEmptyNumericValidator,
className: styles.number,
data: 'x',
type: 'numeric',
},
{
validator: nonEmptyNumericValidator,
className: styles.number,
data: 'y',
type: 'numeric',
},
{
validator: nonEmptyNumericValidator,
className: styles.number,
data: 'z',
type: 'numeric',
},
{
className: styles.number,
data: 'value',
type: 'numeric',
},
{
className: styles.number,
data: 'cluster_size',
type: 'numeric',
},
{
validator: (value: CellValue, callback: (isValid: boolean) => void) => {
callback(value === true || value === false || value === undefined);
},
className: styles.boolean,
data: 'subpeak',
type: 'checkbox',
},
];

export const EditAnalysisPointsDefaultConfig: HotTableProps = {
outsideClickDeselects: false,
licenseKey: 'non-commercial-and-evaluation',
selectionMode: 'range',
allowRemoveColumn: false,
fillHandle: {
direction: 'vertical', // autofill horizontal doesnt follow cell validations set by columns...
autoInsertRow: false, // when fill handle reaches the bottom of the spreadsheet, prevent more rows from being added
},
allowInvalid: false,
undo: false,
manualColumnResize: false,
allowInsertColumn: false,
colWidths: [50, 50, 50, 150, 150, 100],
};

export const replaceString = (val: string) => {
// replace = ['֊', '‐', '‑', '⁃', '﹣', '-', '‒', '–', '—', '﹘', '−', '-']

return val.replaceAll(new RegExp('֊|‐|‑|⁃|﹣|-|‒|–|—|﹘|−|-', 'g'), '-');
};

export const stripTags = (stringWhichMayHaveHTML: any) => {
if (typeof stringWhichMayHaveHTML !== 'string') return '';

let doc = new DOMParser().parseFromString(stringWhichMayHaveHTML, 'text/html');
return doc.body.textContent || '';
};

export const getHotTableInsertionIndices = (selectedCoords: [number, number, number, number][]) => {
if (selectedCoords.length === 0)
return {
insertAboveIndex: 0,
insertBelowIndex: 0,
};

let topMostIndex = selectedCoords[0][0]; // target startRow of first selected coord
let bottomMostIndex = selectedCoords[selectedCoords.length - 1][2]; // target endRow of last selected coord

selectedCoords.forEach(([startRow, startCol, endRow, endCol]) => {
if (startRow < topMostIndex) topMostIndex = startRow;
if (endRow > bottomMostIndex) bottomMostIndex = endRow;
});
return {
insertAboveIndex: topMostIndex,
insertBelowIndex: bottomMostIndex,
};
};
Loading

0 comments on commit 6954ca7

Please sign in to comment.