synapse-react-client 4.0.17 → 4.0.19

package/dist/components/TableColumnSchemaEditor/ColumnModelForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnModelForm.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/ColumnModelForm.tsx"],"sourcesContent":["import { convertToConcreteEntityType } from '@/utils/functions/EntityTypeUtils'\nimport { InfoTwoTone } from '@mui/icons-material'\nimport {\n  Box,\n  Checkbox,\n  FormControl,\n  Link,\n  MenuItem,\n  Select,\n  SxProps,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n  ColumnModel,\n  ColumnTypeEnum,\n  FacetType,\n  VIEW_CONCRETE_TYPE_VALUES,\n  FacetColumnSortConfig,\n} from '@sage-bionetworks/synapse-types'\nimport { useAtomValue, useSetAtom } from 'jotai'\nimport { selectAtom } from 'jotai/utils'\nimport { isArray, isEmpty, isEqual } from 'lodash-es'\nimport { useMemo } from 'react'\nimport { ZodIssue } from 'zod'\nimport DefaultValueField from './ColumnModelFormFields/DefaultValueField'\nimport { FieldWithRecommendedMinimum } from './ColumnModelFormFields/FieldWithRecommendedMinimum'\nimport MultiValueField from './ColumnModelFormFields/MultiValueField'\nimport {\n  canHaveDefault,\n  canHaveMaxListLength,\n  canHaveRestrictedValues,\n  canHaveSize,\n  configureFacetsForType,\n  getAllowedColumnTypes,\n  getColumnTypeFriendlyName,\n  getFacetTypeFriendlyName,\n  getMaxSizeForType,\n} from './TableColumnSchemaEditorUtils'\nimport { HIERARCHY_VERTICAL_LINE_COMPONENT } from './TableColumnSchemaForm'\nimport { tableColumnSchemaFormDataAtom } from './TableColumnSchemaFormReducer'\nimport {\n  ColumnModelFormData,\n  JsonSubColumnModelFormData,\n} from './Validators/ColumnModelValidator'\n\ntype ColumnModelFormProps = {\n  entityType: EntityType\n  columnModelIndex: number\n  jsonSubColumnIndex?: number\n  /* Default Columns are read-only, except for the facetType */\n  isDefaultColumn: boolean\n  disabled?: boolean\n  /* Can be used to override the schema used for validating ColumnModels */\n  validationErrors?: ZodIssue[] | null\n  defaultAnnotationModel?: ColumnModel | null\n  originalColumnModel?: ColumnModel | null\n}\nconst jsonSubColumnFieldSx: SxProps = {\n  height: '28px',\n  fontSize: '12px',\n}\nconst topLevelColumnModelFieldSx: SxProps = {\n  height: '38px',\n  fontSize: '14px',\n}\n\nfunction renderDefaultValue(\n  defaultValue: string | unknown[] | undefined,\n  _columnType: ColumnTypeEnum,\n): string {\n  if (defaultValue == null) {\n    return ''\n  }\n\n  if (isArray(defaultValue)) {\n    return defaultValue.map(String).join(', ')\n  }\n  return defaultValue\n}\n\n// Helper type for the combined sort configuration value\ntype FacetSortValue =\n  | 'FREQUENCY_DESC'\n  | 'FREQUENCY_ASC'\n  | 'VALUE_DESC'\n  | 'VALUE_ASC'\n  | ''\n\n/**\n * Converts a FacetColumnSortConfig object to a single string value for the select dropdown\n */\nfunction facetSortConfigToValue(\n  config: FacetColumnSortConfig | undefined,\n): FacetSortValue {\n  if (!config || (!config.property && !config.direction)) {\n    return ''\n  }\n  const property = config.property || 'FREQUENCY'\n  const direction = config.direction || 'DESC'\n  return `${property}_${direction}` as FacetSortValue\n}\n\n/**\n * Converts a select dropdown value to a FacetColumnSortConfig object\n */\nfunction valueToFacetSortConfig(\n  value: FacetSortValue,\n): FacetColumnSortConfig | undefined {\n  if (!value) {\n    return undefined\n  }\n  const [property, direction] = value.split('_') as [\n    'FREQUENCY' | 'VALUE',\n    'DESC' | 'ASC',\n  ]\n  return { property, direction }\n}\n\n/*\n * Disable immediate MUI/Emotion style injection because it causes performance issues when adding many columns at once.\n * This can be a common occurence when adding annotation columns\n */\nconst DISABLE_INJECTING_GLOBAL_STYLES_VALUE = true\n\nexport default function ColumnModelForm(props: ColumnModelFormProps) {\n  const {\n    columnModelIndex,\n    jsonSubColumnIndex,\n    entityType,\n    isDefaultColumn,\n    disabled = false,\n    validationErrors = null,\n    defaultAnnotationModel,\n    originalColumnModel,\n  } = props\n  const isJsonSubColumn = jsonSubColumnIndex != undefined\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const isView = (VIEW_CONCRETE_TYPE_VALUES as readonly string[]).includes(\n    convertToConcreteEntityType(entityType),\n  )\n\n  const columnModelAtom = useMemo(\n    () =>\n      selectAtom(\n        tableColumnSchemaFormDataAtom,\n        v =>\n          isJsonSubColumn\n            ? v[columnModelIndex].jsonSubColumns![jsonSubColumnIndex]\n            : v[columnModelIndex],\n        isEqual,\n      ),\n    [columnModelIndex, isJsonSubColumn, jsonSubColumnIndex],\n  )\n\n  const columnModel = useAtomValue(columnModelAtom)\n\n  const allowedColumnTypes = useMemo(\n    () => getAllowedColumnTypes(isView, isJsonSubColumn),\n    [isView, isJsonSubColumn],\n  )\n\n  const allowedFacetTypes = useMemo(\n    () => configureFacetsForType(columnModel.columnType, isJsonSubColumn),\n    [columnModel.columnType, isJsonSubColumn],\n  )\n  const fieldSx: SxProps = useMemo(\n    () => (isJsonSubColumn ? jsonSubColumnFieldSx : topLevelColumnModelFieldSx),\n    [isJsonSubColumn],\n  )\n\n  const errorsByField = useMemo(() => {\n    if (validationErrors && isArray(validationErrors)) {\n      const errorsByField: Record<string, string> = {}\n      validationErrors.forEach(e => {\n        if (e.path) {\n          errorsByField[e.path[e.path.length - 1]] = e.message\n        }\n      })\n      return errorsByField\n    }\n    return {}\n  }, [validationErrors])\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'grid',\n          gridColumn: '1 / span 11',\n          gridTemplateColumns: 'subgrid',\n        }}\n      >\n        {isJsonSubColumn && (\n          <Box sx={{ gridColumn: '1 / span 1' }}>\n            {HIERARCHY_VERTICAL_LINE_COMPONENT}\n          </Box>\n        )}\n        <Box\n          data-testid={`ColumnModelForm`}\n          sx={{\n            display: 'flex',\n            alignItems: 'start',\n            gridColumn: isJsonSubColumn ? '2 / span 1' : ' 1 / span 1',\n            // Checkbox is offset from top; vertical centering causes issues when validation errors are displayed\n            mt: isJsonSubColumn ? '0px' : '5px',\n          }}\n        >\n          <Checkbox\n            checked={columnModel.isSelected}\n            inputProps={{ 'aria-label': 'Select' }}\n            disabled={disabled}\n            onChange={() => {\n              dispatch({\n                type: 'toggleSelect',\n                columnModelIndex,\n                jsonSubColumnModelIndex: jsonSubColumnIndex,\n              })\n            }}\n          />\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n            gridColumn: isJsonSubColumn\n              ? /* If this is a JSON Subcolumn, we reduce the width of this grid column to create space to render the visual hierarchical line */\n                '3 / span 1'\n              : /* Otherwise, span across both grid columns  */\n                '2 / span 2',\n          }}\n        >\n          {isDefaultColumn ? (\n            columnModel.name\n          ) : (\n            <TextField\n              value={columnModel.name}\n              placeholder={isJsonSubColumn ? 'Facet name' : 'Column name'}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    name: e.target.value,\n                  },\n                })\n              }}\n              disabled={disabled}\n              fullWidth\n              error={!!errorsByField['name']}\n              helperText={errorsByField['name']}\n              slotProps={{\n                input: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  sx: fieldSx,\n                  slotProps: {\n                    input: {\n                      'aria-label': 'Name',\n                    },\n                  },\n                },\n              }}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            getColumnTypeFriendlyName(columnModel.columnType)\n          ) : (\n            <FormControl fullWidth>\n              <Select\n                label=\"Column Type\"\n                value={columnModel.columnType}\n                onChange={e => {\n                  dispatch({\n                    type: 'changeColumnModelType',\n                    columnModelIndex,\n                    jsonSubColumnModelIndex: jsonSubColumnIndex,\n                    newColumnType: e.target.value as ColumnTypeEnum,\n                  })\n                }}\n                slotProps={{\n                  input: {\n                    'aria-label': 'Column Type',\n                  },\n                }}\n                sx={fieldSx}\n                disabled={disabled}\n                error={!!errorsByField['columnType']}\n              >\n                {allowedColumnTypes.map(value => {\n                  return (\n                    <MenuItem value={value} key={value}>\n                      {getColumnTypeFriendlyName(value)}\n                    </MenuItem>\n                  )\n                })}\n              </Select>\n              {errorsByField['columnType'] && (\n                <FormHelperText color={'error.main'}>\n                  {errorsByField['columnType']}\n                </FormHelperText>\n              )}\n            </FormControl>\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            (columnModel as ColumnModelFormData).maximumSize ?? ''\n          ) : (\n            <FieldWithRecommendedMinimum\n              value={(columnModel as ColumnModelFormData).maximumSize ?? ''}\n              originalValue={originalColumnModel?.maximumSize}\n              recommendedValue={defaultAnnotationModel?.maximumSize}\n              columnType={columnModel.columnType as ColumnTypeEnum}\n              disabled={disabled || !canHaveSize(columnModel.columnType)}\n              InputProps={{\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n\n                slotProps: {\n                  input: {\n                    'aria-label': 'Maximum Size',\n                    min: 1,\n                    max: canHaveSize(columnModel.columnType)\n                      ? getMaxSizeForType(columnModel.columnType)\n                      : undefined,\n                  },\n                },\n                sx: fieldSx,\n              }}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    maximumSize: e.target.value,\n                  },\n                })\n              }}\n              fullWidth\n              error={!!errorsByField['maximumSize']}\n              helperText={errorsByField['maximumSize']}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            (columnModel as ColumnModelFormData).maximumListLength ?? ''\n          ) : (\n            <FieldWithRecommendedMinimum\n              value={\n                (columnModel as ColumnModelFormData).maximumListLength ?? ''\n              }\n              originalValue={originalColumnModel?.maximumListLength}\n              recommendedValue={defaultAnnotationModel?.maximumListLength}\n              columnType={columnModel.columnType as ColumnTypeEnum}\n              disabled={\n                disabled || !canHaveMaxListLength(columnModel.columnType)\n              }\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    maximumListLength: e.target.value,\n                  },\n                })\n              }}\n              InputProps={{\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Maximum List Length',\n                  },\n                },\n                sx: fieldSx,\n              }}\n              fullWidth\n              error={!!errorsByField['maximumListLength']}\n              helperText={errorsByField['maximumListLength']}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            renderDefaultValue(\n              (columnModel as ColumnModelFormData)?.defaultValue,\n              columnModel.columnType as ColumnTypeEnum,\n            )\n          ) : (\n            <DefaultValueField\n              TextFieldProps={{\n                InputProps: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  slotProps: {\n                    input: {\n                      'aria-label': 'Default Value',\n                    },\n                  },\n                  sx: fieldSx,\n                },\n                fullWidth: true,\n                error: !!errorsByField['defaultValue'],\n                helperText: errorsByField['defaultValue'],\n              }}\n              SelectProps={{\n                label: 'Default Value',\n                sx: fieldSx,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Default Value',\n                  },\n                },\n                error: !!errorsByField['defaultValue'],\n              }}\n              selectFormHelperText={errorsByField['defaultValue']}\n              columnModel={columnModel as ColumnModelFormData}\n              value={(columnModel as ColumnModelFormData)?.defaultValue || null}\n              onChange={value => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    defaultValue: value || undefined,\n                  },\n                })\n              }}\n              disabled={\n                disabled ||\n                !canHaveDefault(columnModel.columnType, isView, isJsonSubColumn)\n              }\n            />\n          )}\n        </Box>\n        <Box>\n          <MultiValueField\n            value={(columnModel as ColumnModelFormData)?.enumValues}\n            onChange={newValue => {\n              dispatch({\n                type: 'setColumnModelValue',\n                columnModelIndex,\n                jsonSubColumnModelIndex: jsonSubColumnIndex,\n                value: {\n                  ...columnModel,\n                  enumValues:\n                    newValue == null || isEmpty(newValue)\n                      ? undefined\n                      : newValue,\n                },\n              })\n            }}\n            columnType={columnModel.columnType as ColumnTypeEnum}\n            TextFieldProps={{\n              fullWidth: true,\n              disabled:\n                disabled ||\n                !canHaveRestrictedValues(\n                  columnModel.columnType,\n                  isJsonSubColumn,\n                ),\n              InputProps: {\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                // Is readOnly because edits are made with the JSONArrayEditorModal\n                readOnly: true,\n                sx: fieldSx,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Restrict Values',\n                  },\n                },\n              },\n              error: !!errorsByField['enumValues'],\n              helperText: errorsByField['enumValues'],\n            }}\n          />\n        </Box>\n        <Box>\n          <FormControl fullWidth>\n            <Select\n              label=\"Facet Type\"\n              value={columnModel.facetType || ''}\n              disabled={disabled || allowedFacetTypes === null}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    facetType: e.target.value as FacetType,\n                  },\n                })\n              }}\n              sx={fieldSx}\n              slotProps={{\n                input: {\n                  'aria-label': 'Facet Type',\n                },\n              }}\n              error={!!errorsByField['facetType']}\n            >\n              {(allowedFacetTypes ?? []).map((value, index) => {\n                return (\n                  <MenuItem value={value} key={index}>\n                    {value === undefined ? '' : getFacetTypeFriendlyName(value)}\n                  </MenuItem>\n                )\n              })}\n            </Select>\n            {errorsByField['facetType'] && (\n              <FormHelperText color={'error.main'}>\n                {errorsByField['facetType']}\n              </FormHelperText>\n            )}\n          </FormControl>\n        </Box>\n        <Box>\n          <FormControl fullWidth>\n            <Select\n              label=\"Sort Facet Values\"\n              value={facetSortConfigToValue(\n                'facetSortConfig' in columnModel\n                  ? columnModel.facetSortConfig\n                  : undefined,\n              )}\n              disabled={disabled || columnModel.facetType !== 'enumeration'}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    facetSortConfig: valueToFacetSortConfig(\n                      e.target.value as FacetSortValue,\n                    ),\n                  },\n                })\n              }}\n              sx={fieldSx}\n              slotProps={{\n                input: {\n                  'aria-label': 'Sort Facet Values',\n                },\n              }}\n              error={!!errorsByField['facetSortConfig']}\n            >\n              <MenuItem value=\"FREQUENCY_DESC\">Frequency Descending</MenuItem>\n              <MenuItem value=\"FREQUENCY_ASC\">Frequency Ascending</MenuItem>\n              <MenuItem value=\"VALUE_DESC\">Value Descending</MenuItem>\n              <MenuItem value=\"VALUE_ASC\">Value Ascending</MenuItem>\n            </Select>\n            {errorsByField['facetSortConfig'] && (\n              <FormHelperText color={'error.main'}>\n                {errorsByField['facetSortConfig']}\n              </FormHelperText>\n            )}\n          </FormControl>\n        </Box>\n      </Box>\n      {isJsonSubColumn && (\n        <Box\n          sx={{\n            display: 'grid',\n            gridColumn: '1 / span 11',\n            gridTemplateColumns: 'subgrid',\n          }}\n        >\n          <Box\n            sx={{\n              gridColumn: '1 / span 1',\n            }}\n          >\n            {HIERARCHY_VERTICAL_LINE_COMPONENT}\n          </Box>\n          <Box></Box>\n          <Box\n            sx={{\n              gridColumn: '3 / span 7',\n            }}\n          >\n            <TextField\n              placeholder={'JSON Path'}\n              value={(columnModel as JsonSubColumnModelFormData).jsonPath}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...(columnModel as JsonSubColumnModelFormData),\n                    jsonPath: e.target.value,\n                  },\n                })\n              }}\n              disabled={disabled}\n              fullWidth\n              slotProps={{\n                input: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  sx: fieldSx,\n                  endAdornment: (\n                    <Tooltip\n                      title={\n                        <>\n                          <p>\n                            <Link\n                              href={\n                                'https://dev.mysql.com/doc/refman/8.0/en/json.html#json-path-syntax'\n                              }\n                            >\n                              Please use a valid JSON Path selector, following\n                              this format.\n                            </Link>\n                          </p>\n                          <p>\n                            This field is for linking the sub-column facet to\n                            the corresponding location in the JSON data, so that\n                            it can be used as facet filter. The correct selector\n                            will point to the key referenced in the sub-column\n                            JSON Path.\n                          </p>\n                        </>\n                      }\n                    >\n                      <InfoTwoTone sx={{ color: 'grey.700' }} />\n                    </Tooltip>\n                  ),\n                  slotProps: {\n                    input: { 'aria-label': 'JSON Path' },\n                  },\n                },\n              }}\n              error={!!errorsByField['jsonPath']}\n              helperText={errorsByField['jsonPath']}\n            />\n          </Box>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColumnModelForm.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/ColumnModelForm.tsx"],"sourcesContent":["import { convertToConcreteEntityType } from '@/utils/functions/EntityTypeUtils'\nimport { InfoTwoTone } from '@mui/icons-material'\nimport {\n  Box,\n  Checkbox,\n  FormControl,\n  Link,\n  MenuItem,\n  Select,\n  SxProps,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n  ColumnModel,\n  ColumnTypeEnum,\n  FacetType,\n  VIEW_CONCRETE_TYPE_VALUES,\n  FacetColumnSortConfig,\n} from '@sage-bionetworks/synapse-types'\nimport { useAtomValue, useSetAtom } from 'jotai'\nimport { selectAtom } from 'jotai/utils'\nimport { isArray, isEmpty, isEqual } from 'lodash-es'\nimport { useMemo } from 'react'\nimport { ZodIssue } from 'zod'\nimport DefaultValueField from './ColumnModelFormFields/DefaultValueField'\nimport { FieldWithRecommendedMinimum } from './ColumnModelFormFields/FieldWithRecommendedMinimum'\nimport MultiValueField from './ColumnModelFormFields/MultiValueField'\nimport {\n  canHaveDefault,\n  canHaveMaxListLength,\n  canHaveRestrictedValues,\n  canHaveSize,\n  configureFacetsForType,\n  getAllowedColumnTypes,\n  getColumnTypeFriendlyName,\n  getFacetTypeFriendlyName,\n  getMaxSizeForType,\n} from './TableColumnSchemaEditorUtils'\nimport { HIERARCHY_VERTICAL_LINE_COMPONENT } from './TableColumnSchemaForm'\nimport { tableColumnSchemaFormDataAtom } from './TableColumnSchemaFormReducer'\nimport {\n  ColumnModelFormData,\n  JsonSubColumnModelFormData,\n} from './Validators/ColumnModelValidator'\n\ntype ColumnModelFormProps = {\n  entityType: EntityType\n  columnModelIndex: number\n  jsonSubColumnIndex?: number\n  /* Default Columns are read-only, except for the facetType */\n  isDefaultColumn: boolean\n  disabled?: boolean\n  /* Can be used to override the schema used for validating ColumnModels */\n  validationErrors?: ZodIssue[] | null\n  defaultAnnotationModel?: ColumnModel | null\n  originalColumnModel?: ColumnModel | null\n}\nconst jsonSubColumnFieldSx: SxProps = {\n  height: '28px',\n  fontSize: '12px',\n}\nconst topLevelColumnModelFieldSx: SxProps = {\n  height: '38px',\n  fontSize: '14px',\n}\n\nfunction renderDefaultValue(\n  defaultValue: string | unknown[] | undefined,\n  _columnType: ColumnTypeEnum,\n): string {\n  if (defaultValue == null) {\n    return ''\n  }\n\n  if (isArray(defaultValue)) {\n    return defaultValue.map(String).join(', ')\n  }\n  return defaultValue\n}\n\n// Helper type for the combined sort configuration value\ntype FacetSortValue =\n  | 'FREQUENCY_DESC'\n  | 'FREQUENCY_ASC'\n  | 'VALUE_DESC'\n  | 'VALUE_ASC'\n  | ''\n\n/**\n * Converts a FacetColumnSortConfig object to a single string value for the select dropdown\n */\nfunction facetSortConfigToValue(\n  config: FacetColumnSortConfig | undefined,\n): FacetSortValue {\n  if (!config || (!config.property && !config.direction)) {\n    return ''\n  }\n  const property = config.property || 'FREQUENCY'\n  const direction = config.direction || 'DESC'\n  return `${property}_${direction}` as FacetSortValue\n}\n\n/**\n * Converts a select dropdown value to a FacetColumnSortConfig object\n */\nfunction valueToFacetSortConfig(\n  value: FacetSortValue,\n): FacetColumnSortConfig | undefined {\n  if (!value) {\n    return undefined\n  }\n  const [property, direction] = value.split('_') as [\n    'FREQUENCY' | 'VALUE',\n    'DESC' | 'ASC',\n  ]\n  return { property, direction }\n}\n\n/*\n * Disable immediate MUI/Emotion style injection because it causes performance issues when adding many columns at once.\n * This can be a common occurence when adding annotation columns\n */\nconst DISABLE_INJECTING_GLOBAL_STYLES_VALUE = true\n\nexport default function ColumnModelForm(props: ColumnModelFormProps) {\n  const {\n    columnModelIndex,\n    jsonSubColumnIndex,\n    entityType,\n    isDefaultColumn,\n    disabled = false,\n    validationErrors = null,\n    defaultAnnotationModel,\n    originalColumnModel,\n  } = props\n  const isJsonSubColumn = jsonSubColumnIndex != undefined\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const isView = (VIEW_CONCRETE_TYPE_VALUES as readonly string[]).includes(\n    convertToConcreteEntityType(entityType),\n  )\n\n  const columnModelAtom = useMemo(\n    () =>\n      selectAtom(\n        tableColumnSchemaFormDataAtom,\n        v =>\n          isJsonSubColumn\n            ? v[columnModelIndex].jsonSubColumns![jsonSubColumnIndex]\n            : v[columnModelIndex],\n        isEqual,\n      ),\n    [columnModelIndex, isJsonSubColumn, jsonSubColumnIndex],\n  )\n\n  const columnModel = useAtomValue(columnModelAtom)\n\n  const allowedColumnTypes = useMemo(\n    () => getAllowedColumnTypes(isView, isJsonSubColumn),\n    [isView, isJsonSubColumn],\n  )\n\n  const allowedFacetTypes = useMemo(\n    () => configureFacetsForType(columnModel.columnType, isJsonSubColumn),\n    [columnModel.columnType, isJsonSubColumn],\n  )\n  const fieldSx: SxProps = useMemo(\n    () => (isJsonSubColumn ? jsonSubColumnFieldSx : topLevelColumnModelFieldSx),\n    [isJsonSubColumn],\n  )\n\n  const errorsByField = useMemo(() => {\n    if (validationErrors && isArray(validationErrors)) {\n      const errorsByField: Record<string, string> = {}\n      validationErrors.forEach(e => {\n        if (e.path) {\n          errorsByField[e.path[e.path.length - 1]] = e.message\n        }\n      })\n      return errorsByField\n    }\n    return {}\n  }, [validationErrors])\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'grid',\n          gridColumn: '1 / span 11',\n          gridTemplateColumns: 'subgrid',\n        }}\n      >\n        {isJsonSubColumn && (\n          <Box sx={{ gridColumn: '1 / span 1' }}>\n            {HIERARCHY_VERTICAL_LINE_COMPONENT}\n          </Box>\n        )}\n        <Box\n          data-testid={`ColumnModelForm`}\n          sx={{\n            display: 'flex',\n            alignItems: 'start',\n            gridColumn: isJsonSubColumn ? '2 / span 1' : ' 1 / span 1',\n            // Checkbox is offset from top; vertical centering causes issues when validation errors are displayed\n            mt: isJsonSubColumn ? '0px' : '5px',\n          }}\n        >\n          <Checkbox\n            checked={columnModel.isSelected}\n            inputProps={{ 'aria-label': 'Select' }}\n            disabled={disabled}\n            onChange={() => {\n              dispatch({\n                type: 'toggleSelect',\n                columnModelIndex,\n                jsonSubColumnModelIndex: jsonSubColumnIndex,\n              })\n            }}\n          />\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n            gridColumn: isJsonSubColumn\n              ? /* If this is a JSON Subcolumn, we reduce the width of this grid column to create space to render the visual hierarchical line */\n                '3 / span 1'\n              : /* Otherwise, span across both grid columns  */\n                '2 / span 2',\n          }}\n        >\n          {isDefaultColumn ? (\n            columnModel.name\n          ) : (\n            <TextField\n              value={columnModel.name}\n              placeholder={isJsonSubColumn ? 'Facet name' : 'Column name'}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    name: e.target.value,\n                  },\n                })\n              }}\n              disabled={disabled}\n              fullWidth\n              error={!!errorsByField['name']}\n              helperText={errorsByField['name']}\n              slotProps={{\n                input: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  sx: fieldSx,\n                  slotProps: {\n                    input: {\n                      'aria-label': 'Name',\n                    },\n                  },\n                },\n              }}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            getColumnTypeFriendlyName(columnModel.columnType)\n          ) : (\n            <FormControl fullWidth>\n              <Select\n                label=\"Column Type\"\n                value={columnModel.columnType}\n                onChange={e => {\n                  dispatch({\n                    type: 'changeColumnModelType',\n                    columnModelIndex,\n                    jsonSubColumnModelIndex: jsonSubColumnIndex,\n                    newColumnType: e.target.value as ColumnTypeEnum,\n                  })\n                }}\n                slotProps={{\n                  input: {\n                    'aria-label': 'Column Type',\n                  },\n                }}\n                sx={fieldSx}\n                disabled={disabled}\n                error={!!errorsByField['columnType']}\n              >\n                {allowedColumnTypes.map(value => {\n                  return (\n                    <MenuItem value={value} key={value}>\n                      {getColumnTypeFriendlyName(value)}\n                    </MenuItem>\n                  )\n                })}\n              </Select>\n              {errorsByField['columnType'] && (\n                <FormHelperText color={'error.main'}>\n                  {errorsByField['columnType']}\n                </FormHelperText>\n              )}\n            </FormControl>\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            ((columnModel as ColumnModelFormData).maximumSize ?? '')\n          ) : (\n            <FieldWithRecommendedMinimum\n              value={(columnModel as ColumnModelFormData).maximumSize ?? ''}\n              originalValue={originalColumnModel?.maximumSize}\n              recommendedValue={defaultAnnotationModel?.maximumSize}\n              columnType={columnModel.columnType as ColumnTypeEnum}\n              disabled={disabled || !canHaveSize(columnModel.columnType)}\n              InputProps={{\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n\n                slotProps: {\n                  input: {\n                    'aria-label': 'Maximum Size',\n                    min: 1,\n                    max: canHaveSize(columnModel.columnType)\n                      ? getMaxSizeForType(columnModel.columnType)\n                      : undefined,\n                  },\n                },\n                sx: fieldSx,\n              }}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    maximumSize: e.target.value,\n                  },\n                })\n              }}\n              fullWidth\n              error={!!errorsByField['maximumSize']}\n              helperText={errorsByField['maximumSize']}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            ((columnModel as ColumnModelFormData).maximumListLength ?? '')\n          ) : (\n            <FieldWithRecommendedMinimum\n              value={\n                (columnModel as ColumnModelFormData).maximumListLength ?? ''\n              }\n              originalValue={originalColumnModel?.maximumListLength}\n              recommendedValue={defaultAnnotationModel?.maximumListLength}\n              columnType={columnModel.columnType as ColumnTypeEnum}\n              disabled={\n                disabled || !canHaveMaxListLength(columnModel.columnType)\n              }\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    maximumListLength: e.target.value,\n                  },\n                })\n              }}\n              InputProps={{\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Maximum List Length',\n                  },\n                },\n                sx: fieldSx,\n              }}\n              fullWidth\n              error={!!errorsByField['maximumListLength']}\n              helperText={errorsByField['maximumListLength']}\n            />\n          )}\n        </Box>\n        <Box\n          sx={{\n            my: isDefaultColumn ? 'auto' : undefined,\n          }}\n        >\n          {isDefaultColumn ? (\n            renderDefaultValue(\n              (columnModel as ColumnModelFormData)?.defaultValue,\n              columnModel.columnType as ColumnTypeEnum,\n            )\n          ) : (\n            <DefaultValueField\n              TextFieldProps={{\n                InputProps: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  slotProps: {\n                    input: {\n                      'aria-label': 'Default Value',\n                    },\n                  },\n                  sx: fieldSx,\n                },\n                fullWidth: true,\n                error: !!errorsByField['defaultValue'],\n                helperText: errorsByField['defaultValue'],\n              }}\n              SelectProps={{\n                label: 'Default Value',\n                sx: fieldSx,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Default Value',\n                  },\n                },\n                error: !!errorsByField['defaultValue'],\n              }}\n              selectFormHelperText={errorsByField['defaultValue']}\n              columnModel={columnModel as ColumnModelFormData}\n              value={(columnModel as ColumnModelFormData)?.defaultValue || null}\n              onChange={value => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    defaultValue: value || undefined,\n                  },\n                })\n              }}\n              disabled={\n                disabled ||\n                !canHaveDefault(columnModel.columnType, isView, isJsonSubColumn)\n              }\n            />\n          )}\n        </Box>\n        <Box>\n          <MultiValueField\n            value={(columnModel as ColumnModelFormData)?.enumValues}\n            onChange={newValue => {\n              dispatch({\n                type: 'setColumnModelValue',\n                columnModelIndex,\n                jsonSubColumnModelIndex: jsonSubColumnIndex,\n                value: {\n                  ...columnModel,\n                  enumValues:\n                    newValue == null || isEmpty(newValue)\n                      ? undefined\n                      : newValue,\n                },\n              })\n            }}\n            columnType={columnModel.columnType as ColumnTypeEnum}\n            TextFieldProps={{\n              fullWidth: true,\n              disabled:\n                disabled ||\n                !canHaveRestrictedValues(\n                  columnModel.columnType,\n                  isJsonSubColumn,\n                ),\n              InputProps: {\n                disableInjectingGlobalStyles:\n                  DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                // Is readOnly because edits are made with the JSONArrayEditorModal\n                readOnly: true,\n                sx: fieldSx,\n                slotProps: {\n                  input: {\n                    'aria-label': 'Restrict Values',\n                  },\n                },\n              },\n              error: !!errorsByField['enumValues'],\n              helperText: errorsByField['enumValues'],\n            }}\n          />\n        </Box>\n        <Box>\n          <FormControl fullWidth>\n            <Select\n              label=\"Facet Type\"\n              value={columnModel.facetType || ''}\n              disabled={disabled || allowedFacetTypes === null}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    facetType: e.target.value as FacetType,\n                  },\n                })\n              }}\n              sx={fieldSx}\n              slotProps={{\n                input: {\n                  'aria-label': 'Facet Type',\n                },\n              }}\n              error={!!errorsByField['facetType']}\n            >\n              {(allowedFacetTypes ?? []).map((value, index) => {\n                return (\n                  <MenuItem value={value} key={index}>\n                    {value === undefined ? '' : getFacetTypeFriendlyName(value)}\n                  </MenuItem>\n                )\n              })}\n            </Select>\n            {errorsByField['facetType'] && (\n              <FormHelperText color={'error.main'}>\n                {errorsByField['facetType']}\n              </FormHelperText>\n            )}\n          </FormControl>\n        </Box>\n        <Box>\n          <FormControl fullWidth>\n            <Select\n              label=\"Sort Facet Values\"\n              value={facetSortConfigToValue(\n                'facetSortConfig' in columnModel\n                  ? columnModel.facetSortConfig\n                  : undefined,\n              )}\n              disabled={disabled || columnModel.facetType !== 'enumeration'}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...columnModel,\n                    facetSortConfig: valueToFacetSortConfig(\n                      e.target.value as FacetSortValue,\n                    ),\n                  },\n                })\n              }}\n              sx={fieldSx}\n              slotProps={{\n                input: {\n                  'aria-label': 'Sort Facet Values',\n                },\n              }}\n              error={!!errorsByField['facetSortConfig']}\n            >\n              <MenuItem value=\"FREQUENCY_DESC\">Frequency Descending</MenuItem>\n              <MenuItem value=\"FREQUENCY_ASC\">Frequency Ascending</MenuItem>\n              <MenuItem value=\"VALUE_DESC\">Value Descending</MenuItem>\n              <MenuItem value=\"VALUE_ASC\">Value Ascending</MenuItem>\n            </Select>\n            {errorsByField['facetSortConfig'] && (\n              <FormHelperText color={'error.main'}>\n                {errorsByField['facetSortConfig']}\n              </FormHelperText>\n            )}\n          </FormControl>\n        </Box>\n      </Box>\n      {isJsonSubColumn && (\n        <Box\n          sx={{\n            display: 'grid',\n            gridColumn: '1 / span 11',\n            gridTemplateColumns: 'subgrid',\n          }}\n        >\n          <Box\n            sx={{\n              gridColumn: '1 / span 1',\n            }}\n          >\n            {HIERARCHY_VERTICAL_LINE_COMPONENT}\n          </Box>\n          <Box></Box>\n          <Box\n            sx={{\n              gridColumn: '3 / span 7',\n            }}\n          >\n            <TextField\n              placeholder={'JSON Path'}\n              value={(columnModel as JsonSubColumnModelFormData).jsonPath}\n              onChange={e => {\n                dispatch({\n                  type: 'setColumnModelValue',\n                  columnModelIndex,\n                  jsonSubColumnModelIndex: jsonSubColumnIndex,\n                  value: {\n                    ...(columnModel as JsonSubColumnModelFormData),\n                    jsonPath: e.target.value,\n                  },\n                })\n              }}\n              disabled={disabled}\n              fullWidth\n              slotProps={{\n                input: {\n                  disableInjectingGlobalStyles:\n                    DISABLE_INJECTING_GLOBAL_STYLES_VALUE,\n                  sx: fieldSx,\n                  endAdornment: (\n                    <Tooltip\n                      title={\n                        <>\n                          <p>\n                            <Link\n                              href={\n                                'https://dev.mysql.com/doc/refman/8.0/en/json.html#json-path-syntax'\n                              }\n                            >\n                              Please use a valid JSON Path selector, following\n                              this format.\n                            </Link>\n                          </p>\n                          <p>\n                            This field is for linking the sub-column facet to\n                            the corresponding location in the JSON data, so that\n                            it can be used as facet filter. The correct selector\n                            will point to the key referenced in the sub-column\n                            JSON Path.\n                          </p>\n                        </>\n                      }\n                    >\n                      <InfoTwoTone sx={{ color: 'grey.700' }} />\n                    </Tooltip>\n                  ),\n                  slotProps: {\n                    input: { 'aria-label': 'JSON Path' },\n                  },\n                },\n              }}\n              error={!!errorsByField['jsonPath']}\n              helperText={errorsByField['jsonPath']}\n            />\n          </Box>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/TableColumnSchemaEditor/ColumnModelFormFields/MultiValueField.js

