From f340f73f2eb6bf7d9a97a576a92fdbc20367b53d Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Wed, 23 Oct 2024 23:12:24 +1100 Subject: [PATCH 1/4] Added progress bar to record table Signed-off-by: Luke McFarlane --- .../gui/components/notebook/record_table.tsx | 28 +++++++++++++++++++ app/src/lib/form-utils.ts | 4 +-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/app/src/gui/components/notebook/record_table.tsx b/app/src/gui/components/notebook/record_table.tsx index c18f7d912..79a87363f 100644 --- a/app/src/gui/components/notebook/record_table.tsx +++ b/app/src/gui/components/notebook/record_table.tsx @@ -43,6 +43,7 @@ import { ProjectID, ProjectUIViewsets, RecordMetadata, + getFullRecordData, getMetadataForAllRecords, getRecordsWithRegex, } from '@faims3/data-model'; @@ -50,6 +51,10 @@ import {NotebookDataGridToolbar} from './datagrid_toolbar'; import RecordDelete from './delete'; import getLocalDate from '../../fields/LocalDate'; import {logError} from '../../../logging'; +import ProgressBar from '../progress-bar'; +import {percentComplete, requiredFields} from '../../../lib/form-utils'; +import {getUiSpecForProject} from '../../../uiSpecification'; +import {useQuery} from '@tanstack/react-query'; type RecordsTableProps = { project_id: ProjectID; @@ -72,6 +77,11 @@ type RecordsBrowseTableProps = { function RecordsTable(props: RecordsTableProps) { const {project_id, maxRows, rows, loading} = props; + const {data: uiSpec} = useQuery({ + queryKey: ['uiSpec', project_id], + queryFn: () => getUiSpecForProject(project_id), + }); + // default for mobileView is on (collapsed table) const [mobileViewSwitchValue, setMobileViewSwitchValue] = React.useState(true); @@ -243,6 +253,14 @@ function RecordsTable(props: RecordsTableProps) { minWidth: 150, filterable: true, renderCell: (params: GridCellParams) => { + const {project_id, record_id, revision_id} = params.row; + + const {data: record} = useQuery({ + queryKey: ['recordData', project_id, record_id, revision_id], + queryFn: () => + getFullRecordData(project_id, record_id, revision_id), + }); + return ( Record has conflicts )} + ); }, diff --git a/app/src/lib/form-utils.ts b/app/src/lib/form-utils.ts index 2c4a4ed65..67003535e 100644 --- a/app/src/lib/form-utils.ts +++ b/app/src/lib/form-utils.ts @@ -1,4 +1,4 @@ -import {ProjectUIModel} from '@faims3/data-model/build/src/types'; +import {ProjectUIFields} from '@faims3/data-model/build/src/types'; /** * Retrieves the keys of fields that are marked as required from the given project UI model. @@ -6,7 +6,7 @@ import {ProjectUIModel} from '@faims3/data-model/build/src/types'; * @param {ProjectUIModel} fields - An object representing the project's UI model fields, where each field contains component parameters. * @returns {string[]} An array of keys representing the fields that are marked as required. */ -export const requiredFields = (fields: ProjectUIModel): string[] => +export const requiredFields = (fields: ProjectUIFields): string[] => Object.entries(fields) .filter(([, value]) => value['component-parameters'].required) .map(([key]) => key); From bb693f344ea009d8039c07d38b94a6176136e3c7 Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Wed, 23 Oct 2024 23:15:00 +1100 Subject: [PATCH 2/4] Fixed typo in JSDoc Signed-off-by: Luke McFarlane --- app/src/lib/form-utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/lib/form-utils.ts b/app/src/lib/form-utils.ts index 67003535e..3ef1f8363 100644 --- a/app/src/lib/form-utils.ts +++ b/app/src/lib/form-utils.ts @@ -3,7 +3,7 @@ import {ProjectUIFields} from '@faims3/data-model/build/src/types'; /** * Retrieves the keys of fields that are marked as required from the given project UI model. * - * @param {ProjectUIModel} fields - An object representing the project's UI model fields, where each field contains component parameters. + * @param {ProjectUIFields} fields - An object representing the project's UI model fields, where each field contains component parameters. * @returns {string[]} An array of keys representing the fields that are marked as required. */ export const requiredFields = (fields: ProjectUIFields): string[] => From b35bf803f66827f257f7c86cad90c2db90df5b3b Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Wed, 30 Oct 2024 18:32:58 +1100 Subject: [PATCH 3/4] Some fixes to address PR comments Signed-off-by: Luke McFarlane --- .../gui/components/notebook/record_table.tsx | 65 ++++++++++--------- app/src/lib/queries.ts | 9 +++ 2 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 app/src/lib/queries.ts diff --git a/app/src/gui/components/notebook/record_table.tsx b/app/src/gui/components/notebook/record_table.tsx index 79a87363f..b8b24856d 100644 --- a/app/src/gui/components/notebook/record_table.tsx +++ b/app/src/gui/components/notebook/record_table.tsx @@ -42,6 +42,7 @@ import * as ROUTES from '../../../constants/routes'; import { ProjectID, ProjectUIViewsets, + Record, RecordMetadata, getFullRecordData, getMetadataForAllRecords, @@ -55,6 +56,7 @@ import ProgressBar from '../progress-bar'; import {percentComplete, requiredFields} from '../../../lib/form-utils'; import {getUiSpecForProject} from '../../../uiSpecification'; import {useQuery} from '@tanstack/react-query'; +import {useGetUISpec} from '../../../lib/queries'; type RecordsTableProps = { project_id: ProjectID; @@ -77,10 +79,7 @@ type RecordsBrowseTableProps = { function RecordsTable(props: RecordsTableProps) { const {project_id, maxRows, rows, loading} = props; - const {data: uiSpec} = useQuery({ - queryKey: ['uiSpec', project_id], - queryFn: () => getUiSpecForProject(project_id), - }); + const {data: uiSpec} = useGetUISpec(project_id); // default for mobileView is on (collapsed table) const [mobileViewSwitchValue, setMobileViewSwitchValue] = @@ -253,14 +252,6 @@ function RecordsTable(props: RecordsTableProps) { minWidth: 150, filterable: true, renderCell: (params: GridCellParams) => { - const {project_id, record_id, revision_id} = params.row; - - const {data: record} = useQuery({ - queryKey: ['recordData', project_id, record_id, revision_id], - queryFn: () => - getFullRecordData(project_id, record_id, revision_id), - }); - return ( (undefined); useEffect(() => { const getData = async () => { try { - if (query.length === 0) { - const ma = await getMetadataForAllRecords( - props.project_id, - props.filter_deleted - ); - setPouchData(ma); - } else { - const ra = await getRecordsWithRegex( - props.project_id, - query, - props.filter_deleted + const records = ( + query.length === 0 + ? await getMetadataForAllRecords( + props.project_id, + props.filter_deleted + ) + : await getRecordsWithRegex( + props.project_id, + query, + props.filter_deleted + ) + ) as RecordMetaDataExtended[]; + + for (const record of records) { + const data = await getFullRecordData( + record.project_id, + record.record_id, + record.revision_id ); - setPouchData(ra); + + if (!data) continue; + + record.record = data; } + + setPouchData(records); } catch (err) { logError(err); // unable to load records setPouchData(undefined); diff --git a/app/src/lib/queries.ts b/app/src/lib/queries.ts new file mode 100644 index 000000000..8a9185daf --- /dev/null +++ b/app/src/lib/queries.ts @@ -0,0 +1,9 @@ +import {useQuery} from '@tanstack/react-query'; +import {getUiSpecForProject} from '../uiSpecification'; + +export const useGetUISpec = (project_id: string) => { + return useQuery({ + queryKey: ['uiSpec', project_id], + queryFn: () => getUiSpecForProject(project_id), + }); +}; From 1b8bb5cd2821d3d698845101fcf63b5513ed6f22 Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Wed, 30 Oct 2024 18:34:05 +1100 Subject: [PATCH 4/4] Linting fix Signed-off-by: Luke McFarlane --- api/src/couchdb/initialise.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api/src/couchdb/initialise.ts b/api/src/couchdb/initialise.ts index 1fa8d1c92..2fd312f49 100644 --- a/api/src/couchdb/initialise.ts +++ b/api/src/couchdb/initialise.ts @@ -240,7 +240,7 @@ export const initialiseAuthDb = async (db: PouchDB.Database): Promise => { } catch (err: any) { // 404 for not found if (err.status !== 404) { - console.log("Error was not 404") + console.log('Error was not 404'); throw err; }