npm - synapse-react-client - Versions diffs - 4.0.24 → 4.0.25 - Mend

synapse-react-client 4.0.24 → 4.0.25

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 (71) hide show

package/dist/components/SchemaDrivenAnnotationEditor/field/AdditionalPropertiesSchemaField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdditionalPropertiesSchemaField.js","names":[],"sources":["../../../../src/components/SchemaDrivenAnnotationEditor/field/AdditionalPropertiesSchemaField.tsx"],"sourcesContent":["import {\n FieldProps,\n FormContextType,\n RJSFSchema,\n StrictRJSFSchema,\n} from '@rjsf/utils'\nimport { isEqual } from 'lodash-es'\nimport { useEffect, useState } from 'react'\nimport FullWidthAlert from '../../FullWidthAlert/FullWidthAlert'\nimport { convertToArray } from '../AnnotationEditorUtils'\nimport { GridLegacy as Grid, InputLabel } from '@mui/material'\nimport { AdditionalPropertyContextProvider } from '../template/AdditionalPropertyContext'\n\n// Matches ####-##-##T##:##:##.###Z, e.g. 1970-01-01T12:00:000Z\nconst ISO_TIMESTAMP_REGEX = /\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}\\.\\d{3}Z/\n\n// Types that correspond to the different input fields that the annotation editor supports\nconst propertyTypeArray = [\n 'String',\n 'Integer',\n 'Float',\n 'Boolean',\n 'Datetime',\n] as const\n\nexport type PropertyType = (typeof propertyTypeArray)[number]\n\nexport function guessPropertyType(list: Array<unknown>): PropertyType {\n if (list.length === 0) {\n // The field was just added, so default to string\n return 'String'\n } else if (\n list.every(\n item => typeof item === 'number' \|\| item === 'NaN', // \"NaN\" is technically a float value\n )\n ) {\n if (list.every(item => Number.isInteger(item))) {\n return 'Integer'\n } else {\n return 'Float'\n }\n } else if (list.every(item => typeof item === 'boolean')) {\n return 'Boolean'\n } else if (\n list.every(item => typeof item === 'string') &&\n list.every((item: string) => !!ISO_TIMESTAMP_REGEX.exec(item))\n ) {\n return 'Datetime'\n }\n // otherwise, default type is 'string'\n return 'String'\n}\n\nexport function transformDataFromPropertyType(\n list: Array<any>,\n propertyType: PropertyType,\n) {\n switch (propertyType) {\n case 'Integer':\n return list.map(item =>\n Number.isNaN(Number(item)) ? 0 : Math.floor(Number(item)),\n )\n\n case 'Float':\n return list.map(item => {\n const asFloat = parseFloat(item as string)\n if (Number.isNaN(asFloat)) {\n return 'NaN'\n } else if (Number.isInteger(asFloat)) {\n return asFloat.toFixed(1)\n } else {\n return asFloat\n }\n })\n case 'Datetime':\n return list.map(item => {\n if (typeof item === 'string' && ISO_TIMESTAMP_REGEX.exec(item)) {\n return item\n } else {\n return new Date().toISOString()\n }\n })\n case 'Boolean':\n return list.map(item => !!item)\n case 'String':\n default:\n return list.map(item => String(item))\n }\n}\n\n/*\n Maps a Synapse Annotation PropertyType to a JSON Schema that captures the type and format.\n * @param propertyType\n /\nexport function getSchemaForPropertyType(propertyType: PropertyType) {\n switch (propertyType) {\n case 'Datetime':\n return { type: 'string', format: 'datetime' }\n case 'Boolean':\n return { type: 'boolean' }\n case 'Float':\n return { type: 'number' }\n case 'Integer':\n return { type: 'integer' }\n case 'String':\n default:\n return { type: 'string' }\n }\n}\n\n/\n react-jsonschema-form SchemaField override for \"additionalProperties\" only. In Synapse these are \"custom annotations\".\n * Modifies the data to provide full compatibility with Synapse annotations features.\n \n This component provides these enhancements to the SchemaField:\n * - Supports selecting a type, and changing the input widget appropriately\n * - Identifying the type on mount\n * - Treat all field values as arrays\n * - When the last array value is removed, remove the entire key from the form.\n * @param props\n * @returns\n /\nexport function AdditionalPropertiesSchemaField<\n T extends Array<unknown> = Array<unknown>,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any,\n>(\n props: FieldProps<T, S, F> & {\n onDropPropertyClick: (key: string) => (event: any) => void\n },\n) {\n const {\n formData,\n onChange,\n registry,\n schema,\n name,\n onDropPropertyClick,\n idSchema,\n } = props\n const id = idSchema.$id\n const { ArrayField } = registry.fields\n const { SelectWidget } = registry.widgets\n\n // The type determines which widget we show.\n const [propertyType, setPropertyType] = useState(\n guessPropertyType(convertToArray(formData)),\n )\n\n // If the property type is updated, store it in a new variable where we'll show a warning if data may be lost on coersion\n const [nextPropertyType, setNextPropertyType] = useState(propertyType)\n\n /\n This effect is invoked whenever the user attempts to change the datatype of a custom annotation.\n /\n useEffect(() => {\n function onNextPropertyTypeUpdate() {\n if (Array.isArray(formData)) {\n const dataIsEmpty =\n formData.length === 0 \|\|\n formData.every(item => item == null \|\| item == '')\n const coercedList = transformDataFromPropertyType(\n formData,\n nextPropertyType,\n )\n // if the data is empty or identical after conversion, then just update the property type\n if (dataIsEmpty \|\| nextPropertyType !== propertyType) {\n if (isEqual(formData, coercedList)) {\n setPropertyType(nextPropertyType)\n }\n }\n }\n }\n\n onNextPropertyTypeUpdate()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [nextPropertyType])\n\n /\n This effect is invoked whenever the propertyType changes.\n */\n useEffect(() => {\n function coerceDataAndUpdateWidget() {\n if (Array.isArray(formData)) {\n if (formData.every(item => item == null)) {\n onDropPropertyClick(name)(new CustomEvent('dropEmptyProperty'))\n } else {\n const coercedList = transformDataFromPropertyType(\n formData,\n nextPropertyType,\n ) as unknown as T\n\n // Data conversion is non-destructive or has been confirmed by the user\n setPropertyType(nextPropertyType)\n // Coerce the data to match the new type\n onChange(coercedList)\n }\n }\n }\n\n coerceDataAndUpdateWidget()\n // Don't add other properties to dependency array because we don't want to automatically coerce input\n // i.e. Only coerce data when the type changes, which should only be on mount or when the user explicitly chooses a new type.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [propertyType])\n\n const itemsSchema = getSchemaForPropertyType(propertyType)\n\n useEffect(() => {\n // If the additional property has not yet been coerced to an array, trigger an update to coerce and render nothing.\n // We must do this because RJSF does not currently batch these kinds of updates\n // See https://github.com/rjsf-team/react-jsonschema-form/issues/3367\n if (!Array.isArray(formData)) {\n onChange(convertToArray(formData) as unknown as T)\n }\n }, [formData, onChange])\n\n if (!Array.isArray(formData)) {\n return <></>\n }\n\n return (\n <AdditionalPropertyContextProvider\n value={{\n dropProperty: e => {\n onDropPropertyClick(name)(e)\n },\n }}\n >\n <Grid item xs={2}>\n <InputLabel htmlFor={`${id}-type`}>Type</InputLabel>\n <SelectWidget\n name={'Type'}\n id={`${id}-type`}\n schema={{} as S}\n options={{\n enumOptions: propertyTypeArray.map(type => ({\n label: type,\n value: type,\n })),\n }}\n value={propertyType}\n onChange={value => {\n setNextPropertyType(value as PropertyType)\n }}\n disabled={props.disabled}\n readOnly={props.readonly}\n required={true}\n isClearable={false}\n onBlur={() => {}}\n onFocus={() => {}}\n registry={registry}\n label={'Type'}\n />\n </Grid>\n <Grid item xs={7}>\n <ArrayField\n {...props}\n uiSchema={{\n ...props.uiSchema,\n 'ui:title': 'Value(s)',\n items: {\n ...props.uiSchema?.items,\n 'ui:placeholder': 'New Value',\n },\n }}\n schema={{\n ...schema,\n items: {\n ...itemsSchema,\n },\n }}\n />\n </Grid>\n {propertyType !== nextPropertyType && (\n <FullWidthAlert\n variant=\"warning\"\n title=\"Data may be lost when converting types\"\n description={`Are you sure you want to convert ${name} from ${propertyType} to ${nextPropertyType}? Current values may be lost on conversion.`}\n primaryButtonConfig={{\n text: 'Convert',\n onClick: () => {\n setPropertyType(nextPropertyType)\n },\n }}\n secondaryButtonConfig={{\n text: 'Cancel',\n onClick: () => {\n setNextPropertyType(propertyType)\n },\n }}\n isGlobal={false}\n />\n )}\n </AdditionalPropertyContextProvider>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AdditionalPropertiesSchemaField.js","names":[],"sources":["../../../../src/components/SchemaDrivenAnnotationEditor/field/AdditionalPropertiesSchemaField.tsx"],"sourcesContent":["import {\n FieldProps,\n FormContextType,\n RJSFSchema,\n StrictRJSFSchema,\n} from '@rjsf/utils'\nimport { isEqual } from 'lodash-es'\nimport { useEffect, useState } from 'react'\nimport FullWidthAlert from '../../FullWidthAlert/FullWidthAlert'\nimport { convertToArray } from '../AnnotationEditorUtils'\nimport { GridLegacy as Grid, InputLabel } from '@mui/material'\nimport { AdditionalPropertyContextProvider } from '../template/AdditionalPropertyContext'\n\n// Matches ####-##-##T##:##:##.###Z, e.g. 1970-01-01T12:00:000Z\nconst ISO_TIMESTAMP_REGEX = /\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}\\.\\d{3}Z/\n\n// Types that correspond to the different input fields that the annotation editor supports\nconst propertyTypeArray = [\n 'String',\n 'Integer',\n 'Float',\n 'Boolean',\n 'Datetime',\n] as const\n\nexport type PropertyType = (typeof propertyTypeArray)[number]\n\nexport function guessPropertyType(list: Array<unknown>): PropertyType {\n if (list.length === 0) {\n // The field was just added, so default to string\n return 'String'\n } else if (\n list.every(\n item => typeof item === 'number' \|\| item === 'NaN', // \"NaN\" is technically a float value\n )\n ) {\n if (list.every(item => Number.isInteger(item))) {\n return 'Integer'\n } else {\n return 'Float'\n }\n } else if (list.every(item => typeof item === 'boolean')) {\n return 'Boolean'\n } else if (\n list.every(item => typeof item === 'string') &&\n list.every((item: string) => !!ISO_TIMESTAMP_REGEX.exec(item))\n ) {\n return 'Datetime'\n }\n // otherwise, default type is 'string'\n return 'String'\n}\n\nexport function transformDataFromPropertyType(\n list: Array<any>,\n propertyType: PropertyType,\n) {\n switch (propertyType) {\n case 'Integer':\n return list.map(item =>\n Number.isNaN(Number(item)) ? 0 : Math.floor(Number(item)),\n )\n\n case 'Float':\n return list.map(item => {\n const asFloat = parseFloat(item as string)\n if (Number.isNaN(asFloat)) {\n return 'NaN'\n } else if (Number.isInteger(asFloat)) {\n return asFloat.toFixed(1)\n } else {\n return asFloat\n }\n })\n case 'Datetime':\n return list.map(item => {\n if (typeof item === 'string' && ISO_TIMESTAMP_REGEX.exec(item)) {\n return item\n } else {\n return new Date().toISOString()\n }\n })\n case 'Boolean':\n return list.map(item => !!item)\n case 'String':\n default:\n return list.map(item => String(item))\n }\n}\n\n/*\n Maps a Synapse Annotation PropertyType to a JSON Schema that captures the type and format.\n * @param propertyType\n /\nexport function getSchemaForPropertyType(propertyType: PropertyType) {\n switch (propertyType) {\n case 'Datetime':\n return { type: 'string', format: 'datetime' }\n case 'Boolean':\n return { type: 'boolean' }\n case 'Float':\n return { type: 'number' }\n case 'Integer':\n return { type: 'integer' }\n case 'String':\n default:\n return { type: 'string' }\n }\n}\n\n/\n react-jsonschema-form SchemaField override for \"additionalProperties\" only. In Synapse these are \"custom annotations\".\n * Modifies the data to provide full compatibility with Synapse annotations features.\n \n This component provides these enhancements to the SchemaField:\n * - Supports selecting a type, and changing the input widget appropriately\n * - Identifying the type on mount\n * - Treat all field values as arrays\n * - When the last array value is removed, remove the entire key from the form.\n * @param props\n * @returns\n /\nexport function AdditionalPropertiesSchemaField<\n T extends Array<unknown> = Array<unknown>,\n S extends StrictRJSFSchema = RJSFSchema,\n F extends FormContextType = any,\n>(\n props: FieldProps<T, S, F> & {\n onDropPropertyClick: (key: string) => (event: any) => void\n },\n) {\n const {\n formData,\n onChange,\n registry,\n schema,\n name,\n onDropPropertyClick,\n idSchema,\n } = props\n const id = idSchema.$id\n const { ArrayField } = registry.fields\n const { SelectWidget } = registry.widgets\n\n // The type determines which widget we show.\n const [propertyType, setPropertyType] = useState(\n guessPropertyType(convertToArray(formData)),\n )\n\n // If the property type is updated, store it in a new variable where we'll show a warning if data may be lost on coersion\n const [nextPropertyType, setNextPropertyType] = useState(propertyType)\n\n /\n This effect is invoked whenever the user attempts to change the datatype of a custom annotation.\n /\n useEffect(() => {\n function onNextPropertyTypeUpdate() {\n if (Array.isArray(formData)) {\n const dataIsEmpty =\n formData.length === 0 \|\|\n formData.every(item => item == null \|\| item == '')\n const coercedList = transformDataFromPropertyType(\n formData,\n nextPropertyType,\n )\n // if the data is empty or identical after conversion, then just update the property type\n if (dataIsEmpty \|\| nextPropertyType !== propertyType) {\n if (isEqual(formData, coercedList)) {\n setPropertyType(nextPropertyType)\n }\n }\n }\n }\n\n onNextPropertyTypeUpdate()\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [nextPropertyType])\n\n /\n This effect is invoked whenever the propertyType changes.\n */\n useEffect(() => {\n function coerceDataAndUpdateWidget() {\n if (Array.isArray(formData)) {\n if (formData.every(item => item == null)) {\n onDropPropertyClick(name)(new CustomEvent('dropEmptyProperty'))\n } else {\n const coercedList = transformDataFromPropertyType(\n formData,\n nextPropertyType,\n ) as unknown as T\n\n // Data conversion is non-destructive or has been confirmed by the user\n setPropertyType(nextPropertyType)\n // Coerce the data to match the new type\n onChange(coercedList)\n }\n }\n }\n\n coerceDataAndUpdateWidget()\n // Don't add other properties to dependency array because we don't want to automatically coerce input\n // i.e. Only coerce data when the type changes, which should only be on mount or when the user explicitly chooses a new type.\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [propertyType])\n\n const itemsSchema = getSchemaForPropertyType(propertyType)\n\n useEffect(() => {\n // If the additional property has not yet been coerced to an array, trigger an update to coerce and render nothing.\n // We must do this because RJSF does not currently batch these kinds of updates\n // See https://github.com/rjsf-team/react-jsonschema-form/issues/3367\n if (!Array.isArray(formData)) {\n onChange(convertToArray(formData) as unknown as T)\n }\n }, [formData, onChange])\n\n if (!Array.isArray(formData)) {\n return <></>\n }\n\n return (\n <AdditionalPropertyContextProvider\n value={{\n dropProperty: e => {\n onDropPropertyClick(name)(e)\n },\n }}\n >\n <Grid item xs={2}>\n <InputLabel htmlFor={`${id}-type`}>Type</InputLabel>\n <SelectWidget\n name={'Type'}\n id={`${id}-type`}\n schema={{} as S}\n options={{\n enumOptions: propertyTypeArray.map(type => ({\n label: type,\n value: type,\n })),\n }}\n value={propertyType}\n onChange={value => {\n setNextPropertyType(value as PropertyType)\n }}\n disabled={props.disabled}\n readOnly={props.readonly}\n required={true}\n isClearable={false}\n onBlur={() => {}}\n onFocus={() => {}}\n registry={registry}\n label={'Type'}\n />\n </Grid>\n <Grid item xs={7}>\n <ArrayField\n {...props}\n uiSchema={{\n ...props.uiSchema,\n 'ui:title': 'Value(s)',\n items: {\n ...props.uiSchema?.items,\n 'ui:placeholder': 'New Value',\n },\n }}\n schema={{\n ...schema,\n items: {\n ...itemsSchema,\n },\n }}\n />\n </Grid>\n {propertyType !== nextPropertyType && (\n <FullWidthAlert\n variant=\"warning\"\n title=\"Data may be lost when converting types\"\n description={`Are you sure you want to convert ${name} from ${propertyType} to ${nextPropertyType}? Current values may be lost on conversion.`}\n primaryButtonConfig={{\n text: 'Convert',\n onClick: () => {\n setPropertyType(nextPropertyType)\n },\n }}\n secondaryButtonConfig={{\n text: 'Cancel',\n onClick: () => {\n setNextPropertyType(propertyType)\n },\n }}\n isGlobal={false}\n />\n )}\n </AdditionalPropertyContextProvider>\n )\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StorybookComponentWrapper.js","names":[],"sources":["../../src/components/StorybookComponentWrapper.tsx"],"sourcesContent":["import { StandaloneLoginForm } from '@/components/Authentication/index'\nimport SynapseClient from '@/synapse-client'\nimport {\n defaultQueryClientConfig,\n SynapseContextProvider,\n SynapseContextType,\n} from '@/utils'\nimport { ApplicationSessionContextProvider } from '@/utils/AppUtils/session/ApplicationSessionContext'\nimport {\n SynapseSessionManager,\n type SessionState,\n} from '@/utils/AppUtils/session/SynapseSessionManager'\nimport { STACK_MAP, SynapseStack } from '@/utils/functions/getEndpoint'\nimport useDetectSSOCode from '@/utils/hooks/useDetectSSOCode'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools'\nimport {\n ReactNode,\n Suspense,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useSyncExternalStore,\n} from 'react'\nimport { createMemoryRouter } from 'react-router'\nimport { RouterProvider } from 'react-router/dom'\nimport { SynapseToastContainer } from './ToastMessage'\n\nconst storybookQueryClient = new QueryClient(defaultQueryClientConfig)\n\n// Module-level session manager instance, stable across story switches (like the QueryClient above)\nconst sessionManager = new SynapseSessionManager({\n onSessionInvalid: () => {\n // In Storybook, just refresh the session instead of reloading the page\n sessionManager.refreshSession()\n },\n})\n\nfunction overrideEndpoint(stack: SynapseStack) {\n const endpointConfig = STACK_MAP[stack]\n ;(window as any)['SRC_OVERRIDE_ENDPOINT_CONFIG'] = endpointConfig\n}\n\n/*\n Wraps storybook story components to ensure that all components receive required context.\n * @param props\n * @returns\n /\nexport function StorybookComponentWrapper(props: {\n children: ReactNode\n / This will match the `globalTypes` object in preview.tsx. */\n storybookContext: {\n args: {\n isAuthenticated?: boolean\n }\n globals: {\n stack?: SynapseStack\n showReactQueryDevtools?: boolean\n }\n parameters: {\n stack?: SynapseStack\n withRouter?: boolean\n requireLogin?: boolean\n }\n }\n}) {\n const { storybookContext } = props\n\n const currentStack: SynapseStack = (storybookContext.globals.stack \|\|\n storybookContext.parameters.stack) as SynapseStack\n\n useEffect(() => {\n overrideEndpoint(currentStack)\n }, [currentStack])\n\n // Subscribe to the framework-agnostic SynapseSessionManager for token/auth state\n // These methods are bound in the SynapseSessionManager constructor, so they are safe to pass directly.\n const sessionState: SessionState = useSyncExternalStore(\n // ~~eslint~~-disable-next-line @typescript-eslint/unbound-method\n sessionManager.subscribe,\n // ~~eslint~~-disable-next-line @typescript-eslint/unbound-method\n sessionManager.getSnapshot,\n )\n\n // Track whether we've started the manager so we only start once (module-level instance persists across renders)\n const managerStartedRef = useRef(false)\n\n useEffect(() => {\n if (!managerStartedRef.current) {\n sessionManager.start()\n managerStartedRef.current = true\n }\n return () => {\n sessionManager.dispose()\n managerStartedRef.current = false\n }\n }, [])\n\n // When the stack changes, restart the session manager to pick up the new endpoint\n useEffect(() => {\n if (managerStartedRef.current) {\n sessionManager.dispose()\n sessionManager.start()\n }\n }, [currentStack])\n\n const shouldPromptForLogin =\n storybookContext.parameters.requireLogin &&\n currentStack !== 'mock' &&\n sessionState.hasInitializedSession &&\n !sessionState.isAuthenticated\n\n const { isLoading: isLoadingSSO } = useDetectSSOCode({\n onSignInComplete: () => {\n void sessionManager.refreshSession()\n },\n onError: (err: unknown) => {\n console.error('SSO error in Storybook:', err)\n },\n isInitializingSession: !sessionState.hasInitializedSession,\n isAuthenticated: sessionState.isAuthenticated,\n })\n\n useEffect(() => {\n async function resetCache() {\n await storybookQueryClient.cancelQueries()\n await storybookQueryClient.resetQueries()\n }\n\n void resetCache()\n }, [sessionState.token, currentStack])\n\n const effectiveToken = useMemo(() => {\n if (currentStack === 'mock') {\n return storybookContext.args.isAuthenticated ? 'fake token' : undefined\n }\n return sessionState.token\n }, [sessionState.token, currentStack, storybookContext.args.isAuthenticated])\n\n const effectiveIsAuthenticated = useMemo(() => {\n if (currentStack === 'mock') {\n return !!storybookContext.args.isAuthenticated\n }\n return sessionState.isAuthenticated\n }, [\n sessionState.isAuthenticated,\n currentStack,\n storybookContext.args.isAuthenticated,\n ])\n\n const refreshSession = useCallback(async () => {\n await sessionManager.refreshSession()\n }, [])\n\n const clearSession = useCallback(async () => {\n await sessionManager.clearSession()\n }, [])\n\n const applicationSessionContext = useMemo(\n () => ({\n token: effectiveToken,\n realmId: sessionState.realmId,\n userId: sessionState.userId,\n isAuthenticated: effectiveIsAuthenticated,\n hasInitializedSession: sessionState.hasInitializedSession,\n refreshSession,\n clearSession,\n isLoadingSSO,\n twoFactorAuthSSOErrorResponse: undefined,\n termsOfServiceStatus: undefined,\n twoFactorStatus: undefined,\n }),\n [\n effectiveToken,\n effectiveIsAuthenticated,\n sessionState.realmId,\n sessionState.userId,\n sessionState.hasInitializedSession,\n refreshSession,\n clearSession,\n isLoadingSSO,\n ],\n )\n\n const synapseContext: Partial<SynapseContextType> = useMemo(\n () => ({\n accessToken: effectiveToken,\n isAuthenticated: effectiveIsAuthenticated,\n isInExperimentalMode: SynapseClient.isInSynapseExperimentalMode(),\n utcTime: SynapseClient.getUseUtcTimeFromCookie(),\n withErrorBoundary: true,\n downloadCartPageUrl: '/?path=/story/download-downloadcartpage--demo',\n }),\n [effectiveToken, effectiveIsAuthenticated],\n )\n\n const wrappedStory = (\n <Suspense fallback={'global suspense loading...'}>\n <QueryClientProvider client={storybookQueryClient}>\n <ApplicationSessionContextProvider context={applicationSessionContext}>\n <SynapseContextProvider\n key={currentStack}\n synapseContext={synapseContext}\n >\n {storybookContext.globals.showReactQueryDevtools && (\n <ReactQueryDevtools />\n )}\n <SynapseToastContainer />\n <main>\n {shouldPromptForLogin ? (\n <StandaloneLoginForm\n sessionCallback={() => {\n void sessionManager.refreshSession()\n }}\n />\n ) : (\n props.children\n )}\n </main>\n </SynapseContextProvider>\n </ApplicationSessionContextProvider>\n </QueryClientProvider>\n </Suspense>\n )\n\n if (!storybookContext.parameters.withRouter) {\n return wrappedStory\n }\n\n const router = createMemoryRouter([\n {\n path: '/',\n element: wrappedStory,\n },\n ])\n\n return <RouterProvider router={router} />\n}\n\nexport default StorybookComponentWrapper\n"],"mappings":"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"}
1	+ {"version":3,"file":"StorybookComponentWrapper.js","names":[],"sources":["../../src/components/StorybookComponentWrapper.tsx"],"sourcesContent":["import { StandaloneLoginForm } from '@/components/Authentication/index'\nimport SynapseClient from '@/synapse-client'\nimport {\n defaultQueryClientConfig,\n SynapseContextProvider,\n SynapseContextType,\n} from '@/utils'\nimport { ApplicationSessionContextProvider } from '@/utils/AppUtils/session/ApplicationSessionContext'\nimport {\n SynapseSessionManager,\n type SessionState,\n} from '@/utils/AppUtils/session/SynapseSessionManager'\nimport { STACK_MAP, SynapseStack } from '@/utils/functions/getEndpoint'\nimport useDetectSSOCode from '@/utils/hooks/useDetectSSOCode'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools'\nimport {\n ReactNode,\n Suspense,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useSyncExternalStore,\n} from 'react'\nimport { createMemoryRouter } from 'react-router'\nimport { RouterProvider } from 'react-router/dom'\nimport { SynapseToastContainer } from './ToastMessage'\n\nconst storybookQueryClient = new QueryClient(defaultQueryClientConfig)\n\n// Module-level session manager instance, stable across story switches (like the QueryClient above)\nconst sessionManager = new SynapseSessionManager({\n onSessionInvalid: () => {\n // In Storybook, just refresh the session instead of reloading the page\n sessionManager.refreshSession()\n },\n})\n\nfunction overrideEndpoint(stack: SynapseStack) {\n const endpointConfig = STACK_MAP[stack]\n ;(window as any)['SRC_OVERRIDE_ENDPOINT_CONFIG'] = endpointConfig\n}\n\n/*\n Wraps storybook story components to ensure that all components receive required context.\n * @param props\n * @returns\n /\nexport function StorybookComponentWrapper(props: {\n children: ReactNode\n / This will match the `globalTypes` object in preview.tsx. */\n storybookContext: {\n args: {\n isAuthenticated?: boolean\n }\n globals: {\n stack?: SynapseStack\n showReactQueryDevtools?: boolean\n }\n parameters: {\n stack?: SynapseStack\n withRouter?: boolean\n requireLogin?: boolean\n }\n }\n}) {\n const { storybookContext } = props\n\n const currentStack: SynapseStack = (storybookContext.globals.stack \|\|\n storybookContext.parameters.stack) as SynapseStack\n\n useEffect(() => {\n overrideEndpoint(currentStack)\n }, [currentStack])\n\n // Subscribe to the framework-agnostic SynapseSessionManager for token/auth state\n // These methods are bound in the SynapseSessionManager constructor, so they are safe to pass directly.\n const sessionState: SessionState = useSyncExternalStore(\n // oxlint-disable-next-line @typescript-eslint/unbound-method\n sessionManager.subscribe,\n // oxlint-disable-next-line @typescript-eslint/unbound-method\n sessionManager.getSnapshot,\n )\n\n // Track whether we've started the manager so we only start once (module-level instance persists across renders)\n const managerStartedRef = useRef(false)\n\n useEffect(() => {\n if (!managerStartedRef.current) {\n sessionManager.start()\n managerStartedRef.current = true\n }\n return () => {\n sessionManager.dispose()\n managerStartedRef.current = false\n }\n }, [])\n\n // When the stack changes, restart the session manager to pick up the new endpoint\n useEffect(() => {\n if (managerStartedRef.current) {\n sessionManager.dispose()\n sessionManager.start()\n }\n }, [currentStack])\n\n const shouldPromptForLogin =\n storybookContext.parameters.requireLogin &&\n currentStack !== 'mock' &&\n sessionState.hasInitializedSession &&\n !sessionState.isAuthenticated\n\n const { isLoading: isLoadingSSO } = useDetectSSOCode({\n onSignInComplete: () => {\n void sessionManager.refreshSession()\n },\n onError: (err: unknown) => {\n console.error('SSO error in Storybook:', err)\n },\n isInitializingSession: !sessionState.hasInitializedSession,\n isAuthenticated: sessionState.isAuthenticated,\n })\n\n useEffect(() => {\n async function resetCache() {\n await storybookQueryClient.cancelQueries()\n await storybookQueryClient.resetQueries()\n }\n\n void resetCache()\n }, [sessionState.token, currentStack])\n\n const effectiveToken = useMemo(() => {\n if (currentStack === 'mock') {\n return storybookContext.args.isAuthenticated ? 'fake token' : undefined\n }\n return sessionState.token\n }, [sessionState.token, currentStack, storybookContext.args.isAuthenticated])\n\n const effectiveIsAuthenticated = useMemo(() => {\n if (currentStack === 'mock') {\n return !!storybookContext.args.isAuthenticated\n }\n return sessionState.isAuthenticated\n }, [\n sessionState.isAuthenticated,\n currentStack,\n storybookContext.args.isAuthenticated,\n ])\n\n const refreshSession = useCallback(async () => {\n await sessionManager.refreshSession()\n }, [])\n\n const clearSession = useCallback(async () => {\n await sessionManager.clearSession()\n }, [])\n\n const applicationSessionContext = useMemo(\n () => ({\n token: effectiveToken,\n realmId: sessionState.realmId,\n userId: sessionState.userId,\n isAuthenticated: effectiveIsAuthenticated,\n hasInitializedSession: sessionState.hasInitializedSession,\n refreshSession,\n clearSession,\n isLoadingSSO,\n twoFactorAuthSSOErrorResponse: undefined,\n termsOfServiceStatus: undefined,\n twoFactorStatus: undefined,\n }),\n [\n effectiveToken,\n effectiveIsAuthenticated,\n sessionState.realmId,\n sessionState.userId,\n sessionState.hasInitializedSession,\n refreshSession,\n clearSession,\n isLoadingSSO,\n ],\n )\n\n const synapseContext: Partial<SynapseContextType> = useMemo(\n () => ({\n accessToken: effectiveToken,\n isAuthenticated: effectiveIsAuthenticated,\n isInExperimentalMode: SynapseClient.isInSynapseExperimentalMode(),\n utcTime: SynapseClient.getUseUtcTimeFromCookie(),\n withErrorBoundary: true,\n downloadCartPageUrl: '/?path=/story/download-downloadcartpage--demo',\n }),\n [effectiveToken, effectiveIsAuthenticated],\n )\n\n const wrappedStory = (\n <Suspense fallback={'global suspense loading...'}>\n <QueryClientProvider client={storybookQueryClient}>\n <ApplicationSessionContextProvider context={applicationSessionContext}>\n <SynapseContextProvider\n key={currentStack}\n synapseContext={synapseContext}\n >\n {storybookContext.globals.showReactQueryDevtools && (\n <ReactQueryDevtools />\n )}\n <SynapseToastContainer />\n <main>\n {shouldPromptForLogin ? (\n <StandaloneLoginForm\n sessionCallback={() => {\n void sessionManager.refreshSession()\n }}\n />\n ) : (\n props.children\n )}\n </main>\n </SynapseContextProvider>\n </ApplicationSessionContextProvider>\n </QueryClientProvider>\n </Suspense>\n )\n\n if (!storybookContext.parameters.withRouter) {\n return wrappedStory\n }\n\n const router = createMemoryRouter([\n {\n path: '/',\n element: wrappedStory,\n },\n ])\n\n return <RouterProvider router={router} />\n}\n\nexport default StorybookComponentWrapper\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,IAAM,IAAuB,IAAI,EAAY,CAAwB,GAG/D,IAAiB,IAAI,EAAsB,EAC/C,wBAAwB;CAEtB,EAAe,eAAe;AAChC,EACF,CAAC;AAED,SAAS,EAAiB,GAAqB;CAC7C,IAAM,IAAiB,EAAU;CAChC,OAAgB,+BAAkC;AACrD;AAOA,SAAgB,EAA0B,GAiBvC;CACD,IAAM,EAAE,wBAAqB,GAEvB,IAA8B,EAAiB,QAAQ,SAC3D,EAAiB,WAAW;CAE9B,QAAgB;EACd,EAAiB,CAAY;CAC/B,GAAG,CAAC,CAAY,CAAC;CAIjB,IAAM,IAA6B,EAEjC,EAAe,WAEf,EAAe,WACjB,GAGM,IAAoB,EAAO,EAAK;CActC,AAZA,SACE,AAEE,EAAkB,aADlB,EAAe,MAAM,GACO,WAEjB;EAEX,AADA,EAAe,QAAQ,GACvB,EAAkB,UAAU;CAC9B,IACC,CAAC,CAAC,GAGL,QAAgB;EACd,AAAI,EAAkB,YACpB,EAAe,QAAQ,GACvB,EAAe,MAAM;CAEzB,GAAG,CAAC,CAAY,CAAC;CAEjB,IAAM,IACJ,EAAiB,WAAW,gBAC5B,MAAiB,UACjB,EAAa,yBACb,CAAC,EAAa,iBAEV,EAAE,WAAW,MAAiB,EAAiB;EACnD,wBAAwB;GACtB,EAAoB,eAAe;EACrC;EACA,UAAU,MAAiB;GACzB,QAAQ,MAAM,2BAA2B,CAAG;EAC9C;EACA,uBAAuB,CAAC,EAAa;EACrC,iBAAiB,EAAa;CAChC,CAAC;CAED,QAAgB;EACd,eAAe,IAAa;GAE1B,AADA,MAAM,EAAqB,cAAc,GACzC,MAAM,EAAqB,aAAa;EAC1C;EAEA,EAAgB;CAClB,GAAG,CAAC,EAAa,OAAO,CAAY,CAAC;CAErC,IAAM,IAAiB,QACjB,MAAiB,SACZ,EAAiB,KAAK,kBAAkB,eAAe,KAAA,IAEzD,EAAa,OACnB;EAAC,EAAa;EAAO;EAAc,EAAiB,KAAK;CAAe,CAAC,GAEtE,IAA2B,QAC3B,MAAiB,SACZ,CAAC,CAAC,EAAiB,KAAK,kBAE1B,EAAa,iBACnB;EACD,EAAa;EACb;EACA,EAAiB,KAAK;CACxB,CAAC,GAEK,IAAiB,EAAY,YAAY;EAC7C,MAAM,EAAe,eAAe;CACtC,GAAG,CAAC,CAAC,GAEC,IAAe,EAAY,YAAY;EAC3C,MAAM,EAAe,aAAa;CACpC,GAAG,CAAC,CAAC,GAwCC,IACJ,kBAAC,GAAD;EAAU,UAAU;YAClB,kBAAC,GAAD;GAAqB,QAAQ;aAC3B,kBAAC,GAAD;IAAmC,SAzCP,SACzB;KACL,OAAO;KACP,SAAS,EAAa;KACtB,QAAQ,EAAa;KACrB,iBAAiB;KACjB,uBAAuB,EAAa;KACpC;KACA;KACA;KACA,+BAA+B,KAAA;KAC/B,sBAAsB,KAAA;KACtB,iBAAiB,KAAA;IACnB,IACA;KACE;KACA;KACA,EAAa;KACb,EAAa;KACb,EAAa;KACb;KACA;KACA;IACF,CAkBgD;cAC1C,kBAAC,GAAD;KAEkB,gBAlB0B,SAC3C;MACL,aAAa;MACb,iBAAiB;MACjB,sBAAsB,EAAc,4BAA4B;MAChE,SAAS,EAAc,wBAAwB;MAC/C,mBAAmB;MACnB,qBAAqB;KACvB,IACA,CAAC,GAAgB,CAAwB,CASjB;eAFlB;MAIG,EAAiB,QAAQ,0BACxB,kBAAC,GAAD,CAAqB,CAAA;MAEvB,kBAAC,GAAD,CAAwB,CAAA;MACxB,kBAAC,QAAD,EAAA,UACG,IACC,kBAAC,GAAD,EACE,uBAAuB;OACrB,EAAoB,eAAe;MACrC,EACD,CAAA,IAED,EAAM,SAEJ,CAAA;KACgB;OAlBjB,CAkBiB;GACS,CAAA;EAChB,CAAA;CACb,CAAA;CAcZ,OAXK,EAAiB,WAAW,aAW1B,kBAAC,GAAD,EAAwB,QAPhB,EAAmB,CAChC;EACE,MAAM;EACN,SAAS;CACX,CACF,CAE+B,EAAS,CAAA,IAV/B;AAWX"}

package/dist/components/SynapseTable/TablePagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.js","names":[],"sources":["../../../src/components/SynapseTable/TablePagination.tsx"],"sourcesContent":["import {\n MenuItem,\n Pagination,\n PaginationItem,\n PaginationRenderItemParams,\n Select,\n SelectChangeEvent,\n Typography,\n} from '@mui/material'\nimport {\n ChangeEvent,\n ComponentProps,\n forwardRef,\n Ref,\n useCallback,\n} from 'react'\nimport React from 'react'\nimport { useQueryContext } from '../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\n\nimport { usePrefetchTableRows } from './usePrefetchTableData'\n\nconst PAGE_SIZE_OPTIONS = [10, 25, 100, 500]\n\nexport const TablePagination = (): React.ReactNode => {\n const { goToPage, pageSize, setPageSize, currentPage, currentQueryRequest } =\n useQueryContext()\n\n const prefetchPage = usePrefetchTableRows()\n\n const {\n data: { queryCount, maxRowsPerPage },\n } = useSuspenseGetQueryMetadata()\n\n const currentLimit = currentQueryRequest.query.limit\n const resolvedPageSize = currentLimit ?? pageSize\n\n // Filter by backend limit maxRowsPerPage\n let pageSizeOptions = maxRowsPerPage\n ? PAGE_SIZE_OPTIONS.filter(option => option < maxRowsPerPage)\n : [...PAGE_SIZE_OPTIONS]\n\n if (queryCount) {\n // first option that is >= queryCount (show all rows)\n const firstSufficientOptionIndex = pageSizeOptions.findIndex(\n option => option >= queryCount,\n )\n // If found, slice to only include options up to and including that one\n if (firstSufficientOptionIndex !== -1) {\n pageSizeOptions = pageSizeOptions.slice(0, firstSufficientOptionIndex + 1)\n }\n }\n\n // If resolvedPageSize isn't in the options, use the smallest available option\n const displayedPageSize = pageSizeOptions.includes(resolvedPageSize)\n ? resolvedPageSize\n : pageSizeOptions[0]\n\n const handlePage = (_event: ChangeEvent<unknown>, value: number) => {\n goToPage(value)\n }\n\n const handlePageSize = (event: SelectChangeEvent<number>) => {\n const value = event.target.value\n\n setPageSize(value)\n goToPage(1)\n }\n\n // A custom `renderItem` implementation for the MUI Pagination component that prefetches a page's data when the page number button is hovered over\n const renderPaginationItem = useCallback(\n (params: PaginationRenderItemParams) => {\n // ~~eslint~~-disable-next-line react/no-unstable-nested-components -- this declaration is within a useCallback itself, so it is stable (enough)\n const ButtonWithPagePrefetchOnHover = forwardRef(\n function PaginationItemButton(\n props: ComponentProps<'button'>,\n ref: Ref<HTMLButtonElement>,\n ) {\n return (\n <button\n ref={ref}\n {...props}\n onMouseOver={() => {\n if (params.page) {\n void prefetchPage(params.page)\n }\n }}\n />\n )\n },\n )\n\n return (\n <PaginationItem {...params} component={ButtonWithPagePrefetchOnHover} />\n )\n },\n [prefetchPage],\n )\n\n // PORTALS-2259: Special presentation case. If we're on the first page,\n // and the total query count is equal to 1 (and is the page size is not 1), then hide the pagination UI.\n // Also hide pagination if the query count is unavailable.\n if (\n (currentPage == 1 && queryCount == 1 && pageSize != 1) \|\|\n queryCount == undefined \|\|\n (maxRowsPerPage && maxRowsPerPage < 5)\n ) {\n return null\n }\n\n return (\n <div>\n <Pagination\n page={currentPage}\n count={Math.ceil(queryCount / displayedPageSize)}\n color=\"secondary\"\n onChange={handlePage}\n shape={'rounded'}\n sx={{\n display: 'inline-block',\n float: 'left',\n '.MuiPaginationItem-root': { fontSize: '14px' },\n }}\n renderItem={renderPaginationItem}\n />\n <Typography variant=\"body1\" style={{ display: 'inline-block' }}>\n {`${queryCount?.toLocaleString()} total rows /`}\n </Typography>\n <Select\n name=\"page size\"\n value={displayedPageSize}\n size=\"small\"\n onChange={handlePageSize}\n sx={{ ml: 0.5 }}\n >\n {pageSizeOptions.map(pageSize => {\n return (\n <MenuItem key={pageSize} value={pageSize}>\n {pageSize} per page\n </MenuItem>\n )\n })}\n </Select>\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAsBA,IAAM,IAAoB;CAAC;CAAI;CAAI;CAAK;AAAG,GAE9B,UAAyC;CACpD,IAAM,EAAE,aAAU,aAAU,gBAAa,gBAAa,2BACpD,EAAgB,GAEZ,IAAe,EAAqB,GAEpC,EACJ,MAAM,EAAE,eAAY,wBAClB,EAA4B,GAG1B,IADe,EAAoB,MAAM,SACN,GAGrC,IAAkB,IAClB,EAAkB,QAAO,MAAU,IAAS,CAAc,IAC1D,CAAC,GAAG,CAAiB;CAEzB,IAAI,GAAY;EAEd,IAAM,IAA6B,EAAgB,WACjD,MAAU,KAAU,CACtB;EAEA,AAAI,MAA+B,OACjC,IAAkB,EAAgB,MAAM,GAAG,IAA6B,CAAC;CAE7E;CAGA,IAAM,IAAoB,EAAgB,SAAS,CAAgB,IAC/D,IACA,EAAgB,IAEd,KAAc,GAA8B,MAAkB;EAClE,EAAS,CAAK;CAChB,GAEM,KAAkB,MAAqC;EAC3D,IAAM,IAAQ,EAAM,OAAO;EAG3B,AADA,EAAY,CAAK,GACjB,EAAS,CAAC;CACZ,GAGM,IAAuB,GAC1B,MAAuC;EAEtC,IAAM,IAAgC,EACpC,SACE,GACA,GACA;GACA,OACE,kBAAC,UAAD;IACO;IACL,GAAI;IACJ,mBAAmB;KACjB,AAAI,EAAO,QACT,EAAkB,EAAO,IAAI;IAEjC;GACD,CAAA;EAEL,CACF;EAEA,OACE,kBAAC,GAAD;GAAgB,GAAI;GAAQ,WAAW;EAAgC,CAAA;CAE3E,GACA,CAAC,CAAY,CACf;CAaA,OAPG,KAAe,KAAK,KAAc,KAAK,KAAY,KACpD,KAAc,QACb,KAAkB,IAAiB,IAE7B,OAIP,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,MAAM;GACN,OAAO,KAAK,KAAK,IAAa,CAAiB;GAC/C,OAAM;GACN,UAAU;GACV,OAAO;GACP,IAAI;IACF,SAAS;IACT,OAAO;IACP,2BAA2B,EAAE,UAAU,OAAO;GAChD;GACA,YAAY;EACb,CAAA;EACD,kBAAC,GAAD;GAAY,SAAQ;GAAQ,OAAO,EAAE,SAAS,eAAe;aAC1D,GAAG,GAAY,eAAe,EAAE;EACvB,CAAA;EACZ,kBAAC,GAAD;GACE,MAAK;GACL,OAAO;GACP,MAAK;GACL,UAAU;GACV,IAAI,EAAE,IAAI,GAAI;aAEb,EAAgB,KAAI,MAEjB,kBAAC,GAAD;IAAyB,OAAO;cAAhC,CACG,GAAS,WACF;MAFK,CAEL,CAEb;EACK,CAAA;CACL,EAAA,CAAA;AAET"}
1	+ {"version":3,"file":"TablePagination.js","names":[],"sources":["../../../src/components/SynapseTable/TablePagination.tsx"],"sourcesContent":["import {\n MenuItem,\n Pagination,\n PaginationItem,\n PaginationRenderItemParams,\n Select,\n SelectChangeEvent,\n Typography,\n} from '@mui/material'\nimport {\n ChangeEvent,\n ComponentProps,\n forwardRef,\n Ref,\n useCallback,\n} from 'react'\nimport React from 'react'\nimport { useQueryContext } from '../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\n\nimport { usePrefetchTableRows } from './usePrefetchTableData'\n\nconst PAGE_SIZE_OPTIONS = [10, 25, 100, 500]\n\nexport const TablePagination = (): React.ReactNode => {\n const { goToPage, pageSize, setPageSize, currentPage, currentQueryRequest } =\n useQueryContext()\n\n const prefetchPage = usePrefetchTableRows()\n\n const {\n data: { queryCount, maxRowsPerPage },\n } = useSuspenseGetQueryMetadata()\n\n const currentLimit = currentQueryRequest.query.limit\n const resolvedPageSize = currentLimit ?? pageSize\n\n // Filter by backend limit maxRowsPerPage\n let pageSizeOptions = maxRowsPerPage\n ? PAGE_SIZE_OPTIONS.filter(option => option < maxRowsPerPage)\n : [...PAGE_SIZE_OPTIONS]\n\n if (queryCount) {\n // first option that is >= queryCount (show all rows)\n const firstSufficientOptionIndex = pageSizeOptions.findIndex(\n option => option >= queryCount,\n )\n // If found, slice to only include options up to and including that one\n if (firstSufficientOptionIndex !== -1) {\n pageSizeOptions = pageSizeOptions.slice(0, firstSufficientOptionIndex + 1)\n }\n }\n\n // If resolvedPageSize isn't in the options, use the smallest available option\n const displayedPageSize = pageSizeOptions.includes(resolvedPageSize)\n ? resolvedPageSize\n : pageSizeOptions[0]\n\n const handlePage = (_event: ChangeEvent<unknown>, value: number) => {\n goToPage(value)\n }\n\n const handlePageSize = (event: SelectChangeEvent<number>) => {\n const value = event.target.value\n\n setPageSize(value)\n goToPage(1)\n }\n\n // A custom `renderItem` implementation for the MUI Pagination component that prefetches a page's data when the page number button is hovered over\n const renderPaginationItem = useCallback(\n (params: PaginationRenderItemParams) => {\n // oxlint-disable-next-line react/no-unstable-nested-components -- this declaration is within a useCallback itself, so it is stable (enough)\n const ButtonWithPagePrefetchOnHover = forwardRef(\n function PaginationItemButton(\n props: ComponentProps<'button'>,\n ref: Ref<HTMLButtonElement>,\n ) {\n return (\n <button\n ref={ref}\n {...props}\n onMouseOver={() => {\n if (params.page) {\n void prefetchPage(params.page)\n }\n }}\n />\n )\n },\n )\n\n return (\n <PaginationItem {...params} component={ButtonWithPagePrefetchOnHover} />\n )\n },\n [prefetchPage],\n )\n\n // PORTALS-2259: Special presentation case. If we're on the first page,\n // and the total query count is equal to 1 (and is the page size is not 1), then hide the pagination UI.\n // Also hide pagination if the query count is unavailable.\n if (\n (currentPage == 1 && queryCount == 1 && pageSize != 1) \|\|\n queryCount == undefined \|\|\n (maxRowsPerPage && maxRowsPerPage < 5)\n ) {\n return null\n }\n\n return (\n <div>\n <Pagination\n page={currentPage}\n count={Math.ceil(queryCount / displayedPageSize)}\n color=\"secondary\"\n onChange={handlePage}\n shape={'rounded'}\n sx={{\n display: 'inline-block',\n float: 'left',\n '.MuiPaginationItem-root': { fontSize: '14px' },\n }}\n renderItem={renderPaginationItem}\n />\n <Typography variant=\"body1\" style={{ display: 'inline-block' }}>\n {`${queryCount?.toLocaleString()} total rows /`}\n </Typography>\n <Select\n name=\"page size\"\n value={displayedPageSize}\n size=\"small\"\n onChange={handlePageSize}\n sx={{ ml: 0.5 }}\n >\n {pageSizeOptions.map(pageSize => {\n return (\n <MenuItem key={pageSize} value={pageSize}>\n {pageSize} per page\n </MenuItem>\n )\n })}\n </Select>\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAsBA,IAAM,IAAoB;CAAC;CAAI;CAAI;CAAK;AAAG,GAE9B,UAAyC;CACpD,IAAM,EAAE,aAAU,aAAU,gBAAa,gBAAa,2BACpD,EAAgB,GAEZ,IAAe,EAAqB,GAEpC,EACJ,MAAM,EAAE,eAAY,wBAClB,EAA4B,GAG1B,IADe,EAAoB,MAAM,SACN,GAGrC,IAAkB,IAClB,EAAkB,QAAO,MAAU,IAAS,CAAc,IAC1D,CAAC,GAAG,CAAiB;CAEzB,IAAI,GAAY;EAEd,IAAM,IAA6B,EAAgB,WACjD,MAAU,KAAU,CACtB;EAEA,AAAI,MAA+B,OACjC,IAAkB,EAAgB,MAAM,GAAG,IAA6B,CAAC;CAE7E;CAGA,IAAM,IAAoB,EAAgB,SAAS,CAAgB,IAC/D,IACA,EAAgB,IAEd,KAAc,GAA8B,MAAkB;EAClE,EAAS,CAAK;CAChB,GAEM,KAAkB,MAAqC;EAC3D,IAAM,IAAQ,EAAM,OAAO;EAG3B,AADA,EAAY,CAAK,GACjB,EAAS,CAAC;CACZ,GAGM,IAAuB,GAC1B,MAAuC;EAEtC,IAAM,IAAgC,EACpC,SACE,GACA,GACA;GACA,OACE,kBAAC,UAAD;IACO;IACL,GAAI;IACJ,mBAAmB;KACjB,AAAI,EAAO,QACT,EAAkB,EAAO,IAAI;IAEjC;GACD,CAAA;EAEL,CACF;EAEA,OACE,kBAAC,GAAD;GAAgB,GAAI;GAAQ,WAAW;EAAgC,CAAA;CAE3E,GACA,CAAC,CAAY,CACf;CAaA,OAPG,KAAe,KAAK,KAAc,KAAK,KAAY,KACpD,KAAc,QACb,KAAkB,IAAiB,IAE7B,OAIP,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,MAAM;GACN,OAAO,KAAK,KAAK,IAAa,CAAiB;GAC/C,OAAM;GACN,UAAU;GACV,OAAO;GACP,IAAI;IACF,SAAS;IACT,OAAO;IACP,2BAA2B,EAAE,UAAU,OAAO;GAChD;GACA,YAAY;EACb,CAAA;EACD,kBAAC,GAAD;GAAY,SAAQ;GAAQ,OAAO,EAAE,SAAS,eAAe;aAC1D,GAAG,GAAY,eAAe,EAAE;EACvB,CAAA;EACZ,kBAAC,GAAD;GACE,MAAK;GACL,OAAO;GACP,MAAK;GACL,UAAU;GACV,IAAI,EAAE,IAAI,GAAI;aAEb,EAAgB,KAAI,MAEjB,kBAAC,GAAD;IAAyB,OAAO;cAAhC,CACG,GAAS,WACF;MAFK,CAEL,CAEb;EACK,CAAA;CACL,EAAA,CAAA;AAET"}

package/dist/components/SynapseTable/datasets/DatasetItemsEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatasetItemsEditor.js","names":[],"sources":["../../../../src/components/SynapseTable/datasets/DatasetItemsEditor.tsx"],"sourcesContent":["import React from 'react'\nimport WideButton from '@/components/styled/WideButton'\nimport { datasetItemToReference } from '@/components/SynapseTable/datasets/DatasetEditorUtils'\nimport {\n useGetEntity,\n useGetEntityPath,\n useUpdateEntity,\n} from '@/synapse-queries'\nimport { RequiredProperties } from '@/utils'\nimport {\n convertToEntityType,\n entityTypeToFriendlyName,\n isDataset,\n isDatasetCollection,\n} from '@/utils/functions/EntityTypeUtils'\nimport { useSet } from '@/utils/hooks'\nimport AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'\nimport {\n Alert,\n Button,\n Checkbox,\n Skeleton,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n EntityRef,\n EntityRefCollectionView,\n Reference,\n} from '@sage-bionetworks/synapse-types'\nimport {\n createColumnHelper,\n getCoreRowModel,\n Table,\n useReactTable,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { isEqual, upperFirst } from 'lodash-es'\nimport pluralize from 'pluralize'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { CreatedOnCell } from '../../EntityFinder/details/view/table/CreatedOnCell'\nimport { EntityBadgeIconsCell } from '../../EntityFinder/details/view/table/EntityBadgeIconsCell'\nimport { EntityNameCell } from '../../EntityFinder/details/view/table/EntityNameCell'\nimport { ModifiedByCell } from '../../EntityFinder/details/view/table/ModifiedByCell'\nimport { ModifiedOnCell } from '../../EntityFinder/details/view/table/ModifiedOnCell'\nimport { ParentProjectCell } from '../../EntityFinder/details/view/table/ParentProjectCell'\nimport { EntityFinderModal } from '../../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../../EntityFinder/tree/EntityTree'\nimport { VersionSelectionType } from '../../EntityFinder/VersionSelectionType'\nimport { BlockingLoader } from '../../LoadingScreen/LoadingScreen'\nimport { SkeletonTable } from '../../Skeleton'\nimport WarningDialog from '../../SynapseForm/WarningDialog'\nimport ColumnHeader from '../../TanStackTable/ColumnHeader'\nimport StyledVirtualTanStackTable from '../../TanStackTable/StyledVirtualTanStackTable'\nimport { displayToast } from '../../ToastMessage'\nimport { DatasetEditorCheckboxCell } from './DatasetEditorCheckboxCell'\nimport { DatasetEditorVersionCell } from './DatasetEditorVersionCell'\nimport { EntityFetchErrorCell } from './EntityFetchErrorCell'\n\nexport type DatasetItemsEditorTableData = EntityRef & {\n isSelected: boolean\n setSelected: (value: boolean) => void\n}\n\nenum DatasetItemsEditorColumn {\n ERROR_STATE = 'errorState',\n SELECTED = 'isSelected',\n NAME = 'name',\n ENTITY_ID = 'entityId',\n BADGES = 'badges',\n VERSION = 'version',\n CREATED_ON = 'createdOn',\n MODIFIED_ON = 'modifieddOn',\n MODIFIED_BY = 'modifiedBy',\n PROJECT = 'project',\n}\n\nconst columnHelper = createColumnHelper<DatasetItemsEditorTableData>()\nfunction getColumns(\n opts: SelectAllCheckboxRendererProps & {\n changeVersionOnItem: (entityId: string, newVersion: number) => void\n },\n) {\n const {\n datasetToUpdate,\n selectedIds,\n clearSelectedIds,\n addSelectedId,\n allItemsAreSelected,\n changeVersionOnItem,\n } = opts\n return [\n columnHelper.display({\n id: DatasetItemsEditorColumn.ERROR_STATE,\n minSize: 35,\n maxSize: 35,\n size: 35,\n enableResizing: false,\n header: () => null,\n cell: EntityFetchErrorCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.SELECTED,\n minSize: 40,\n maxSize: 40,\n size: 40,\n enableResizing: false,\n header: () => (\n <SelectAllCheckboxRenderer\n datasetToUpdate={datasetToUpdate}\n selectedIds={selectedIds}\n clearSelectedIds={clearSelectedIds}\n addSelectedId={addSelectedId}\n allItemsAreSelected={allItemsAreSelected}\n />\n ),\n cell: DatasetEditorCheckboxCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.NAME,\n minSize: 50,\n size: 300,\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: EntityNameCell,\n }),\n columnHelper.accessor(DatasetItemsEditorColumn.ENTITY_ID, {\n minSize: 50,\n size: 130,\n header: props => <ColumnHeader {...props} title={'ID'} />,\n enableColumnFilter: false,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.BADGES,\n minSize: 80,\n size: 80,\n enableResizing: true,\n cell: EntityBadgeIconsCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.VERSION,\n minSize: 150,\n size: 150,\n header: props => <ColumnHeader {...props} title={'Version'} />,\n cell: props => (\n <DatasetEditorVersionCell\n {...props}\n toggleSelection={datasetItem => {\n changeVersionOnItem(datasetItem.entityId, datasetItem.versionNumber)\n }}\n />\n ),\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.CREATED_ON,\n header: props => <ColumnHeader {...props} title={'Created On'} />,\n size: 220,\n minSize: 170,\n cell: CreatedOnCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.MODIFIED_ON,\n header: props => <ColumnHeader {...props} title={'Modified On'} />,\n size: 220,\n minSize: 170,\n cell: ModifiedOnCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.MODIFIED_BY,\n header: props => <ColumnHeader {...props} title={'Modified By'} />,\n size: 250,\n enableResizing: true,\n cell: ModifiedByCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.PROJECT,\n header: props => <ColumnHeader {...props} title={'Size'} />,\n size: 300,\n cell: ParentProjectCell,\n }),\n ]\n}\n\nfunction getSelectableTypes(entity: EntityRefCollectionView) {\n if (isDataset(entity)) {\n return [EntityType.file]\n } else if (isDatasetCollection(entity)) {\n return [EntityType.dataset]\n } else {\n console.error(\n 'Cannot determine selectable types for entity type: ' +\n entity.concreteType,\n )\n return []\n }\n}\n\nexport function getCopy(entity?: EntityRefCollectionView) {\n const displayName = entity\n ? entityTypeToFriendlyName(convertToEntityType(entity.concreteType))\n : 'Collection'\n let itemName = 'Item'\n let currentVersionName = 'Current Version'\n if (entity && isDataset(entity)) {\n itemName = entityTypeToFriendlyName(EntityType.file)\n currentVersionName = 'Draft'\n } else if (entity && isDatasetCollection(entity)) {\n itemName = entityTypeToFriendlyName(EntityType.dataset)\n }\n\n const entityFinderPopover =\n entity && isDataset(entity)\n ? `Use the left pane to browse projects and folders. Select ${pluralize(\n itemName,\n )} from the right pane to add to this ${displayName}. ${upperFirst(\n pluralize(itemName),\n )} in a ${displayName} can be added from multiple folders. You can also use Search to find and select ${pluralize(\n itemName,\n )}.`\n : `Use the left pane to browse projects. Select ${pluralize(\n itemName,\n )} from the right pane to add to this ${displayName}. ${upperFirst(\n pluralize(itemName),\n )} in a ${displayName} can be added from multiple projects. You can also use Search to find and select ${pluralize(\n itemName,\n )}.`\n\n return {\n ADD_ITEMS: `Add ${pluralize(itemName)}`,\n ADD_ITEMS_TO: `Add ${pluralize(itemName)} to ${displayName}`,\n REMOVE_ITEMS: `Remove ${pluralize(itemName)}`,\n NO_ITEMS_IN_THIS_DATASET: `No ${pluralize(\n itemName,\n )} in this ${displayName}`,\n SAVE_TO_CONTINUE: `Save the ${displayName} to continue`,\n CREATE_VERSION_TO_FREEZE: `Create a Version of this ${displayName} to freeze it in its current state`,\n ENTITY_SAVED: `${displayName} Saved`,\n SAVE_CHANGES: `Save changes to ${currentVersionName}`,\n ENTITY_FINDER_POPOVER: entityFinderPopover,\n ENTITY_FINDER_PROMPT: `Find ${pluralize(\n itemName,\n )} to add to the ${displayName}.`,\n PRECONDITION_FAILED_MESSAGE: `Re-retrieve the ${displayName} to get the latest changes. Your current changes will be lost.`,\n PRECONDITION_FAILED_TITLE: `${displayName} updated since last fetched`,\n PRECONDITION_FAILED_ACTION: `Retrieve ${displayName}`,\n NO_CHANGES_MADE: `You have not made any changes to the ${displayName}.`,\n }\n}\n\nfunction getDataSetDifference(\n oldDataSet: EntityRef[],\n changedItems: EntityRef[],\n) {\n const unchangedItems = oldDataSet.filter(\n oldItem =>\n !changedItems.find(newItem => newItem.entityId === oldItem.entityId),\n )\n const deletedItems = [...unchangedItems]\n const { updatedItems, newItems } = changedItems.reduce(\n (results, result) => {\n const oldItem = oldDataSet.find(old => old.entityId === result.entityId)\n if (oldItem) {\n if (result.versionNumber !== oldItem.versionNumber) {\n results['updatedItems'].push(result)\n } else {\n unchangedItems.push(result)\n }\n } else {\n results['newItems'].push(result)\n }\n return results\n },\n { updatedItems: [], newItems: [] } as {\n updatedItems: EntityRef[]\n newItems: EntityRef[]\n },\n )\n\n return { unchangedItems, updatedItems, newItems, deletedItems }\n}\n\nfunction getDatasetChangedToastMessageTitle(\n previousDatasetToUpdate?: RequiredProperties<\n EntityRefCollectionView,\n 'items'\n >,\n datasetToUpdate?: RequiredProperties<EntityRefCollectionView, 'items'>,\n) {\n const { updatedItems, newItems, deletedItems } = getDataSetDifference(\n previousDatasetToUpdate?.items ?? [],\n datasetToUpdate?.items!,\n )\n let toastTitle = ''\n\n // \"X items(s) deleted\"\n if (deletedItems.length > 0) {\n toastTitle += `${deletedItems.length} Item${\n deletedItems.length === 1 ? '' : 's'\n } removed`\n } else {\n // \"Y item(s) added\"\n toastTitle += `${newItems.length} Item${\n newItems.length === 1 ? '' : 's'\n } added`\n\n // \"and Z item(s) updated\", only shown if there are updated items\n if (updatedItems.length > 0) {\n toastTitle += ` and ${updatedItems.length} Item${\n updatedItems.length === 1 ? '' : 's'\n } updated`\n }\n }\n return toastTitle\n}\n\nexport type DatasetItemsEditorProps = {\n /* The synId of the EntityRefCollectionView to modify /\n entityId: string\n /* Callback invoked when the editor changes state to contain un/saved changes. */\n onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void\n onSave?: () => void\n onClose?: () => void\n}\n\nconst ROW_HEIGHT = 48\n\ntype SelectAllCheckboxRendererProps = {\n datasetToUpdate: RequiredProperties<EntityRefCollectionView, 'items'>\n selectedIds: Omit<Set<string>, 'add' \| 'delete' \| 'clear'>\n addSelectedId: (...items: string[]) => void\n clearSelectedIds: () => void\n allItemsAreSelected: boolean\n}\n\nconst SelectAllCheckboxRenderer = (\n props: SelectAllCheckboxRendererProps,\n): React.ReactNode => {\n const {\n datasetToUpdate,\n clearSelectedIds,\n allItemsAreSelected,\n addSelectedId,\n } = props\n const isChecked = allItemsAreSelected\n\n return (\n <Checkbox\n inputProps={{ 'aria-label': 'Select All' }}\n checked={isChecked}\n disabled={datasetToUpdate.items.length === 0}\n onChange={() => {\n if (isChecked) {\n clearSelectedIds()\n } else {\n addSelectedId(...datasetToUpdate.items.map(item => item.entityId))\n }\n }}\n />\n )\n}\n\nfunction NoItemsPlaceholder(props: {\n titleCopy: string\n buttonCopy: string\n onButtonClick: () => void\n}) {\n const { titleCopy, buttonCopy, onButtonClick } = props\n return (\n <div className=\"NoItemsPlaceholder\">\n <Typography variant={'headline3'}>{titleCopy}</Typography>\n <WideButton\n variant=\"contained\"\n color=\"primary\"\n onClick={onButtonClick}\n startIcon={<AddCircleTwoToneIcon />}\n sx={{ mt: 2 }}\n >\n {buttonCopy}\n </WideButton>\n </div>\n )\n}\n\nexport function DatasetItemsEditor(props: DatasetItemsEditorProps) {\n const { entityId, onSave, onClose, onUnsavedChangesChange } = props\n const [showEntityFinder, setShowEntityFinder] = useState<boolean>(false)\n const [showWarningDialog, setShowWarningDialog] = useState<boolean>(false)\n\n // The current 'client state' of dataset that the user is currently editing. Updates to this state are not saved until the user clicks 'Save'.\n const [datasetToUpdate, setDatasetToUpdate] =\n useState<RequiredProperties<EntityRefCollectionView, 'items'>>()\n\n // The previous value of the datasetToUpdate variable. This is used to calculate a summary of bulk actions since the last update to the unsaved dataset state.\n const [previousDatasetToUpdate, setPreviousDatasetToUpdate] =\n useState<RequiredProperties<EntityRefCollectionView, 'items'>>()\n\n // Stores the `close` function that will be used to hide the last toast that prompted the user to save\n const [onCloseLastSavePromptToast, setOnCloseLastSavePromptToast] = useState<\n { close: () => void } \| undefined\n >()\n\n const { data: datasetOnServer, refetch: refetchDataset } = useGetEntity<\n RequiredProperties<EntityRefCollectionView, 'items'>\n >(entityId, undefined, {\n staleTime: Infinity,\n })\n\n const hasChangedSinceLastSave = Boolean(\n datasetOnServer &&\n datasetToUpdate &&\n !isEqual(datasetOnServer, datasetToUpdate),\n )\n\n const {\n ADD_ITEMS,\n ADD_ITEMS_TO,\n REMOVE_ITEMS,\n NO_ITEMS_IN_THIS_DATASET,\n SAVE_TO_CONTINUE,\n CREATE_VERSION_TO_FREEZE,\n ENTITY_SAVED,\n SAVE_CHANGES,\n PRECONDITION_FAILED_TITLE,\n PRECONDITION_FAILED_MESSAGE,\n PRECONDITION_FAILED_ACTION,\n ENTITY_FINDER_POPOVER,\n ENTITY_FINDER_PROMPT,\n NO_CHANGES_MADE,\n } = useMemo(() => getCopy(datasetOnServer), [datasetOnServer])\n\n useEffect(() => {\n if (datasetOnServer) {\n // SWC-5876: Dataset Items may be undefined. This has the same inherent meaning as the empty list, so we'll just change it to save us some null checks.\n if (datasetOnServer.items == null) {\n datasetOnServer.items = []\n }\n setDatasetToUpdate(datasetOnServer)\n }\n }, [datasetOnServer])\n\n const {\n set: selectedIds,\n add: addSelectedId,\n remove: removeSelectedId,\n clear: clearSelectedIds,\n } = useSet<string>()\n const allItemsAreSelected = Boolean(\n datasetToUpdate && datasetToUpdate.items.length === selectedIds.size,\n )\n\n useEffect(() => {\n if (datasetToUpdate && datasetOnServer && onUnsavedChangesChange) {\n onUnsavedChangesChange(hasChangedSinceLastSave)\n }\n }, [\n datasetOnServer,\n datasetToUpdate,\n hasChangedSinceLastSave,\n onUnsavedChangesChange,\n ])\n\n // We get the project ID to show the \"Current Project\" context in the Entity Finder.\n const { data: path } = useGetEntityPath(entityId)\n const projectId = path?.path[1]?.id\n\n const { mutate, isPending: updateIsPending } =\n useUpdateEntity<EntityRefCollectionView>({\n onMutate: () => {\n // Close existing toast that prompted the user to save\n if (onCloseLastSavePromptToast) {\n onCloseLastSavePromptToast.close()\n setOnCloseLastSavePromptToast(undefined)\n }\n },\n onSuccess: () => {\n // The query should automatically be invalidated, but just in case\n void refetchDataset()\n\n if (onSave) {\n onSave()\n } else {\n // If onSave isn't specified, push a generic toast message.\n displayToast(CREATE_VERSION_TO_FREEZE, 'success', {\n title: ENTITY_SAVED,\n })\n }\n },\n onError: error => {\n if (error.status === 412) {\n displayToast(PRECONDITION_FAILED_MESSAGE, 'warning', {\n title: PRECONDITION_FAILED_TITLE,\n primaryButtonConfig: {\n text: PRECONDITION_FAILED_ACTION,\n onClick: () => {\n void refetchDataset()\n },\n },\n })\n } else {\n displayToast(error.reason, 'danger', {\n title: 'An Error Occurred',\n })\n }\n },\n })\n\n useEffect(() => {\n // When changes are made (but not saved) to the datasetToUpdate, show a notification that summarizes the change and prompts the user to save\n if (\n previousDatasetToUpdate &&\n datasetToUpdate &&\n !isEqual(previousDatasetToUpdate.items, datasetToUpdate.items) &&\n !updateIsPending\n ) {\n const toastMessageTitle = getDatasetChangedToastMessageTitle(\n previousDatasetToUpdate,\n datasetToUpdate,\n )\n // Replace existing toast that prompts the user to save before showing the new one\n if (onCloseLastSavePromptToast) {\n onCloseLastSavePromptToast.close()\n }\n const onCloseToast = displayToast(SAVE_TO_CONTINUE, 'info', {\n title: toastMessageTitle,\n primaryButtonConfig: {\n text: SAVE_CHANGES,\n onClick: () => mutate(datasetToUpdate),\n },\n })\n setOnCloseLastSavePromptToast({ close: onCloseToast })\n }\n setPreviousDatasetToUpdate(datasetToUpdate)\n // Only run when datasetToUpdate changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [datasetToUpdate])\n\n const tableData = useMemo(\n () =>\n datasetToUpdate?.items.map(\n (item: EntityRef): DatasetItemsEditorTableData => {\n return {\n ...item,\n isSelected: selectedIds.has(item.entityId),\n setSelected: (value: boolean) => {\n return value\n ? addSelectedId(item.entityId)\n : removeSelectedId(item.entityId)\n },\n }\n },\n ) ?? [],\n [addSelectedId, datasetToUpdate?.items, removeSelectedId, selectedIds],\n )\n\n function addItemsToDataset(itemsToAdd: Reference[]) {\n setDatasetToUpdate(datasetToUpdate => {\n if (datasetToUpdate) {\n const refToDatasetItem = itemsToAdd.map(item => ({\n entityId: item.targetId,\n versionNumber: item.targetVersionNumber!,\n }))\n const { unchangedItems, updatedItems, newItems } = getDataSetDifference(\n datasetToUpdate.items,\n refToDatasetItem,\n )\n\n if (updatedItems.length == 0 && newItems.length == 0) {\n // No items were added or updated, so don't update the state variable.\n return datasetToUpdate\n }\n\n const items = [...unchangedItems, ...updatedItems, ...newItems]\n\n return {\n ...datasetToUpdate,\n items: items,\n }\n } else {\n console.warn(\n 'Cannot add items to the Collection because it is undefined. The Collection may not have been fetched yet.',\n )\n return datasetToUpdate\n }\n })\n clearSelectedIds()\n }\n\n function removeSelectedItemsFromDataset() {\n setDatasetToUpdate(dataset => ({\n ...dataset!,\n items: dataset!.items.filter(\n datasetItem => !selectedIds.has(datasetItem.entityId),\n ),\n }))\n clearSelectedIds()\n }\n\n function changeVersionOnItem(entityId: string, newVersion: number) {\n setDatasetToUpdate(dataset => ({\n ...dataset!,\n items: dataset!.items.map(datasetItem =>\n datasetItem.entityId === entityId\n ? { entityId: entityId, versionNumber: newVersion }\n : datasetItem,\n ),\n }))\n }\n\n const selectableTypes: EntityType[] \| undefined = useMemo(() => {\n if (datasetOnServer) {\n return getSelectableTypes(datasetOnServer)\n } else {\n return undefined\n }\n }, [datasetOnServer])\n\n const columns = useMemo(() => {\n if (!datasetToUpdate) {\n return []\n }\n return getColumns({\n datasetToUpdate,\n selectedIds,\n clearSelectedIds,\n addSelectedId,\n allItemsAreSelected,\n changeVersionOnItem,\n })\n }, [\n addSelectedId,\n allItemsAreSelected,\n clearSelectedIds,\n datasetToUpdate,\n selectedIds,\n ])\n\n const table: Table<DatasetItemsEditorTableData> =\n useReactTable<DatasetItemsEditorTableData>({\n data: tableData,\n columns,\n getCoreRowModel: getCoreRowModel(),\n columnResizeMode: 'onChange',\n // There are no backend sort controls. The server only provides ID/version, and a dataset could be up to 10k items,\n // so client side sorting is non-trivial. We may consider fetching all entity headers upon user request.\n enableSorting: false,\n })\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const rowVirtualizer = useVirtualizer({\n count: tableData?.length ?? 0,\n estimateSize: () => ROW_HEIGHT, // estimate row height for accurate scrollbar dragging\n getScrollElement: () => tableContainerRef.current,\n // measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement:\n typeof window !== 'undefined' &&\n navigator.userAgent.indexOf('Firefox') === -1\n ? element => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n })\n\n const datasetItemsAsEntityFinderRef = useMemo(\n () => datasetToUpdate?.items.map(datasetItemToReference),\n [datasetToUpdate],\n )\n\n return (\n <div className=\"DatasetEditor\">\n <EntityFinderModal\n initialSelected={datasetItemsAsEntityFinderRef}\n configuration={{\n projectId: projectId,\n selectMultiple: true,\n initialScope: FinderScope.CURRENT_PROJECT,\n initialContainer: projectId ?? null,\n selectableTypes: selectableTypes,\n versionSelection: VersionSelectionType.REQUIRED,\n }}\n titleHelpPopoverProps={{\n markdownText: ENTITY_FINDER_POPOVER,\n helpUrl: 'https://help.synapse.org/docs/Datasets.2611281979.html',\n placement: 'right',\n }}\n promptCopy={ENTITY_FINDER_PROMPT}\n show={showEntityFinder}\n title={ADD_ITEMS_TO}\n confirmButtonCopy={'Apply changes'}\n onConfirm={items => {\n addItemsToDataset(items)\n setShowEntityFinder(false)\n }}\n onCancel={() => setShowEntityFinder(false)}\n />\n <WarningDialog\n title=\"Unsaved Changes\"\n content=\"Any unsaved changes will be lost. Are you sure you want to close the editor?\"\n confirmButtonText=\"Close Editor\"\n onConfirm={() => {\n if (onClose) {\n setShowWarningDialog(false)\n if (onUnsavedChangesChange) {\n onUnsavedChangesChange(false)\n }\n onClose()\n }\n }}\n open={showWarningDialog}\n onConfirmCallbackArgs={[]}\n onCancel={() => setShowWarningDialog(false)}\n />\n\n <div className=\"DatasetEditorTopBottomPanel\">\n <BlockingLoader show={updateIsPending} />\n <div className=\"ItemCount\">\n {datasetToUpdate ? (\n <Typography variant=\"headline3\">\n {datasetToUpdate.items.length === 0\n ? 'No'\n : datasetToUpdate.items.length.toLocaleString()}{' '}\n File\n {datasetToUpdate.items.length !== 1 && 's'}\n </Typography>\n ) : (\n <Skeleton variant=\"rectangular\" width={200} />\n )}\n </div>\n\n <Button\n variant=\"contained\"\n color=\"primary\"\n disabled={datasetToUpdate == null}\n onClick={() => setShowEntityFinder(true)}\n >\n {ADD_ITEMS}\n </Button>\n <Button\n disabled={selectedIds.size === 0}\n variant=\"outlined\"\n color=\"primary\"\n onClick={removeSelectedItemsFromDataset}\n >\n {REMOVE_ITEMS}\n </Button>\n </div>\n <div className=\"DatasetEditorTableContainer\">\n {datasetToUpdate && datasetToUpdate.items.length === 0 && (\n <NoItemsPlaceholder\n titleCopy={NO_ITEMS_IN_THIS_DATASET}\n buttonCopy={ADD_ITEMS}\n onButtonClick={() => setShowEntityFinder(true)}\n />\n )}\n {datasetToUpdate && datasetToUpdate.items.length > 0 && (\n <StyledVirtualTanStackTable<DatasetItemsEditorTableData>\n styledTableContainerProps={{\n className: 'DatasetEditorTable',\n ref: tableContainerRef,\n height: '350px',\n }}\n table={table}\n rowVirtualizer={rowVirtualizer}\n slotProps={{\n Tr: {\n className: `DatasetEditorRow`,\n style: {\n height: `${ROW_HEIGHT}px`,\n maxHeight: `${ROW_HEIGHT}px`,\n },\n },\n }}\n />\n )}\n {!datasetToUpdate && (\n <SkeletonTable\n className=\"DatasetItemsEditorSkeleton\"\n numRows={8}\n numCols={6}\n rowHeight={`${ROW_HEIGHT}px`}\n />\n )}\n </div>\n <div className=\"DatasetEditorTopBottomPanel\">\n {hasChangedSinceLastSave && (\n <Alert severity=\"warning\">You have unsaved changes</Alert>\n )}\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => {\n if (hasChangedSinceLastSave) {\n setShowWarningDialog(true)\n } else if (onClose) {\n onClose()\n }\n }}\n >\n Cancel\n </Button>\n\n <Tooltip title={!hasChangedSinceLastSave && NO_CHANGES_MADE}>\n <div>\n <Button\n disabled={!datasetToUpdate \|\| !hasChangedSinceLastSave}\n variant=\"contained\"\n color=\"primary\"\n onClick={() => mutate(datasetToUpdate!)}\n >\n Save\n </Button>\n </div>\n </Tooltip>\n </div>\n </div>\n )\n}\n\nexport default DatasetItemsEditor\n"],"mappings":"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"}
1	+ {"version":3,"file":"DatasetItemsEditor.js","names":[],"sources":["../../../../src/components/SynapseTable/datasets/DatasetItemsEditor.tsx"],"sourcesContent":["import React from 'react'\nimport WideButton from '@/components/styled/WideButton'\nimport { datasetItemToReference } from '@/components/SynapseTable/datasets/DatasetEditorUtils'\nimport {\n useGetEntity,\n useGetEntityPath,\n useUpdateEntity,\n} from '@/synapse-queries'\nimport { RequiredProperties } from '@/utils'\nimport {\n convertToEntityType,\n entityTypeToFriendlyName,\n isDataset,\n isDatasetCollection,\n} from '@/utils/functions/EntityTypeUtils'\nimport { useSet } from '@/utils/hooks'\nimport AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'\nimport {\n Alert,\n Button,\n Checkbox,\n Skeleton,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport {\n EntityRef,\n EntityRefCollectionView,\n Reference,\n} from '@sage-bionetworks/synapse-types'\nimport {\n createColumnHelper,\n getCoreRowModel,\n Table,\n useReactTable,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { isEqual, upperFirst } from 'lodash-es'\nimport pluralize from 'pluralize'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { CreatedOnCell } from '../../EntityFinder/details/view/table/CreatedOnCell'\nimport { EntityBadgeIconsCell } from '../../EntityFinder/details/view/table/EntityBadgeIconsCell'\nimport { EntityNameCell } from '../../EntityFinder/details/view/table/EntityNameCell'\nimport { ModifiedByCell } from '../../EntityFinder/details/view/table/ModifiedByCell'\nimport { ModifiedOnCell } from '../../EntityFinder/details/view/table/ModifiedOnCell'\nimport { ParentProjectCell } from '../../EntityFinder/details/view/table/ParentProjectCell'\nimport { EntityFinderModal } from '../../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../../EntityFinder/tree/EntityTree'\nimport { VersionSelectionType } from '../../EntityFinder/VersionSelectionType'\nimport { BlockingLoader } from '../../LoadingScreen/LoadingScreen'\nimport { SkeletonTable } from '../../Skeleton'\nimport WarningDialog from '../../SynapseForm/WarningDialog'\nimport ColumnHeader from '../../TanStackTable/ColumnHeader'\nimport StyledVirtualTanStackTable from '../../TanStackTable/StyledVirtualTanStackTable'\nimport { displayToast } from '../../ToastMessage'\nimport { DatasetEditorCheckboxCell } from './DatasetEditorCheckboxCell'\nimport { DatasetEditorVersionCell } from './DatasetEditorVersionCell'\nimport { EntityFetchErrorCell } from './EntityFetchErrorCell'\n\nexport type DatasetItemsEditorTableData = EntityRef & {\n isSelected: boolean\n setSelected: (value: boolean) => void\n}\n\nenum DatasetItemsEditorColumn {\n ERROR_STATE = 'errorState',\n SELECTED = 'isSelected',\n NAME = 'name',\n ENTITY_ID = 'entityId',\n BADGES = 'badges',\n VERSION = 'version',\n CREATED_ON = 'createdOn',\n MODIFIED_ON = 'modifieddOn',\n MODIFIED_BY = 'modifiedBy',\n PROJECT = 'project',\n}\n\nconst columnHelper = createColumnHelper<DatasetItemsEditorTableData>()\nfunction getColumns(\n opts: SelectAllCheckboxRendererProps & {\n changeVersionOnItem: (entityId: string, newVersion: number) => void\n },\n) {\n const {\n datasetToUpdate,\n selectedIds,\n clearSelectedIds,\n addSelectedId,\n allItemsAreSelected,\n changeVersionOnItem,\n } = opts\n return [\n columnHelper.display({\n id: DatasetItemsEditorColumn.ERROR_STATE,\n minSize: 35,\n maxSize: 35,\n size: 35,\n enableResizing: false,\n header: () => null,\n cell: EntityFetchErrorCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.SELECTED,\n minSize: 40,\n maxSize: 40,\n size: 40,\n enableResizing: false,\n header: () => (\n <SelectAllCheckboxRenderer\n datasetToUpdate={datasetToUpdate}\n selectedIds={selectedIds}\n clearSelectedIds={clearSelectedIds}\n addSelectedId={addSelectedId}\n allItemsAreSelected={allItemsAreSelected}\n />\n ),\n cell: DatasetEditorCheckboxCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.NAME,\n minSize: 50,\n size: 300,\n header: props => <ColumnHeader {...props} title={'Name'} />,\n cell: EntityNameCell,\n }),\n columnHelper.accessor(DatasetItemsEditorColumn.ENTITY_ID, {\n minSize: 50,\n size: 130,\n header: props => <ColumnHeader {...props} title={'ID'} />,\n enableColumnFilter: false,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.BADGES,\n minSize: 80,\n size: 80,\n enableResizing: true,\n cell: EntityBadgeIconsCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.VERSION,\n minSize: 150,\n size: 150,\n header: props => <ColumnHeader {...props} title={'Version'} />,\n cell: props => (\n <DatasetEditorVersionCell\n {...props}\n toggleSelection={datasetItem => {\n changeVersionOnItem(datasetItem.entityId, datasetItem.versionNumber)\n }}\n />\n ),\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.CREATED_ON,\n header: props => <ColumnHeader {...props} title={'Created On'} />,\n size: 220,\n minSize: 170,\n cell: CreatedOnCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.MODIFIED_ON,\n header: props => <ColumnHeader {...props} title={'Modified On'} />,\n size: 220,\n minSize: 170,\n cell: ModifiedOnCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.MODIFIED_BY,\n header: props => <ColumnHeader {...props} title={'Modified By'} />,\n size: 250,\n enableResizing: true,\n cell: ModifiedByCell,\n }),\n columnHelper.display({\n id: DatasetItemsEditorColumn.PROJECT,\n header: props => <ColumnHeader {...props} title={'Size'} />,\n size: 300,\n cell: ParentProjectCell,\n }),\n ]\n}\n\nfunction getSelectableTypes(entity: EntityRefCollectionView) {\n if (isDataset(entity)) {\n return [EntityType.file]\n } else if (isDatasetCollection(entity)) {\n return [EntityType.dataset]\n } else {\n console.error(\n 'Cannot determine selectable types for entity type: ' +\n entity.concreteType,\n )\n return []\n }\n}\n\nexport function getCopy(entity?: EntityRefCollectionView) {\n const displayName = entity\n ? entityTypeToFriendlyName(convertToEntityType(entity.concreteType))\n : 'Collection'\n let itemName = 'Item'\n let currentVersionName = 'Current Version'\n if (entity && isDataset(entity)) {\n itemName = entityTypeToFriendlyName(EntityType.file)\n currentVersionName = 'Draft'\n } else if (entity && isDatasetCollection(entity)) {\n itemName = entityTypeToFriendlyName(EntityType.dataset)\n }\n\n const entityFinderPopover =\n entity && isDataset(entity)\n ? `Use the left pane to browse projects and folders. Select ${pluralize(\n itemName,\n )} from the right pane to add to this ${displayName}. ${upperFirst(\n pluralize(itemName),\n )} in a ${displayName} can be added from multiple folders. You can also use Search to find and select ${pluralize(\n itemName,\n )}.`\n : `Use the left pane to browse projects. Select ${pluralize(\n itemName,\n )} from the right pane to add to this ${displayName}. ${upperFirst(\n pluralize(itemName),\n )} in a ${displayName} can be added from multiple projects. You can also use Search to find and select ${pluralize(\n itemName,\n )}.`\n\n return {\n ADD_ITEMS: `Add ${pluralize(itemName)}`,\n ADD_ITEMS_TO: `Add ${pluralize(itemName)} to ${displayName}`,\n REMOVE_ITEMS: `Remove ${pluralize(itemName)}`,\n NO_ITEMS_IN_THIS_DATASET: `No ${pluralize(\n itemName,\n )} in this ${displayName}`,\n SAVE_TO_CONTINUE: `Save the ${displayName} to continue`,\n CREATE_VERSION_TO_FREEZE: `Create a Version of this ${displayName} to freeze it in its current state`,\n ENTITY_SAVED: `${displayName} Saved`,\n SAVE_CHANGES: `Save changes to ${currentVersionName}`,\n ENTITY_FINDER_POPOVER: entityFinderPopover,\n ENTITY_FINDER_PROMPT: `Find ${pluralize(\n itemName,\n )} to add to the ${displayName}.`,\n PRECONDITION_FAILED_MESSAGE: `Re-retrieve the ${displayName} to get the latest changes. Your current changes will be lost.`,\n PRECONDITION_FAILED_TITLE: `${displayName} updated since last fetched`,\n PRECONDITION_FAILED_ACTION: `Retrieve ${displayName}`,\n NO_CHANGES_MADE: `You have not made any changes to the ${displayName}.`,\n }\n}\n\nfunction getDataSetDifference(\n oldDataSet: EntityRef[],\n changedItems: EntityRef[],\n) {\n const unchangedItems = oldDataSet.filter(\n oldItem =>\n !changedItems.find(newItem => newItem.entityId === oldItem.entityId),\n )\n const deletedItems = [...unchangedItems]\n const { updatedItems, newItems } = changedItems.reduce(\n (results, result) => {\n const oldItem = oldDataSet.find(old => old.entityId === result.entityId)\n if (oldItem) {\n if (result.versionNumber !== oldItem.versionNumber) {\n results['updatedItems'].push(result)\n } else {\n unchangedItems.push(result)\n }\n } else {\n results['newItems'].push(result)\n }\n return results\n },\n { updatedItems: [], newItems: [] } as {\n updatedItems: EntityRef[]\n newItems: EntityRef[]\n },\n )\n\n return { unchangedItems, updatedItems, newItems, deletedItems }\n}\n\nfunction getDatasetChangedToastMessageTitle(\n previousDatasetToUpdate?: RequiredProperties<\n EntityRefCollectionView,\n 'items'\n >,\n datasetToUpdate?: RequiredProperties<EntityRefCollectionView, 'items'>,\n) {\n const { updatedItems, newItems, deletedItems } = getDataSetDifference(\n previousDatasetToUpdate?.items ?? [],\n datasetToUpdate?.items!,\n )\n let toastTitle = ''\n\n // \"X items(s) deleted\"\n if (deletedItems.length > 0) {\n toastTitle += `${deletedItems.length} Item${\n deletedItems.length === 1 ? '' : 's'\n } removed`\n } else {\n // \"Y item(s) added\"\n toastTitle += `${newItems.length} Item${\n newItems.length === 1 ? '' : 's'\n } added`\n\n // \"and Z item(s) updated\", only shown if there are updated items\n if (updatedItems.length > 0) {\n toastTitle += ` and ${updatedItems.length} Item${\n updatedItems.length === 1 ? '' : 's'\n } updated`\n }\n }\n return toastTitle\n}\n\nexport type DatasetItemsEditorProps = {\n /* The synId of the EntityRefCollectionView to modify /\n entityId: string\n /* Callback invoked when the editor changes state to contain un/saved changes. */\n onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void\n onSave?: () => void\n onClose?: () => void\n}\n\nconst ROW_HEIGHT = 48\n\ntype SelectAllCheckboxRendererProps = {\n datasetToUpdate: RequiredProperties<EntityRefCollectionView, 'items'>\n selectedIds: Omit<Set<string>, 'add' \| 'delete' \| 'clear'>\n addSelectedId: (...items: string[]) => void\n clearSelectedIds: () => void\n allItemsAreSelected: boolean\n}\n\nconst SelectAllCheckboxRenderer = (\n props: SelectAllCheckboxRendererProps,\n): React.ReactNode => {\n const {\n datasetToUpdate,\n clearSelectedIds,\n allItemsAreSelected,\n addSelectedId,\n } = props\n const isChecked = allItemsAreSelected\n\n return (\n <Checkbox\n inputProps={{ 'aria-label': 'Select All' }}\n checked={isChecked}\n disabled={datasetToUpdate.items.length === 0}\n onChange={() => {\n if (isChecked) {\n clearSelectedIds()\n } else {\n addSelectedId(...datasetToUpdate.items.map(item => item.entityId))\n }\n }}\n />\n )\n}\n\nfunction NoItemsPlaceholder(props: {\n titleCopy: string\n buttonCopy: string\n onButtonClick: () => void\n}) {\n const { titleCopy, buttonCopy, onButtonClick } = props\n return (\n <div className=\"NoItemsPlaceholder\">\n <Typography variant={'headline3'}>{titleCopy}</Typography>\n <WideButton\n variant=\"contained\"\n color=\"primary\"\n onClick={onButtonClick}\n startIcon={<AddCircleTwoToneIcon />}\n sx={{ mt: 2 }}\n >\n {buttonCopy}\n </WideButton>\n </div>\n )\n}\n\nexport function DatasetItemsEditor(props: DatasetItemsEditorProps) {\n const { entityId, onSave, onClose, onUnsavedChangesChange } = props\n const [showEntityFinder, setShowEntityFinder] = useState<boolean>(false)\n const [showWarningDialog, setShowWarningDialog] = useState<boolean>(false)\n\n // The current 'client state' of dataset that the user is currently editing. Updates to this state are not saved until the user clicks 'Save'.\n const [datasetToUpdate, setDatasetToUpdate] =\n useState<RequiredProperties<EntityRefCollectionView, 'items'>>()\n\n // The previous value of the datasetToUpdate variable. This is used to calculate a summary of bulk actions since the last update to the unsaved dataset state.\n const [previousDatasetToUpdate, setPreviousDatasetToUpdate] =\n useState<RequiredProperties<EntityRefCollectionView, 'items'>>()\n\n // Stores the `close` function that will be used to hide the last toast that prompted the user to save\n const [onCloseLastSavePromptToast, setOnCloseLastSavePromptToast] = useState<\n { close: () => void } \| undefined\n >()\n\n const { data: datasetOnServer, refetch: refetchDataset } = useGetEntity<\n RequiredProperties<EntityRefCollectionView, 'items'>\n >(entityId, undefined, {\n staleTime: Infinity,\n })\n\n const hasChangedSinceLastSave = Boolean(\n datasetOnServer &&\n datasetToUpdate &&\n !isEqual(datasetOnServer, datasetToUpdate),\n )\n\n const {\n ADD_ITEMS,\n ADD_ITEMS_TO,\n REMOVE_ITEMS,\n NO_ITEMS_IN_THIS_DATASET,\n SAVE_TO_CONTINUE,\n CREATE_VERSION_TO_FREEZE,\n ENTITY_SAVED,\n SAVE_CHANGES,\n PRECONDITION_FAILED_TITLE,\n PRECONDITION_FAILED_MESSAGE,\n PRECONDITION_FAILED_ACTION,\n ENTITY_FINDER_POPOVER,\n ENTITY_FINDER_PROMPT,\n NO_CHANGES_MADE,\n } = useMemo(() => getCopy(datasetOnServer), [datasetOnServer])\n\n useEffect(() => {\n if (datasetOnServer) {\n // SWC-5876: Dataset Items may be undefined. This has the same inherent meaning as the empty list, so we'll just change it to save us some null checks.\n if (datasetOnServer.items == null) {\n datasetOnServer.items = []\n }\n setDatasetToUpdate(datasetOnServer)\n }\n }, [datasetOnServer])\n\n const {\n set: selectedIds,\n add: addSelectedId,\n remove: removeSelectedId,\n clear: clearSelectedIds,\n } = useSet<string>()\n const allItemsAreSelected = Boolean(\n datasetToUpdate && datasetToUpdate.items.length === selectedIds.size,\n )\n\n useEffect(() => {\n if (datasetToUpdate && datasetOnServer && onUnsavedChangesChange) {\n onUnsavedChangesChange(hasChangedSinceLastSave)\n }\n }, [\n datasetOnServer,\n datasetToUpdate,\n hasChangedSinceLastSave,\n onUnsavedChangesChange,\n ])\n\n // We get the project ID to show the \"Current Project\" context in the Entity Finder.\n const { data: path } = useGetEntityPath(entityId)\n const projectId = path?.path[1]?.id\n\n const { mutate, isPending: updateIsPending } =\n useUpdateEntity<EntityRefCollectionView>({\n onMutate: () => {\n // Close existing toast that prompted the user to save\n if (onCloseLastSavePromptToast) {\n onCloseLastSavePromptToast.close()\n setOnCloseLastSavePromptToast(undefined)\n }\n },\n onSuccess: () => {\n // The query should automatically be invalidated, but just in case\n void refetchDataset()\n\n if (onSave) {\n onSave()\n } else {\n // If onSave isn't specified, push a generic toast message.\n displayToast(CREATE_VERSION_TO_FREEZE, 'success', {\n title: ENTITY_SAVED,\n })\n }\n },\n onError: error => {\n if (error.status === 412) {\n displayToast(PRECONDITION_FAILED_MESSAGE, 'warning', {\n title: PRECONDITION_FAILED_TITLE,\n primaryButtonConfig: {\n text: PRECONDITION_FAILED_ACTION,\n onClick: () => {\n void refetchDataset()\n },\n },\n })\n } else {\n displayToast(error.reason, 'danger', {\n title: 'An Error Occurred',\n })\n }\n },\n })\n\n useEffect(() => {\n // When changes are made (but not saved) to the datasetToUpdate, show a notification that summarizes the change and prompts the user to save\n if (\n previousDatasetToUpdate &&\n datasetToUpdate &&\n !isEqual(previousDatasetToUpdate.items, datasetToUpdate.items) &&\n !updateIsPending\n ) {\n const toastMessageTitle = getDatasetChangedToastMessageTitle(\n previousDatasetToUpdate,\n datasetToUpdate,\n )\n // Replace existing toast that prompts the user to save before showing the new one\n if (onCloseLastSavePromptToast) {\n onCloseLastSavePromptToast.close()\n }\n const onCloseToast = displayToast(SAVE_TO_CONTINUE, 'info', {\n title: toastMessageTitle,\n primaryButtonConfig: {\n text: SAVE_CHANGES,\n onClick: () => mutate(datasetToUpdate),\n },\n })\n setOnCloseLastSavePromptToast({ close: onCloseToast })\n }\n setPreviousDatasetToUpdate(datasetToUpdate)\n // Only run when datasetToUpdate changes\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [datasetToUpdate])\n\n const tableData = useMemo(\n () =>\n datasetToUpdate?.items.map(\n (item: EntityRef): DatasetItemsEditorTableData => {\n return {\n ...item,\n isSelected: selectedIds.has(item.entityId),\n setSelected: (value: boolean) => {\n return value\n ? addSelectedId(item.entityId)\n : removeSelectedId(item.entityId)\n },\n }\n },\n ) ?? [],\n [addSelectedId, datasetToUpdate?.items, removeSelectedId, selectedIds],\n )\n\n function addItemsToDataset(itemsToAdd: Reference[]) {\n setDatasetToUpdate(datasetToUpdate => {\n if (datasetToUpdate) {\n const refToDatasetItem = itemsToAdd.map(item => ({\n entityId: item.targetId,\n versionNumber: item.targetVersionNumber!,\n }))\n const { unchangedItems, updatedItems, newItems } = getDataSetDifference(\n datasetToUpdate.items,\n refToDatasetItem,\n )\n\n if (updatedItems.length == 0 && newItems.length == 0) {\n // No items were added or updated, so don't update the state variable.\n return datasetToUpdate\n }\n\n const items = [...unchangedItems, ...updatedItems, ...newItems]\n\n return {\n ...datasetToUpdate,\n items: items,\n }\n } else {\n console.warn(\n 'Cannot add items to the Collection because it is undefined. The Collection may not have been fetched yet.',\n )\n return datasetToUpdate\n }\n })\n clearSelectedIds()\n }\n\n function removeSelectedItemsFromDataset() {\n setDatasetToUpdate(dataset => ({\n ...dataset!,\n items: dataset!.items.filter(\n datasetItem => !selectedIds.has(datasetItem.entityId),\n ),\n }))\n clearSelectedIds()\n }\n\n function changeVersionOnItem(entityId: string, newVersion: number) {\n setDatasetToUpdate(dataset => ({\n ...dataset!,\n items: dataset!.items.map(datasetItem =>\n datasetItem.entityId === entityId\n ? { entityId: entityId, versionNumber: newVersion }\n : datasetItem,\n ),\n }))\n }\n\n const selectableTypes: EntityType[] \| undefined = useMemo(() => {\n if (datasetOnServer) {\n return getSelectableTypes(datasetOnServer)\n } else {\n return undefined\n }\n }, [datasetOnServer])\n\n const columns = useMemo(() => {\n if (!datasetToUpdate) {\n return []\n }\n return getColumns({\n datasetToUpdate,\n selectedIds,\n clearSelectedIds,\n addSelectedId,\n allItemsAreSelected,\n changeVersionOnItem,\n })\n }, [\n addSelectedId,\n allItemsAreSelected,\n clearSelectedIds,\n datasetToUpdate,\n selectedIds,\n ])\n\n const table: Table<DatasetItemsEditorTableData> =\n useReactTable<DatasetItemsEditorTableData>({\n data: tableData,\n columns,\n getCoreRowModel: getCoreRowModel(),\n columnResizeMode: 'onChange',\n // There are no backend sort controls. The server only provides ID/version, and a dataset could be up to 10k items,\n // so client side sorting is non-trivial. We may consider fetching all entity headers upon user request.\n enableSorting: false,\n })\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const rowVirtualizer = useVirtualizer({\n count: tableData?.length ?? 0,\n estimateSize: () => ROW_HEIGHT, // estimate row height for accurate scrollbar dragging\n getScrollElement: () => tableContainerRef.current,\n // measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement:\n typeof window !== 'undefined' &&\n navigator.userAgent.indexOf('Firefox') === -1\n ? element => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n })\n\n const datasetItemsAsEntityFinderRef = useMemo(\n () => datasetToUpdate?.items.map(datasetItemToReference),\n [datasetToUpdate],\n )\n\n return (\n <div className=\"DatasetEditor\">\n <EntityFinderModal\n initialSelected={datasetItemsAsEntityFinderRef}\n configuration={{\n projectId: projectId,\n selectMultiple: true,\n initialScope: FinderScope.CURRENT_PROJECT,\n initialContainer: projectId ?? null,\n selectableTypes: selectableTypes,\n versionSelection: VersionSelectionType.REQUIRED,\n }}\n titleHelpPopoverProps={{\n markdownText: ENTITY_FINDER_POPOVER,\n helpUrl: 'https://help.synapse.org/docs/Datasets.2611281979.html',\n placement: 'right',\n }}\n promptCopy={ENTITY_FINDER_PROMPT}\n show={showEntityFinder}\n title={ADD_ITEMS_TO}\n confirmButtonCopy={'Apply changes'}\n onConfirm={items => {\n addItemsToDataset(items)\n setShowEntityFinder(false)\n }}\n onCancel={() => setShowEntityFinder(false)}\n />\n <WarningDialog\n title=\"Unsaved Changes\"\n content=\"Any unsaved changes will be lost. Are you sure you want to close the editor?\"\n confirmButtonText=\"Close Editor\"\n onConfirm={() => {\n if (onClose) {\n setShowWarningDialog(false)\n if (onUnsavedChangesChange) {\n onUnsavedChangesChange(false)\n }\n onClose()\n }\n }}\n open={showWarningDialog}\n onConfirmCallbackArgs={[]}\n onCancel={() => setShowWarningDialog(false)}\n />\n\n <div className=\"DatasetEditorTopBottomPanel\">\n <BlockingLoader show={updateIsPending} />\n <div className=\"ItemCount\">\n {datasetToUpdate ? (\n <Typography variant=\"headline3\">\n {datasetToUpdate.items.length === 0\n ? 'No'\n : datasetToUpdate.items.length.toLocaleString()}{' '}\n File\n {datasetToUpdate.items.length !== 1 && 's'}\n </Typography>\n ) : (\n <Skeleton variant=\"rectangular\" width={200} />\n )}\n </div>\n\n <Button\n variant=\"contained\"\n color=\"primary\"\n disabled={datasetToUpdate == null}\n onClick={() => setShowEntityFinder(true)}\n >\n {ADD_ITEMS}\n </Button>\n <Button\n disabled={selectedIds.size === 0}\n variant=\"outlined\"\n color=\"primary\"\n onClick={removeSelectedItemsFromDataset}\n >\n {REMOVE_ITEMS}\n </Button>\n </div>\n <div className=\"DatasetEditorTableContainer\">\n {datasetToUpdate && datasetToUpdate.items.length === 0 && (\n <NoItemsPlaceholder\n titleCopy={NO_ITEMS_IN_THIS_DATASET}\n buttonCopy={ADD_ITEMS}\n onButtonClick={() => setShowEntityFinder(true)}\n />\n )}\n {datasetToUpdate && datasetToUpdate.items.length > 0 && (\n <StyledVirtualTanStackTable<DatasetItemsEditorTableData>\n styledTableContainerProps={{\n className: 'DatasetEditorTable',\n ref: tableContainerRef,\n height: '350px',\n }}\n table={table}\n rowVirtualizer={rowVirtualizer}\n slotProps={{\n Tr: {\n className: `DatasetEditorRow`,\n style: {\n height: `${ROW_HEIGHT}px`,\n maxHeight: `${ROW_HEIGHT}px`,\n },\n },\n }}\n />\n )}\n {!datasetToUpdate && (\n <SkeletonTable\n className=\"DatasetItemsEditorSkeleton\"\n numRows={8}\n numCols={6}\n rowHeight={`${ROW_HEIGHT}px`}\n />\n )}\n </div>\n <div className=\"DatasetEditorTopBottomPanel\">\n {hasChangedSinceLastSave && (\n <Alert severity=\"warning\">You have unsaved changes</Alert>\n )}\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => {\n if (hasChangedSinceLastSave) {\n setShowWarningDialog(true)\n } else if (onClose) {\n onClose()\n }\n }}\n >\n Cancel\n </Button>\n\n <Tooltip title={!hasChangedSinceLastSave && NO_CHANGES_MADE}>\n <div>\n <Button\n disabled={!datasetToUpdate \|\| !hasChangedSinceLastSave}\n variant=\"contained\"\n color=\"primary\"\n onClick={() => mutate(datasetToUpdate!)}\n >\n Save\n </Button>\n </div>\n </Tooltip>\n </div>\n </div>\n )\n}\n\nexport default DatasetItemsEditor\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,IAAM,IAAe,EAAgD;AACrE,SAAS,GACP,GAGA;CACA,IAAM,EACJ,oBACA,gBACA,qBACA,kBACA,wBACA,2BACE;CACJ,OAAO;EACL,EAAa,QAAQ;GACnB,IAAA;GACA,SAAS;GACT,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,cAAc;GACd,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAS;GACT,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,cACE,kBAAC,GAAD;IACmB;IACJ;IACK;IACH;IACM;GACtB,CAAA;GAEH,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAS;GACT,MAAM;GACN,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAS,CAAA;GAC1D,MAAM;EACR,CAAC;EACD,EAAa,SAAA,YAA6C;GACxD,SAAS;GACT,MAAM;GACN,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAO,CAAA;GACxD,oBAAoB;EACtB,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAS;GACT,MAAM;GACN,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAY,CAAA;GAC7D,OAAM,MACJ,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAiB,MAAe;KAC9B,EAAoB,EAAY,UAAU,EAAY,aAAa;IACrE;GACD,CAAA;EAEL,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAe,CAAA;GAChE,MAAM;GACN,SAAS;GACT,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAgB,CAAA;GACjE,MAAM;GACN,SAAS;GACT,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAgB,CAAA;GACjE,MAAM;GACN,gBAAgB;GAChB,MAAM;EACR,CAAC;EACD,EAAa,QAAQ;GACnB,IAAA;GACA,SAAQ,MAAS,kBAAC,GAAD;IAAc,GAAI;IAAO,OAAO;GAAS,CAAA;GAC1D,MAAM;GACN,MAAM;EACR,CAAC;CACH;AACF;AAEA,SAAS,GAAmB,GAAiC;CAUzD,OATE,EAAU,CAAM,IACX,CAAC,EAAW,IAAI,IACd,EAAoB,CAAM,IAC5B,CAAC,EAAW,OAAO,KAE1B,QAAQ,MACN,wDACE,EAAO,YACX,GACO,CAAC;AAEZ;AAEA,SAAgB,EAAQ,GAAkC;CACxD,IAAM,IAAc,IAChB,EAAyB,EAAoB,EAAO,YAAY,CAAC,IACjE,cACA,IAAW,QACX,IAAqB;CACzB,AAAI,KAAU,EAAU,CAAM,KAC5B,IAAW,EAAyB,EAAW,IAAI,GACnD,IAAqB,WACZ,KAAU,EAAoB,CAAM,MAC7C,IAAW,EAAyB,EAAW,OAAO;CAGxD,IAAM,IACJ,KAAU,EAAU,CAAM,IACtB,4DAA4D,EAC1D,CACF,EAAE,sCAAsC,EAAY,IAAI,EACtD,EAAU,CAAQ,CACpB,EAAE,QAAQ,EAAY,kFAAkF,EACtG,CACF,EAAE,KACF,gDAAgD,EAC9C,CACF,EAAE,sCAAsC,EAAY,IAAI,EACtD,EAAU,CAAQ,CACpB,EAAE,QAAQ,EAAY,mFAAmF,EACvG,CACF,EAAE;CAER,OAAO;EACL,WAAW,OAAO,EAAU,CAAQ;EACpC,cAAc,OAAO,EAAU,CAAQ,EAAE,MAAM;EAC/C,cAAc,UAAU,EAAU,CAAQ;EAC1C,0BAA0B,MAAM,EAC9B,CACF,EAAE,WAAW;EACb,kBAAkB,YAAY,EAAY;EAC1C,0BAA0B,4BAA4B,EAAY;EAClE,cAAc,GAAG,EAAY;EAC7B,cAAc,mBAAmB;EACjC,uBAAuB;EACvB,sBAAsB,QAAQ,EAC5B,CACF,EAAE,iBAAiB,EAAY;EAC/B,6BAA6B,mBAAmB,EAAY;EAC5D,2BAA2B,GAAG,EAAY;EAC1C,4BAA4B,YAAY;EACxC,iBAAiB,wCAAwC,EAAY;CACvE;AACF;AAEA,SAAS,EACP,GACA,GACA;CACA,IAAM,IAAiB,EAAW,QAChC,MACE,CAAC,EAAa,MAAK,MAAW,EAAQ,aAAa,EAAQ,QAAQ,CACvE,GACM,IAAe,CAAC,GAAG,CAAc,GACjC,EAAE,iBAAc,gBAAa,EAAa,QAC7C,GAAS,MAAW;EACnB,IAAM,IAAU,EAAW,MAAK,MAAO,EAAI,aAAa,EAAO,QAAQ;EAUvE,OATI,IACE,EAAO,kBAAkB,EAAQ,gBAGnC,EAAe,KAAK,CAAM,IAF1B,EAAQ,aAAgB,KAAK,CAAM,IAKrC,EAAQ,SAAY,KAAK,CAAM,GAE1B;CACT,GACA;EAAE,cAAc,CAAC;EAAG,UAAU,CAAC;CAAE,CAInC;CAEA,OAAO;EAAE;EAAgB;EAAc;EAAU;CAAa;AAChE;AAEA,SAAS,EACP,GAIA,GACA;CACA,IAAM,EAAE,iBAAc,aAAU,oBAAiB,EAC/C,GAAyB,SAAS,CAAC,GACnC,GAAiB,KACnB,GACI,IAAa;CAoBjB,OAjBI,EAAa,SAAS,IACxB,KAAc,GAAG,EAAa,OAAO,OACnC,EAAa,WAAW,IAAI,KAAK,IAClC,aAGD,KAAc,GAAG,EAAS,OAAO,OAC/B,EAAS,WAAW,IAAI,KAAK,IAC9B,SAGG,EAAa,SAAS,MACxB,KAAc,QAAQ,EAAa,OAAO,OACxC,EAAa,WAAW,IAAI,KAAK,IAClC,aAGE;AACT;AAWA,IAAM,IAAa,IAUb,KACJ,MACoB;CACpB,IAAM,EACJ,oBACA,qBACA,wBACA,qBACE,GACE,IAAY;CAElB,OACE,kBAAC,GAAD;EACE,YAAY,EAAE,cAAc,aAAa;EACzC,SAAS;EACT,UAAU,EAAgB,MAAM,WAAW;EAC3C,gBAAgB;GACd,AAAI,IACF,EAAiB,IAEjB,EAAc,GAAG,EAAgB,MAAM,KAAI,MAAQ,EAAK,QAAQ,CAAC;EAErE;CACD,CAAA;AAEL;AAEA,SAAS,GAAmB,GAIzB;CACD,IAAM,EAAE,cAAW,eAAY,qBAAkB;CACjD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAY,SAAS;aAAc;EAAsB,CAAA,GACzD,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,SAAS;GACT,WAAW,kBAAC,GAAD,CAAuB,CAAA;GAClC,IAAI,EAAE,IAAI,EAAE;aAEX;EACS,CAAA,CACT;;AAET;AAEA,SAAgB,EAAmB,GAAgC;CACjE,IAAM,EAAE,aAAU,WAAQ,YAAS,8BAA2B,GACxD,CAAC,GAAkB,KAAuB,EAAkB,EAAK,GACjE,CAAC,GAAmB,KAAwB,EAAkB,EAAK,GAGnE,CAAC,GAAiB,KACtB,EAA+D,GAG3D,CAAC,GAAyB,KAC9B,EAA+D,GAG3D,CAAC,GAA4B,KAAiC,EAElE,GAEI,EAAE,MAAM,GAAiB,SAAS,MAAmB,EAEzD,GAAU,KAAA,GAAW,EACrB,WAAW,SACb,CAAC,GAEK,IAA0B,GAC9B,KACA,KACA,CAAC,EAAQ,GAAiB,CAAe,IAGrC,EACJ,cACA,iBACA,iBACA,6BACA,qBACA,6BACA,kBACA,kBACA,+BACA,iCACA,gCACA,2BACA,0BACA,wBACE,QAAc,EAAQ,CAAe,GAAG,CAAC,CAAe,CAAC;CAE7D,QAAgB;EACd,AAAI,MAEF,AACE,EAAgB,UAAQ,CAAC,GAE3B,EAAmB,CAAe;CAEtC,GAAG,CAAC,CAAe,CAAC;CAEpB,IAAM,EACJ,KAAK,GACL,KAAK,GACL,QAAQ,GACR,OAAO,MACL,EAAe,GACb,IAAsB,GAC1B,KAAmB,EAAgB,MAAM,WAAW,EAAY;CAGlE,QAAgB;EACd,AAAI,KAAmB,KAAmB,KACxC,EAAuB,CAAuB;CAElD,GAAG;EACD;EACA;EACA;EACA;CACF,CAAC;CAGD,IAAM,EAAE,MAAM,OAAS,EAAiB,CAAQ,GAC1C,IAAY,IAAM,KAAK,IAAI,IAE3B,EAAE,WAAQ,WAAW,MACzB,EAAyC;EACvC,gBAAgB;GAEd,AAAI,MACF,EAA2B,MAAM,GACjC,EAA8B,KAAA,CAAS;EAE3C;EACA,iBAAiB;GAIf,AAFA,EAAoB,GAEhB,IACF,EAAO,IAGP,EAAa,GAA0B,WAAW,EAChD,OAAO,GACT,CAAC;EAEL;EACA,UAAS,MAAS;GAChB,AAAI,EAAM,WAAW,MACnB,EAAa,IAA6B,WAAW;IACnD,OAAO;IACP,qBAAqB;KACnB,MAAM;KACN,eAAe;MACb,EAAoB;KACtB;IACF;GACF,CAAC,IAED,EAAa,EAAM,QAAQ,UAAU,EACnC,OAAO,oBACT,CAAC;EAEL;CACF,CAAC;CAEH,QAAgB;EAEd,IACE,KACA,KACA,CAAC,EAAQ,EAAwB,OAAO,EAAgB,KAAK,KAC7D,CAAC,GACD;GACA,IAAM,IAAoB,EACxB,GACA,CACF;GAYA,AAVI,KACF,EAA2B,MAAM,GASnC,EAA8B,EAAE,OAPX,EAAa,GAAkB,QAAQ;IAC1D,OAAO;IACP,qBAAqB;KACnB,MAAM;KACN,eAAe,EAAO,CAAe;IACvC;GACF,CACuC,EAAa,CAAC;EACvD;EACA,EAA2B,CAAe;CAG5C,GAAG,CAAC,CAAe,CAAC;CAEpB,IAAM,IAAY,QAEd,GAAiB,MAAM,KACpB,OACQ;EACL,GAAG;EACH,YAAY,EAAY,IAAI,EAAK,QAAQ;EACzC,cAAc,MACL,IACH,EAAc,EAAK,QAAQ,IAC3B,EAAiB,EAAK,QAAQ;CAEtC,EAEJ,KAAK,CAAC,GACR;EAAC;EAAe,GAAiB;EAAO;EAAkB;CAAW,CACvE;CAEA,SAAS,GAAkB,GAAyB;EA8BlD,AA7BA,GAAmB,MAAmB;GACpC,IAAI,GAAiB;IACnB,IAAM,IAAmB,EAAW,KAAI,OAAS;KAC/C,UAAU,EAAK;KACf,eAAe,EAAK;IACtB,EAAE,GACI,EAAE,mBAAgB,iBAAc,gBAAa,EACjD,EAAgB,OAChB,CACF;IAEA,IAAI,EAAa,UAAU,KAAK,EAAS,UAAU,GAEjD,OAAO;IAGT,IAAM,IAAQ;KAAC,GAAG;KAAgB,GAAG;KAAc,GAAG;IAAQ;IAE9D,OAAO;KACL,GAAG;KACI;IACT;GACF,OAIE,OAHA,QAAQ,KACN,2GACF,GACO;EAEX,CAAC,GACD,EAAiB;CACnB;CAEA,SAAS,KAAiC;EAOxC,AANA,GAAmB,OAAY;GAC7B,GAAG;GACH,OAAO,EAAS,MAAM,QACpB,MAAe,CAAC,EAAY,IAAI,EAAY,QAAQ,CACtD;EACF,EAAE,GACF,EAAiB;CACnB;CAEA,SAAS,GAAoB,GAAkB,GAAoB;EACjE,GAAmB,OAAY;GAC7B,GAAG;GACH,OAAO,EAAS,MAAM,KAAI,MACxB,EAAY,aAAa,IACrB;IAAY;IAAU,eAAe;GAAW,IAChD,CACN;EACF,EAAE;CACJ;CAEA,IAAM,KAA4C,QAAc;EAC9D,IAAI,GACF,OAAO,GAAmB,CAAe;CAI7C,GAAG,CAAC,CAAe,CAAC,GAsBd,KACJ,GAA2C;EACzC,MAAM;EACN,SAvBY,QACT,IAGE,GAAW;GAChB;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,IATQ,CAAC,GAUT;GACD;GACA;GACA;GACA;GACA;EACF,CAKI;EACA,iBAAiB,GAAgB;EACjC,kBAAkB;EAGlB,eAAe;CACjB,CAAC,GAEG,IAAoB,GAAuB,IAAI,GAE/C,KAAiB,GAAe;EACpC,OAAO,GAAW,UAAU;EAC5B,oBAAoB;EACpB,wBAAwB,EAAkB;EAE1C,gBACE,OAAO,SAAW,OAClB,UAAU,UAAU,QAAQ,SAAS,MAAM,MACvC,MAAW,GAAS,sBAAsB,EAAE,SAC5C,KAAA;EACN,UAAU;CACZ,CAAC;CAOD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,IAAD;IACE,iBARgC,QAC9B,GAAiB,MAAM,IAAI,EAAsB,GACvD,CAAC,CAAe,CAMK;IACjB,eAAe;KACF;KACX,gBAAgB;KAChB,cAAc,GAAY;KAC1B,kBAAkB,KAAa;KACd;KACjB,kBAAkB,GAAqB;IACzC;IACA,uBAAuB;KACrB,cAAc;KACd,SAAS;KACT,WAAW;IACb;IACA,YAAY;IACZ,MAAM;IACN,OAAO;IACP,mBAAmB;IACnB,YAAW,MAAS;KAElB,AADA,GAAkB,CAAK,GACvB,EAAoB,EAAK;IAC3B;IACA,gBAAgB,EAAoB,EAAK;GAC1C,CAAA;GACD,kBAAC,GAAD;IACE,OAAM;IACN,SAAQ;IACR,mBAAkB;IAClB,iBAAiB;KACf,AAAI,MACF,EAAqB,EAAK,GACtB,KACF,EAAuB,EAAK,GAE9B,EAAQ;IAEZ;IACA,MAAM;IACN,uBAAuB,CAAC;IACxB,gBAAgB,EAAqB,EAAK;GAC3C,CAAA;GAED,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAgB,MAAM,EAAkB,CAAA;KACxC,kBAAC,OAAD;MAAK,WAAU;gBACZ,IACC,kBAAC,GAAD;OAAY,SAAQ;iBAApB;QACG,EAAgB,MAAM,WAAW,IAC9B,OACA,EAAgB,MAAM,OAAO,eAAe;QAAG;QAAI;QAEtD,EAAgB,MAAM,WAAW,KAAK;OAC7B;WAEZ,kBAAC,IAAD;OAAU,SAAQ;OAAc,OAAO;MAAM,CAAA;KAE5C,CAAA;KAEL,kBAAC,GAAD;MACE,SAAQ;MACR,OAAM;MACN,UAAU,KAAmB;MAC7B,eAAe,EAAoB,EAAI;gBAEtC;KACK,CAAA;KACR,kBAAC,GAAD;MACE,UAAU,EAAY,SAAS;MAC/B,SAAQ;MACR,OAAM;MACN,SAAS;gBAER;KACK,CAAA;IACL;;GACL,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAmB,EAAgB,MAAM,WAAW,KACnD,kBAAC,IAAD;MACE,WAAW;MACX,YAAY;MACZ,qBAAqB,EAAoB,EAAI;KAC9C,CAAA;KAEF,KAAmB,EAAgB,MAAM,SAAS,KACjD,kBAAC,GAAD;MACE,2BAA2B;OACzB,WAAW;OACX,KAAK;OACL,QAAQ;MACV;MACO;MACS;MAChB,WAAW,EACT,IAAI;OACF,WAAW;OACX,OAAO;QACL,QAAQ,GAAG,EAAW;QACtB,WAAW,GAAG,EAAW;OAC3B;MACF,EACF;KACD,CAAA;KAEF,CAAC,KACA,kBAAC,IAAD;MACE,WAAU;MACV,SAAS;MACT,SAAS;MACT,WAAW,GAAG,EAAW;KAC1B,CAAA;IAEA;;GACL,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KACC,kBAAC,IAAD;MAAO,UAAS;gBAAU;KAA+B,CAAA;KAE3D,kBAAC,GAAD;MACE,SAAQ;MACR,OAAM;MACN,eAAe;OACb,AAAI,IACF,EAAqB,EAAI,IAChB,KACT,EAAQ;MAEZ;gBACD;KAEO,CAAA;KAER,kBAAC,IAAD;MAAS,OAAO,CAAC,KAA2B;gBAC1C,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;OACE,UAAU,CAAC,KAAmB,CAAC;OAC/B,SAAQ;OACR,OAAM;OACN,eAAe,EAAO,CAAgB;iBACvC;MAEO,CAAA,EACL,CAAA;KACE,CAAA;IACN;;EACF;;AAET"}

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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLoadingDefaultColumns])\n\n const validateInternal = useCallback(() => {\n const result = validateColumnModelFormData(readFormData())\n if (result.success) {\n setValidationErrors(null)\n } else {\n setValidationErrors(result.error)\n }\n return result\n }, [readFormData])\n\n useImperativeHandle(ref, () => {\n return {\n submit() {\n const result = validateInternal()\n if (result.success) {\n onSubmit(result.data)\n }\n },\n getEditedColumnModels() {\n const result = validateInternal()\n if (!result.success) {\n throw new Error('Column models were not valid')\n }\n return result.data\n },\n validate() {\n const result = validateInternal()\n return result.success\n },\n }\n }, [onSubmit, validateInternal])\n\n // Generic function to add a set of columns to the schema (e.g. default columns, annotation columns)\n const addColumnSet = useCallback(\n (newColumns: SetOptional<ColumnModel, 'id'>[]) => {\n const currentFormData = readFormData()\n let columnsToAdd = newColumns.filter(\n (cm: SetOptional<ColumnModel, 'id'>) => {\n // Don't add columns that cannot be added (for example, Views cannot have JSON columns)\n if (\n !getAllowedColumnTypes(isView, false).includes(\n cm.columnType as ColumnTypeEnum,\n )\n ) {\n return false\n }\n // Only add columns that are not already present\n // Use the name column to match because the ID may vary, e.g. if the facetType was changed\n return !currentFormData.find(fd => fd.name === cm.name)\n },\n )\n // Remove the ID column so TableColumnSchemaUtils.createTableUpdateTransactionRequest recognizes these as new columns\n // createTableUpdateTransactionRequest uses the existing column ID to track column updates in the table, so any new columns should have no ID\n // The user can also modify these columns before submitting them, so the ID may not be accurate when we end up submitting them\n columnsToAdd = columnsToAdd.map(cm => omit(cm, ['id']))\n if (columnsToAdd.length > 0) {\n dispatch({\n type: 'setValue',\n value: [\n ...currentFormData,\n ...transformColumnModelsToFormData(\n columnsToAdd,\n defaultColumnModels,\n ),\n ],\n })\n displayToast(\n `${columnsToAdd.length} ${pluralize(\n 'column',\n columnsToAdd.length,\n )} added to schema.`,\n 'success',\n )\n } else {\n displayToast(\n 'No columns added. All columns to add are present in the column schema.',\n 'info',\n )\n }\n },\n [defaultColumnModels, dispatch, isView, readFormData],\n )\n\n const addDefaultColumns = useCallback(() => {\n if (defaultColumnModels) {\n addColumnSet(defaultColumnModels)\n }\n }, [defaultColumnModels, addColumnSet])\n\n const addAnnotationColumns = useCallback(() => {\n if (annotationColumnModels) {\n addColumnSet(annotationColumnModels)\n }\n }, [annotationColumnModels, addColumnSet])\n\n // Put the errors into a map of columnModelIndex -> errors\n const errorsByColumnModel = useMemo(() => {\n if (validationErrors) {\n return groupBy(validationErrors.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'\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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"}

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 {\n ColumnSizingState,\n flexRender,\n Row,\n Table,\n} from '@tanstack/react-table'\nimport { 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'\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 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 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 // 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 // eslint-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 return (\n <StyledTableContainer {...styledTableContainerProps}>\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"],"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 {\n ColumnSizingState,\n flexRender,\n Row,\n Table,\n} from '@tanstack/react-table'\nimport { 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'\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 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 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 // 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 return (\n <StyledTableContainer {...styledTableContainerProps}>\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"],"mappings":"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"}

package/dist/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.d.ts CHANGED Viewed

@@ -1,12 +1,5 @@
+import { BreadcrumbItem } from '@/components/Breadcrumbs/Breadcrumbs';
 import { SxProps } from '@mui/material';
-import { MouseEventHandler } from 'react';
-type BreadcrumbItem = {
-    text: string;
-    current?: boolean;
-    to?: string;
-    href?: string;
-    onClick?: MouseEventHandler;
-};
 type EntityPageBreadcrumbsProps = {
     items: BreadcrumbItem[];
     sx?: SxProps;

package/dist/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityPageBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,~~EAAE~~,~~OAAO~~,~~EAAE~~,MAAM,~~eAAe~~,CAAA;~~AACvC~~,OAAO,EAAE,~~iBAAiB,EAAE,MAAM,~~OAAO,~~CAAA;AAEzC,KAAK,cAAc,GAAG;IAEpB,IAAI,~~EAAE,MAAM,~~CAAA;IAEZ~~,~~OAAO,CAAC,EAAE,OAAO,~~CAAA;~~IAEjB~~,~~EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED,~~KAAK,0BAA0B,GAAG;IAChC,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,EAAE,CAAC,EAAE,OAAO,CAAA;CACb,CAAA;~~AAmBD~~,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAC3C,KAAK,EAAE,0BAA0B,~~2CAUlC~~"}
1	+ {"version":3,"file":"EntityPageBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACf,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,KAAK,0BAA0B,GAAG;IAChC,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,EAAE,CAAC,EAAE,OAAO,CAAA;CACb,CAAA;AA0BD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAC3C,KAAK,EAAE,0BAA0B,2CAWlC"}

package/dist/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.js CHANGED Viewed

@@ -1,25 +1,30 @@
 import { Breadcrumbs as e } from "../../../Breadcrumbs/Breadcrumbs.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.tsx
-var n = 32, r = {
+var n = 32, r = "#4D535A", i = {
 	marginTop: "0px",
-	padding: "10px 40px",
-	"& .MuiLink-root": {
-		color: "text.secondary",
-		letterSpacing: 0,
-		"&:visited": { color: "text.secondary" }
+	padding: "10px 32px",
+	"& .MuiTypography-root": {
+		fontWeight: 440,
+		lineHeight: "20px",
+		color: r
 	},
-	"& .MuiSvgIcon-root": { color: "grey.500" }
+	"& .MuiLink-root": { "&:visited": { color: r } },
+	"& .MuiSvgIcon-root": {
+		fontWeight: "300",
+		color: r
+	}
 };
-function i(i) {
-	let { items: a } = i;
+function a(r) {
+	let { items: a } = r;
 	return /* @__PURE__ */ t(e, {
 		items: a,
-		sx: r,
-		maxBreadcrumbLength: n
+		sx: i,
+		maxBreadcrumbLength: n,
+		iconVariant: "outlined"
 	});
 }
 //#endregion
-export { i as default };
+export { a as default };
 //# sourceMappingURL=EntityPageBreadcrumbs.js.map

package/dist/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityPageBreadcrumbs.js","names":[],"sources":["../../../../../src/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.tsx"],"sourcesContent":["import { Breadcrumbs } from '@/components/Breadcrumbs/Breadcrumbs'\nimport { SxProps } from '@mui/material'\~~nimport { MouseEventHandler } from 'react'\~~n\ntype ~~BreadcrumbItem~~ = {\n ~~/* The text to show in the breadcrumb item. Strings > 25 characters will be truncated /\n text~~: ~~string~~\n ~~/ Whether this item represents the current page. If true, this item will not have a link. Default false /\n current~~?: ~~boolean~~\n ~~/ Link for the item, if using react-router /\~~n ~~to?: string~~\n / ~~Link~~ ~~for~~ ~~the item, if it should be a normal anchor /\n href?: string~~\n / ~~Event~~ ~~handler~~ ~~fired when the link is clicked */\n onClick?: MouseEventHandler~~\n}\~~n\ntype~~ ~~EntityPageBreadcrumbsProps~~ = {\n ~~items~~: ~~BreadcrumbItem[]\~~n ~~sx?:~~ ~~SxProps\~~n}\n\nconst ~~ENTITY_PAGE_MAX_BREADCRUMB_LENGTH = 32\n\nconst~~ entityPageBreadcrumbStyle: SxProps = {\n marginTop: '0px',\n padding: '10px ~~40px~~',\n ['& .~~MuiLink~~-root']: {\n ~~color:~~ ~~'text~~.~~secondary~~'~~,\n letterSpacing~~: ~~0,\~~n '&:visited': {\n color: ~~'text.secondary'~~,\n },\n },\n '& .MuiSvgIcon-root': {\n ~~color~~: '~~grey.500~~',\n },\n}\n\nexport default function EntityPageBreadcrumbs(\n props: EntityPageBreadcrumbsProps,\n) {\n const { items } = props\n return (\n <Breadcrumbs\n items={items}\n sx={entityPageBreadcrumbStyle}\n maxBreadcrumbLength={ENTITY_PAGE_MAX_BREADCRUMB_LENGTH}\n />\n )\n}\n"],"mappings":";;;~~AAsBA~~,IAAM,IAAoC,~~IAEpC~~,IAAqC;CACzC,WAAW;CACX,SAAS;CACR,~~mBAAoB~~;~~EACnB~~,~~OAAO~~;~~EACP~~,~~eAAe~~;~~EACf~~,aAAa,EACX,OAAO,~~iBACT~~;~~CACF~~;~~CACA~~,~~sBAAsB~~,~~EACpB,~~OAAO~~,WACT~~;AACF;AAEA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU;CAClB,OACE,kBAAC,GAAD;EACS;EACP,IAAI;EACJ,qBAAqB;~~CACtB~~,CAAA;AAEL"}
1	+ {"version":3,"file":"EntityPageBreadcrumbs.js","names":[],"sources":["../../../../../src/components/entity/page/breadcrumbs/EntityPageBreadcrumbs.tsx"],"sourcesContent":["import {\n Breadcrumbs,\n BreadcrumbItem,\n} from '@/components/Breadcrumbs/Breadcrumbs'\nimport { SxProps } from '@mui/material'\n\ntype EntityPageBreadcrumbsProps = {\n items: BreadcrumbItem[]\n sx?: SxProps\n}\n\nconst ENTITY_PAGE_MAX_BREADCRUMB_LENGTH = 32\nconst ENTITY_PAGE_TEXT_COLOR = '#4D535A'\n\nconst breadcrumbTextStyle: SxProps = {\n fontWeight: 440,\n lineHeight: '20px',\n color: ENTITY_PAGE_TEXT_COLOR,\n}\n\nconst entityPageBreadcrumbStyle: SxProps = {\n marginTop: '0px',\n padding: '10px 32px',\n ['& .MuiTypography-root']: breadcrumbTextStyle,\n ['& .MuiLink-root']: {\n '&:visited': {\n color: ENTITY_PAGE_TEXT_COLOR,\n },\n },\n ['& .MuiSvgIcon-root']: {\n fontWeight: '300',\n color: ENTITY_PAGE_TEXT_COLOR,\n },\n}\n\nexport default function EntityPageBreadcrumbs(\n props: EntityPageBreadcrumbsProps,\n) {\n const { items } = props\n return (\n <Breadcrumbs\n items={items}\n sx={entityPageBreadcrumbStyle}\n maxBreadcrumbLength={ENTITY_PAGE_MAX_BREADCRUMB_LENGTH}\n iconVariant=\"outlined\"\n />\n )\n}\n"],"mappings":";;;AAWA,IAAM,IAAoC,IACpC,IAAyB,WAQzB,IAAqC;CACzC,WAAW;CACX,SAAS;CACR,yBAA0B;EAR3B,YAAY;EACZ,YAAY;EACZ,OAAO;CAMoB;CAC1B,mBAAoB,EACnB,aAAa,EACX,OAAO,EACT,EACF;CACC,sBAAuB;EACtB,YAAY;EACZ,OAAO;CACT;AACF;AAEA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU;CAClB,OACE,kBAAC,GAAD;EACS;EACP,IAAI;EACJ,qBAAqB;EACrB,aAAY;CACb,CAAA;AAEL"}

package/dist/components/entity/page/title_bar/EntityPageTitleBar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntityPageTitleBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/entity/page/title_bar/EntityPageTitleBar.tsx"],"names":[],"mappings":"AAMA,OAAyB,EACvB,qBAAqB,EACtB,MAAM,iCAAiC,CAAA;AAIxC,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;IAE7C,mCAAmC,EAAE,MAAM,IAAI,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,0BAA0B,YAAY,CAAA;~~AAInD~~;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,~~2CAqGxE~~"}
1	+ {"version":3,"file":"EntityPageTitleBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/entity/page/title_bar/EntityPageTitleBar.tsx"],"names":[],"mappings":"AAMA,OAAyB,EACvB,qBAAqB,EACtB,MAAM,iCAAiC,CAAA;AAIxC,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,qBAAqB,CAAC,EAAE,qBAAqB,CAAA;IAE7C,mCAAmC,EAAE,MAAM,IAAI,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,0BAA0B,YAAY,CAAA;AAKnD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAwGxE"}