@@ -1,6 +1,6 @@
 import { formatDate as e } from "../../../utils/functions/DateFormatter.js";
-import { getJsonSchemaItemDefinitionForColumnType as t } from "../TableColumnSchemaEditorUtils.js";
-import n from "../../JSONArrayEditor/JSONArrayEditorModal.js";
+import t from "../../JSONArrayEditor/JSONArrayEditorModal.js";
+import { getJsonSchemaItemDefinitionForColumnType as n } from "../TableColumnSchemaEditorUtils.js";
 import { useMemo as r, useState as i } from "react";
 import { TextField as a } from "@mui/material";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -8,8 +8,8 @@ import { ColumnTypeEnum as l } from "@sage-bionetworks/synapse-types";
 import u from "dayjs";
 //#region src/components/TableColumnSchemaEditor/ColumnModelFormFields/MultiValueField.tsx
 function d(d) {
-	let { columnType: f, onChange: p, value: m = [], TextFieldProps: h } = d, [g, _] = i(!1), v = r(() => t(f), [f]), y = r(() => m == null ? "" : f === l.DATE_LIST ? m.map((t) => e(u(t))).join(", ") : m.join(", "), [m, f]);
-	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(n, {
+	let { columnType: f, onChange: p, value: m = [], TextFieldProps: h } = d, [g, _] = i(!1), v = r(() => n(f), [f]), y = r(() => m == null ? "" : f === l.DATE_LIST ? m.map((t) => e(u(t))).join(", ") : m.join(", "), [m, f]);
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(t, {
 		arrayItemDefinition: v,
 		value: m ?? void 0,
 		isShowingModal: g,

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnSchemaForm.d.ts","sourceRoot":"","sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaForm.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EACL,WAAW,EAGX,SAAS,EACV,MAAM,iCAAiC,CAAA;AAcxC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAkBvC,eAAO,MAAM,iCAAiC,yCAS7C,CAAA;AACD,eAAO,MAAM,uBAAuB,yCAanC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAEzB,MAAM,EAAE,MAAM,IAAI,CAAA;IAElB,qBAAqB,EAAE,MAAM,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAA;IAE7D,QAAQ,EAAE,MAAM,OAAO,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAEhC,UAAU,EAAE,UAAU,CAAA;IAEtB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAA;IACtE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,uFAAuF;IACvF,oBAAoB,CAAC,EAAE,WAAW,EAAE,CAAA;CACrC,CAAA;AAQD,eAAO,MAAM,+BAA+B,wBAAwB,CAAA;AAqapE,QAAA,MAAM,4BAA4B,qHAWhC,CAAA;AAEF,eAAe,4BAA4B,CAAA"}
+{"version":3,"file":"TableColumnSchemaForm.d.ts","sourceRoot":"","sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaForm.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EACL,WAAW,EAGX,SAAS,EACV,MAAM,iCAAiC,CAAA;AAcxC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAkBvC,eAAO,MAAM,iCAAiC,yCAS7C,CAAA;AACD,eAAO,MAAM,uBAAuB,yCAanC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAEzB,MAAM,EAAE,MAAM,IAAI,CAAA;IAElB,qBAAqB,EAAE,MAAM,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAA;IAE7D,QAAQ,EAAE,MAAM,OAAO,CAAA;CACxB,CAAA;AAED,KAAK,0BAA0B,GAAG;IAEhC,UAAU,EAAE,UAAU,CAAA;IAEtB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAA;IACtE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,uFAAuF;IACvF,oBAAoB,CAAC,EAAE,WAAW,EAAE,CAAA;CACrC,CAAA;AAQD,eAAO,MAAM,+BAA+B,wBAAwB,CAAA;AAiapE,QAAA,MAAM,4BAA4B,qHAWhC,CAAA;AAEF,eAAe,4BAA4B,CAAA"}

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaForm.js

@@ -6,12 +6,12 @@ import i from "../../assets/icons/AddToList.js";
 import { useGetAnnotationColumnModels as a, useGetDefaultColumnModels as o } from "../../synapse-queries/table/useColumnModel.js";
 import { findMatchingColumnModel as s, getAllowedColumnTypes as c, transformColumnModelsToFormData as l } from "./TableColumnSchemaEditorUtils.js";
 import { tableColumnSchemaFormDataAtom as u } from "./TableColumnSchemaFormReducer.js";
-import d from "./ImportTableColumnsButton.js";
-import { TableColumnSchemaFormActions as f } from "./TableColumnSchemaFormActions.js";
-import { validateColumnModelFormData as p } from "./Validators/ColumnModelValidator.js";
-import m from "./ColumnModelForm.js";
-import { forwardRef as h, useCallback as g, useEffect as _, useImperativeHandle as v, useMemo as y, useState as b } from "react";
-import { groupBy as x, isEqual as S, noop as C, omit as ee, times as te } from "lodash-es";
+import d from "./ColumnModelForm.js";
+import f from "./ImportTableColumnsButton.js";
+import { TableColumnSchemaFormActions as p } from "./TableColumnSchemaFormActions.js";
+import { validateColumnModelFormData as m } from "./Validators/ColumnModelValidator.js";
+import { forwardRef as h, useCallback as g, useEffect as ee, useImperativeHandle as _, useMemo as v, useState as y } from "react";
+import { groupBy as b, isEqual as x, noop as S, omit as C, times as te } from "lodash-es";
 import { Box as w, Button as T, styled as E } from "@mui/material";
 import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
 import { ColumnTypeEnum as A, VIEW_CONCRETE_TYPE_VALUES as ne } from "@sage-bionetworks/synapse-types";
@@ -36,25 +36,25 @@ var R = "18px 18px 1.75fr 1.75fr 0.75fr 1fr 1.25fr 1.25fr 1fr 1.25fr", z = /* @_
 	borderBottomLeftRadius: "5px"
 }) }), V = E(w, { label: "ColumnHeader" })({ fontWeight: 700 }), H = "Add All Annotations";
 function U(i, s) {
-	let { initialData: m, entityType: h, viewScope: S, onSubmit: E = C, isSubmitting: D = !1, originalColumnModels: A } = i, j = M(y(() => re((e) => e(u).length), [])), I = N(u), [z, B] = b(null), H = L(g((e) => e(u), [])), U = t(h), W = ne.includes(U), G = W, K = W, { data: q, isLoading: J } = o(S?.viewEntityType, S?.viewTypeMask, {
+	let { initialData: d, entityType: h, viewScope: x, onSubmit: E = S, isSubmitting: D = !1, originalColumnModels: A } = i, j = M(v(() => re((e) => e(u).length), [])), I = N(u), [z, B] = y(null), H = L(g((e) => e(u), [])), U = t(h), W = ne.includes(U), G = W, K = W, { data: q, isLoading: J } = o(x?.viewEntityType, x?.viewTypeMask, {
 		enabled: K,
 		staleTime: Infinity
 	}), Y = a({
-		viewScope: S,
+		viewScope: x,
 		includeDerivedAnnotations: !0,
 		concreteType: "org.sagebionetworks.repo.model.table.ViewColumnModelRequest"
 	}, { enabled: G }), { data: X, isLoading: Z } = Y;
-	_(() => {
-		m && !J && I({
+	ee(() => {
+		d && !J && I({
 			type: "setValue",
-			value: l(m, q ?? [])
+			value: l(d, q ?? [])
 		});
 	}, [J]);
 	let Q = g(() => {
-		let e = p(H());
+		let e = m(H());
 		return e.success ? B(null) : B(e.error), e;
 	}, [H]);
-	v(s, () => ({
+	_(s, () => ({
 		submit() {
 			let e = Q();
 			e.success && E(e.data);
@@ -70,7 +70,7 @@ function U(i, s) {
 	}), [E, Q]);
 	let $ = g((t) => {
 		let n = H(), r = t.filter((e) => c(W, !1).includes(e.columnType) ? !n.find((t) => t.name === e.name) : !1);
-		r = r.map((e) => ee(e, ["id"])), r.length > 0 ? (I({
+		r = r.map((e) => C(e, ["id"])), r.length > 0 ? (I({
 			type: "setValue",
 			value: [...n, ...l(r, q)]
 		}), e(`${r.length} ${F("column", r.length)} added to schema.`, "success")) : e("No columns added. All columns to add are present in the column schema.", "info");
@@ -83,12 +83,12 @@ function U(i, s) {
 		q && $(q);
 	}, [q, $]), oe = g(() => {
 		X && $(X);
-	}, [X, $]), se = y(() => z ? x(z.errors, (e) => e.path[0]) : {}, [z]);
+	}, [X, $]), se = v(() => z ? b(z.errors, (e) => e.path[0]) : {}, [z]);
 	return /* @__PURE__ */ k(w, {
 		component: "form",
 		sx: { py: 2.5 },
 		children: [
-			/* @__PURE__ */ O(f, {
+			/* @__PURE__ */ O(p, {
 				disabled: D,
 				annotationColumnModelsQuery: Y
 			}),
@@ -164,7 +164,7 @@ function U(i, s) {
 						},
 						children: "Add All Annotations"
 					}),
-					/* @__PURE__ */ O(d, {
+					/* @__PURE__ */ O(f, {
 						onAddColumns: (e) => {
 							$(e);
 						},
@@ -176,20 +176,20 @@ function U(i, s) {
 	});
 }
 function ie(e) {
-	let { columnModelIndex: t, entityType: n, disabled: r, columnModelValidationErrors: a = null, annotationColumnModels: o, originalColumnModels: c } = e, l = N(u), d = M(y(() => I(u, (e) => e[t], S), [t])), f = c ? s(c, d) : void 0, p = o ? s(o, d) : void 0, h = y(() => a ? x(a.filter((e) => e.path[0] === t && e.path[1] == "jsonSubColumns"), (e) => e.path[2]) : {}, [t, a]);
-	if (!d) return /* @__PURE__ */ O(D, {});
-	let g = d.isOriginallyDefaultColumn;
+	let { columnModelIndex: t, entityType: n, disabled: r, columnModelValidationErrors: a = null, annotationColumnModels: o, originalColumnModels: c } = e, l = N(u), f = M(v(() => I(u, (e) => e[t], x), [t])), p = c ? s(c, f) : void 0, m = o ? s(o, f) : void 0, h = v(() => a ? b(a.filter((e) => e.path[0] === t && e.path[1] == "jsonSubColumns"), (e) => e.path[2]) : {}, [t, a]);
+	if (!f) return /* @__PURE__ */ O(D, {});
+	let g = f.isOriginallyDefaultColumn;
 	return /* @__PURE__ */ k(D, { children: [
-		/* @__PURE__ */ O(m, {
+		/* @__PURE__ */ O(d, {
 			entityType: n,
 			columnModelIndex: t,
 			isDefaultColumn: g,
 			disabled: r,
 			validationErrors: a,
-			defaultAnnotationModel: p,
-			originalColumnModel: f
+			defaultAnnotationModel: m,
+			originalColumnModel: p
 		}),
-		d.columnType === A.JSON && d.jsonSubColumns && d.jsonSubColumns.map((e, i) => /* @__PURE__ */ O(m, {
+		f.columnType === A.JSON && f.jsonSubColumns && f.jsonSubColumns.map((e, i) => /* @__PURE__ */ O(d, {
 			entityType: n,
 			columnModelIndex: t,
 			jsonSubColumnIndex: i,
@@ -197,7 +197,7 @@ function ie(e) {
 			disabled: r,
 			validationErrors: h[i]
 		}, i)),
-		d.columnType === A.JSON && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(w, {
+		f.columnType === A.JSON && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(w, {
 			sx: { gridColumn: "1 / span 2" },
 			children: B
 		}), /* @__PURE__ */ O(w, {

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnSchemaForm.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaForm.tsx"],"sourcesContent":["import AddToList from '@/assets/icons/AddToList'\nimport {\n  useGetAnnotationColumnModels,\n  useGetDefaultColumnModels,\n} from '@/synapse-queries/table/useColumnModel'\nimport {\n  convertToConcreteEntityType,\n  entityTypeToFriendlyName,\n} from '@/utils/functions/EntityTypeUtils'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, styled } from '@mui/material'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n  ColumnModel,\n  ColumnTypeEnum,\n  VIEW_CONCRETE_TYPE_VALUES,\n  ViewScope,\n} from '@sage-bionetworks/synapse-types'\nimport { atom, Provider, useAtomValue, useSetAtom } from 'jotai'\nimport { selectAtom, useAtomCallback } from 'jotai/utils'\nimport { groupBy, isEqual, noop, omit, times } from 'lodash-es'\nimport pluralize from 'pluralize'\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\nimport { SetOptional } from 'type-fest'\nimport { ZodError, ZodIssue } from 'zod'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { displayToast } from '../ToastMessage'\nimport ColumnModelForm from './ColumnModelForm'\nimport ImportTableColumnsButton from './ImportTableColumnsButton'\nimport {\n  findMatchingColumnModel,\n  getAllowedColumnTypes,\n  transformColumnModelsToFormData,\n} from './TableColumnSchemaEditorUtils'\nimport { TableColumnSchemaFormActions } from './TableColumnSchemaFormActions'\nimport { tableColumnSchemaFormDataAtom } from './TableColumnSchemaFormReducer'\nimport { validateColumnModelFormData } from './Validators/ColumnModelValidator'\n\nconst COLUMN_SCHEMA_FORM_GRID_TEMPLATE_COLUMNS =\n  '18px 18px 1.75fr 1.75fr 0.75fr 1fr 1.25fr 1.25fr 1fr 1.25fr'\nconst GRID_CONTAINER_Y_MARGIN_PX = 6\nexport const HIERARCHY_VERTICAL_LINE_COMPONENT = (\n  <Box\n    sx={{\n      width: '1px',\n      height: `calc(100% + 2 * ${GRID_CONTAINER_Y_MARGIN_PX}px)`,\n      backgroundColor: 'grey.400',\n      marginLeft: '8px',\n    }}\n  />\n)\nexport const HIERARCHY_END_COMPONENT = (\n  <Box\n    sx={theme => ({\n      width: '50%',\n      height: '60%',\n      borderLeft: `1px solid ${theme.palette.grey[400]}`,\n      borderBottom: `1px solid ${theme.palette.grey[400]}`,\n      marginLeft: '8px',\n      marginBottom: 'auto',\n      marginRight: '0',\n      borderBottomLeftRadius: '5px',\n    })}\n  />\n)\n\nexport type SubmitHandle = {\n  // Allow the parent component to trigger a submit of the form, so this may be embedded in an arbitrary modal.\n  submit: () => void\n  // Imperative handle to get the data out of the form for SWC compatibility\n  getEditedColumnModels: () => SetOptional<ColumnModel, 'id'>[]\n  // Used to check if all form data is valid. Returns the current validity state\n  validate: () => boolean\n}\n\ntype TableColumnSchemaFormProps = {\n  /* The type of the Table, which determines various schema restrictions and form functionality */\n  entityType: EntityType\n  /* If this is an entity view, the ViewScope can be used to determine the default column models and fetch annotation column models */\n  viewScope?: ViewScope\n  initialData?: SetOptional<ColumnModel, 'id'>[]\n  onSubmit?: (newColumnModels: SetOptional<ColumnModel, 'id'>[]) => void\n  isSubmitting?: boolean\n  /** The original/current column models that are applied to the table, if they exist. */\n  originalColumnModels?: ColumnModel[]\n}\n\nconst ColumnHeader = styled(Box, {\n  label: 'ColumnHeader',\n})({\n  fontWeight: 700,\n})\n\nexport const ADD_ALL_ANNOTATIONS_BUTTON_TEXT = 'Add All Annotations'\n\nfunction TableColumnSchemaFormInternal(\n  props: TableColumnSchemaFormProps,\n  ref: ForwardedRef<SubmitHandle>,\n) {\n  const {\n    initialData,\n    entityType,\n    viewScope,\n    onSubmit = noop,\n    isSubmitting = false,\n    originalColumnModels,\n  } = props\n\n  const numColumnModels = useAtomValue(\n    useMemo(() => atom(get => get(tableColumnSchemaFormDataAtom).length), []),\n  )\n\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const [validationErrors, setValidationErrors] = useState<ZodError | null>(\n    null,\n  )\n\n  // useAtomCallback will let us imperatively read the form data, instead of tracking it in state and triggering a full re-render of the form when any data changes\n  const readFormData = useAtomCallback(\n    useCallback(get => {\n      return get(tableColumnSchemaFormDataAtom)\n    }, []),\n  )\n  const concreteTableType = convertToConcreteEntityType(entityType)\n  const isView = VIEW_CONCRETE_TYPE_VALUES.includes(\n    concreteTableType as (typeof VIEW_CONCRETE_TYPE_VALUES)[number],\n  )\n  const hasAnnotationColumnModels = isView,\n    hasDefaultColumnModels = isView\n\n  const { data: defaultColumnModels, isLoading: isLoadingDefaultColumns } =\n    useGetDefaultColumnModels(\n      viewScope?.viewEntityType!,\n      viewScope?.viewTypeMask,\n      {\n        enabled: hasDefaultColumnModels,\n        staleTime: Infinity, // The default column models will never change\n      },\n    )\n\n  const annotationColumnModelsQuery = useGetAnnotationColumnModels(\n    {\n      viewScope: viewScope!,\n      includeDerivedAnnotations: true,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.ViewColumnModelRequest',\n    },\n    {\n      enabled: hasAnnotationColumnModels,\n    },\n  )\n\n  const {\n    data: annotationColumnModels,\n    isLoading: isLoadingAnnotationColumns,\n  } = annotationColumnModelsQuery\n\n  /**\n   * Set the initialData in the form state atom on mount, if it exists and we have no data.\n   */\n  useEffect(() => {\n    if (initialData && !isLoadingDefaultColumns) {\n      dispatch({\n        type: 'setValue',\n        value: transformColumnModelsToFormData(\n          initialData,\n          defaultColumnModels ?? [],\n        ),\n      })\n    }\n    // Don't re-run if initial data changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoadingDefaultColumns])\n\n  const validateInternal = useCallback(() => {\n    const result = validateColumnModelFormData(readFormData())\n    if (result.success) {\n      setValidationErrors(null)\n    } else {\n      setValidationErrors(result.error)\n    }\n    return result\n  }, [readFormData])\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        submit() {\n          const result = validateInternal()\n          if (result.success) {\n            onSubmit(result.data)\n          }\n        },\n        getEditedColumnModels() {\n          const result = validateInternal()\n          if (!result.success) {\n            throw new Error('Column models were not valid')\n          }\n          return result.data\n        },\n        validate() {\n          const result = validateInternal()\n          return result.success\n        },\n      }\n    },\n    [onSubmit, validateInternal],\n  )\n\n  // Generic function to add a set of columns to the schema (e.g. default columns, annotation columns)\n  const addColumnSet = useCallback(\n    (newColumns: SetOptional<ColumnModel, 'id'>[]) => {\n      const currentFormData = readFormData()\n      let columnsToAdd = newColumns.filter(\n        (cm: SetOptional<ColumnModel, 'id'>) => {\n          // Don't add columns that cannot be added (for example, Views cannot have JSON columns)\n          if (\n            !getAllowedColumnTypes(isView, false).includes(\n              cm.columnType as ColumnTypeEnum,\n            )\n          ) {\n            return false\n          }\n          // Only add columns that are not already present\n          // Use the name column to match because the ID may vary, e.g. if the facetType was changed\n          return !currentFormData.find(fd => fd.name === cm.name)\n        },\n      )\n      // Remove the ID column so TableColumnSchemaUtils.createTableUpdateTransactionRequest recognizes these as new columns\n      // createTableUpdateTransactionRequest uses the existing column ID to track column updates in the table, so any new columns should have no ID\n      // The user can also modify these columns before submitting them, so the ID may not be accurate when we end up submitting them\n      columnsToAdd = columnsToAdd.map(cm => omit(cm, ['id']))\n      if (columnsToAdd.length > 0) {\n        dispatch({\n          type: 'setValue',\n          value: [\n            ...currentFormData,\n            ...transformColumnModelsToFormData(\n              columnsToAdd,\n              defaultColumnModels,\n            ),\n          ],\n        })\n        displayToast(\n          `${columnsToAdd.length} ${pluralize(\n            'column',\n            columnsToAdd.length,\n          )} added to schema.`,\n          'success',\n        )\n      } else {\n        displayToast(\n          'No columns added. All columns to add are present in the column schema.',\n          'info',\n        )\n      }\n    },\n    [defaultColumnModels, dispatch, isView, readFormData],\n  )\n\n  const addDefaultColumns = useCallback(() => {\n    if (defaultColumnModels) {\n      addColumnSet(defaultColumnModels)\n    }\n  }, [defaultColumnModels, addColumnSet])\n\n  const addAnnotationColumns = useCallback(() => {\n    if (annotationColumnModels) {\n      addColumnSet(annotationColumnModels)\n    }\n  }, [annotationColumnModels, addColumnSet])\n\n  // Put the errors into a map of columnModelIndex -> errors\n  const errorsByColumnModel = useMemo(() => {\n    if (validationErrors) {\n      return groupBy(validationErrors.errors, e => e.path[0])\n    }\n    return {}\n  }, [validationErrors])\n\n  return (\n    <Box\n      component={'form'}\n      sx={{\n        py: 2.5,\n      }}\n    >\n      <TableColumnSchemaFormActions\n        disabled={isSubmitting}\n        annotationColumnModelsQuery={annotationColumnModelsQuery}\n      />\n      <Box\n        sx={{\n          display: 'grid',\n          gap: '8px',\n          gridTemplateColumns: COLUMN_SCHEMA_FORM_GRID_TEMPLATE_COLUMNS,\n          py: 2.5,\n        }}\n      >\n        <ColumnHeader>{/* Checkbox */}</ColumnHeader>\n        <ColumnHeader sx={{ gridColumn: '2 / span 2' }}>\n          Column Name\n        </ColumnHeader>\n        <ColumnHeader>Column Type</ColumnHeader>\n        <ColumnHeader>Size</ColumnHeader>\n        <ColumnHeader>Max List Length</ColumnHeader>\n        <ColumnHeader>Default Value</ColumnHeader>\n        <ColumnHeader>Restrict Values</ColumnHeader>\n        <ColumnHeader>Facet</ColumnHeader>\n        <ColumnHeader>Sort Facet Values</ColumnHeader>\n        <Box\n          sx={{\n            gridColumn: '1 / span 11',\n            backgroundColor: 'grey.300',\n            height: '2px',\n          }}\n        />\n        {times(numColumnModels, index => {\n          return (\n            <TableColumnSchemaFormRow\n              entityType={entityType}\n              columnModelIndex={index}\n              disabled={isSubmitting}\n              key={index}\n              columnModelValidationErrors={errorsByColumnModel[index]}\n              annotationColumnModels={annotationColumnModels}\n              originalColumnModels={originalColumnModels}\n            />\n          )\n        })}\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 1,\n        }}\n      >\n        <Button\n          variant={'outlined'}\n          onClick={() => {\n            dispatch({ type: 'appendColumn' })\n          }}\n          startIcon={<AddCircleTwoTone />}\n          disabled={isSubmitting}\n        >\n          Add Column\n        </Button>\n\n        {hasDefaultColumnModels && (\n          <Button\n            variant={'outlined'}\n            startIcon={\n              isLoadingDefaultColumns ? (\n                <SynapseSpinner />\n              ) : (\n                <AddCircleTwoTone />\n              )\n            }\n            onClick={() => {\n              addDefaultColumns()\n            }}\n            disabled={isLoadingDefaultColumns || isSubmitting}\n          >\n            Add Default {entityTypeToFriendlyName(entityType)} Columns\n          </Button>\n        )}\n\n        {hasAnnotationColumnModels && (\n          <Button\n            variant={'outlined'}\n            startIcon={\n              isLoadingAnnotationColumns ? (\n                <SynapseSpinner />\n              ) : (\n                <AddCircleTwoTone />\n              )\n            }\n            disabled={isLoadingAnnotationColumns || isSubmitting}\n            onClick={() => {\n              addAnnotationColumns()\n            }}\n          >\n            {ADD_ALL_ANNOTATIONS_BUTTON_TEXT}\n          </Button>\n        )}\n        <ImportTableColumnsButton\n          onAddColumns={cms => {\n            addColumnSet(cms)\n          }}\n          disabled={isSubmitting}\n        />\n      </Box>\n    </Box>\n  )\n}\n\ntype TableColumnSchemaFormRowProps = {\n  entityType: EntityType\n  columnModelIndex: number\n  disabled: boolean\n  columnModelValidationErrors: ZodIssue[] | null\n  annotationColumnModels?: ColumnModel[]\n  originalColumnModels?: ColumnModel[]\n}\n\nfunction TableColumnSchemaFormRow(props: TableColumnSchemaFormRowProps) {\n  const {\n    columnModelIndex,\n    entityType,\n    disabled,\n    columnModelValidationErrors = null,\n    annotationColumnModels,\n    originalColumnModels,\n  } = props\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const columnModel = useAtomValue(\n    useMemo(\n      () =>\n        selectAtom(\n          tableColumnSchemaFormDataAtom,\n          formData => formData[columnModelIndex],\n          isEqual,\n        ),\n      [columnModelIndex],\n    ),\n  )\n\n  // Find the original column model that matches the current column model by name and type, so we can tell the user what fields have changed\n  const originalColumnModel = originalColumnModels\n    ? findMatchingColumnModel(originalColumnModels, columnModel)\n    : undefined\n\n  // Find the closest match between passed column model and current column model with name and type\n  const defaultAnnotationModel = annotationColumnModels\n    ? findMatchingColumnModel(annotationColumnModels, columnModel)\n    : undefined\n\n  // Organize the JSON Subcolumn errors into a map of subcolumn index to errors\n  const errorsForSubcolumns = useMemo(() => {\n    if (columnModelValidationErrors) {\n      const errorsForAllSubcolumns = columnModelValidationErrors.filter(e => {\n        return e.path[0] === columnModelIndex && e.path[1] == 'jsonSubColumns'\n      })\n      return groupBy(errorsForAllSubcolumns, e => e.path[2])\n    }\n    return {}\n  }, [columnModelIndex, columnModelValidationErrors])\n\n  if (!columnModel) {\n    return <></>\n  }\n  const isDefaultColumn = columnModel.isOriginallyDefaultColumn\n\n  return (\n    <>\n      <ColumnModelForm\n        entityType={entityType}\n        columnModelIndex={columnModelIndex}\n        isDefaultColumn={isDefaultColumn}\n        disabled={disabled}\n        validationErrors={columnModelValidationErrors}\n        defaultAnnotationModel={defaultAnnotationModel}\n        originalColumnModel={originalColumnModel}\n      />\n      {columnModel.columnType === ColumnTypeEnum.JSON &&\n        columnModel.jsonSubColumns &&\n        columnModel.jsonSubColumns.map((subColumnFacet, index) => (\n          <ColumnModelForm\n            key={index}\n            entityType={entityType}\n            columnModelIndex={columnModelIndex}\n            jsonSubColumnIndex={index}\n            isDefaultColumn={isDefaultColumn}\n            disabled={disabled}\n            validationErrors={errorsForSubcolumns[index]}\n          />\n        ))}\n      {columnModel.columnType === ColumnTypeEnum.JSON && (\n        <>\n          <Box\n            sx={{\n              gridColumn: '1 / span 2',\n            }}\n          >\n            {HIERARCHY_END_COMPONENT}\n          </Box>\n          <Box\n            sx={{\n              gridColumn: '3 / span 5',\n            }}\n          >\n            <Button\n              startIcon={<AddToList />}\n              variant={'text'}\n              disabled={disabled}\n              onClick={() =>\n                dispatch({ type: 'appendJsonSubColumn', columnModelIndex })\n              }\n            >\n              Add sub-column\n            </Button>\n          </Box>\n        </>\n      )}\n    </>\n  )\n}\n\nconst TableColumnSchemaFormInternalWithForwardRef = forwardRef<\n  SubmitHandle,\n  TableColumnSchemaFormProps\n>(TableColumnSchemaFormInternal)\n\nconst TableColumnSchemaFormWrapped = forwardRef<\n  SubmitHandle,\n  TableColumnSchemaFormProps\n>(function TableColumnSchemaForm(props: TableColumnSchemaFormProps, ref) {\n  // Wrap the form in a Jotai provider so that the internal atoms are scoped to just this component instance\n  // Use forwardRef to ensure that the ref can be passed along\n  return (\n    <Provider>\n      <TableColumnSchemaFormInternalWithForwardRef {...props} ref={ref} />\n    </Provider>\n  )\n})\n\nexport default TableColumnSchemaFormWrapped\n"],"mappings":"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"}
+{"version":3,"file":"TableColumnSchemaForm.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaForm.tsx"],"sourcesContent":["import AddToList from '@/assets/icons/AddToList'\nimport {\n  useGetAnnotationColumnModels,\n  useGetDefaultColumnModels,\n} from '@/synapse-queries/table/useColumnModel'\nimport {\n  convertToConcreteEntityType,\n  entityTypeToFriendlyName,\n} from '@/utils/functions/EntityTypeUtils'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, styled } from '@mui/material'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n  ColumnModel,\n  ColumnTypeEnum,\n  VIEW_CONCRETE_TYPE_VALUES,\n  ViewScope,\n} from '@sage-bionetworks/synapse-types'\nimport { atom, Provider, useAtomValue, useSetAtom } from 'jotai'\nimport { selectAtom, useAtomCallback } from 'jotai/utils'\nimport { groupBy, isEqual, noop, omit, times } from 'lodash-es'\nimport pluralize from 'pluralize'\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\nimport { SetOptional } from 'type-fest'\nimport { ZodError, ZodIssue } from 'zod'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { displayToast } from '../ToastMessage'\nimport ColumnModelForm from './ColumnModelForm'\nimport ImportTableColumnsButton from './ImportTableColumnsButton'\nimport {\n  findMatchingColumnModel,\n  getAllowedColumnTypes,\n  transformColumnModelsToFormData,\n} from './TableColumnSchemaEditorUtils'\nimport { TableColumnSchemaFormActions } from './TableColumnSchemaFormActions'\nimport { tableColumnSchemaFormDataAtom } from './TableColumnSchemaFormReducer'\nimport { validateColumnModelFormData } from './Validators/ColumnModelValidator'\n\nconst COLUMN_SCHEMA_FORM_GRID_TEMPLATE_COLUMNS =\n  '18px 18px 1.75fr 1.75fr 0.75fr 1fr 1.25fr 1.25fr 1fr 1.25fr'\nconst GRID_CONTAINER_Y_MARGIN_PX = 6\nexport const HIERARCHY_VERTICAL_LINE_COMPONENT = (\n  <Box\n    sx={{\n      width: '1px',\n      height: `calc(100% + 2 * ${GRID_CONTAINER_Y_MARGIN_PX}px)`,\n      backgroundColor: 'grey.400',\n      marginLeft: '8px',\n    }}\n  />\n)\nexport const HIERARCHY_END_COMPONENT = (\n  <Box\n    sx={theme => ({\n      width: '50%',\n      height: '60%',\n      borderLeft: `1px solid ${theme.palette.grey[400]}`,\n      borderBottom: `1px solid ${theme.palette.grey[400]}`,\n      marginLeft: '8px',\n      marginBottom: 'auto',\n      marginRight: '0',\n      borderBottomLeftRadius: '5px',\n    })}\n  />\n)\n\nexport type SubmitHandle = {\n  // Allow the parent component to trigger a submit of the form, so this may be embedded in an arbitrary modal.\n  submit: () => void\n  // Imperative handle to get the data out of the form for SWC compatibility\n  getEditedColumnModels: () => SetOptional<ColumnModel, 'id'>[]\n  // Used to check if all form data is valid. Returns the current validity state\n  validate: () => boolean\n}\n\ntype TableColumnSchemaFormProps = {\n  /* The type of the Table, which determines various schema restrictions and form functionality */\n  entityType: EntityType\n  /* If this is an entity view, the ViewScope can be used to determine the default column models and fetch annotation column models */\n  viewScope?: ViewScope\n  initialData?: SetOptional<ColumnModel, 'id'>[]\n  onSubmit?: (newColumnModels: SetOptional<ColumnModel, 'id'>[]) => void\n  isSubmitting?: boolean\n  /** The original/current column models that are applied to the table, if they exist. */\n  originalColumnModels?: ColumnModel[]\n}\n\nconst ColumnHeader = styled(Box, {\n  label: 'ColumnHeader',\n})({\n  fontWeight: 700,\n})\n\nexport const ADD_ALL_ANNOTATIONS_BUTTON_TEXT = 'Add All Annotations'\n\nfunction TableColumnSchemaFormInternal(\n  props: TableColumnSchemaFormProps,\n  ref: ForwardedRef<SubmitHandle>,\n) {\n  const {\n    initialData,\n    entityType,\n    viewScope,\n    onSubmit = noop,\n    isSubmitting = false,\n    originalColumnModels,\n  } = props\n\n  const numColumnModels = useAtomValue(\n    useMemo(() => atom(get => get(tableColumnSchemaFormDataAtom).length), []),\n  )\n\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const [validationErrors, setValidationErrors] = useState<ZodError | null>(\n    null,\n  )\n\n  // useAtomCallback will let us imperatively read the form data, instead of tracking it in state and triggering a full re-render of the form when any data changes\n  const readFormData = useAtomCallback(\n    useCallback(get => {\n      return get(tableColumnSchemaFormDataAtom)\n    }, []),\n  )\n  const concreteTableType = convertToConcreteEntityType(entityType)\n  const isView = VIEW_CONCRETE_TYPE_VALUES.includes(\n    concreteTableType as (typeof VIEW_CONCRETE_TYPE_VALUES)[number],\n  )\n  const hasAnnotationColumnModels = isView,\n    hasDefaultColumnModels = isView\n\n  const { data: defaultColumnModels, isLoading: isLoadingDefaultColumns } =\n    useGetDefaultColumnModels(\n      viewScope?.viewEntityType!,\n      viewScope?.viewTypeMask,\n      {\n        enabled: hasDefaultColumnModels,\n        staleTime: Infinity, // The default column models will never change\n      },\n    )\n\n  const annotationColumnModelsQuery = useGetAnnotationColumnModels(\n    {\n      viewScope: viewScope!,\n      includeDerivedAnnotations: true,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.ViewColumnModelRequest',\n    },\n    {\n      enabled: hasAnnotationColumnModels,\n    },\n  )\n\n  const {\n    data: annotationColumnModels,\n    isLoading: isLoadingAnnotationColumns,\n  } = annotationColumnModelsQuery\n\n  /**\n   * Set the initialData in the form state atom on mount, if it exists and we have no data.\n   */\n  useEffect(() => {\n    if (initialData && !isLoadingDefaultColumns) {\n      dispatch({\n        type: 'setValue',\n        value: transformColumnModelsToFormData(\n          initialData,\n          defaultColumnModels ?? [],\n        ),\n      })\n    }\n    // Don't re-run if initial data changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoadingDefaultColumns])\n\n  const validateInternal = useCallback(() => {\n    const result = validateColumnModelFormData(readFormData())\n    if (result.success) {\n      setValidationErrors(null)\n    } else {\n      setValidationErrors(result.error)\n    }\n    return result\n  }, [readFormData])\n\n  useImperativeHandle(ref, () => {\n    return {\n      submit() {\n        const result = validateInternal()\n        if (result.success) {\n          onSubmit(result.data)\n        }\n      },\n      getEditedColumnModels() {\n        const result = validateInternal()\n        if (!result.success) {\n          throw new Error('Column models were not valid')\n        }\n        return result.data\n      },\n      validate() {\n        const result = validateInternal()\n        return result.success\n      },\n    }\n  }, [onSubmit, validateInternal])\n\n  // Generic function to add a set of columns to the schema (e.g. default columns, annotation columns)\n  const addColumnSet = useCallback(\n    (newColumns: SetOptional<ColumnModel, 'id'>[]) => {\n      const currentFormData = readFormData()\n      let columnsToAdd = newColumns.filter(\n        (cm: SetOptional<ColumnModel, 'id'>) => {\n          // Don't add columns that cannot be added (for example, Views cannot have JSON columns)\n          if (\n            !getAllowedColumnTypes(isView, false).includes(\n              cm.columnType as ColumnTypeEnum,\n            )\n          ) {\n            return false\n          }\n          // Only add columns that are not already present\n          // Use the name column to match because the ID may vary, e.g. if the facetType was changed\n          return !currentFormData.find(fd => fd.name === cm.name)\n        },\n      )\n      // Remove the ID column so TableColumnSchemaUtils.createTableUpdateTransactionRequest recognizes these as new columns\n      // createTableUpdateTransactionRequest uses the existing column ID to track column updates in the table, so any new columns should have no ID\n      // The user can also modify these columns before submitting them, so the ID may not be accurate when we end up submitting them\n      columnsToAdd = columnsToAdd.map(cm => omit(cm, ['id']))\n      if (columnsToAdd.length > 0) {\n        dispatch({\n          type: 'setValue',\n          value: [\n            ...currentFormData,\n            ...transformColumnModelsToFormData(\n              columnsToAdd,\n              defaultColumnModels,\n            ),\n          ],\n        })\n        displayToast(\n          `${columnsToAdd.length} ${pluralize(\n            'column',\n            columnsToAdd.length,\n          )} added to schema.`,\n          'success',\n        )\n      } else {\n        displayToast(\n          'No columns added. All columns to add are present in the column schema.',\n          'info',\n        )\n      }\n    },\n    [defaultColumnModels, dispatch, isView, readFormData],\n  )\n\n  const addDefaultColumns = useCallback(() => {\n    if (defaultColumnModels) {\n      addColumnSet(defaultColumnModels)\n    }\n  }, [defaultColumnModels, addColumnSet])\n\n  const addAnnotationColumns = useCallback(() => {\n    if (annotationColumnModels) {\n      addColumnSet(annotationColumnModels)\n    }\n  }, [annotationColumnModels, addColumnSet])\n\n  // Put the errors into a map of columnModelIndex -> errors\n  const errorsByColumnModel = useMemo(() => {\n    if (validationErrors) {\n      return groupBy(validationErrors.errors, e => e.path[0])\n    }\n    return {}\n  }, [validationErrors])\n\n  return (\n    <Box\n      component={'form'}\n      sx={{\n        py: 2.5,\n      }}\n    >\n      <TableColumnSchemaFormActions\n        disabled={isSubmitting}\n        annotationColumnModelsQuery={annotationColumnModelsQuery}\n      />\n      <Box\n        sx={{\n          display: 'grid',\n          gap: '8px',\n          gridTemplateColumns: COLUMN_SCHEMA_FORM_GRID_TEMPLATE_COLUMNS,\n          py: 2.5,\n        }}\n      >\n        <ColumnHeader>{/* Checkbox */}</ColumnHeader>\n        <ColumnHeader sx={{ gridColumn: '2 / span 2' }}>\n          Column Name\n        </ColumnHeader>\n        <ColumnHeader>Column Type</ColumnHeader>\n        <ColumnHeader>Size</ColumnHeader>\n        <ColumnHeader>Max List Length</ColumnHeader>\n        <ColumnHeader>Default Value</ColumnHeader>\n        <ColumnHeader>Restrict Values</ColumnHeader>\n        <ColumnHeader>Facet</ColumnHeader>\n        <ColumnHeader>Sort Facet Values</ColumnHeader>\n        <Box\n          sx={{\n            gridColumn: '1 / span 11',\n            backgroundColor: 'grey.300',\n            height: '2px',\n          }}\n        />\n        {times(numColumnModels, index => {\n          return (\n            <TableColumnSchemaFormRow\n              entityType={entityType}\n              columnModelIndex={index}\n              disabled={isSubmitting}\n              key={index}\n              columnModelValidationErrors={errorsByColumnModel[index]}\n              annotationColumnModels={annotationColumnModels}\n              originalColumnModels={originalColumnModels}\n            />\n          )\n        })}\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 1,\n        }}\n      >\n        <Button\n          variant={'outlined'}\n          onClick={() => {\n            dispatch({ type: 'appendColumn' })\n          }}\n          startIcon={<AddCircleTwoTone />}\n          disabled={isSubmitting}\n        >\n          Add Column\n        </Button>\n\n        {hasDefaultColumnModels && (\n          <Button\n            variant={'outlined'}\n            startIcon={\n              isLoadingDefaultColumns ? (\n                <SynapseSpinner />\n              ) : (\n                <AddCircleTwoTone />\n              )\n            }\n            onClick={() => {\n              addDefaultColumns()\n            }}\n            disabled={isLoadingDefaultColumns || isSubmitting}\n          >\n            Add Default {entityTypeToFriendlyName(entityType)} Columns\n          </Button>\n        )}\n\n        {hasAnnotationColumnModels && (\n          <Button\n            variant={'outlined'}\n            startIcon={\n              isLoadingAnnotationColumns ? (\n                <SynapseSpinner />\n              ) : (\n                <AddCircleTwoTone />\n              )\n            }\n            disabled={isLoadingAnnotationColumns || isSubmitting}\n            onClick={() => {\n              addAnnotationColumns()\n            }}\n          >\n            {ADD_ALL_ANNOTATIONS_BUTTON_TEXT}\n          </Button>\n        )}\n        <ImportTableColumnsButton\n          onAddColumns={cms => {\n            addColumnSet(cms)\n          }}\n          disabled={isSubmitting}\n        />\n      </Box>\n    </Box>\n  )\n}\n\ntype TableColumnSchemaFormRowProps = {\n  entityType: EntityType\n  columnModelIndex: number\n  disabled: boolean\n  columnModelValidationErrors: ZodIssue[] | null\n  annotationColumnModels?: ColumnModel[]\n  originalColumnModels?: ColumnModel[]\n}\n\nfunction TableColumnSchemaFormRow(props: TableColumnSchemaFormRowProps) {\n  const {\n    columnModelIndex,\n    entityType,\n    disabled,\n    columnModelValidationErrors = null,\n    annotationColumnModels,\n    originalColumnModels,\n  } = props\n  const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n  const columnModel = useAtomValue(\n    useMemo(\n      () =>\n        selectAtom(\n          tableColumnSchemaFormDataAtom,\n          formData => formData[columnModelIndex],\n          isEqual,\n        ),\n      [columnModelIndex],\n    ),\n  )\n\n  // Find the original column model that matches the current column model by name and type, so we can tell the user what fields have changed\n  const originalColumnModel = originalColumnModels\n    ? findMatchingColumnModel(originalColumnModels, columnModel)\n    : undefined\n\n  // Find the closest match between passed column model and current column model with name and type\n  const defaultAnnotationModel = annotationColumnModels\n    ? findMatchingColumnModel(annotationColumnModels, columnModel)\n    : undefined\n\n  // Organize the JSON Subcolumn errors into a map of subcolumn index to errors\n  const errorsForSubcolumns = useMemo(() => {\n    if (columnModelValidationErrors) {\n      const errorsForAllSubcolumns = columnModelValidationErrors.filter(e => {\n        return e.path[0] === columnModelIndex && e.path[1] == 'jsonSubColumns'\n      })\n      return groupBy(errorsForAllSubcolumns, e => e.path[2])\n    }\n    return {}\n  }, [columnModelIndex, columnModelValidationErrors])\n\n  if (!columnModel) {\n    return <></>\n  }\n  const isDefaultColumn = columnModel.isOriginallyDefaultColumn\n\n  return (\n    <>\n      <ColumnModelForm\n        entityType={entityType}\n        columnModelIndex={columnModelIndex}\n        isDefaultColumn={isDefaultColumn}\n        disabled={disabled}\n        validationErrors={columnModelValidationErrors}\n        defaultAnnotationModel={defaultAnnotationModel}\n        originalColumnModel={originalColumnModel}\n      />\n      {columnModel.columnType === ColumnTypeEnum.JSON &&\n        columnModel.jsonSubColumns &&\n        columnModel.jsonSubColumns.map((subColumnFacet, index) => (\n          <ColumnModelForm\n            key={index}\n            entityType={entityType}\n            columnModelIndex={columnModelIndex}\n            jsonSubColumnIndex={index}\n            isDefaultColumn={isDefaultColumn}\n            disabled={disabled}\n            validationErrors={errorsForSubcolumns[index]}\n          />\n        ))}\n      {columnModel.columnType === ColumnTypeEnum.JSON && (\n        <>\n          <Box\n            sx={{\n              gridColumn: '1 / span 2',\n            }}\n          >\n            {HIERARCHY_END_COMPONENT}\n          </Box>\n          <Box\n            sx={{\n              gridColumn: '3 / span 5',\n            }}\n          >\n            <Button\n              startIcon={<AddToList />}\n              variant={'text'}\n              disabled={disabled}\n              onClick={() =>\n                dispatch({ type: 'appendJsonSubColumn', columnModelIndex })\n              }\n            >\n              Add sub-column\n            </Button>\n          </Box>\n        </>\n      )}\n    </>\n  )\n}\n\nconst TableColumnSchemaFormInternalWithForwardRef = forwardRef<\n  SubmitHandle,\n  TableColumnSchemaFormProps\n>(TableColumnSchemaFormInternal)\n\nconst TableColumnSchemaFormWrapped = forwardRef<\n  SubmitHandle,\n  TableColumnSchemaFormProps\n>(function TableColumnSchemaForm(props: TableColumnSchemaFormProps, ref) {\n  // Wrap the form in a Jotai provider so that the internal atoms are scoped to just this component instance\n  // Use forwardRef to ensure that the ref can be passed along\n  return (\n    <Provider>\n      <TableColumnSchemaFormInternalWithForwardRef {...props} ref={ref} />\n    </Provider>\n  )\n})\n\nexport default TableColumnSchemaFormWrapped\n"],"mappings":"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"}

package/dist/components/TanStackTable/TanStackTableUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackTableUtils.js","names":[],"sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table'\nimport { CSSProperties } from 'react'\n\nexport function getColumnSizeCssVariable(columnId: string) {\n  return `--col-${columnId}-size`\n}\n\nexport function getHeaderSizeCssVariable(headerId: string) {\n  return `--header-${headerId}-size`\n}\n\n// Styles for column pinning, retrieved from TanStack docs examples with very minor modifications\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky\nexport function getCommonPinningStyles(column: Column<any>): CSSProperties {\n  const isPinned = column.getIsPinned()\n  const isLastLeftPinnedColumn =\n    isPinned === 'left' && column.getIsLastColumn('left')\n  const isFirstRightPinnedColumn =\n    isPinned === 'right' && column.getIsFirstColumn('right')\n\n  return {\n    background: isPinned ? 'inherit' : undefined,\n    boxShadow: isLastLeftPinnedColumn\n      ? '-4px 0 4px -4px gray inset'\n      : isFirstRightPinnedColumn\n      ? '4px 0 4px -4px gray inset'\n      : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    opacity: isPinned ? 0.95 : 1,\n    position: isPinned ? 'sticky' : 'relative',\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  }\n}\n"],"mappings":";AAGA,SAAgB,EAAyB,GAAkB;AACzD,QAAO,SAAS,EAAS;;AAG3B,SAAgB,EAAyB,GAAkB;AACzD,QAAO,YAAY,EAAS;;AAK9B,SAAgB,EAAuB,GAAoC;CACzE,IAAM,IAAW,EAAO,aAAa,EAC/B,IACJ,MAAa,UAAU,EAAO,gBAAgB,OAAO,EACjD,IACJ,MAAa,WAAW,EAAO,iBAAiB,QAAQ;AAE1D,QAAO;EACL,YAAY,IAAW,YAAY,KAAA;EACnC,WAAW,IACP,+BACA,IACA,8BACA,KAAA;EACJ,MAAM,MAAa,SAAS,GAAG,EAAO,SAAS,OAAO,CAAC,MAAM,KAAA;EAC7D,OAAO,MAAa,UAAU,GAAG,EAAO,SAAS,QAAQ,CAAC,MAAM,KAAA;EAChE,SAAS,IAAW,MAAO;EAC3B,UAAU,IAAW,WAAW;EAChC,OAAO,EAAO,SAAS;EACvB,QAAQ;EACT"}
+{"version":3,"file":"TanStackTableUtils.js","names":[],"sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table'\nimport { CSSProperties } from 'react'\n\nexport function getColumnSizeCssVariable(columnId: string) {\n  return `--col-${columnId}-size`\n}\n\nexport function getHeaderSizeCssVariable(headerId: string) {\n  return `--header-${headerId}-size`\n}\n\n// Styles for column pinning, retrieved from TanStack docs examples with very minor modifications\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky\nexport function getCommonPinningStyles(column: Column<any>): CSSProperties {\n  const isPinned = column.getIsPinned()\n  const isLastLeftPinnedColumn =\n    isPinned === 'left' && column.getIsLastColumn('left')\n  const isFirstRightPinnedColumn =\n    isPinned === 'right' && column.getIsFirstColumn('right')\n\n  return {\n    background: isPinned ? 'inherit' : undefined,\n    boxShadow: isLastLeftPinnedColumn\n      ? '-4px 0 4px -4px gray inset'\n      : isFirstRightPinnedColumn\n        ? '4px 0 4px -4px gray inset'\n        : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    opacity: isPinned ? 0.95 : 1,\n    position: isPinned ? 'sticky' : 'relative',\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  }\n}\n"],"mappings":";AAGA,SAAgB,EAAyB,GAAkB;AACzD,QAAO,SAAS,EAAS;;AAG3B,SAAgB,EAAyB,GAAkB;AACzD,QAAO,YAAY,EAAS;;AAK9B,SAAgB,EAAuB,GAAoC;CACzE,IAAM,IAAW,EAAO,aAAa,EAC/B,IACJ,MAAa,UAAU,EAAO,gBAAgB,OAAO,EACjD,IACJ,MAAa,WAAW,EAAO,iBAAiB,QAAQ;AAE1D,QAAO;EACL,YAAY,IAAW,YAAY,KAAA;EACnC,WAAW,IACP,+BACA,IACE,8BACA,KAAA;EACN,MAAM,MAAa,SAAS,GAAG,EAAO,SAAS,OAAO,CAAC,MAAM,KAAA;EAC7D,OAAO,MAAa,UAAU,GAAG,EAAO,SAAS,QAAQ,CAAC,MAAM,KAAA;EAChE,SAAS,IAAW,MAAO;EAC3B,UAAU,IAAW,WAAW;EAChC,OAAO,EAAO,SAAS;EACvB,QAAQ;EACT"}

package/dist/components/TextField/TextField.css

@@ -1 +1 @@
-._labelRow_a4znl_1{align-items:baseline;gap:6px;margin-bottom:4px;display:flex}._inputLabel_a4znl_8{pointer-events:unset;margin-bottom:0;font-weight:700;position:relative!important}._helperText_a4znl_15{color:var(--synapse-gray-600);font-weight:500}._charCount_a4znl_20{text-align:right;color:var(--synapse-gray-600);margin-top:2px;font-size:.75rem}
+._inputLabel_11mtz_1.MuiInputLabel-root{flex-wrap:wrap;align-items:baseline;display:flex;position:static}._inputLabel_11mtz_1.MuiInputLabel-root .MuiFormLabel-asterisk{order:1}._description_11mtz_11{text-wrap:wrap;color:var(--synapse-gray-600);flex-basis:100%;order:2;margin-top:6px;font-weight:500}._charCount_11mtz_20{text-align:right;color:var(--synapse-gray-600);margin-top:2px;font-size:.75rem}

package/dist/components/TextField/TextField.d.ts

@@ -1,10 +1,21 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-export type TextFieldProps = Pick<MuiTextFieldProps, 'autoComplete' | 'autoFocus' | 'disabled' | 'error' | 'fullWidth' | 'helperText' | 'id' | 'inputProps' | 'label' | 'maxRows' | 'minRows' | 'multiline' | 'onBlur' | 'onChange' | 'placeholder' | 'required' | 'rows' | 'sx' | 'type' | 'value'> & {
-    noWrapInFormControl?: boolean;
+import { ReactNode } from 'react';
+export type TextFieldProps = MuiTextFieldProps & {
+    /**
+     * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).
+     * Always rendered in a neutral color regardless of form state.
+     * For error or status messages, use `helperText` instead.
+     */
+    description?: ReactNode;
     maxCharacterCount?: number;
 };
 /**
  * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.
+ *
+ * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.
+ * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.
+ * - `helperText`: Status or error message shown below the input. Color-reactive to form state.
+ * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.
  */
-export default function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function TextField({ description, maxCharacterCount, slotProps, id: idProp, label, fullWidth, className, sx, value, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,cAAc,IAAI,iBAAiB,EAEpC,MAAM,eAAe,CAAA;AAItB,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,iBAAiB,EACf,cAAc,GACd,WAAW,GACX,UAAU,GACV,OAAO,GACP,WAAW,GACX,YAAY,GACZ,IAAI,GACJ,YAAY,GACZ,OAAO,GACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,aAAa,GACb,UAAU,GACV,MAAM,GACN,IAAI,GACJ,MAAM,GACN,OAAO,CACV,GAAG;IAAE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CA2DtD"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,cAAc,IAAI,iBAAiB,EAEpC,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,SAAS,EAAS,MAAM,OAAO,CAAA;AAExC,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAgB,EAChB,SAAS,EACT,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EAAE,cAAc,2CAwDhB"}

package/dist/components/TextField/TextField.js

@@ -1,53 +1,51 @@
-import { StyledFormControl as e } from "../styled/StyledFormControl.js";
-import t from "./TextField.module.js";
-import { useId as n, useMemo as r } from "react";
-import { Box as i, InputBase as a, InputLabel as o, Typography as s } from "@mui/material";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import e from "./TextField.module.js";
+import { useId as t } from "react";
+import { Box as n, TextField as r, Typography as i, inputBaseClasses as a } from "@mui/material";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/TextField/TextField.tsx
-function d(d) {
-	let f = n(), { noWrapInFormControl: p, label: m, helperText: h, maxCharacterCount: g, inputProps: _, ...v } = d, y = g ? {
-		..._,
-		maxLength: g
-	} : _, b = typeof v.value == "string" ? v.value.length : 0;
-	return /* @__PURE__ */ u(r(() => p ? (e) => /* @__PURE__ */ l(c, { children: e.children }) : (t) => /* @__PURE__ */ l(e, {
-		fullWidth: !0,
-		sx: { my: 1 },
-		children: t.children
-	}), [p]), { children: [
-		(d.label || h) && /* @__PURE__ */ u(i, {
-			className: t.labelRow,
-			children: [d.label && /* @__PURE__ */ l(o, {
-				htmlFor: d.id || f,
-				className: t.inputLabel,
-				sx: { "&::after": ({ palette: e }) => ({
-					content: d.required ? "\"*\"" : void 0,
-					marginLeft: "3px",
-					color: e.secondary.main
-				}) },
-				children: d.label
-			}), h && /* @__PURE__ */ l(s, {
-				variant: "body2",
-				className: t.helperText,
-				children: h
-			})]
-		}),
-		/* @__PURE__ */ l(a, {
-			id: f,
-			inputProps: y,
+function l({ description: l, maxCharacterCount: u, slotProps: d, id: f, label: p, fullWidth: m = !0, className: h, sx: g, value: _, ...v }) {
+	let y = t(), b = f ?? y, x = typeof _ == "string" ? _.length : 0;
+	return /* @__PURE__ */ c(n, {
+		className: h,
+		sx: g,
+		children: [/* @__PURE__ */ s(r, {
+			id: b,
+			variant: "standard",
+			label: p != null || l != null ? /* @__PURE__ */ c(o, { children: [p, l != null && /* @__PURE__ */ s("span", {
+				className: e.description,
+				children: l
+			})] }) : void 0,
+			fullWidth: m,
+			value: _,
+			sx: { [`& .${a.root}`]: { marginTop: 0 } },
+			slotProps: {
+				...d,
+				htmlInput: {
+					maxLength: u,
+					...d?.htmlInput
+				},
+				inputLabel: {
+					className: e.inputLabel,
+					...d?.inputLabel
+				},
+				input: {
+					disableUnderline: !0,
+					...d?.input
+				}
+			},
 			...v
-		}),
-		g !== void 0 && /* @__PURE__ */ u(s, {
+		}), u !== void 0 && /* @__PURE__ */ c(i, {
 			variant: "body2",
-			className: t.charCount,
+			className: e.charCount,
 			children: [
-				b,
+				x,
 				"/",
-				g
+				u
 			]
-		})
-	] });
+		})]
+	});
 }
 //#endregion
-export { d as default };
+export { l as default };
 
 //# sourceMappingURL=TextField.js.map

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport {\n  Box,\n  InputBase,\n  InputLabel,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { PropsWithChildren, useId, useMemo } from 'react'\n\nexport type TextFieldProps = Pick<\n  MuiTextFieldProps,\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'disabled'\n  | 'error'\n  | 'fullWidth'\n  | 'helperText'\n  | 'id'\n  | 'inputProps'\n  | 'label'\n  | 'maxRows'\n  | 'minRows'\n  | 'multiline'\n  | 'onBlur'\n  | 'onChange'\n  | 'placeholder'\n  | 'required'\n  | 'rows'\n  | 'sx'\n  | 'type'\n  | 'value'\n> & { noWrapInFormControl?: boolean; maxCharacterCount?: number }\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n */\nexport default function TextField(props: TextFieldProps) {\n  const id = useId()\n  const {\n    noWrapInFormControl,\n    label: _label,\n    helperText,\n    maxCharacterCount,\n    inputProps: inputPropsProp,\n    ...rest\n  } = props\n  const mergedInputProps = maxCharacterCount\n    ? { ...inputPropsProp, maxLength: maxCharacterCount }\n    : inputPropsProp\n  const currentLength = typeof rest.value === 'string' ? rest.value.length : 0\n  const Wrapper = useMemo(\n    () =>\n      noWrapInFormControl\n        ? (props: PropsWithChildren<object>) => <>{props.children}</>\n        : (props: PropsWithChildren<object>) => (\n            <StyledFormControl fullWidth sx={{ my: 1 }}>\n              {props.children}\n            </StyledFormControl>\n          ),\n    [noWrapInFormControl],\n  )\n  return (\n    <Wrapper>\n      {(props.label || helperText) && (\n        <Box className={styles.labelRow}>\n          {props.label && (\n            <InputLabel\n              htmlFor={props.id || id}\n              className={styles.inputLabel}\n              sx={{\n                '&::after': ({ palette }) => ({\n                  content: props.required ? '\"*\"' : undefined,\n                  marginLeft: '3px',\n                  color: palette.secondary.main,\n                }),\n              }}\n            >\n              {props.label}\n            </InputLabel>\n          )}\n          {helperText && (\n            <Typography variant=\"body2\" className={styles.helperText}>\n              {helperText}\n            </Typography>\n          )}\n        </Box>\n      )}\n      <InputBase id={id} inputProps={mergedInputProps} {...rest}></InputBase>\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Wrapper>\n  )\n}\n"],"mappings":";;;;;;AAsCA,SAAwB,EAAU,GAAuB;CACvD,IAAM,IAAK,GAAO,EACZ,EACJ,wBACA,OAAO,GACP,eACA,sBACA,YAAY,GACZ,GAAG,MACD,GACE,IAAmB,IACrB;EAAE,GAAG;EAAgB,WAAW;EAAmB,GACnD,GACE,IAAgB,OAAO,EAAK,SAAU,WAAW,EAAK,MAAM,SAAS;AAY3E,QACE,kBAZc,QAEZ,KACK,MAAqC,kBAAA,GAAA,EAAA,UAAG,EAAM,UAAY,CAAA,IAC1D,MACC,kBAAC,GAAD;EAAmB,WAAA;EAAU,IAAI,EAAE,IAAI,GAAG;YACvC,EAAM;EACW,CAAA,EAE5B,CAAC,EAAoB,CAGpB,EAAD,EAAA,UAAA;GACI,EAAM,SAAS,MACf,kBAAC,GAAD;GAAK,WAAW,EAAO;aAAvB,CACG,EAAM,SACL,kBAAC,GAAD;IACE,SAAS,EAAM,MAAM;IACrB,WAAW,EAAO;IAClB,IAAI,EACF,aAAa,EAAE,kBAAe;KAC5B,SAAS,EAAM,WAAW,UAAQ,KAAA;KAClC,YAAY;KACZ,OAAO,EAAQ,UAAU;KAC1B,GACF;cAEA,EAAM;IACI,CAAA,EAEd,KACC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,WAAW,EAAO;cAC3C;IACU,CAAA,CAEX;;EAER,kBAAC,GAAD;GAAe;GAAI,YAAY;GAAkB,GAAI;GAAkB,CAAA;EACtE,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;IACN;;EAEP,EAAA,CAAA"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  Box,\n  inputBaseClasses,\n  TextField as MuiTextField,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { ReactNode, useId } from 'react'\n\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).\n   * Always rendered in a neutral color regardless of form state.\n   * For error or status messages, use `helperText` instead.\n   */\n  description?: ReactNode\n  maxCharacterCount?: number\n}\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n *\n * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.\n * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.\n * - `helperText`: Status or error message shown below the input. Color-reactive to form state.\n * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.\n */\nexport default function TextField({\n  description,\n  maxCharacterCount,\n  slotProps,\n  id: idProp,\n  label,\n  fullWidth = true,\n  className,\n  sx,\n  value,\n  ...rest\n}: TextFieldProps) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n\n  const currentLength = typeof value === 'string' ? value.length : 0\n\n  const compositeLabel =\n    label != null || description != null ? (\n      <>\n        {label}\n        {description != null && (\n          <span className={styles.description}>{description}</span>\n        )}\n      </>\n    ) : undefined\n\n  return (\n    <Box className={className} sx={sx}>\n      <MuiTextField\n        id={id}\n        variant=\"standard\"\n        label={compositeLabel}\n        fullWidth={fullWidth}\n        value={value}\n        sx={{\n          [`& .${inputBaseClasses.root}`]: {\n            // The theme default applies spacing(3) for the floating-label pattern (absolute\n            // positioned label). Our label is in document flow (position: relative), so it\n            // already occupies vertical space — no top margin needed on the input.\n            marginTop: 0,\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          htmlInput: {\n            maxLength: maxCharacterCount,\n            ...slotProps?.htmlInput,\n          },\n          inputLabel: {\n            className: styles.inputLabel,\n            ...slotProps?.inputLabel,\n          },\n          input: {\n            disableUnderline: true,\n            ...slotProps?.input,\n          },\n        }}\n        {...rest}\n      />\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAwB,EAAU,EAChC,gBACA,sBACA,cACA,IAAI,GACJ,UACA,eAAY,IACZ,cACA,OACA,UACA,GAAG,KACc;CACjB,IAAM,IAAc,GAAO,EACrB,IAAK,KAAU,GAEf,IAAgB,OAAO,KAAU,WAAW,EAAM,SAAS;AAYjE,QACE,kBAAC,GAAD;EAAgB;EAAe;YAA/B,CACE,kBAAC,GAAD;GACM;GACJ,SAAQ;GACR,OAdJ,KAAS,QAAQ,KAAe,OAC9B,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAe,QACd,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAc;IAAmB,CAAA,CAE1D,EAAA,CAAA,GACD,KAAA;GAQW;GACJ;GACP,IAAI,GACD,MAAM,EAAiB,SAAS,EAI/B,WAAW,GACZ,EACF;GACD,WAAW;IACT,GAAG;IACH,WAAW;KACT,WAAW;KACX,GAAG,GAAW;KACf;IACD,YAAY;KACV,WAAW,EAAO;KAClB,GAAG,GAAW;KACf;IACD,OAAO;KACL,kBAAkB;KAClB,GAAG,GAAW;KACf;IACF;GACD,GAAI;GACJ,CAAA,EACD,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;IACN;KAEX"}