feat: Tag Field Types

packages/client/public/locales/en/translation.json

@@ -129,7 +129,8 @@
       "redirectToOrg": "Redirect to Organization Login"
     },
     "tagView": {
-      "originalEntry": "Original Entry"
+      "originalEntry": "Original Entry",
+      "export": "Export"
     }
   },
   "errors": {

packages/client/src/components/tag/view/AslLexGridView.component.tsx

@@ -1,21 +1,9 @@
 import { TagColumnViewProps, TagViewTest, NOT_APPLICABLE, GetGridColDefs } from '../../../types/TagColumnView';
-import { useLexiconByKeyQuery } from '../../../graphql/lex';
-import { useEffect, useState } from 'react';
 import { VideoEntryView } from '../../VideoView.component';
 import i18next from 'i18next';
 
 const AslLexGridViewVideo: React.FC<TagColumnViewProps> = ({ data }) => {
-  const [videoUrl, setVideoUrl] = useState<string | null>(null);
-
-  const lexiconByKeyResult = useLexiconByKeyQuery({
-    variables: { lexicon: import.meta.env.VITE_ASL_LEXICON_ID, key: data }
-  });
-
-  useEffect(() => {
-    if (lexiconByKeyResult.data) {
-      setVideoUrl(lexiconByKeyResult.data.lexiconByKey.video);
-    }
-  }, [lexiconByKeyResult]);
+  const videoUrl = data as string;
 
   return (
     <>
@@ -38,18 +26,7 @@ const AslLexGridViewKey: React.FC<TagColumnViewProps> = ({ data }) => {
 };
 
 const AslLexGridViewPrimary: React.FC<TagColumnViewProps> = ({ data }) => {
-  const [primary, setPrimary] = useState<string | null>(null);
-
-  const lexiconByKeyResult = useLexiconByKeyQuery({
-    variables: { lexicon: import.meta.env.VITE_ASL_LEXICON_ID, key: data }
-  });
-
-  useEffect(() => {
-    if (lexiconByKeyResult.data) {
-      setPrimary(lexiconByKeyResult.data.lexiconByKey.primary);
-    }
-  }, [lexiconByKeyResult]);
-
+  const primary = data as string;
   return primary || '';
 };
 
@@ -69,30 +46,24 @@ export const getAslLexCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: `${property}-video`,
       headerName: `${property}: ${i18next.t('common.video')}`,
-      width: 300,
+      width: 350,
+      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.video,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <AslLexGridViewVideo data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <AslLexGridViewVideo data={params.value} schema={schema} uischema={uischema} />
     },
     {
       field: `${property}-key`,
       headerName: `${property}: ${i18next.t('common.key')}`,
+      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.key,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <AslLexGridViewKey data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <AslLexGridViewKey data={params.value} schema={schema} uischema={uischema} />
     },
     {
       field: `${property}-primary`,
       headerName: `${property}: ${i18next.t('common.primary')}`,
+      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.primary,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <AslLexGridViewPrimary data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <AslLexGridViewPrimary data={params.value} schema={schema} uischema={uischema} />
     }
   ];
 };

packages/client/src/components/tag/view/BooleanGridView.component.tsx

@@ -19,11 +19,9 @@ export const getBoolCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
+      valueGetter: (params) => params.row.data[property]?.field?.boolValue,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <BooleanGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <BooleanGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
     }
   ];
 };

packages/client/src/components/tag/view/FreeTextGridView.component.tsx

@@ -18,11 +18,9 @@ export const getTextCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
+      valueGetter: (params) => params.row.data[property]?.field?.textValue,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <FreeTextGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <FreeTextGridView data={params.value} schema={schema} uischema={uischema} />
     }
   ];
 };

packages/client/src/components/tag/view/NumericGridView.component.tsx

@@ -18,11 +18,9 @@ export const getNumericCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
+      valueGetter: (params) => params.row.data[property]?.field?.numericValue,
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <NumericGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <NumericGridView data={params.value} schema={schema} uischema={uischema} />
     }
   ];
 };

packages/client/src/components/tag/view/SliderGridView.component.tsx

@@ -18,11 +18,9 @@ export const getSliderCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
+      valueGetter: (params) => params.row.data && params.row.data[property],
       renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <SliderGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
-        )
+        params.value && <SliderGridView data={params.row.value} schema={schema} uischema={uischema} />
     }
   ];
 };

packages/client/src/components/tag/view/TagGridView.component.tsx

@@ -1,7 +1,14 @@
 import { useTranslation } from 'react-i18next';
 import { GetGridColDefs, TagViewTest } from '../../../types/TagColumnView';
 import { Entry, Study } from '../../../graphql/graphql';
-import { GridColDef, GridRenderCellParams, GridToolbar } from '@mui/x-data-grid';
+import {
+  GridColDef,
+  GridRenderCellParams,
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarExport,
+  GridToolbarFilterButton
+} from '@mui/x-data-grid';
 import { DataGrid } from '@mui/x-data-grid';
 import { GetTagsQuery, useRemoveTagMutation } from '../../../graphql/tag/tag';
 import { freeTextTest, getTextCols } from './FreeTextGridView.component';
