npm - synapse-react-client - Versions diffs - 4.0.45 → 4.0.47 - Mend

synapse-react-client 4.0.45 → 4.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

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

	@@ -1 +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 // oxlint-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.issues, 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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"}
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/AddCircleTwoTone'\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 // oxlint-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.some(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.issues, 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/TableColumnSchemaEditor/TableColumnSchemaFormActions.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableColumnSchemaFormActions.d.ts","sourceRoot":"","sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAA;~~AAwBrF~~,eAAO,MAAM,iCAAiC,0BAA0B,CAAA;AAiBxE,KAAK,iCAAiC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B,EAAE,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAA;CAC7E,CAAA;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,2CAmKzC"}
1	+ {"version":3,"file":"TableColumnSchemaFormActions.d.ts","sourceRoot":"","sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAA;AA0BrF,eAAO,MAAM,iCAAiC,0BAA0B,CAAA;AAiBxE,KAAK,iCAAiC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B,EAAE,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAA;CAC7E,CAAA;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,2CAmKzC"}

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.js CHANGED Viewed

@@ -7,8 +7,10 @@ import { getIsAllSelected as i, getNumberOfSelectedItems as a, tableColumnSchema
 import { useState as s } from "react";
 import { Box as c, Button as l, ButtonGroup as u, Checkbox as d, Link as f, Tooltip as p, Typography as m } from "@mui/material";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Healing as v, North as y, South as b } from "@mui/icons-material";
