Update Field Definitions

package.json

@@ -20,6 +20,7 @@
     "@mui/material": "^5.14.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@vitest/browser": "^1.0.1",
+    "ajv": "^8.16.0",
     "lexical": "^0.12.4",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^7.7.0",

src/components/Fields/AdvancedSelectEditor.tsx

@@ -19,7 +19,7 @@ import { Button, Alert, AlertTitle, TextField, Grid, Card, FormControl, FormLabe
 
 import { BaseFieldEditor } from "./BaseFieldEditor";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 import { useState } from 'react';
 
@@ -38,7 +38,7 @@ type newState = {
 
 export const AdvancedSelectEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const state = {

src/components/Fields/BaseFieldEditor.tsx

@@ -14,7 +14,7 @@
 
 import { Checkbox, FormControlLabel, Grid, TextField, Card, Alert } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 import { ConditionModal, ConditionTranslation, ConditionType } from "../condition";
 
 type Props = {
@@ -38,26 +38,18 @@ type StateType = {
 
 export const BaseFieldEditor = ({ fieldName, children }: Props) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     // These are needed because there is no consistency in how
     // the field label is stored in the notebook
     const getFieldLabel = () => {
-        return (field['component-parameters'] && field['component-parameters'].label) ||
-            (field['component-parameters'].InputLabelProps && field['component-parameters'].InputLabelProps.label) ||
-            field['component-parameters'].name;
+        return (field['component-parameters']?.label) || field['component-parameters'].name;
     }
 
     const setFieldLabel = (newField: FieldType, label: string) => {
         console.log('setFieldLabel', newField, label);
-        if (newField['component-parameters'] && 'label' in newField['component-parameters'])
-            newField['component-parameters'].label = label;
-        else if (newField['component-parameters'] &&
-            'InputLabelProps' in newField['component-parameters'] &&
-            newField['component-parameters'].InputLabelProps &&
-            newField['component-parameters'].InputLabelProps.label)
-            newField['component-parameters'].InputLabelProps.label = label;
+        newField['component-parameters'].label = label;
     }
 
     const updateField = (fieldName: string, newField: FieldType) => {
@@ -70,8 +62,8 @@ export const BaseFieldEditor = ({ fieldName, children }: Props) => {
         label: getFieldLabel(),
         helperText: cParams.helperText || "",
         required: cParams.required || false,
-        annotation: field.meta ? field.meta.annotation || false : false,
-        annotationLabel: field.meta ? field.meta.annotation_label || '' : '',
+        annotation: field.meta ? field.meta.annotation?.include : false,
+        annotationLabel: field.meta ? field.meta.annotation?.label || '' : '',
         uncertainty: field.meta ? field.meta.uncertainty.include || false : false,
         uncertaintyLabel: field.meta ? field.meta.uncertainty.label || '' : '',
         condition: field.condition,
@@ -86,8 +78,10 @@ export const BaseFieldEditor = ({ fieldName, children }: Props) => {
         newField['component-parameters'].helperText = newState.helperText;
         newField['component-parameters'].required = newState.required;
         if (newField.meta) {
-            newField.meta.annotation = newState.annotation;
-            newField.meta.annotation_label = newState.annotationLabel || '';
+            newField.meta.annotation = {
+                include: newState.annotation,
+                label: newState.annotationLabel || '',
+            }
             newField.meta.uncertainty = {
                 include: newState.uncertainty,
                 label: newState.uncertaintyLabel || ''

src/components/Fields/BasicAutoIncrementer.tsx

@@ -1,6 +1,6 @@
 import { Grid, Card, TextField } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "../../state/hooks";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 type PropType = {
     fieldName: string,
@@ -9,7 +9,7 @@ type PropType = {
 
 export const BasicAutoIncrementerEditor = ({ fieldName, viewId }: PropType) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const label = field['component-parameters'].label;

src/components/Fields/DateTimeNowEditor.tsx

@@ -15,11 +15,11 @@
 import { Grid, Card, FormHelperText, FormControlLabel, Checkbox } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { BaseFieldEditor } from "./BaseFieldEditor";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 export const DateTimeNowEditor = ({ fieldName }: {fieldName: string}) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const updateIsAutoPick = (value: boolean) => {

src/components/Fields/MapFormFieldEditor.tsx

@@ -15,11 +15,11 @@
 import { Grid, TextField, Card, FormControl, InputLabel, Select, MenuItem } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { BaseFieldEditor } from "./BaseFieldEditor";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 export const MapFormFieldEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const initZoom = field['component-parameters'].zoom;

src/components/Fields/MultipleTextField.tsx

@@ -15,11 +15,11 @@
 import { Grid, Card, TextField } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { BaseFieldEditor } from "./BaseFieldEditor";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 export const MultipleTextFieldEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const rows = field['component-parameters'].InputProps?.rows || 4;

src/components/Fields/OptionsEditor.tsx

@@ -19,11 +19,11 @@ import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { BaseFieldEditor } from "./BaseFieldEditor"
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { useState } from "react";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 export const OptionsEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName])
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName])
     const dispatch = useAppDispatch()
 
     const [newOption, setNewOption] = useState('')

src/components/Fields/RandomStyleEditor.tsx

@@ -15,11 +15,11 @@
 import { Grid, TextField, Card, FormControl, InputLabel, Select, MenuItem } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { BaseFieldEditor } from "./BaseFieldEditor";
-import { Notebook, FieldType } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 export const RandomStyleEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const initVariantStyle = field['component-parameters'].variant_style || '';

src/components/Fields/RelatedRecordEditor.tsx

@@ -19,7 +19,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle';
 import { useState } from "react";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { BaseFieldEditor } from "./BaseFieldEditor";
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 
 type PairList = [string, string][];
 type Props = {
@@ -28,8 +28,8 @@ type Props = {
 
 export const RelatedRecordEditor = ({ fieldName }: Props) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
-    const viewsets = useAppSelector((state: Notebook) => state['ui-specification'].viewsets);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
+    const viewsets = useAppSelector((state) => state.notebook['ui-specification'].viewsets);
     const dispatch = useAppDispatch();
 
     const [newOption1, setNewOption1] = useState('')

src/components/Fields/RichTextEditor.tsx

@@ -16,13 +16,13 @@ import { Grid, FormHelperText } from "@mui/material";
 import { useAppSelector, useAppDispatch } from "../../state/hooks";
 import { useRef } from "react";
 import { MDXEditorMethods } from '@mdxeditor/editor';
-import { FieldType, Notebook } from "../../state/initial";
+import { FieldType } from "../../state/initial";
 import { MdxEditor } from "../mdx-editor";
 
 
 export const RichTextEditor = ({ fieldName }: { fieldName: string }) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
     const dispatch = useAppDispatch();
 
     const initContent = field['component-parameters'].content || "";

src/components/Fields/TemplatedStringFieldEditor.tsx

@@ -1,7 +1,7 @@
 import { Alert, Grid, Card, TextField, FormControl, InputLabel, MenuItem, Select, FormControlLabel, Checkbox, Typography } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import { MutableRefObject, useRef, useState } from "react";
-import { ComponentParameters, FieldType, Notebook } from "../../state/initial";
+import { ComponentParameters, FieldType } from "../../state/initial";
 
 type PropType = {
     fieldName: string,
@@ -10,13 +10,13 @@ type PropType = {
 
 export const TemplatedStringFieldEditor = ({ fieldName, viewId }: PropType) => {
 
-    const field = useAppSelector((state: Notebook) => state['ui-specification'].fields[fieldName]);
-    const formHasHRID = useAppSelector((state: Notebook) => {
-        return Object.keys(state['ui-specification'].fields).some((fieldName) => {
+    const field = useAppSelector((state) => state.notebook['ui-specification'].fields[fieldName]);
+    const formHasHRID = useAppSelector((state) => {
+        return Object.keys(state.notebook['ui-specification'].fields).some((fieldName) => {
             return fieldName.startsWith('hrid') && fieldName.endsWith(viewId);
         });
     });
-    const allFields = useAppSelector((state: Notebook) => state['ui-specification'].fields);
+    const allFields = useAppSelector((state) => state.notebook['ui-specification'].fields);
     const dispatch = useAppDispatch();
     const textAreaRef = useRef(null) as MutableRefObject<unknown>;