@@ -12,16 +19,47 @@ import { getSliderCols, sliderTest } from './SliderGridView.component';
 import { getBoolCols, booleanTest } from './BooleanGridView.component';
 import { aslLexTest, getAslLexCols } from './AslLexGridView.component';
 import { getVideoCols, videoViewTest } from './VideoGridView.component';
+import { useEffect, useState } from 'react';
 
 export interface TagGridViewProps {
   study: Study;
   tags: GetTagsQuery['getTags'];
   refetchTags: () => void;
 }
 
+/**
+ * The GridData represents how to get the tag into the grid view. The data type
+ * itself matches the tag query except the data field is represented as key value
+ * fields instead of a list of fields.
+ *
+ * So
+ *
+ * {
+ *    data: [
+ *      { name: "property name a", ...fields }
+ *    ]
+ * }
+ *
+ * Becomes
+ *
+ * {
+ *   data: {
+ *    "property name 1": {
+ *      name: "property name 1",
+ *      ...fields
+ *    }
+ *   }
+ * }
+ */
+interface GridData extends Omit<GetTagsQuery['getTags'][0], 'data'> {
+  data: { [property: string]: any } | null;
+}
+
 export const TagGridView: React.FC<TagGridViewProps> = ({ tags, study, refetchTags }) => {
   const { t } = useTranslation();
 
+  const [gridData, setGridData] = useState<(GridData | null)[]>([]);
+
   const tagColumnViews: { tester: TagViewTest; getGridColDefs: GetGridColDefs }[] = [
     { tester: freeTextTest, getGridColDefs: getTextCols },
     { tester: numericTest, getGridColDefs: getNumericCols },
@@ -31,11 +69,31 @@ export const TagGridView: React.FC<TagGridViewProps> = ({ tags, study, refetchTa
     { tester: videoViewTest, getGridColDefs: getVideoCols }
   ];
 
+  useEffect(() => {
+    const newGridData: (GridData | null)[] = [];
+
+    // This logic justs pulls out the fields from an array into an object
+    for (const tag of tags) {
+      const properties = {} as any;
+
+      for (const property of Object.getOwnPropertyNames(study.tagSchema.dataSchema.properties)) {
+        properties[property] = tag.data!.find((row) => row.name === property);
+      }
+
+      newGridData.push({
+        ...tag,
+        data: properties
+      });
+    }
+
+    setGridData(newGridData);
+  }, [tags]);
+
   const entryColumns: GridColDef[] = [
     {
       field: 'entryView',
       headerName: t('components.tagView.originalEntry'),
-      width: 300,
+      width: 350,
       renderCell: (params: GridRenderCellParams) => <EntryView entry={params.row.entry as Entry} width={300} />
     }
   ];
@@ -101,10 +159,20 @@ export const TagGridView: React.FC<TagGridViewProps> = ({ tags, study, refetchTa
   return (
     <DataGrid
       getRowHeight={() => 'auto'}
-      rows={tags}
+      rows={gridData}
       columns={entryColumns.concat(tagMetaColumns).concat(dataColunms).concat(tagRedoColumns)}
       getRowId={(row) => row._id}
-      slots={{ toolbar: GridToolbar }}
+      slots={{ toolbar: TagToolbar }}
     />
   );
 };
+
+const TagToolbar: React.FC = () => {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarExport />
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+    </GridToolbarContainer>
+  );
+};

packages/client/src/components/tag/view/VideoGridView.component.tsx

@@ -1,20 +1,11 @@
 import { GridColDef } from '@mui/x-data-grid';
 import { TagColumnViewProps, TagViewTest, NOT_APPLICABLE, GetGridColDefs } from '../../../types/TagColumnView';
 import i18next from 'i18next';
-import { useEntryFromIdQuery } from '../../../graphql/entry/entry';
-import { Entry } from '../../../graphql/graphql';
-import { useEffect, useState } from 'react';
 import { VideoEntryView } from '../../VideoView.component';
+import { Entry } from '../../../graphql/graphql';
 
 const VideoGridView: React.FC<TagColumnViewProps> = ({ data }) => {
-  const [entry, setEntry] = useState<Entry | null>(null);
-  const entryFromIdResult = useEntryFromIdQuery({ variables: { entry: data } });
-
-  useEffect(() => {
-    if (entryFromIdResult.data) {
-      setEntry(entryFromIdResult.data.entryFromID);
-    }
-  }, [entryFromIdResult]);
+  const entry = data as Entry;
 
   return (
     <>
@@ -54,11 +45,8 @@ export const getVideoCols: GetGridColDefs = (uischema, schema, property) => {
       field: `${property}-video-${i + 1}`,
       headerName: `${property}: ${i18next.t('common.video')} ${i + 1}`,
       width: 350,
-      renderCell: (params) =>
-        params.row.data &&
-        params.row.data[property] && (
-          <VideoGridView data={params.row.data[property][i]} schema={schema} uischema={uischema} />
-        )
+      valueGetter: (params) => params.row.data[property]?.field?.entries[i],
+      renderCell: (params) => params.value && <VideoGridView data={params.value} schema={schema} uischema={uischema} />
     });
   }