-import x from "pluralize";
+import v from "pluralize";
+import y from "@mui/icons-material/North";
+import b from "@mui/icons-material/South";
+import x from "@mui/icons-material/Healing";
 import { useAtomValue as S, useSetAtom as C } from "jotai/index";
 //#region src/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.tsx
 var w = "Use Recommended Sizes", T = /* @__PURE__ */ _(h, { children: [
@@ -114,7 +116,7 @@ function E(w) {
 				onCancel: () => {
 					N(!1);
 				},
-				title: `This will change ${F.toLocaleString()} ${x("column", F)} in this schema`,
+				title: `This will change ${F.toLocaleString()} ${v("column", F)} in this schema`,
 				content: T,
 				confirmButtonProps: { children: "Use Recommended Sizes" }
 			}), /* @__PURE__ */ g(p, {
@@ -122,7 +124,7 @@ function E(w) {
 				children: /* @__PURE__ */ g(c, { children: /* @__PURE__ */ g(l, {
 					sx: { height: "100%" },
 					variant: "outlined",
-					startIcon: D.isLoading ? /* @__PURE__ */ g(e, {}) : /* @__PURE__ */ g(v, {}),
+					startIcon: D.isLoading ? /* @__PURE__ */ g(e, {}) : /* @__PURE__ */ g(x, {}),
 					onClick: () => {
 						N(!0);
 					},

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableColumnSchemaFormActions.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.tsx"],"sourcesContent":["import { useGetAnnotationColumnModels } from '@/synapse-queries/table/useColumnModel'\nimport { Healing, North, South } from '@mui/icons-material'\nimport {\n Box,\n Button,\n ButtonGroup,\n Checkbox,\n Link,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { useAtomValue, useSetAtom } from 'jotai/index'\nimport pluralize from 'pluralize'\nimport { useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog'\nimport IconSvg from '../IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { getNumberOfColumnModelsWithValuesBelowMinimumRecommendedSizes } from './TableColumnSchemaEditorUtils'\nimport {\n getIsAllSelected,\n getNumberOfSelectedItems,\n tableColumnSchemaFormDataAtom,\n} from './TableColumnSchemaFormReducer'\n\nexport const USE_RECOMMENDED_SIZES_BUTTON_TEXT = 'Use Recommended Sizes'\n\nconst RECOMMENDED_SIZES_CONFIRMATION_MODAL_CONTENT = (\n <>\n <Typography variant={'body1'}>\n Proceeding will adjust columns with size values that are shorter than\n longest data in your annotations.\n </Typography>\n <Typography variant={'body1'}>\n Changed size values will appear in blue. Hover to see the previous value.\n </Typography>\n <Typography variant={'body1'}>\n Changes are saved only after clicking “Save” in the Schema editor. Click\n “Cancel” to discard unsaved changes.\n </Typography>\n </>\n)\ntype TableColumnSchemaFormActionsProps = {\n disabled?: boolean\n annotationColumnModelsQuery: ReturnType<typeof useGetAnnotationColumnModels>\n}\n\nexport function TableColumnSchemaFormActions(\n props: TableColumnSchemaFormActionsProps,\n) {\n const { disabled = false, annotationColumnModelsQuery } = props\n const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n\n const columnModels = useAtomValue(tableColumnSchemaFormDataAtom)\n const allSelected = getIsAllSelected(columnModels)\n const numSelected = getNumberOfSelectedItems(columnModels)\n\n const [\n showUseRecommendedSizesConfirmationDialog,\n setShowUseRecommendedSizesConfirmationDialog,\n ] = useState(false)\n\n const showUseRecommendedSizesButton =\n annotationColumnModelsQuery.isLoading \|\| annotationColumnModelsQuery.data\n const numberOfColumnsBelowRecommendedSizes = annotationColumnModelsQuery.data\n ? getNumberOfColumnModelsWithValuesBelowMinimumRecommendedSizes(\n columnModels,\n annotationColumnModelsQuery.data,\n )\n : 0\n\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'flex-start',\n gap: 1,\n }}\n >\n <Button\n aria-label={'Select All'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'toggleSelectAll' })\n }}\n sx={{ alignSelf: 'stretch' }}\n disabled={disabled \|\| columnModels.length == 0}\n >\n <Checkbox\n sx={{ mr: 1 }}\n checked={allSelected}\n indeterminate={numSelected > 0 && !allSelected}\n disabled={disabled \|\| columnModels.length == 0}\n />\n <Typography\n variant=\"smallText1\"\n sx={{\n color: 'text.secondary',\n }}\n >\n {numSelected} selected\n </Typography>\n </Button>\n <ButtonGroup sx={{ alignSelf: 'stretch' }}>\n <Button\n aria-label={'Move Down'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'moveDown' })\n }}\n disabled={disabled \|\| numSelected == 0}\n >\n <South fontSize={'small'} />\n </Button>\n <Button\n aria-label={'Move Up'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'moveUp' })\n }}\n disabled={disabled \|\| numSelected == 0}\n >\n <North fontSize={'small'} />\n </Button>\n </ButtonGroup>\n <Button\n aria-label={'Delete'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'delete' })\n }}\n sx={{ alignSelf: 'stretch' }}\n disabled={disabled \|\| numSelected == 0}\n >\n <IconSvg fontSize={'small'} icon={'delete'} wrap={false} />\n </Button>\n <Box\n sx={{\n flexGrow: 1,\n }}\n >\n {/* spacer */}\n </Box>\n <Link\n sx={{ display: 'block', py: '10px', mr: '10px', textAlign: 'right' }}\n href=\"https://help.synapse.org/docs/Organizing-Data-With-Tables.2011038095.html\"\n target=\"_blank\"\n >\n About schemas and column types\n </Link>\n {showUseRecommendedSizesButton && (\n <>\n <ConfirmationDialog\n open={showUseRecommendedSizesConfirmationDialog}\n onConfirm={() => {\n dispatch({\n type: 'updateColumnSizesToRecommendedValues',\n annotationColumnModels: annotationColumnModelsQuery.data!,\n })\n setShowUseRecommendedSizesConfirmationDialog(false)\n }}\n onCancel={() => {\n setShowUseRecommendedSizesConfirmationDialog(false)\n }}\n title={`This will change ${numberOfColumnsBelowRecommendedSizes.toLocaleString()} ${pluralize(\n 'column',\n numberOfColumnsBelowRecommendedSizes,\n )} in this schema`}\n content={RECOMMENDED_SIZES_CONFIRMATION_MODAL_CONTENT}\n confirmButtonProps={{\n children: USE_RECOMMENDED_SIZES_BUTTON_TEXT,\n }}\n />\n <Tooltip\n title={\n numberOfColumnsBelowRecommendedSizes > 0\n ? ''\n : 'All schema values meet the minimum recommended sizes.'\n }\n >\n <Box>\n <Button\n sx={{ height: '100%' }}\n variant={'outlined'}\n startIcon={\n annotationColumnModelsQuery.isLoading ? (\n <SynapseSpinner />\n ) : (\n <Healing />\n )\n }\n onClick={() => {\n setShowUseRecommendedSizesConfirmationDialog(true)\n }}\n disabled={\n annotationColumnModelsQuery.isLoading \|\|\n numberOfColumnsBelowRecommendedSizes == 0\n }\n >\n Use Recommended Sizes\n </Button>\n </Box>\n </Tooltip>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"~~;;;;;;;;;;;;;AAwBA~~,IAAa,IAAoC,yBAE3C,IACJ,kBAAA,GAAA,EAAA,UAAA;CACE,kBAAC,GAAD;EAAY,SAAS;YAAS;CAGlB,CAAA;CACZ,kBAAC,GAAD;EAAY,SAAS;YAAS;CAElB,CAAA;CACZ,kBAAC,GAAD;EAAY,SAAS;YAAS;CAGlB,CAAA;AACZ,EAAA,CAAA;AAOJ,SAAgB,EACd,GACA;CACA,IAAM,EAAE,cAAW,IAAO,mCAAgC,GACpD,IAAW,EAAW,CAA6B,GAEnD,IAAe,EAAa,CAA6B,GACzD,IAAc,EAAiB,CAAY,GAC3C,IAAc,EAAyB,CAAY,GAEnD,CACJ,GACA,KACE,EAAS,EAAK,GAEZ,IACJ,EAA4B,aAAa,EAA4B,MACjE,IAAuC,EAA4B,OACrE,EACE,GACA,EAA4B,IAC9B,IACA;CAEJ,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,KAAK;EACP;YALF;GAOE,kBAAC,GAAD;IACE,cAAY;IACZ,SAAS;IACT,OAAO;IACP,eAAe;KACb,EAAS,EAAE,MAAM,kBAAkB,CAAC;IACtC;IACA,IAAI,EAAE,WAAW,UAAU;IAC3B,UAAU,KAAY,EAAa,UAAU;cAR/C,CAUE,kBAAC,GAAD;KACE,IAAI,EAAE,IAAI,EAAE;KACZ,SAAS;KACT,eAAe,IAAc,KAAK,CAAC;KACnC,UAAU,KAAY,EAAa,UAAU;IAC9C,CAAA,GACD,kBAAC,GAAD;KACE,SAAQ;KACR,IAAI,EACF,OAAO,iBACT;eAJF,CAMG,GAAY,WACH;MACN;;GACR,kBAAC,GAAD;IAAa,IAAI,EAAE,WAAW,UAAU;cAAxC,CACE,kBAAC,GAAD;KACE,cAAY;KACZ,SAAS;KACT,OAAO;KACP,eAAe;MACb,EAAS,EAAE,MAAM,WAAW,CAAC;KAC/B;KACA,UAAU,KAAY,KAAe;eAErC,kBAAC,GAAD,EAAO,UAAU,QAAU,CAAA;IACrB,CAAA,GACR,kBAAC,GAAD;KACE,cAAY;KACZ,SAAS;KACT,OAAO;KACP,eAAe;MACb,EAAS,EAAE,MAAM,SAAS,CAAC;KAC7B;KACA,UAAU,KAAY,KAAe;eAErC,kBAAC,GAAD,EAAO,UAAU,QAAU,CAAA;IACrB,CAAA,CACG;;GACb,kBAAC,GAAD;IACE,cAAY;IACZ,SAAS;IACT,OAAO;IACP,eAAe;KACb,EAAS,EAAE,MAAM,SAAS,CAAC;IAC7B;IACA,IAAI,EAAE,WAAW,UAAU;IAC3B,UAAU,KAAY,KAAe;cAErC,kBAAC,GAAD;KAAS,UAAU;KAAS,MAAM;KAAU,MAAM;IAAQ,CAAA;GACpD,CAAA;GACR,kBAAC,GAAD,EACE,IAAI,EACF,UAAU,EACZ,EAGG,CAAA;GACL,kBAAC,GAAD;IACE,IAAI;KAAE,SAAS;KAAS,IAAI;KAAQ,IAAI;KAAQ,WAAW;IAAQ;IACnE,MAAK;IACL,QAAO;cACR;GAEK,CAAA;GACL,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,MAAM;IACN,iBAAiB;KAKf,AAJA,EAAS;MACP,MAAM;MACN,wBAAwB,EAA4B;KACtD,CAAC,GACD,EAA6C,EAAK;IACpD;IACA,gBAAgB;KACd,EAA6C,EAAK;IACpD;IACA,OAAO,oBAAoB,EAAqC,eAAe,EAAE,GAAG,EAClF,UACA,CACF,EAAE;IACF,SAAS;IACT,oBAAoB,EAClB,UAAA,wBACF;GACD,CAAA,GACD,kBAAC,GAAD;IACE,OACE,IAAuC,IACnC,KACA;cAGN,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,IAAI,EAAE,QAAQ,OAAO;KACrB,SAAS;KACT,WACE,EAA4B,YAC1B,kBAAC,GAAD,CAAiB,CAAA,IAEjB,kBAAC,GAAD,CAAU,CAAA;KAGd,eAAe;MACb,EAA6C,EAAI;KACnD;KACA,UACE,EAA4B,aAC5B,KAAwC;eAE3C;IAEO,CAAA,EACL,CAAA;GACE,CAAA,CACT,EAAA,CAAA;EAED;;AAET"}
1	+ {"version":3,"file":"TableColumnSchemaFormActions.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormActions.tsx"],"sourcesContent":["import { useGetAnnotationColumnModels } from '@/synapse-queries/table/useColumnModel'\nimport Healing from '@mui/icons-material/Healing'\nimport North from '@mui/icons-material/North'\nimport South from '@mui/icons-material/South'\nimport {\n Box,\n Button,\n ButtonGroup,\n Checkbox,\n Link,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { useAtomValue, useSetAtom } from 'jotai/index'\nimport pluralize from 'pluralize'\nimport { useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog'\nimport IconSvg from '../IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { getNumberOfColumnModelsWithValuesBelowMinimumRecommendedSizes } from './TableColumnSchemaEditorUtils'\nimport {\n getIsAllSelected,\n getNumberOfSelectedItems,\n tableColumnSchemaFormDataAtom,\n} from './TableColumnSchemaFormReducer'\n\nexport const USE_RECOMMENDED_SIZES_BUTTON_TEXT = 'Use Recommended Sizes'\n\nconst RECOMMENDED_SIZES_CONFIRMATION_MODAL_CONTENT = (\n <>\n <Typography variant={'body1'}>\n Proceeding will adjust columns with size values that are shorter than\n longest data in your annotations.\n </Typography>\n <Typography variant={'body1'}>\n Changed size values will appear in blue. Hover to see the previous value.\n </Typography>\n <Typography variant={'body1'}>\n Changes are saved only after clicking “Save” in the Schema editor. Click\n “Cancel” to discard unsaved changes.\n </Typography>\n </>\n)\ntype TableColumnSchemaFormActionsProps = {\n disabled?: boolean\n annotationColumnModelsQuery: ReturnType<typeof useGetAnnotationColumnModels>\n}\n\nexport function TableColumnSchemaFormActions(\n props: TableColumnSchemaFormActionsProps,\n) {\n const { disabled = false, annotationColumnModelsQuery } = props\n const dispatch = useSetAtom(tableColumnSchemaFormDataAtom)\n\n const columnModels = useAtomValue(tableColumnSchemaFormDataAtom)\n const allSelected = getIsAllSelected(columnModels)\n const numSelected = getNumberOfSelectedItems(columnModels)\n\n const [\n showUseRecommendedSizesConfirmationDialog,\n setShowUseRecommendedSizesConfirmationDialog,\n ] = useState(false)\n\n const showUseRecommendedSizesButton =\n annotationColumnModelsQuery.isLoading \|\| annotationColumnModelsQuery.data\n const numberOfColumnsBelowRecommendedSizes = annotationColumnModelsQuery.data\n ? getNumberOfColumnModelsWithValuesBelowMinimumRecommendedSizes(\n columnModels,\n annotationColumnModelsQuery.data,\n )\n : 0\n\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'flex-start',\n gap: 1,\n }}\n >\n <Button\n aria-label={'Select All'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'toggleSelectAll' })\n }}\n sx={{ alignSelf: 'stretch' }}\n disabled={disabled \|\| columnModels.length == 0}\n >\n <Checkbox\n sx={{ mr: 1 }}\n checked={allSelected}\n indeterminate={numSelected > 0 && !allSelected}\n disabled={disabled \|\| columnModels.length == 0}\n />\n <Typography\n variant=\"smallText1\"\n sx={{\n color: 'text.secondary',\n }}\n >\n {numSelected} selected\n </Typography>\n </Button>\n <ButtonGroup sx={{ alignSelf: 'stretch' }}>\n <Button\n aria-label={'Move Down'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'moveDown' })\n }}\n disabled={disabled \|\| numSelected == 0}\n >\n <South fontSize={'small'} />\n </Button>\n <Button\n aria-label={'Move Up'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'moveUp' })\n }}\n disabled={disabled \|\| numSelected == 0}\n >\n <North fontSize={'small'} />\n </Button>\n </ButtonGroup>\n <Button\n aria-label={'Delete'}\n variant={'outlined'}\n color={'neutral'}\n onClick={() => {\n dispatch({ type: 'delete' })\n }}\n sx={{ alignSelf: 'stretch' }}\n disabled={disabled \|\| numSelected == 0}\n >\n <IconSvg fontSize={'small'} icon={'delete'} wrap={false} />\n </Button>\n <Box\n sx={{\n flexGrow: 1,\n }}\n >\n {/* spacer */}\n </Box>\n <Link\n sx={{ display: 'block', py: '10px', mr: '10px', textAlign: 'right' }}\n href=\"https://help.synapse.org/docs/Organizing-Data-With-Tables.2011038095.html\"\n target=\"_blank\"\n >\n About schemas and column types\n </Link>\n {showUseRecommendedSizesButton && (\n <>\n <ConfirmationDialog\n open={showUseRecommendedSizesConfirmationDialog}\n onConfirm={() => {\n dispatch({\n type: 'updateColumnSizesToRecommendedValues',\n annotationColumnModels: annotationColumnModelsQuery.data!,\n })\n setShowUseRecommendedSizesConfirmationDialog(false)\n }}\n onCancel={() => {\n setShowUseRecommendedSizesConfirmationDialog(false)\n }}\n title={`This will change ${numberOfColumnsBelowRecommendedSizes.toLocaleString()} ${pluralize(\n 'column',\n numberOfColumnsBelowRecommendedSizes,\n )} in this schema`}\n content={RECOMMENDED_SIZES_CONFIRMATION_MODAL_CONTENT}\n confirmButtonProps={{\n children: USE_RECOMMENDED_SIZES_BUTTON_TEXT,\n }}\n />\n <Tooltip\n title={\n numberOfColumnsBelowRecommendedSizes > 0\n ? ''\n : 'All schema values meet the minimum recommended sizes.'\n }\n >\n <Box>\n <Button\n sx={{ height: '100%' }}\n variant={'outlined'}\n startIcon={\n annotationColumnModelsQuery.isLoading ? (\n <SynapseSpinner />\n ) : (\n <Healing />\n )\n }\n onClick={() => {\n setShowUseRecommendedSizesConfirmationDialog(true)\n }}\n disabled={\n annotationColumnModelsQuery.isLoading \|\|\n numberOfColumnsBelowRecommendedSizes == 0\n }\n >\n Use Recommended Sizes\n </Button>\n </Box>\n </Tooltip>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/components/TableColumnSchemaEditor/Validators/DatetimeSchema.js CHANGED Viewed

@@ -3,7 +3,7 @@ import t from "dayjs/plugin/utc";
 import { z as n } from "zod";
 //#region src/components/TableColumnSchemaEditor/Validators/DatetimeSchema.ts
 e.extend(t);
-var r = n.string().transform((t) => t.match(/^\d+$/) ? e.utc(parseInt(t)).toISOString() : e.utc(t).toISOString()), i = n.union([
+var r = n.string().transform((t) => /^\d+$/.exec(t) ? e.utc(parseInt(t)).toISOString() : e.utc(t).toISOString()), i = n.union([
 	n.number(),
 	r,
 	n.date()

package/dist/components/TableColumnSchemaEditor/Validators/DatetimeSchema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatetimeSchema.js","names":[],"sources":["../../../../src/components/TableColumnSchemaEditor/Validators/DatetimeSchema.ts"],"sourcesContent":["import { z } from 'zod'\nimport dayjs from 'dayjs'\nimport utc from 'dayjs/plugin/utc'\n\ndayjs.extend(utc)\n\n// Accepts a string that is either a UNIX timestamp in milliseconds or in ISO 8601 format, and returns a string in ISO 8601 format\nconst dateTimeString = z.string().transform(data => {\n // Note: can't use parseInt on a timestamp! \"2000-01-01T00:00:00Z\" will be parsed as 2000\n const isInt = ~~data.match(~~/^\\d~~+$/~~)\n if (isInt) {\n return dayjs.utc(parseInt(data)).toISOString()\n }\n return dayjs.utc(data).toISOString()\n})\n\n/*\n Validates and converts a value to a valid Synapse DATE value\n */\nexport const dateTimeSchema = z\n .union([z.number(), dateTimeString, z.date()])\n .transform(timestampMs => dayjs(timestampMs).toISOString())\n"],"mappings":";;;;AAIA,EAAM,OAAO,CAAG;AAGhB,IAAM,IAAiB,EAAE,OAAO,EAAE,WAAU,MAE5B,~~EAAK~~,~~MAAM~~,~~OACrB~~,IACK,EAAM,IAAI,SAAS,CAAI,CAAC,EAAE,YAAY,IAExC,EAAM,IAAI,CAAI,EAAE,YAAY,CACpC,GAKY,IAAiB,EAC3B,MAAM;CAAC,EAAE,OAAO;CAAG;CAAgB,EAAE,KAAK;AAAC,CAAC,EAC5C,WAAU,MAAe,EAAM,CAAW,EAAE,YAAY,CAAC"}
1	+ {"version":3,"file":"DatetimeSchema.js","names":[],"sources":["../../../../src/components/TableColumnSchemaEditor/Validators/DatetimeSchema.ts"],"sourcesContent":["import { z } from 'zod'\nimport dayjs from 'dayjs'\nimport utc from 'dayjs/plugin/utc'\n\ndayjs.extend(utc)\n\n// Accepts a string that is either a UNIX timestamp in milliseconds or in ISO 8601 format, and returns a string in ISO 8601 format\nconst dateTimeString = z.string().transform(data => {\n // Note: can't use parseInt on a timestamp! \"2000-01-01T00:00:00Z\" will be parsed as 2000\n const isInt = /^\\d+$/.exec(data)\n if (isInt) {\n return dayjs.utc(parseInt(data)).toISOString()\n }\n return dayjs.utc(data).toISOString()\n})\n\n/*\n Validates and converts a value to a valid Synapse DATE value\n */\nexport const dateTimeSchema = z\n .union([z.number(), dateTimeString, z.date()])\n .transform(timestampMs => dayjs(timestampMs).toISOString())\n"],"mappings":";;;;AAIA,EAAM,OAAO,CAAG;AAGhB,IAAM,IAAiB,EAAE,OAAO,EAAE,WAAU,MAE5B,QAAQ,KAAK,CACvB,IACK,EAAM,IAAI,SAAS,CAAI,CAAC,EAAE,YAAY,IAExC,EAAM,IAAI,CAAI,EAAE,YAAY,CACpC,GAKY,IAAiB,EAC3B,MAAM;CAAC,EAAE,OAAO;CAAG;CAAgB,EAAE,KAAK;AAAC,CAAC,EAC5C,WAAU,MAAe,EAAM,CAAW,EAAE,YAAY,CAAC"}

package/dist/components/TanStackTable/ColumnHeader.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { ColumnHeaderEnumFilter as t } from "./ColumnHeaderEnumFilter.js";
 import { useCallback as n } from "react";
 import { Box as r, IconButton as i, Tooltip as a } from "@mui/material";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { HelpTwoTone as l } from "@mui/icons-material";
+import l from "@mui/icons-material/HelpTwoTone";
 //#region src/components/TanStackTable/ColumnHeader.tsx
 function u(u) {
 	let { column: d, title: f = u.column.id, wrap: p = !1, helpText: m, filterControl: h, additionalButtons: g, sortIconRenderer: _, iconPlacement: v = "right", iconColor: y, iconSize: b } = u, x = n(() => {

package/dist/components/TanStackTable/ColumnHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnHeader.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"sourcesContent":["import { HeaderContext } from '@tanstack/react-table'\nimport { Box, IconButton, Tooltip } from '@mui/material'\nimport { HelpTwoTone } from '@mui/icons-material'\nimport IconSvg from '../IconSvg'\nimport { ReactNode, useCallback } from 'react'\nimport { ColumnHeaderEnumFilter } from './ColumnHeaderEnumFilter'\n\ntype SortIconRendererParams = {\n isSorted: 'asc' \| 'desc' \| false\n}\n\ntype ColumnHeaderProps = {\n title?: string\n helpText?: ReactNode\n additionalButtons?: ReactNode\n wrap?: boolean\n sortIconRenderer?: (params: SortIconRendererParams) => ReactNode\n iconPlacement?: 'left' \| 'right'\n iconColor?: string\n iconSize?: string \| number\n\n // TODO: Replace with props that can be passed to a reusable filter control\n filterControl?: ReactNode\n}\n\n/*\n Styled table column header component for use with @tanstack/react-table, with extra optional props for additional\n * UI features\n */\nexport default function ColumnHeader<TData = unknown, TValue = unknown>(\n props: ColumnHeaderProps & HeaderContext<TData, TValue>,\n) {\n const {\n column,\n title = props.column.id,\n wrap = false,\n helpText,\n filterControl: filterControlFromProps,\n additionalButtons,\n sortIconRenderer,\n iconPlacement = 'right',\n iconColor,\n iconSize,\n } = props\n\n const getFilterControl = useCallback(() => {\n if (filterControlFromProps) {\n return filterControlFromProps\n }\n if (column.getCanFilter()) {\n if (column.columnDef.meta?.filterVariant === 'enumeration') {\n return <ColumnHeaderEnumFilter column={column} title={title} />\n }\n // As needed, extend ColumnMeta.filterVariant to support other types of filters\n console.warn(\n `column.getCanFilter() was true for column ID: ${column.id} but no filterControlFromProps was passed and component for filterVariant: ${column.columnDef.meta?.filterVariant} is not implemented`,\n )\n }\n return <></>\n }, [column, filterControlFromProps, title])\n\n const filterControl = getFilterControl()\n const isSorted = column.getIsSorted()\n\n return (\n <Box\n sx={{\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n ...(iconPlacement === 'right' && {\n justifyContent: 'space-between',\n }),\n overflow: 'hidden',\n minWidth: 0,\n }}\n >\n <span\n style={{\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: wrap ? 'pre-wrap' : 'nowrap',\n minWidth: 0,\n }}\n title={title}\n >\n {title}\n </span>\n <Box\n role={'menubar'}\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: '22px',\n ml: iconPlacement === 'left' ? 1 : 2,\n gap: 0.25,\n }}\n >\n {helpText && (\n <Tooltip title={helpText} placement={'top'}>\n <IconButton size={'small'}>\n <HelpTwoTone fontSize={'inherit'} />\n </IconButton>\n </Tooltip>\n )}\n {column.getCanFilter() && filterControl}\n {column.getCanSort() && (\n <Tooltip title={`Sort by ${title}`} placement={'top'}>\n <IconButton\n role=\"button\"\n size={'small'}\n aria-label={`Sort by ${title}`}\n tabIndex={0}\n onKeyPress={() => column.toggleSorting()}\n onClick={() => column.toggleSorting()}\n >\n {sortIconRenderer ? (\n sortIconRenderer({ isSorted })\n ) : (\n <IconSvg\n icon={isSorted === 'asc' ? 'sortUp' : 'sortDown'}\n wrap={false}\n sx={{\n color:\n iconColor ?? (isSorted ? 'primary.main' : 'grey.700'),\n backgroundColor: 'none',\n ...(iconSize && { fontSize: iconSize }),\n }}\n />\n )}\n </IconButton>\n </Tooltip>\n )}\n {additionalButtons}\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;AA6BA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,WACA,WAAQ,EAAM,OAAO,IACrB,UAAO,IACP,aACA,eAAe,GACf,sBACA,qBACA,mBAAgB,SAChB,cACA,gBACE,GAkBE,IAhBmB,QAAkB;EACzC,IAAI,GACF,OAAO;EAET,IAAI,EAAO,aAAa,GAAG;GACzB,IAAI,EAAO,UAAU,MAAM,kBAAkB,eAC3C,OAAO,kBAAC,GAAD;IAAgC;IAAe;GAAQ,CAAA;GAGhE,QAAQ,KACN,iDAAiD,EAAO,GAAG,6EAA6E,EAAO,UAAU,MAAM,cAAc,oBAC/K;EACF;EACA,OAAO,kBAAA,GAAA,CAAI,CAAA;CACb,GAAG;EAAC;EAAQ;EAAwB;CAAK,CAEnB,EAAiB,GACjC,IAAW,EAAO,YAAY;CAEpC,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,cAAc;GACd,YAAY;GACZ,GAAI,MAAkB,WAAW,EAC/B,gBAAgB,gBAClB;GACA,UAAU;GACV,UAAU;EACZ;YAVF,CAYE,kBAAC,QAAD;GACE,OAAO;IACL,UAAU;IACV,cAAc;IACd,YAAY,IAAO,aAAa;IAChC,UAAU;GACZ;GACO;aAEN;EACG,CAAA,GACN,kBAAC,GAAD;GACE,MAAM;GACN,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,IAAI,MAAkB,SAAS,IAAI;IACnC,KAAK;GACP;aARF;IAUG,KACC,kBAAC,GAAD;KAAS,OAAO;KAAU,WAAW;eACnC,kBAAC,GAAD;MAAY,MAAM;gBAChB,kBAAC,GAAD,EAAa,UAAU,UAAY,CAAA;KACzB,CAAA;IACL,CAAA;IAEV,EAAO,aAAa,KAAK;IACzB,EAAO,WAAW,KACjB,kBAAC,GAAD;KAAS,OAAO,WAAW;KAAS,WAAW;eAC7C,kBAAC,GAAD;MACE,MAAK;MACL,MAAM;MACN,cAAY,WAAW;MACvB,UAAU;MACV,kBAAkB,EAAO,cAAc;MACvC,eAAe,EAAO,cAAc;gBAEnC,IACC,EAAiB,EAAE,YAAS,CAAC,IAE7B,kBAAC,GAAD;OACE,MAAM,MAAa,QAAQ,WAAW;OACtC,MAAM;OACN,IAAI;QACF,OACE,MAAc,IAAW,iBAAiB;QAC5C,iBAAiB;QACjB,GAAI,KAAY,EAAE,UAAU,EAAS;OACvC;MACD,CAAA;KAEO,CAAA;IACL,CAAA;IAEV;GACE;IACF;;AAET"}
1	+ {"version":3,"file":"ColumnHeader.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"sourcesContent":["import { HeaderContext } from '@tanstack/react-table'\nimport { Box, IconButton, Tooltip } from '@mui/material'\nimport HelpTwoTone from '@mui/icons-material/HelpTwoTone'\nimport IconSvg from '../IconSvg'\nimport { ReactNode, useCallback } from 'react'\nimport { ColumnHeaderEnumFilter } from './ColumnHeaderEnumFilter'\n\ntype SortIconRendererParams = {\n isSorted: 'asc' \| 'desc' \| false\n}\n\ntype ColumnHeaderProps = {\n title?: string\n helpText?: ReactNode\n additionalButtons?: ReactNode\n wrap?: boolean\n sortIconRenderer?: (params: SortIconRendererParams) => ReactNode\n iconPlacement?: 'left' \| 'right'\n iconColor?: string\n iconSize?: string \| number\n\n // TODO: Replace with props that can be passed to a reusable filter control\n filterControl?: ReactNode\n}\n\n/*\n Styled table column header component for use with @tanstack/react-table, with extra optional props for additional\n * UI features\n */\nexport default function ColumnHeader<TData = unknown, TValue = unknown>(\n props: ColumnHeaderProps & HeaderContext<TData, TValue>,\n) {\n const {\n column,\n title = props.column.id,\n wrap = false,\n helpText,\n filterControl: filterControlFromProps,\n additionalButtons,\n sortIconRenderer,\n iconPlacement = 'right',\n iconColor,\n iconSize,\n } = props\n\n const getFilterControl = useCallback(() => {\n if (filterControlFromProps) {\n return filterControlFromProps\n }\n if (column.getCanFilter()) {\n if (column.columnDef.meta?.filterVariant === 'enumeration') {\n return <ColumnHeaderEnumFilter column={column} title={title} />\n }\n // As needed, extend ColumnMeta.filterVariant to support other types of filters\n console.warn(\n `column.getCanFilter() was true for column ID: ${column.id} but no filterControlFromProps was passed and component for filterVariant: ${column.columnDef.meta?.filterVariant} is not implemented`,\n )\n }\n return <></>\n }, [column, filterControlFromProps, title])\n\n const filterControl = getFilterControl()\n const isSorted = column.getIsSorted()\n\n return (\n <Box\n sx={{\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n ...(iconPlacement === 'right' && {\n justifyContent: 'space-between',\n }),\n overflow: 'hidden',\n minWidth: 0,\n }}\n >\n <span\n style={{\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: wrap ? 'pre-wrap' : 'nowrap',\n minWidth: 0,\n }}\n title={title}\n >\n {title}\n </span>\n <Box\n role={'menubar'}\n sx={{\n display: 'flex',\n alignItems: 'center',\n height: '22px',\n ml: iconPlacement === 'left' ? 1 : 2,\n gap: 0.25,\n }}\n >\n {helpText && (\n <Tooltip title={helpText} placement={'top'}>\n <IconButton size={'small'}>\n <HelpTwoTone fontSize={'inherit'} />\n </IconButton>\n </Tooltip>\n )}\n {column.getCanFilter() && filterControl}\n {column.getCanSort() && (\n <Tooltip title={`Sort by ${title}`} placement={'top'}>\n <IconButton\n role=\"button\"\n size={'small'}\n aria-label={`Sort by ${title}`}\n tabIndex={0}\n onKeyPress={() => column.toggleSorting()}\n onClick={() => column.toggleSorting()}\n >\n {sortIconRenderer ? (\n sortIconRenderer({ isSorted })\n ) : (\n <IconSvg\n icon={isSorted === 'asc' ? 'sortUp' : 'sortDown'}\n wrap={false}\n sx={{\n color:\n iconColor ?? (isSorted ? 'primary.main' : 'grey.700'),\n backgroundColor: 'none',\n ...(iconSize && { fontSize: iconSize }),\n }}\n />\n )}\n </IconButton>\n </Tooltip>\n )}\n {additionalButtons}\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;AA6BA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,WACA,WAAQ,EAAM,OAAO,IACrB,UAAO,IACP,aACA,eAAe,GACf,sBACA,qBACA,mBAAgB,SAChB,cACA,gBACE,GAkBE,IAhBmB,QAAkB;EACzC,IAAI,GACF,OAAO;EAET,IAAI,EAAO,aAAa,GAAG;GACzB,IAAI,EAAO,UAAU,MAAM,kBAAkB,eAC3C,OAAO,kBAAC,GAAD;IAAgC;IAAe;GAAQ,CAAA;GAGhE,QAAQ,KACN,iDAAiD,EAAO,GAAG,6EAA6E,EAAO,UAAU,MAAM,cAAc,oBAC/K;EACF;EACA,OAAO,kBAAA,GAAA,CAAI,CAAA;CACb,GAAG;EAAC;EAAQ;EAAwB;CAAK,CAEnB,EAAiB,GACjC,IAAW,EAAO,YAAY;CAEpC,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,cAAc;GACd,YAAY;GACZ,GAAI,MAAkB,WAAW,EAC/B,gBAAgB,gBAClB;GACA,UAAU;GACV,UAAU;EACZ;YAVF,CAYE,kBAAC,QAAD;GACE,OAAO;IACL,UAAU;IACV,cAAc;IACd,YAAY,IAAO,aAAa;IAChC,UAAU;GACZ;GACO;aAEN;EACG,CAAA,GACN,kBAAC,GAAD;GACE,MAAM;GACN,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,IAAI,MAAkB,SAAS,IAAI;IACnC,KAAK;GACP;aARF;IAUG,KACC,kBAAC,GAAD;KAAS,OAAO;KAAU,WAAW;eACnC,kBAAC,GAAD;MAAY,MAAM;gBAChB,kBAAC,GAAD,EAAa,UAAU,UAAY,CAAA;KACzB,CAAA;IACL,CAAA;IAEV,EAAO,aAAa,KAAK;IACzB,EAAO,WAAW,KACjB,kBAAC,GAAD;KAAS,OAAO,WAAW;KAAS,WAAW;eAC7C,kBAAC,GAAD;MACE,MAAK;MACL,MAAM;MACN,cAAY,WAAW;MACvB,UAAU;MACV,kBAAkB,EAAO,cAAc;MACvC,eAAe,EAAO,cAAc;gBAEnC,IACC,EAAiB,EAAE,YAAS,CAAC,IAE7B,kBAAC,GAAD;OACE,MAAM,MAAa,QAAQ,WAAW;OACtC,MAAM;OACN,IAAI;QACF,OACE,MAAc,IAAW,iBAAiB;QAC5C,iBAAiB;QACjB,GAAI,KAAY,EAAE,UAAU,EAAS;OACvC;MACD,CAAA;KAEO,CAAA;IACL,CAAA;IAEV;GACE;IACF;;AAET"}

package/dist/components/TanStackTable/ColumnHeaderEnumFilter.js CHANGED Viewed

@@ -9,7 +9,7 @@ function o(e, t) {
 function s(e, t) {
 	e.setFilterValue((e) => {
 		if (e) {
-			let i = [...e.filter((e) => !r(e, t))];
+			let i = e.filter((e) => !r(e, t));
 			if (!n(i)) return i;
 		}
 		return null;

package/dist/components/TanStackTable/ColumnHeaderEnumFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnHeaderEnumFilter.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeaderEnumFilter.tsx"],"sourcesContent":["import { Column, RowData } from '@tanstack/react-table'\nimport { isEmpty, isEqual, noop } from 'lodash-es'\nimport { useMemo } from 'react'\nimport EnumFacetFilterUI, {\n EnumFacetFilterUIProps,\n RenderedFacetValue,\n} from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI'\n\nfunction setEnumFilterValue<TData extends RowData, TValue = unknown>(\n column: Column<TData, TValue>,\n newValue: TValue,\n) {\n if (column.columnDef.meta?.enableMultipleSelect) {\n // Append the value to the list, or create the list if it does not exist\n column.setFilterValue((curr: TValue[] \| null): TValue[] \| null => {\n if (curr) {\n return [...curr, newValue]\n }\n return [newValue]\n })\n } else {\n // Replace the list\n column.setFilterValue([newValue])\n }\n}\n\nfunction removeEnumFilterValue<TData extends RowData, TValue = unknown>(\n column: Column<TData, TValue>,\n valueToRemove: TValue,\n) {\n column.setFilterValue((curr: TValue[] \| null): TValue[] \| null => {\n if (curr) {\n const newValue = ~~[\n ...~~curr.filter(currValue => !isEqual(currValue, valueToRemove)),\n ]\n if (!isEmpty(newValue)) {\n return newValue\n }\n }\n return null\n })\n}\n\ntype ColumnHeaderEnumFilterProps<TData = unknown, TValue = unknown> = {\n column: Column<TData, TValue>\n title: string\n}\n\nfunction getMaybeFacetedUniqueValues<TValue = unknown>(\n columnFacetedUniqueValues: Map<TValue, number>,\n): {\n value: TValue\n count?: number\n}[] {\n if (columnFacetedUniqueValues) {\n // @tanstack/table currently has no API to define a unique set of values for a column without count statistics\n // In each instance, we manually defined a set of unique values and set the count to 0\n const hasFacetCounts = Array.from(columnFacetedUniqueValues.values()).some(\n v => v != 0,\n )\n return Array.from(columnFacetedUniqueValues.entries()).map(\n (entry: [TValue, number]) => ({\n value: entry[0],\n count: hasFacetCounts ? entry[1] : undefined,\n }),\n )\n }\n return []\n}\n\n/*\n Used to create {@link EnumFacetFilterUIProps} that can be used to create a control to filter column values based on\n * the provided @tanstack/react-table {@link Column}. The custom properties used to configure the filter should be set\n * in the column's `meta` field.\n * @param props\n * @constructor\n */\nexport function ColumnHeaderEnumFilter<TData = unknown, TValue = unknown>(\n props: ColumnHeaderEnumFilterProps<TData, TValue>,\n) {\n type EnumFilterValue = TValue[]\n const { column, title } = props\n\n const canMultiSelect = column.columnDef.meta?.enableMultipleSelect \|\| false\n\n const _uncheckedFilterValues = column.getFilterValue() as EnumFilterValue\n const filterValues = useMemo(\n () => _uncheckedFilterValues \|\| [],\n [_uncheckedFilterValues],\n )\n\n // Use the column's enumValues and filterValues to create the facet value objects used by EnumFacetFilterUI\n const facetedUniqueValues = column.getFacetedUniqueValues() as Map<\n TValue,\n number\n >\n const transformedFilterValues: RenderedFacetValue<TValue>[] = useMemo(\n () =>\n getMaybeFacetedUniqueValues(facetedUniqueValues).map(\n (facetValue): RenderedFacetValue<TValue> => {\n let displayText: string = facetValue.value as unknown as string\n if (column.columnDef?.meta?.getDisplayText) {\n displayText = column.columnDef.meta.getDisplayText(facetValue.value)\n }\n const currentFilterValue = filterValues \|\| []\n const isSelected = Boolean(\n currentFilterValue.find(\n filterValue => filterValue === facetValue.value,\n ),\n )\n return { ...facetValue, displayText, isSelected }\n },\n ),\n [column, filterValues, facetedUniqueValues],\n )\n return (\n <EnumFacetFilterUI\n facetTitle={title}\n facetValues={transformedFilterValues}\n filterIsActive={column.getIsFiltered()}\n containerAs={'Dropdown'}\n dropdownType={'Icon'}\n defaultShowAllValues={true}\n onAddValueToSelection={newFilterValue => {\n setEnumFilterValue(column, newFilterValue)\n }}\n onRemoveValueFromSelection={valueToRemove => {\n removeEnumFilterValue(column, valueToRemove)\n }}\n onRemoveAllFacetSelections={() => {\n column.setFilterValue(null)\n }}\n onHoverOverValue={noop}\n canMultiSelect={canMultiSelect}\n />\n )\n}\n"],"mappings":";;;;;AAQA,SAAS,EACP,GACA,GACA;CACA,AAAI,EAAO,UAAU,MAAM,uBAEzB,EAAO,gBAAgB,MACjB,IACK,CAAC,GAAG,GAAM,CAAQ,IAEpB,CAAC,CAAQ,CACjB,IAGD,EAAO,eAAe,CAAC,CAAQ,CAAC;AAEpC;AAEA,SAAS,EACP,GACA,GACA;CACA,EAAO,gBAAgB,MAA2C;EAChE,IAAI,GAAM;GACR,IAAM,IAAW,~~CACf,GAAG,~~EAAK,~~QAAO~~,MAAa,CAAC,EAAQ,GAAW,CAAa,~~CAAC,CAChE~~;GACA,IAAI,CAAC,EAAQ,CAAQ,GACnB,OAAO;EAEX;EACA,OAAO;CACT,CAAC;AACH;AAOA,SAAS,EACP,GAIE;CACF,IAAI,GAA2B;EAG7B,IAAM,IAAiB,MAAM,KAAK,EAA0B,OAAO,CAAC,EAAE,MACpE,MAAK,KAAK,CACZ;EACA,OAAO,MAAM,KAAK,EAA0B,QAAQ,CAAC,EAAE,KACpD,OAA6B;GAC5B,OAAO,EAAM;GACb,OAAO,IAAiB,EAAM,KAAK,KAAA;EACrC,EACF;CACF;CACA,OAAO,CAAC;AACV;AASA,SAAgB,EACd,GACA;CAEA,IAAM,EAAE,WAAQ,aAAU,GAEpB,IAAiB,EAAO,UAAU,MAAM,wBAAwB,IAEhE,IAAyB,EAAO,eAAe,GAC/C,IAAe,QACb,KAA0B,CAAC,GACjC,CAAC,CAAsB,CACzB,GAGM,IAAsB,EAAO,uBAAuB;CAuB1D,OACE,kBAAC,GAAD;EACE,YAAY;EACZ,aAtB0D,QAE1D,EAA4B,CAAmB,EAAE,KAC9C,MAA2C;GAC1C,IAAI,IAAsB,EAAW;GACrC,AAAI,EAAO,WAAW,MAAM,mBAC1B,IAAc,EAAO,UAAU,KAAK,eAAe,EAAW,KAAK;GAGrE,IAAM,IAAa,GADQ,KAAgB,CAAC,GAEvB,MACjB,MAAe,MAAgB,EAAW,KAC5C;GAEF,OAAO;IAAE,GAAG;IAAY;IAAa;GAAW;EAClD,CACF,GACF;GAAC;GAAQ;GAAc;EAAmB,CAK3B;EACb,gBAAgB,EAAO,cAAc;EACrC,aAAa;EACb,cAAc;EACd,sBAAsB;EACtB,wBAAuB,MAAkB;GACvC,EAAmB,GAAQ,CAAc;EAC3C;EACA,6BAA4B,MAAiB;GAC3C,EAAsB,GAAQ,CAAa;EAC7C;EACA,kCAAkC;GAChC,EAAO,eAAe,IAAI;EAC5B;EACA,kBAAkB;EACF;CACjB,CAAA;AAEL"}
1	+ {"version":3,"file":"ColumnHeaderEnumFilter.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeaderEnumFilter.tsx"],"sourcesContent":["import { Column, RowData } from '@tanstack/react-table'\nimport { isEmpty, isEqual, noop } from 'lodash-es'\nimport { useMemo } from 'react'\nimport EnumFacetFilterUI, {\n EnumFacetFilterUIProps,\n RenderedFacetValue,\n} from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI'\n\nfunction setEnumFilterValue<TData extends RowData, TValue = unknown>(\n column: Column<TData, TValue>,\n newValue: TValue,\n) {\n if (column.columnDef.meta?.enableMultipleSelect) {\n // Append the value to the list, or create the list if it does not exist\n column.setFilterValue((curr: TValue[] \| null): TValue[] \| null => {\n if (curr) {\n return [...curr, newValue]\n }\n return [newValue]\n })\n } else {\n // Replace the list\n column.setFilterValue([newValue])\n }\n}\n\nfunction removeEnumFilterValue<TData extends RowData, TValue = unknown>(\n column: Column<TData, TValue>,\n valueToRemove: TValue,\n) {\n column.setFilterValue((curr: TValue[] \| null): TValue[] \| null => {\n if (curr) {\n const newValue = curr.filter(\n currValue => !isEqual(currValue, valueToRemove),\n )\n if (!isEmpty(newValue)) {\n return newValue\n }\n }\n return null\n })\n}\n\ntype ColumnHeaderEnumFilterProps<TData = unknown, TValue = unknown> = {\n column: Column<TData, TValue>\n title: string\n}\n\nfunction getMaybeFacetedUniqueValues<TValue = unknown>(\n columnFacetedUniqueValues: Map<TValue, number>,\n): {\n value: TValue\n count?: number\n}[] {\n if (columnFacetedUniqueValues) {\n // @tanstack/table currently has no API to define a unique set of values for a column without count statistics\n // In each instance, we manually defined a set of unique values and set the count to 0\n const hasFacetCounts = Array.from(columnFacetedUniqueValues.values()).some(\n v => v != 0,\n )\n return Array.from(columnFacetedUniqueValues.entries()).map(\n (entry: [TValue, number]) => ({\n value: entry[0],\n count: hasFacetCounts ? entry[1] : undefined,\n }),\n )\n }\n return []\n}\n\n/*\n Used to create {@link EnumFacetFilterUIProps} that can be used to create a control to filter column values based on\n * the provided @tanstack/react-table {@link Column}. The custom properties used to configure the filter should be set\n * in the column's `meta` field.\n * @param props\n * @constructor\n */\nexport function ColumnHeaderEnumFilter<TData = unknown, TValue = unknown>(\n props: ColumnHeaderEnumFilterProps<TData, TValue>,\n) {\n type EnumFilterValue = TValue[]\n const { column, title } = props\n\n const canMultiSelect = column.columnDef.meta?.enableMultipleSelect \|\| false\n\n const _uncheckedFilterValues = column.getFilterValue() as EnumFilterValue\n const filterValues = useMemo(\n () => _uncheckedFilterValues \|\| [],\n [_uncheckedFilterValues],\n )\n\n // Use the column's enumValues and filterValues to create the facet value objects used by EnumFacetFilterUI\n const facetedUniqueValues = column.getFacetedUniqueValues() as Map<\n TValue,\n number\n >\n const transformedFilterValues: RenderedFacetValue<TValue>[] = useMemo(\n () =>\n getMaybeFacetedUniqueValues(facetedUniqueValues).map(\n (facetValue): RenderedFacetValue<TValue> => {\n let displayText: string = facetValue.value as unknown as string\n if (column.columnDef?.meta?.getDisplayText) {\n displayText = column.columnDef.meta.getDisplayText(facetValue.value)\n }\n const currentFilterValue = filterValues \|\| []\n const isSelected = Boolean(\n currentFilterValue.find(\n filterValue => filterValue === facetValue.value,\n ),\n )\n return { ...facetValue, displayText, isSelected }\n },\n ),\n [column, filterValues, facetedUniqueValues],\n )\n return (\n <EnumFacetFilterUI\n facetTitle={title}\n facetValues={transformedFilterValues}\n filterIsActive={column.getIsFiltered()}\n containerAs={'Dropdown'}\n dropdownType={'Icon'}\n defaultShowAllValues={true}\n onAddValueToSelection={newFilterValue => {\n setEnumFilterValue(column, newFilterValue)\n }}\n onRemoveValueFromSelection={valueToRemove => {\n removeEnumFilterValue(column, valueToRemove)\n }}\n onRemoveAllFacetSelections={() => {\n column.setFilterValue(null)\n }}\n onHoverOverValue={noop}\n canMultiSelect={canMultiSelect}\n />\n )\n}\n"],"mappings":";;;;;AAQA,SAAS,EACP,GACA,GACA;CACA,AAAI,EAAO,UAAU,MAAM,uBAEzB,EAAO,gBAAgB,MACjB,IACK,CAAC,GAAG,GAAM,CAAQ,IAEpB,CAAC,CAAQ,CACjB,IAGD,EAAO,eAAe,CAAC,CAAQ,CAAC;AAEpC;AAEA,SAAS,EACP,GACA,GACA;CACA,EAAO,gBAAgB,MAA2C;EAChE,IAAI,GAAM;GACR,IAAM,IAAW,EAAK,QACpB,MAAa,CAAC,EAAQ,GAAW,CAAa,CAChD;GACA,IAAI,CAAC,EAAQ,CAAQ,GACnB,OAAO;EAEX;EACA,OAAO;CACT,CAAC;AACH;AAOA,SAAS,EACP,GAIE;CACF,IAAI,GAA2B;EAG7B,IAAM,IAAiB,MAAM,KAAK,EAA0B,OAAO,CAAC,EAAE,MACpE,MAAK,KAAK,CACZ;EACA,OAAO,MAAM,KAAK,EAA0B,QAAQ,CAAC,EAAE,KACpD,OAA6B;GAC5B,OAAO,EAAM;GACb,OAAO,IAAiB,EAAM,KAAK,KAAA;EACrC,EACF;CACF;CACA,OAAO,CAAC;AACV;AASA,SAAgB,EACd,GACA;CAEA,IAAM,EAAE,WAAQ,aAAU,GAEpB,IAAiB,EAAO,UAAU,MAAM,wBAAwB,IAEhE,IAAyB,EAAO,eAAe,GAC/C,IAAe,QACb,KAA0B,CAAC,GACjC,CAAC,CAAsB,CACzB,GAGM,IAAsB,EAAO,uBAAuB;CAuB1D,OACE,kBAAC,GAAD;EACE,YAAY;EACZ,aAtB0D,QAE1D,EAA4B,CAAmB,EAAE,KAC9C,MAA2C;GAC1C,IAAI,IAAsB,EAAW;GACrC,AAAI,EAAO,WAAW,MAAM,mBAC1B,IAAc,EAAO,UAAU,KAAK,eAAe,EAAW,KAAK;GAGrE,IAAM,IAAa,GADQ,KAAgB,CAAC,GAEvB,MACjB,MAAe,MAAgB,EAAW,KAC5C;GAEF,OAAO;IAAE,GAAG;IAAY;IAAa;GAAW;EAClD,CACF,GACF;GAAC;GAAQ;GAAc;EAAmB,CAK3B;EACb,gBAAgB,EAAO,cAAc;EACrC,aAAa;EACb,cAAc;EACd,sBAAsB;EACtB,wBAAuB,MAAkB;GACvC,EAAmB,GAAQ,CAAc;EAC3C;EACA,6BAA4B,MAAiB;GAC3C,EAAsB,GAAQ,CAAa;EAC7C;EACA,kCAAkC;GAChC,EAAO,eAAe,IAAI;EAC5B;EACA,kBAAkB;EACF;CACjB,CAAA;AAEL"}

package/dist/components/TanStackTable/StyledTanStackTable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyledTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0CAA0C,CAAA;AAGjD,OAAO,EAGL,GAAG,EACH,KAAK,EACN,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAgC,cAAc,EAAE,MAAM,aAAa,CAAA;AAM1E,OAAO,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGhF,MAAM,MAAM,wBAAwB,CAAC,KAAK,GAAG,OAAO,EAAE,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;IAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yBAAyB,CAAC,EAAE,yBAAyB,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;CAC1D,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA;AAElE;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,~~2CAkOjD~~"}
1	+ {"version":3,"file":"StyledTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0CAA0C,CAAA;AAGjD,OAAO,EAGL,GAAG,EACH,KAAK,EACN,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAgC,cAAc,EAAE,MAAM,aAAa,CAAA;AAM1E,OAAO,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGhF,MAAM,MAAM,wBAAwB,CAAC,KAAK,GAAG,OAAO,EAAE,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;IAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yBAAyB,CAAC,EAAE,yBAAyB,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;CAC1D,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA;AAElE;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,2CAiOjD"}

package/dist/components/TanStackTable/StyledTanStackTable.js CHANGED Viewed

@@ -34,10 +34,7 @@ function _(_) {
 	]);
 	let J = c(() => {
 		let e = v.getFlatHeaders(), n = {};
-		for (let i = 0; i < e.length; i++) {
-			let a = e[i];
-			n[r(a.id)] = a.getSize(), n[t(a.column.id)] = a.column.getSize();
-		}
+		for (let i of e) n[r(i.id)] = i.getSize(), n[t(i.column.id)] = i.column.getSize();
 		return n;
 	}, [
 		v.getState().columnSizingInfo,

package/dist/components/TanStackTable/StyledTanStackTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n StyledTableContainer,\n StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport { Box } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport {\n ColumnSizingState,\n flexRender,\n Row,\n Table,\n} from '@tanstack/react-table'\nimport { UIEvent, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n getColumnSizeCssVariable,\n getCommonPinningStyles,\n getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\nimport { useSyncedTopScrollbar } from './useSyncedTopScrollbar'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n table: Table<TData>\n styledTableContainerProps?: StyledTableContainerProps\n fullWidth?: boolean\n /*\n When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n * Resizing still works — dragging a column sets a new minimum width.\n * Defaults to false (fixed layout).\n /\n autoColumnSizing?: boolean\n /\n When true, renders an additional horizontal scrollbar above the table (in addition to the\n * browser's native scrollbar below it), synced to the same scroll position. Useful for wide\n * tables where the bottom scrollbar may be far from the viewport's visible area.\n * @default false\n /\n showTopScrollbar?: boolean\n slots?: StyledTanStackTableSlots<TData, TRowType>\n slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' \| 'rowTransform'>\n\n/\n Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n /\nexport default function StyledTanStackTable<\n TData = unknown,\n TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n const {\n table,\n styledTableContainerProps,\n fullWidth = true,\n autoColumnSizing = false,\n showTopScrollbar = false,\n slots = {},\n slotProps = {},\n } = props\n const {\n Thead = 'thead',\n Th = 'th',\n Table = 'table',\n ...tableBodySlots\n } = slots\n const {\n Table: tableSlotProps = {},\n Thead: theadSlotProps = {},\n Th: thSlotProps = {},\n ...tableBodySlotProps\n } = slotProps\n\n const tableBodyProps: TableBodyProps<TData, TRowType> = {\n table,\n slots: tableBodySlots,\n slotProps: tableBodySlotProps,\n rows: props.rows!,\n rowTransform: props.rowTransform!,\n }\n\n /\n When autoColumnSizing is true we do a two-phase render:\n * 1. Render with table-layout: auto and no width constraints so the browser\n * natively sizes each column to its content.\n * 2. After the first paint, measure each <th> and write the real pixel widths\n * into TanStack's columnSizing state, then switch to table-layout: fixed.\n \n This gives content-based initial sizes while still allowing the user to drag\n * a column narrower than its content.\n /\n const tableRef = useRef<HTMLTableElement>(null)\n\n const {\n containerRef,\n topScrollRef,\n targetWidth: tableRenderedWidth,\n handleTopScroll,\n handleBottomScroll,\n } = useSyncedTopScrollbar(tableRef, showTopScrollbar)\n\n // Merge our own container ref/onScroll with any that the caller passed via\n // styledTableContainerProps, rather than one clobbering the other.\n const {\n ref: callerContainerRef,\n onScroll: callerOnScroll,\n ...restContainerProps\n } = styledTableContainerProps ?? {}\n const mergedContainerRef = useForkRef(containerRef, callerContainerRef)\n\n // Track what columns+visibility combination was last measured so we know when\n // a re-measurement is needed (e.g. columns change or visibility is toggled).\n const columnVisibility = table.getState().columnVisibility\n const [lastMeasuredState, setLastMeasuredState] = useState<{\n columns: typeof table.options.columns\n columnVisibility: typeof columnVisibility\n } \| null>(null)\n\n // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n // current columns+visibility matches the last measured snapshot.\n const hasMeasured =\n !autoColumnSizing \|\|\n (lastMeasuredState?.columns === table.options.columns &&\n lastMeasuredState?.columnVisibility === columnVisibility)\n\n // After the browser has laid out the auto-sized table, capture the widths and\n // switch to fixed layout so that the user can resize below the content width.\n // useLayoutEffect runs synchronously after DOM mutations, before the browser\n // paints, which is required for accurate DOM measurements.\n useLayoutEffect(() => {\n if (!autoColumnSizing \|\| hasMeasured \|\| !tableRef.current) return\n\n const ths = tableRef.current.querySelectorAll(\n ':scope > thead > tr:first-child > th',\n )\n const headers = table.getFlatHeaders()\n const newSizes: ColumnSizingState = {}\n headers.forEach((header, i) => {\n const th = ths[i] as HTMLElement \| undefined\n if (th) {\n newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n }\n })\n if (Object.keys(newSizes).length > 0) {\n table.setColumnSizing(newSizes)\n setLastMeasuredState({\n columns: table.options.columns,\n columnVisibility,\n })\n }\n }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n /\n Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n \n See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n /\n const columnSizeVars = useMemo(() => {\n const headers = table.getFlatHeaders()\n const colSizes: { [key: string]: number } = {}\n for (let i = 0; i < headers.length; i++) {\n const header = headers[i]\n colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n colSizes[getColumnSizeCssVariable(header.column.id)] =\n header.column.getSize()\n }\n return colSizes\n // Intentionally limit the dependencies to only recompute when the column sizes change\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [\n table.getState().columnSizingInfo,\n table.getState().columnSizing,\n table.getState().columnVisibility, // If a column is added, its width should be recalculated\n ])\n\n // Before measurement: let the browser shrink the table to content width so we\n // can read accurate sizes. After measurement: use the exact measured total.\n let tableWidth: string\n if (fullWidth) {\n tableWidth = '100%'\n } else if (!hasMeasured) {\n tableWidth = 'max-content'\n } else {\n tableWidth = `${table.getTotalSize()}px`\n }\n\n / When resizing any column we will render this special memoized version of our table body /\n const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n ? MemoizedTableBody\n : TableBody\n\n function handleContainerScroll(e: UIEvent<HTMLDivElement>) {\n callerOnScroll?.(e)\n if (showTopScrollbar) {\n handleBottomScroll(e)\n }\n }\n\n return (\n <>\n {showTopScrollbar && (\n <Box\n ref={topScrollRef}\n onScroll={handleTopScroll}\n sx={{ overflowX: 'auto', overflowY: 'hidden', height: '16px' }}\n >\n <Box sx={{ width: tableRenderedWidth, height: '1px' }} />\n </Box>\n )}\n <StyledTableContainer\n {...restContainerProps}\n ref={mergedContainerRef}\n onScroll={handleContainerScroll}\n >\n <Table\n {...tableSlotProps}\n ref={tableRef}\n style={{\n ...columnSizeVars,\n // Pre-measurement: auto layout so the browser can size columns to content.\n // Post-measurement: fixed layout so the user can resize below content width.\n tableLayout: hasMeasured ? 'fixed' : 'auto',\n width: tableWidth,\n ...tableSlotProps['style'],\n }}\n >\n <Thead {...theadSlotProps}>\n {table.getHeaderGroups().map(headerGroup => {\n return (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <Th\n key={header.id}\n colSpan={header.colSpan}\n {...thSlotProps}\n style={{\n // Pre-measurement: no width hint — let the browser size freely.\n // Post-measurement: exact width from the measured/resized value.\n ...(hasMeasured && {\n width: `calc(var(${getHeaderSizeCssVariable(\n header.id,\n )}) 1px)`,\n }),\n ...getCommonPinningStyles(header.column),\n ...thSlotProps['style'],\n }}\n >\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getCanResize() && (\n <div\n className={`resizer ${\n header.column.getIsResizing() ? 'isResizing' : ''\n }`}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n />\n )}\n </Th>\n ))}\n </tr>\n )\n })}\n </Thead>\n <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n </Table>\n </StyledTableContainer>\n </>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n StyledTableContainer,\n StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport { Box } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport {\n ColumnSizingState,\n flexRender,\n Row,\n Table,\n} from '@tanstack/react-table'\nimport { UIEvent, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n getColumnSizeCssVariable,\n getCommonPinningStyles,\n getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\nimport { useSyncedTopScrollbar } from './useSyncedTopScrollbar'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n table: Table<TData>\n styledTableContainerProps?: StyledTableContainerProps\n fullWidth?: boolean\n /*\n When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n * Resizing still works — dragging a column sets a new minimum width.\n * Defaults to false (fixed layout).\n /\n autoColumnSizing?: boolean\n /\n When true, renders an additional horizontal scrollbar above the table (in addition to the\n * browser's native scrollbar below it), synced to the same scroll position. Useful for wide\n * tables where the bottom scrollbar may be far from the viewport's visible area.\n * @default false\n /\n showTopScrollbar?: boolean\n slots?: StyledTanStackTableSlots<TData, TRowType>\n slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' \| 'rowTransform'>\n\n/\n Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n /\nexport default function StyledTanStackTable<\n TData = unknown,\n TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n const {\n table,\n styledTableContainerProps,\n fullWidth = true,\n autoColumnSizing = false,\n showTopScrollbar = false,\n slots = {},\n slotProps = {},\n } = props\n const {\n Thead = 'thead',\n Th = 'th',\n Table = 'table',\n ...tableBodySlots\n } = slots\n const {\n Table: tableSlotProps = {},\n Thead: theadSlotProps = {},\n Th: thSlotProps = {},\n ...tableBodySlotProps\n } = slotProps\n\n const tableBodyProps: TableBodyProps<TData, TRowType> = {\n table,\n slots: tableBodySlots,\n slotProps: tableBodySlotProps,\n rows: props.rows!,\n rowTransform: props.rowTransform!,\n }\n\n /\n When autoColumnSizing is true we do a two-phase render:\n * 1. Render with table-layout: auto and no width constraints so the browser\n * natively sizes each column to its content.\n * 2. After the first paint, measure each <th> and write the real pixel widths\n * into TanStack's columnSizing state, then switch to table-layout: fixed.\n \n This gives content-based initial sizes while still allowing the user to drag\n * a column narrower than its content.\n /\n const tableRef = useRef<HTMLTableElement>(null)\n\n const {\n containerRef,\n topScrollRef,\n targetWidth: tableRenderedWidth,\n handleTopScroll,\n handleBottomScroll,\n } = useSyncedTopScrollbar(tableRef, showTopScrollbar)\n\n // Merge our own container ref/onScroll with any that the caller passed via\n // styledTableContainerProps, rather than one clobbering the other.\n const {\n ref: callerContainerRef,\n onScroll: callerOnScroll,\n ...restContainerProps\n } = styledTableContainerProps ?? {}\n const mergedContainerRef = useForkRef(containerRef, callerContainerRef)\n\n // Track what columns+visibility combination was last measured so we know when\n // a re-measurement is needed (e.g. columns change or visibility is toggled).\n const columnVisibility = table.getState().columnVisibility\n const [lastMeasuredState, setLastMeasuredState] = useState<{\n columns: typeof table.options.columns\n columnVisibility: typeof columnVisibility\n } \| null>(null)\n\n // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n // current columns+visibility matches the last measured snapshot.\n const hasMeasured =\n !autoColumnSizing \|\|\n (lastMeasuredState?.columns === table.options.columns &&\n lastMeasuredState?.columnVisibility === columnVisibility)\n\n // After the browser has laid out the auto-sized table, capture the widths and\n // switch to fixed layout so that the user can resize below the content width.\n // useLayoutEffect runs synchronously after DOM mutations, before the browser\n // paints, which is required for accurate DOM measurements.\n useLayoutEffect(() => {\n if (!autoColumnSizing \|\| hasMeasured \|\| !tableRef.current) return\n\n const ths = tableRef.current.querySelectorAll(\n ':scope > thead > tr:first-child > th',\n )\n const headers = table.getFlatHeaders()\n const newSizes: ColumnSizingState = {}\n headers.forEach((header, i) => {\n const th = ths[i] as HTMLElement \| undefined\n if (th) {\n newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n }\n })\n if (Object.keys(newSizes).length > 0) {\n table.setColumnSizing(newSizes)\n setLastMeasuredState({\n columns: table.options.columns,\n columnVisibility,\n })\n }\n }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n /\n Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n \n See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n /\n const columnSizeVars = useMemo(() => {\n const headers = table.getFlatHeaders()\n const colSizes: { [key: string]: number } = {}\n for (const header of headers) {\n colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n colSizes[getColumnSizeCssVariable(header.column.id)] =\n header.column.getSize()\n }\n return colSizes\n // Intentionally limit the dependencies to only recompute when the column sizes change\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [\n table.getState().columnSizingInfo,\n table.getState().columnSizing,\n table.getState().columnVisibility, // If a column is added, its width should be recalculated\n ])\n\n // Before measurement: let the browser shrink the table to content width so we\n // can read accurate sizes. After measurement: use the exact measured total.\n let tableWidth: string\n if (fullWidth) {\n tableWidth = '100%'\n } else if (!hasMeasured) {\n tableWidth = 'max-content'\n } else {\n tableWidth = `${table.getTotalSize()}px`\n }\n\n / When resizing any column we will render this special memoized version of our table body /\n const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n ? MemoizedTableBody\n : TableBody\n\n function handleContainerScroll(e: UIEvent<HTMLDivElement>) {\n callerOnScroll?.(e)\n if (showTopScrollbar) {\n handleBottomScroll(e)\n }\n }\n\n return (\n <>\n {showTopScrollbar && (\n <Box\n ref={topScrollRef}\n onScroll={handleTopScroll}\n sx={{ overflowX: 'auto', overflowY: 'hidden', height: '16px' }}\n >\n <Box sx={{ width: tableRenderedWidth, height: '1px' }} />\n </Box>\n )}\n <StyledTableContainer\n {...restContainerProps}\n ref={mergedContainerRef}\n onScroll={handleContainerScroll}\n >\n <Table\n {...tableSlotProps}\n ref={tableRef}\n style={{\n ...columnSizeVars,\n // Pre-measurement: auto layout so the browser can size columns to content.\n // Post-measurement: fixed layout so the user can resize below content width.\n tableLayout: hasMeasured ? 'fixed' : 'auto',\n width: tableWidth,\n ...tableSlotProps['style'],\n }}\n >\n <Thead {...theadSlotProps}>\n {table.getHeaderGroups().map(headerGroup => {\n return (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <Th\n key={header.id}\n colSpan={header.colSpan}\n {...thSlotProps}\n style={{\n // Pre-measurement: no width hint — let the browser size freely.\n // Post-measurement: exact width from the measured/resized value.\n ...(hasMeasured && {\n width: `calc(var(${getHeaderSizeCssVariable(\n header.id,\n )}) 1px)`,\n }),\n ...getCommonPinningStyles(header.column),\n ...thSlotProps['style'],\n }}\n >\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getCanResize() && (\n <div\n className={`resizer ${\n header.column.getIsResizing() ? 'isResizing' : ''\n }`}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n />\n )}\n </Th>\n ))}\n </tr>\n )\n })}\n </Thead>\n <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n </Table>\n </StyledTableContainer>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;AAgDA,SAAwB,EAGtB,GAAkD;CAClD,IAAM,EACJ,UACA,8BACA,eAAY,IACZ,sBAAmB,IACnB,sBAAmB,IACnB,WAAQ,CAAC,GACT,eAAY,CAAC,MACX,GACE,EACJ,WAAQ,SACR,QAAK,MACL,WAAQ,SACR,GAAG,MACD,GACE,EACJ,OAAO,IAAiB,CAAC,GACzB,OAAO,IAAiB,CAAC,GACzB,IAAI,IAAc,CAAC,GACnB,GAAG,MACD,GAEE,IAAkD;EACtD;EACA,OAAO;EACP,WAAW;EACX,MAAM,EAAM;EACZ,cAAc,EAAM;CACtB,GAYM,IAAW,EAAyB,IAAI,GAExC,EACJ,iBACA,iBACA,aAAa,GACb,oBACA,0BACE,EAAsB,GAAU,CAAgB,GAI9C,EACJ,KAAK,GACL,UAAU,GACV,GAAG,MACD,KAA6B,CAAC,GAC5B,IAAqB,EAAW,GAAc,CAAkB,GAIhE,IAAmB,EAAM,SAAS,EAAE,kBACpC,CAAC,GAAmB,KAAwB,EAGxC,IAAI,GAIR,IACJ,CAAC,KACA,GAAmB,YAAY,EAAM,QAAQ,WAC5C,GAAmB,qBAAqB;CAM5C,QAAsB;EACpB,IAAI,CAAC,KAAoB,KAAe,CAAC,EAAS,SAAS;EAE3D,IAAM,IAAM,EAAS,QAAQ,iBAC3B,sCACF,GACM,IAAU,EAAM,eAAe,GAC/B,IAA8B,CAAC;EAOrC,AANA,EAAQ,SAAS,GAAQ,MAAM;GAC7B,IAAM,IAAK,EAAI;GACf,AAAI,MACF,EAAS,EAAO,OAAO,MAAM,KAAK,KAAK,EAAG,sBAAsB,EAAE,KAAK;EAE3E,CAAC,GACG,OAAO,KAAK,CAAQ,EAAE,SAAS,MACjC,EAAM,gBAAgB,CAAQ,GAC9B,EAAqB;GACnB,SAAS,EAAM,QAAQ;GACvB;EACF,CAAC;CAEL,GAAG;EAAC;EAAkB;EAAkB;EAAa;CAAK,CAAC;CAU3D,IAAM,IAAiB,QAAc;EACnC,IAAM,IAAU,EAAM,eAAe,GAC/B,IAAsC,CAAC;EAC7C,KAAK,IAAM,KAAU,GAEnB,AADA,EAAS,EAAyB,EAAO,EAAE,KAAK,EAAO,QAAQ,GAC/D,EAAS,EAAyB,EAAO,OAAO,EAAE,KAChD,EAAO,OAAO,QAAQ;EAE1B,OAAO;CAGT,GAAG;EACD,EAAM,SAAS,EAAE;EACjB,EAAM,SAAS,EAAE;EACjB,EAAM,SAAS,EAAE;CACnB,CAAC,GAIG;CACJ,AAGE,IAHE,IACW,SACH,IAGG,GAAG,EAAM,aAAa,EAAE,MAFxB;CAMf,IAAM,IAAmB,EAAM,SAAS,EAAE,iBAAiB,mBACvD,IACA;CAEJ,SAAS,EAAsB,GAA4B;EAEzD,AADA,IAAiB,CAAC,GACd,KACF,EAAmB,CAAC;CAExB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,GAAD;EACE,KAAK;EACL,UAAU;EACV,IAAI;GAAE,WAAW;GAAQ,WAAW;GAAU,QAAQ;EAAO;YAE7D,kBAAC,GAAD,EAAK,IAAI;GAAE,OAAO;GAAoB,QAAQ;EAAM,EAAI,CAAA;CACrD,CAAA,GAEP,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK;EACL,UAAU;YAEV,kBAAC,GAAD;GACE,GAAI;GACJ,KAAK;GACL,OAAO;IACL,GAAG;IAGH,aAAa,IAAc,UAAU;IACrC,OAAO;IACP,GAAG,EAAe;GACpB;aAVF,CAYE,kBAAC,GAAD;IAAO,GAAI;cACR,EAAM,gBAAgB,EAAE,KAAI,MAEzB,kBAAC,MAAD,EAAA,UACG,EAAY,QAAQ,KAAI,MACvB,kBAAC,GAAD;KAEE,SAAS,EAAO;KAChB,GAAI;KACJ,OAAO;MAGL,GAAI,KAAe,EACjB,OAAO,YAAY,EACjB,EAAO,EACT,EAAE,UACJ;MACA,GAAG,EAAuB,EAAO,MAAM;MACvC,GAAG,EAAY;KACjB;eAdF,CAgBG,EAAO,gBACJ,OACA,EACE,EAAO,OAAO,UAAU,QACxB,EAAO,WAAW,CACpB,GACH,EAAO,OAAO,aAAa,KAC1B,kBAAC,OAAD;MACE,WAAW,WACT,EAAO,OAAO,cAAc,IAAI,eAAe;MAEjD,aAAa,EAAO,iBAAiB;MACrC,cAAc,EAAO,iBAAiB;KACvC,CAAA,CAED;OA9BG,EAAO,EA8BV,CACL,EACC,GAnCK,EAAY,EAmCjB,CAEP;GACI,CAAA,GACP,kBAAC,GAAD,EAAmC,GAAI,EAAiB,CAAA,CACnD;;CACa,CAAA,CACtB,EAAA,CAAA;AAEN"}

package/dist/components/TeamSubjectsSelector/TeamBadgeOrError.js CHANGED Viewed

@@ -3,7 +3,7 @@ import "../../synapse-queries/index.js";
 import t from "../TeamBadge.js";
 import { Skeleton as n, Stack as r, Typography as i } from "@mui/material";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { ErrorTwoTone as s } from "@mui/icons-material";
+import s from "@mui/icons-material/ErrorTwoTone";
 //#region src/components/TeamSubjectsSelector/TeamBadgeOrError.tsx
 function c(c) {
 	let { teamId: l } = c, { data: u, isLoading: d, error: f } = e(l);

package/dist/components/TeamSubjectsSelector/TeamBadgeOrError.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TeamBadgeOrError.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamBadgeOrError.tsx"],"sourcesContent":["import { useGetTeam } from '@/synapse-queries'\nimport { ErrorTwoTone } from '@mui/icons-material'\nimport { Skeleton, Stack, Typography } from '@mui/material'\nimport TeamBadge from '../TeamBadge'\n\nexport type TeamBadgeOrErrorProps = {\n teamId: string\n}\n\nexport function TeamBadgeOrError(props: TeamBadgeOrErrorProps) {\n const { teamId } = props\n\n const { data: team, isLoading, error } = useGetTeam(teamId)\n\n if (error) {\n return (\n <Stack\n direction=\"row\"\n role=\"alert\"\n sx={{\n gap: '5px',\n alignItems: 'center',\n }}\n >\n <ErrorTwoTone color=\"error\" />\n <Typography variant=\"smallText1\" color=\"error\">\n {error?.reason \|\| `Error: ${teamId}`}\n </Typography>\n </Stack>\n )\n } else if (isLoading \|\| !team) {\n return <Skeleton width={125} height={30} />\n }\n return <TeamBadge teamId={team.id} teamName={team.name} />\n}\n"],"mappings":";;;;;;;AASA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,cAAW,GAEb,EAAE,MAAM,GAAM,cAAW,aAAU,EAAW,CAAM;CAqB1D,OAnBI,IAEA,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,IAAI;GACF,KAAK;GACL,YAAY;EACd;YANF,CAQE,kBAAC,GAAD,EAAc,OAAM,QAAS,CAAA,GAC7B,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC,GAAO,UAAU,UAAU;EAClB,CAAA,CACP;MAEA,KAAa,CAAC,IAChB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;CAAK,CAAA,IAErC,kBAAC,GAAD;EAAW,QAAQ,EAAK;EAAI,UAAU,EAAK;CAAO,CAAA;AAC3D"}
1	+ {"version":3,"file":"TeamBadgeOrError.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamBadgeOrError.tsx"],"sourcesContent":["import { useGetTeam } from '@/synapse-queries'\nimport ErrorTwoTone from '@mui/icons-material/ErrorTwoTone'\nimport { Skeleton, Stack, Typography } from '@mui/material'\nimport TeamBadge from '../TeamBadge'\n\nexport type TeamBadgeOrErrorProps = {\n teamId: string\n}\n\nexport function TeamBadgeOrError(props: TeamBadgeOrErrorProps) {\n const { teamId } = props\n\n const { data: team, isLoading, error } = useGetTeam(teamId)\n\n if (error) {\n return (\n <Stack\n direction=\"row\"\n role=\"alert\"\n sx={{\n gap: '5px',\n alignItems: 'center',\n }}\n >\n <ErrorTwoTone color=\"error\" />\n <Typography variant=\"smallText1\" color=\"error\">\n {error?.reason \|\| `Error: ${teamId}`}\n </Typography>\n </Stack>\n )\n } else if (isLoading \|\| !team) {\n return <Skeleton width={125} height={30} />\n }\n return <TeamBadge teamId={team.id} teamName={team.name} />\n}\n"],"mappings":";;;;;;;AASA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,cAAW,GAEb,EAAE,MAAM,GAAM,cAAW,aAAU,EAAW,CAAM;CAqB1D,OAnBI,IAEA,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,IAAI;GACF,KAAK;GACL,YAAY;EACd;YANF,CAQE,kBAAC,GAAD,EAAc,OAAM,QAAS,CAAA,GAC7B,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC,GAAO,UAAU,UAAU;EAClB,CAAA,CACP;MAEA,KAAa,CAAC,IAChB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;CAAK,CAAA,IAErC,kBAAC,GAAD;EAAW,QAAQ,EAAK;EAAI,UAAU,EAAK;CAAO,CAAA;AAC3D"}

package/dist/components/TeamSubjectsSelector/TeamSubjectsSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TeamSubjectsSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"names":[],"mappings":"~~AAYA~~,OAAO,EACL,4BAA4B,EAE7B,MAAM,iCAAiC,CAAA;AAMxC,MAAM,MAAM,yBAAyB,GAAG;IAEtC,QAAQ,EAAE,4BAA4B,EAAE,CAAA;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,EAAE,KAAK,IAAI,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,WACC,CAAA;AACrD,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,WACS,CAAA;AAC1D,eAAO,MAAM,iBAAiB,uBAAuB,CAAA;AACrD,eAAO,MAAM,WAAW,mCAAmC,CAAA;AAC3D,eAAO,MAAM,SAAS,mCAAmC,CAAA;AAGzD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAoI7D;AAED,eAAe,oBAAoB,CAAA"}
1	+ {"version":3,"file":"TeamSubjectsSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,4BAA4B,EAE7B,MAAM,iCAAiC,CAAA;AAMxC,MAAM,MAAM,yBAAyB,GAAG;IAEtC,QAAQ,EAAE,4BAA4B,EAAE,CAAA;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,EAAE,KAAK,IAAI,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,WACC,CAAA;AACrD,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,WACS,CAAA;AAC1D,eAAO,MAAM,iBAAiB,uBAAuB,CAAA;AACrD,eAAO,MAAM,WAAW,mCAAmC,CAAA;AAC3D,eAAO,MAAM,SAAS,mCAAmC,CAAA;AAGzD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAoI7D;AAED,eAAe,oBAAoB,CAAA"}

package/dist/components/TeamSubjectsSelector/TeamSubjectsSelector.js CHANGED Viewed

@@ -5,7 +5,8 @@ import { noop as i } from "lodash-es";
 import { Alert as a, Box as o, Button as s, IconButton as c, InputLabel as l, Stack as u, TextField as d, Tooltip as f, Typography as p } from "@mui/material";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { RestrictableObjectType as _ } from "@sage-bionetworks/synapse-types";
-import { AddCircleTwoTone as v, HelpOutlineTwoTone as y } from "@mui/icons-material";
+import v from "@mui/icons-material/HelpOutlineTwoTone";
+import y from "@mui/icons-material/AddCircleTwoTone";
 //#region src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx
 var b = (e) => `Team ${e} has already been added to this AR.`, x = (e) => `Parsing errors encountered. Invalid Team ID: ${e}`, S = "No teams selected.", C = "Remove from Access Requirement", w = "Enter Team IDs (i.e. 123, 456)", T = "";
 function E(S) {
@@ -89,7 +90,7 @@ function E(S) {
 					fullWidth: !0
 				}),
 				/* @__PURE__ */ h(s, {
-					startIcon: /* @__PURE__ */ h(v, {}),
+					startIcon: /* @__PURE__ */ h(y, {}),
 					variant: "outlined",
 					sx: {
 						flexShrink: 0,
@@ -102,7 +103,7 @@ function E(S) {
 				/* @__PURE__ */ h(f, {
 					title: w,
 					placement: "right",
-					children: /* @__PURE__ */ h(y, { sx: { color: "grey.600" } })
+					children: /* @__PURE__ */ h(v, { sx: { color: "grey.600" } })
 				})
 			]
 		}),

package/dist/components/TeamSubjectsSelector/TeamSubjectsSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TeamSubjectsSelector.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"sourcesContent":["import { AddCircleTwoTone, HelpOutlineTwoTone } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n Button,\n IconButton,\n InputLabel,\n Stack,\n TextField,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport {\n RestrictableObjectDescriptor,\n RestrictableObjectType,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport IconSvg from '../IconSvg'\nimport { TeamBadgeOrError } from './TeamBadgeOrError'\n\nexport type TeamSubjectsSelectorProps = {\n // will be filtered to only team subjects\n subjects: RestrictableObjectDescriptor[]\n onUpdate: (subjects: RestrictableObjectDescriptor[]) => void\n onUpdateTeamIDsTextbox?: (value: string) => void // called when the team IDs text box is updated\n}\n\nexport const TEAM_ALREADY_SELECTED = (teamId: string) =>\n `Team ${teamId} has already been added to this AR.`\nexport const TEAM_PARSING_ERROR = (teamId: string) =>\n `Parsing errors encountered. Invalid Team ID: ${teamId}`\nexport const NO_TEAMS_SELECTED = 'No teams selected.'\nexport const REMOVE_TEXT = 'Remove from Access Requirement'\nexport const HELP_TEXT = 'Enter Team IDs (i.e. 123, 456)'\nconst teamIdsStringDefault = ''\n\nfunction TeamSubjectsSelector(props: TeamSubjectsSelectorProps) {\n const { subjects, onUpdate, onUpdateTeamIDsTextbox = noop } = props\n const [teamIdsString, setTeamIdsString] =\n useState<string>(teamIdsStringDefault)\n const [error, setError] = useState<string \| null>(null)\n\n const teamSubjects = useMemo(() => {\n return subjects.filter(subject => {\n return subject.type === RestrictableObjectType.TEAM ? subject : null\n })\n }, [subjects])\n\n const onChangeTeamIdsTextbox = (value: string) => {\n setTeamIdsString(value)\n onUpdateTeamIDsTextbox(value)\n }\n\n const onRemove = (subjectId: string) => {\n const updatedSubjects = teamSubjects.filter(subject => {\n return subject.id !== subjectId\n })\n onUpdate(updatedSubjects)\n }\n\n const onAddTeams = (teamIdsString: string \| null) => {\n const teamIds = teamIdsString?.split(',').map(item => item.trim())\n const dedupedTeamIds = [...new Set(teamIds)]\n if (dedupedTeamIds && dedupedTeamIds.length > 0) {\n const updatedTeamSubjects = [...teamSubjects]\n for (const teamId of dedupedTeamIds) {\n const validId = /^\\d+$/.test(teamId)\n const alreadyAdded = teamSubjects.some(subject => subject.id === teamId)\n if (!validId) {\n setError(TEAM_PARSING_ERROR(teamId))\n return\n } else if (alreadyAdded) {\n setError(TEAM_ALREADY_SELECTED(teamId))\n return\n } else {\n const newSubject: RestrictableObjectDescriptor = {\n id: teamId,\n type: RestrictableObjectType.TEAM,\n }\n updatedTeamSubjects.push(newSubject)\n }\n }\n onChangeTeamIdsTextbox(teamIdsStringDefault)\n onUpdate(updatedTeamSubjects)\n }\n setError(null)\n }\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: '0px 15px',\n pb: '10px',\n }}\n >\n {teamSubjects.length === 0 && (\n <Typography\n variant=\"body1Italic\"\n sx={{\n pb: 2,\n }}\n >\n {NO_TEAMS_SELECTED}\n </Typography>\n )}\n {teamSubjects.map(subject => {\n return (\n <Stack\n key={subject.id}\n direction=\"row\"\n data-testid=\"selected-team\"\n sx={{\n alignItems: 'center',\n pb: 1,\n }}\n >\n <TeamBadgeOrError teamId={subject.id} />\n <IconButton\n aria-label={REMOVE_TEXT}\n onClick={() => onRemove(subject.id)}\n sx={{\n '&:hover': {\n color: 'error.main',\n },\n }}\n >\n <IconSvg icon={'delete'} fontSize={'inherit'} wrap={false} />\n </IconButton>\n </Stack>\n )\n })}\n </Box>\n <InputLabel htmlFor=\"teamIDs\">Add Team IDs</InputLabel>\n <Stack\n direction=\"row\"\n sx={{\n gap: 1,\n alignItems: 'center',\n mb: 2,\n }}\n >\n <TextField\n id=\"teamIDs\"\n name=\"teamIDs\"\n placeholder={HELP_TEXT}\n value={teamIdsString}\n onChange={event => onChangeTeamIdsTextbox(event.target.value)}\n fullWidth\n />\n <Button\n startIcon={<AddCircleTwoTone />}\n variant=\"outlined\"\n sx={{ flexShrink: 0, height: '53px' }}\n onClick={() => onAddTeams(teamIdsString)}\n disabled={teamIdsString === ''}\n >\n Add Teams\n </Button>\n <Tooltip title={HELP_TEXT} placement=\"right\">\n <HelpOutlineTwoTone sx={{ color: 'grey.600' }} />\n </Tooltip>\n </Stack>\n {error && <Alert severity=\"warning\">{error}</Alert>}\n </>\n )\n}\n\nexport default TeamSubjectsSelector\n"],"mappings":"~~;;;;;;;;;AA4BA~~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"}
1	+ {"version":3,"file":"TeamSubjectsSelector.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"sourcesContent":["import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone'\nimport HelpOutlineTwoTone from '@mui/icons-material/HelpOutlineTwoTone'\nimport {\n Alert,\n Box,\n Button,\n IconButton,\n InputLabel,\n Stack,\n TextField,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport {\n RestrictableObjectDescriptor,\n RestrictableObjectType,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport IconSvg from '../IconSvg'\nimport { TeamBadgeOrError } from './TeamBadgeOrError'\n\nexport type TeamSubjectsSelectorProps = {\n // will be filtered to only team subjects\n subjects: RestrictableObjectDescriptor[]\n onUpdate: (subjects: RestrictableObjectDescriptor[]) => void\n onUpdateTeamIDsTextbox?: (value: string) => void // called when the team IDs text box is updated\n}\n\nexport const TEAM_ALREADY_SELECTED = (teamId: string) =>\n `Team ${teamId} has already been added to this AR.`\nexport const TEAM_PARSING_ERROR = (teamId: string) =>\n `Parsing errors encountered. Invalid Team ID: ${teamId}`\nexport const NO_TEAMS_SELECTED = 'No teams selected.'\nexport const REMOVE_TEXT = 'Remove from Access Requirement'\nexport const HELP_TEXT = 'Enter Team IDs (i.e. 123, 456)'\nconst teamIdsStringDefault = ''\n\nfunction TeamSubjectsSelector(props: TeamSubjectsSelectorProps) {\n const { subjects, onUpdate, onUpdateTeamIDsTextbox = noop } = props\n const [teamIdsString, setTeamIdsString] =\n useState<string>(teamIdsStringDefault)\n const [error, setError] = useState<string \| null>(null)\n\n const teamSubjects = useMemo(() => {\n return subjects.filter(subject => {\n return subject.type === RestrictableObjectType.TEAM ? subject : null\n })\n }, [subjects])\n\n const onChangeTeamIdsTextbox = (value: string) => {\n setTeamIdsString(value)\n onUpdateTeamIDsTextbox(value)\n }\n\n const onRemove = (subjectId: string) => {\n const updatedSubjects = teamSubjects.filter(subject => {\n return subject.id !== subjectId\n })\n onUpdate(updatedSubjects)\n }\n\n const onAddTeams = (teamIdsString: string \| null) => {\n const teamIds = teamIdsString?.split(',').map(item => item.trim())\n const dedupedTeamIds = [...new Set(teamIds)]\n if (dedupedTeamIds && dedupedTeamIds.length > 0) {\n const updatedTeamSubjects = [...teamSubjects]\n for (const teamId of dedupedTeamIds) {\n const validId = /^\\d+$/.test(teamId)\n const alreadyAdded = teamSubjects.some(subject => subject.id === teamId)\n if (!validId) {\n setError(TEAM_PARSING_ERROR(teamId))\n return\n } else if (alreadyAdded) {\n setError(TEAM_ALREADY_SELECTED(teamId))\n return\n } else {\n const newSubject: RestrictableObjectDescriptor = {\n id: teamId,\n type: RestrictableObjectType.TEAM,\n }\n updatedTeamSubjects.push(newSubject)\n }\n }\n onChangeTeamIdsTextbox(teamIdsStringDefault)\n onUpdate(updatedTeamSubjects)\n }\n setError(null)\n }\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: '0px 15px',\n pb: '10px',\n }}\n >\n {teamSubjects.length === 0 && (\n <Typography\n variant=\"body1Italic\"\n sx={{\n pb: 2,\n }}\n >\n {NO_TEAMS_SELECTED}\n </Typography>\n )}\n {teamSubjects.map(subject => {\n return (\n <Stack\n key={subject.id}\n direction=\"row\"\n data-testid=\"selected-team\"\n sx={{\n alignItems: 'center',\n pb: 1,\n }}\n >\n <TeamBadgeOrError teamId={subject.id} />\n <IconButton\n aria-label={REMOVE_TEXT}\n onClick={() => onRemove(subject.id)}\n sx={{\n '&:hover': {\n color: 'error.main',\n },\n }}\n >\n <IconSvg icon={'delete'} fontSize={'inherit'} wrap={false} />\n </IconButton>\n </Stack>\n )\n })}\n </Box>\n <InputLabel htmlFor=\"teamIDs\">Add Team IDs</InputLabel>\n <Stack\n direction=\"row\"\n sx={{\n gap: 1,\n alignItems: 'center',\n mb: 2,\n }}\n >\n <TextField\n id=\"teamIDs\"\n name=\"teamIDs\"\n placeholder={HELP_TEXT}\n value={teamIdsString}\n onChange={event => onChangeTeamIdsTextbox(event.target.value)}\n fullWidth\n />\n <Button\n startIcon={<AddCircleTwoTone />}\n variant=\"outlined\"\n sx={{ flexShrink: 0, height: '53px' }}\n onClick={() => onAddTeams(teamIdsString)}\n disabled={teamIdsString === ''}\n >\n Add Teams\n </Button>\n <Tooltip title={HELP_TEXT} placement=\"right\">\n <HelpOutlineTwoTone sx={{ color: 'grey.600' }} />\n </Tooltip>\n </Stack>\n {error && <Alert severity=\"warning\">{error}</Alert>}\n </>\n )\n}\n\nexport default TeamSubjectsSelector\n"],"mappings":"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"}

package/dist/components/TermsAndConditions/TermsAndConditions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n BUNDLE_MASK_QUERY_RESULTS,\n URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n LoadingItem,\n tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n onFormChange: (formComplete: boolean) => void\n termsAndConditionsTableID: string\n termsAndConditionsTableVersion: string\n hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n termsAndConditionsTableID,\n termsAndConditionsTableVersion,\n onFormChange,\n hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n const [tcList, setTcList] = useState<tcItem[]>([])\n // Fetch the table data\n const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n {\n entityId: termsAndConditionsTableID,\n query: {\n sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n },\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n },\n { staleTime: Infinity },\n true, // force this query to be run as the anonymous user (without an access token)\n )\n\n const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n if (isTermsAndConditionsTableNotFound) {\n // \"Pledge\" Synapse table is unavailable on this stack. Allow agreement to the terms, but we will show a warning below\n onFormChange(true)\n }\n\n // update tcList when data changes (transform)\n useEffect(() => {\n if (data?.queryResult?.queryResults) {\n const { rows, headers } = data.queryResult.queryResults\n const iconColIndex = headers.findIndex(col => col.name === 'icon')\n const labelColIndex = headers.findIndex(col => col.name === 'label')\n const descriptionColIndex = headers.findIndex(\n col => col.name === 'description',\n )\n const newTcList: tcItem[] = []\n rows.forEach(row => {\n const { values } = row\n const item: tcItem = {\n iconFileHandleId: values[iconColIndex] ?? '',\n label: values[labelColIndex] ?? '',\n description: values[descriptionColIndex] ?? '',\n }\n newTcList.push(item)\n })\n setTcList(newTcList)\n const checkboxCount = newTcList.length\n setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n // disabled all checkbox except the first one\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n )\n }\n }, [data])\n\n const sageTermsOfService =\n 'https://www.synapse.org/TrustCenter:TermsOfService'\n const trustCenter = 'https://sagebionetworks.org/trust-center'\n const getInitialCheckboxState = (checkboxCount: number) =>\n Array.from(Array(checkboxCount).fill(false))\n let mounted = true\n\n // State variables\n const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n useEffect(() => {\n if (mounted) {\n checkFormCompleted()\n }\n return () => {\n mounted = false\n }\n }, [checkboxEnabled, checkboxChecked])\n\n // Placeholder function to check if all checkboxes are checked and agreement is signed\n const checkFormCompleted = () => {\n const allCheckboxChecked =\n checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n onFormChange(allCheckboxChecked)\n }\n\n const updateCheckboxState = (id: number) => {\n const newState = !checkboxChecked[id]\n const checkboxCount = checkboxChecked.length\n if (newState) {\n // if the checkbox is checked (i.e. newState is true)\n setCheckboxChecked(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n )\n if (id + 2 <= tcList.length) {\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n )\n }\n } else {\n setCheckboxChecked(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n )\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n )\n }\n }\n\n return (\n <section className=\"terms-conditions\">\n <h3 className=\"page-header\">Pledge</h3>\n <form>\n <label>\n I affirm my commitment to Sage's{' '}\n <Link target=\"_blank\" href={sageTermsOfService}>\n Terms of Service\n </Link>{' '}\n and policies for responsible research and data handling (\n <Link target=\"_blank\" href={trustCenter}>\n Trust Center\n </Link>\n ), including:\n </label>\n {isTermsAndConditionsTableNotFound && (\n <Alert severity=\"warning\">\n <AlertTitle>Source data unavailable</AlertTitle>\n <Typography variant=\"body1\">\n We are unable to display the source table content for the Synapse\n Pledge at this time. Please review the full{' '}\n <Link target=\"_blank\" href={sageTermsOfService}>\n {' '}\n Terms of Service{' '}\n </Link>{' '}\n carefully before proceeding. By clicking \"Agree And Continue,\" you\n confirm that you have read and understood the Terms and Conditions\n for use.\n </Typography>\n </Alert>\n )}\n <ul className=\"term-list\">\n {isLoading && <LoadingItem numLoadingItems={6} />}\n {tcList.length > 0 &&\n tcList.map((item, i) => {\n return (\n <TermsAndConditionsItem\n key={`tc-item-${i}`}\n item={item}\n id={i}\n checked={checkboxChecked[i]}\n enabled={checkboxEnabled[i]}\n termsAndConditionsTableID={termsAndConditionsTableID}\n onChange={updateCheckboxState}\n />\n )\n })}\n </ul>\n {!hideLinkToFullTC && (\n <div className=\"view-terms\">\n <Button\n variant={'contained'}\n href={URL_TERMS_CONDITIONS_AGREEMENT}\n target=\"_blank\"\n >\n View Complete Terms and Conditions for Use\n </Button>\n </div>\n )}\n </form>\n </section>\n )\n}\n\nexport default TermsAndConditions\n"],"mappings":";;;;;;;;AAmBA,SAAS,EAAmB,EAC1B,8BACA,mCACA,iBACA,sBAAmB,MACO;CAC1B,IAAM,CAAC,GAAQ,KAAa,EAAmB,CAAC,CAAC,GAE3C,EAAE,SAAM,cAAW,UAAO,eAAY,EAC1C;EACE,UAAU;EACV,OAAO,EACL,KAAK,iBAAiB,EAA0B,GAAG,EAA+B,qBACpF;EACA,UAAA;EACA,cAAc;CAChB,GACA,EAAE,WAAW,SAAS,GACtB,EACF,GAEM,IAAoC,KAAW,EAAM,UAAU;CAQrE,AANI,KAEF,EAAa,EAAI,GAInB,QAAgB;EACd,IAAI,GAAM,aAAa,cAAc;GACnC,IAAM,EAAE,SAAM,eAAY,EAAK,YAAY,cACrC,IAAe,EAAQ,WAAU,MAAO,EAAI,SAAS,MAAM,GAC3D,IAAgB,EAAQ,WAAU,MAAO,EAAI,SAAS,OAAO,GAC7D,IAAsB,EAAQ,WAClC,MAAO,EAAI,SAAS,aACtB,GACM,IAAsB,CAAC;GAU7B,AATA,EAAK,SAAQ,MAAO;IAClB,IAAM,EAAE,cAAW,GACb,IAAe;KACnB,kBAAkB,EAAO,MAAiB;KAC1C,OAAO,EAAO,MAAkB;KAChC,aAAa,EAAO,MAAwB;IAC9C;IACA,EAAU,KAAK,CAAI;GACrB,CAAC,GACD,EAAU,CAAS;GACnB,IAAM,IAAgB,EAAU;GAGhC,AAFA,EAAmB,EAAwB,CAAa,CAAC,GAEzD,EACE,EAAwB,CAAa,EAAE,KAAK,IAAM,GAAG,CAAC,CACxD;EACF;CACF,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IACJ,sDAEI,KAA2B,MAC/B,MAAM,~~KAAK~~,MAAM,CAAa,EAAE,KAAK,EAAK,CAAC,~~GACzC~~,IAAU,IAGR,CAAC,GAAiB,KAAsB,EAAoB,CAAC,CAAC,GAC9D,CAAC,GAAiB,KAAsB,EAAoB,CAAC,CAAC;CAEpE,SACM,KACF,EAAmB,SAER;EACX,IAAU;CACZ,IACC,CAAC,GAAiB,CAAe,CAAC;CAGrC,IAAM,UAA2B;EAG/B,EADE,EAAgB,SAAS,KAAK,CAAC,EAAgB,SAAS,EAAK,CAChC;CACjC,GAEM,KAAuB,MAAe;EAC1C,IAAM,IAAW,CAAC,EAAgB,IAC5B,IAAgB,EAAgB;EACtC,AAAI,KAEF,EACE,EAAwB,CAAa,EAAE,KAAK,IAAM,GAAG,IAAK,CAAC,CAC7D,GACI,IAAK,KAAK,EAAO,UACnB,EACE,EAAwB,CAAa,EAAE,KAAK,IAAM,GAAG,IAAK,CAAC,CAC7D,MAGF,EACE,EAAwB,CAAa,EAAE,KAAK,IAAM,GAAG,CAAE,CACzD,GACA,EACE,EAAwB,CAAa,EAAE,KAAK,IAAM,GAAG,IAAK,CAAC,CAC7D;CAEJ;CAEA,OACE,kBAAC,WAAD;EAAS,WAAU;YAAnB,CACE,kBAAC,MAAD;GAAI,WAAU;aAAc;EAAU,CAAA,GACtC,kBAAC,QAAD,EAAA,UAAA;GACE,kBAAC,SAAD,EAAA,UAAA;IAAO;IACiC;IACtC,kBAAC,GAAD;KAAM,QAAO;KAAS,MAAM;eAAoB;IAE1C,CAAA;IAAE;IAAI;IAEZ,kBAAC,GAAD;KAAM,QAAO;KAAS,MAAM;eAAa;IAEnC,CAAA;IAAC;GAEF,EAAA,CAAA;GACN,KACC,kBAAC,GAAD;IAAO,UAAS;cAAhB,CACE,kBAAC,GAAD,EAAA,UAAY,0BAAmC,CAAA,GAC/C,kBAAC,GAAD;KAAY,SAAQ;eAApB;MAA4B;MAEkB;MAC5C,kBAAC,GAAD;OAAM,QAAO;OAAS,MAAM;iBAA5B;QACG;QAAI;QACY;OACb;;MAAE;MAAI;KAIF;MACP;;GAET,kBAAC,MAAD;IAAI,WAAU;cAAd,CACG,KAAa,kBAAC,GAAD,EAAa,iBAAiB,EAAI,CAAA,GAC/C,EAAO,SAAS,KACf,EAAO,KAAK,GAAM,MAEd,kBAAC,GAAD;KAEQ;KACN,IAAI;KACJ,SAAS,EAAgB;KACzB,SAAS,EAAgB;KACE;KAC3B,UAAU;IACX,GAPM,WAAW,GAOjB,CAEJ,CACD;;GACH,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,SAAS;KACT,MAAA;KACA,QAAO;eACR;IAEO,CAAA;GACL,CAAA;EAEH,EAAA,CAAA,CACC;;AAEb"}
1	+ {"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n BUNDLE_MASK_QUERY_RESULTS,\n URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n LoadingItem,\n tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n onFormChange: (formComplete: boolean) => void\n termsAndConditionsTableID: string\n termsAndConditionsTableVersion: string\n hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n termsAndConditionsTableID,\n termsAndConditionsTableVersion,\n onFormChange,\n hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n const [tcList, setTcList] = useState<tcItem[]>([])\n // Fetch the table data\n const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n {\n entityId: termsAndConditionsTableID,\n query: {\n sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n },\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n },\n { staleTime: Infinity },\n true, // force this query to be run as the anonymous user (without an access token)\n )\n\n const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n if (isTermsAndConditionsTableNotFound) {\n // \"Pledge\" Synapse table is unavailable on this stack. Allow agreement to the terms, but we will show a warning below\n onFormChange(true)\n }\n\n // update tcList when data changes (transform)\n useEffect(() => {\n if (data?.queryResult?.queryResults) {\n const { rows, headers } = data.queryResult.queryResults\n const iconColIndex = headers.findIndex(col => col.name === 'icon')\n const labelColIndex = headers.findIndex(col => col.name === 'label')\n const descriptionColIndex = headers.findIndex(\n col => col.name === 'description',\n )\n const newTcList: tcItem[] = []\n rows.forEach(row => {\n const { values } = row\n const item: tcItem = {\n iconFileHandleId: values[iconColIndex] ?? '',\n label: values[labelColIndex] ?? '',\n description: values[descriptionColIndex] ?? '',\n }\n newTcList.push(item)\n })\n setTcList(newTcList)\n const checkboxCount = newTcList.length\n setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n // disabled all checkbox except the first one\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n )\n }\n }, [data])\n\n const sageTermsOfService =\n 'https://www.synapse.org/TrustCenter:TermsOfService'\n const trustCenter = 'https://sagebionetworks.org/trust-center'\n const getInitialCheckboxState = (checkboxCount: number) =>\n Array.from(new Array(checkboxCount).fill(false))\n let mounted = true\n\n // State variables\n const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n useEffect(() => {\n if (mounted) {\n checkFormCompleted()\n }\n return () => {\n mounted = false\n }\n }, [checkboxEnabled, checkboxChecked])\n\n // Placeholder function to check if all checkboxes are checked and agreement is signed\n const checkFormCompleted = () => {\n const allCheckboxChecked =\n checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n onFormChange(allCheckboxChecked)\n }\n\n const updateCheckboxState = (id: number) => {\n const newState = !checkboxChecked[id]\n const checkboxCount = checkboxChecked.length\n if (newState) {\n // if the checkbox is checked (i.e. newState is true)\n setCheckboxChecked(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n )\n if (id + 2 <= tcList.length) {\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n )\n }\n } else {\n setCheckboxChecked(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n )\n setCheckboxEnabled(\n getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n )\n }\n }\n\n return (\n <section className=\"terms-conditions\">\n <h3 className=\"page-header\">Pledge</h3>\n <form>\n <label>\n I affirm my commitment to Sage's{' '}\n <Link target=\"_blank\" href={sageTermsOfService}>\n Terms of Service\n </Link>{' '}\n and policies for responsible research and data handling (\n <Link target=\"_blank\" href={trustCenter}>\n Trust Center\n </Link>\n ), including:\n </label>\n {isTermsAndConditionsTableNotFound && (\n <Alert severity=\"warning\">\n <AlertTitle>Source data unavailable</AlertTitle>\n <Typography variant=\"body1\">\n We are unable to display the source table content for the Synapse\n Pledge at this time. Please review the full{' '}\n <Link target=\"_blank\" href={sageTermsOfService}>\n {' '}\n Terms of Service{' '}\n </Link>{' '}\n carefully before proceeding. By clicking \"Agree And Continue,\" you\n confirm that you have read and understood the Terms and Conditions\n for use.\n </Typography>\n </Alert>\n )}\n <ul className=\"term-list\">\n {isLoading && <LoadingItem numLoadingItems={6} />}\n {tcList.length > 0 &&\n tcList.map((item, i) => {\n return (\n <TermsAndConditionsItem\n key={`tc-item-${i}`}\n item={item}\n id={i}\n checked={checkboxChecked[i]}\n enabled={checkboxEnabled[i]}\n termsAndConditionsTableID={termsAndConditionsTableID}\n onChange={updateCheckboxState}\n />\n )\n })}\n </ul>\n {!hideLinkToFullTC && (\n <div className=\"view-terms\">\n <Button\n variant={'contained'}\n href={URL_TERMS_CONDITIONS_AGREEMENT}\n target=\"_blank\"\n >\n View Complete Terms and Conditions for Use\n </Button>\n </div>\n )}\n </form>\n </section>\n )\n}\n\nexport default TermsAndConditions\n"],"mappings":"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"}