synapse-react-client 4.0.46 → 4.0.47

package/dist/components/Evaluation/EvaluationRoundEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"EvaluationRoundEditor.js","names":[],"sources":["../../../src/components/Evaluation/EvaluationRoundEditor.tsx"],"sourcesContent":["import {\n  createEvaluationRound,\n  deleteEvaluationRound,\n  updateEvaluationRound,\n} from '@/synapse-client/SynapseClient'\nimport { useGlobalIsEditingContext } from '@/utils/context/GlobalIsEditingContext'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { useListState } from '@/utils/hooks/useListState'\nimport {\n  Alert,\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid as Grid2,\n  TextField,\n} from '@mui/material'\nimport { DateTimeValidationError } from '@mui/x-date-pickers'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  EvaluationRound,\n  EvaluationRoundLimit,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { Dayjs } from 'dayjs'\nimport isSameOrAfter from 'dayjs/plugin/isSameOrAfter'\nimport utc from 'dayjs/plugin/utc'\nimport { upperFirst } from 'lodash-es'\nimport { useEffect, useState } from 'react'\nimport DateTimePicker from '../DateTimePicker/DateTimePicker'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport IconSvg, { IconSvgProps } from '../IconSvg/IconSvg'\nimport { EvaluationRoundEditorDropdown } from './EvaluationRoundEditorDropdown'\nimport {\n  convertEvaluationRoundToInput,\n  EvaluationRoundInput,\n  EvaluationRoundLimitInput,\n} from './input_models/models'\nimport { EvaluationRoundLimitOptionsList } from './round_limits/EvaluationRoundLimitOptionsList'\n\ndayjs.extend(utc)\ndayjs.extend(isSameOrAfter)\n\nexport type EvaluationRoundEditorProps = {\n  evaluationRoundInput: EvaluationRoundInput\n  onDelete: () => void\n  onSave: (evaluationRound: EvaluationRoundInput) => void\n}\n\nconst disallowCalendarDateBefore = (date: Dayjs) => {\n  const startOfDay = date.startOf('day')\n  return (currentDate: Dayjs) => currentDate.isSameOrAfter(startOfDay)\n}\n\nconst determineRoundStatus = (\n  roundStart: Dayjs | string,\n  roundEnd: Dayjs | string,\n) => {\n  let className: string\n  let iconProps: IconSvgProps | undefined\n  let status: string\n  const now = dayjs()\n  // based off of start/end datetime from props so that users making\n  // unsaved changes to the start/end dates do not change the status\n  if (now.isSameOrAfter(roundStart)) {\n    if (now.isBefore(roundEnd)) {\n      className = 'status-in-progress'\n      iconProps = { icon: 'sync' }\n      status = 'IN PROGRESS'\n    } else {\n      className = 'status-completed'\n      iconProps = { icon: 'clipboardCheck' }\n      status = 'COMPLETED'\n    }\n  } else {\n    className = 'status-not-yet-started'\n    iconProps = undefined\n    status = 'NOT YET STARTED'\n  }\n\n  return (\n    <div className={className}>\n      <div className=\"status\">\n        {iconProps && <IconSvg {...iconProps} />}\n        <span>{status}</span>\n      </div>\n    </div>\n  )\n}\n\nconst convertInputsToEvaluationRound = (\n  evaluationRoundInputProp: EvaluationRoundInput,\n  startDate: string | Dayjs | null,\n  endDate: string | Dayjs | null,\n  totalSubmissionLimit: string,\n  advancedLimits: EvaluationRoundLimitInput[],\n): EvaluationRound => {\n  const limits: EvaluationRoundLimit[] = []\n  if (totalSubmissionLimit) {\n    const totalSubmissionLimitInt = Number(totalSubmissionLimit)\n    if (Number.isNaN(totalSubmissionLimitInt)) {\n      throw TypeError('Total Submission is not an integer')\n    }\n    limits.push({\n      limitType: 'TOTAL',\n      maximumSubmissions: totalSubmissionLimitInt,\n    })\n  }\n  advancedLimits.forEach(limitInput => {\n    if (limitInput.maxSubmissionString) {\n      const maxSubmissionInt = Number(limitInput.maxSubmissionString)\n      if (Number.isNaN(maxSubmissionInt)) {\n        throw TypeError(limitInput.type + ' Limit is not an integer')\n      }\n      limits.push({\n        limitType: limitInput.type,\n        maximumSubmissions: maxSubmissionInt,\n      })\n    }\n  })\n\n  return {\n    id: evaluationRoundInputProp.id,\n    etag: evaluationRoundInputProp.etag,\n    evaluationId: evaluationRoundInputProp.evaluationId,\n    roundStart: dayjs.utc(startDate).toJSON(),\n    roundEnd: dayjs.utc(endDate).toJSON(),\n    limits: limits,\n  }\n}\n\nfunction getDateErrorMessage(\n  dateField: 'start' | 'end',\n  error: DateTimeValidationError | null,\n): string | null {\n  if (error == null) return null\n  switch (error) {\n    case 'disablePast':\n      return `${upperFirst(dateField)} date cannot be in the past`\n    case 'invalidDate':\n    default:\n      return 'Invalid date'\n  }\n}\n\nexport function EvaluationRoundEditor({\n  evaluationRoundInput,\n  onSave,\n  onDelete,\n}: EvaluationRoundEditorProps) {\n  const { accessToken } = useSynapseContext()\n  const { setIsEditing } = useGlobalIsEditingContext()\n  const [isDirty, setIsDirty] = useState(false)\n  const [error, setError] = useState<string | SynapseClientError | undefined>()\n  const [showSaveSuccess, setShowSaveSuccess] = useState<boolean>(false)\n\n  useEffect(() => {\n    setIsEditing(isDirty)\n    return () => {\n      setIsEditing(false)\n    }\n  }, [isDirty, setIsEditing])\n\n  useEffect(() => {\n    if (error) {\n      setShowSaveSuccess(false)\n    }\n  }, [error])\n\n  const [startDate, setStartDate] = useState<Dayjs | null>(\n    evaluationRoundInput.roundStart\n      ? dayjs(evaluationRoundInput.roundStart)\n      : null,\n  )\n  const [endDate, setEndDate] = useState<Dayjs | null>(\n    evaluationRoundInput.roundEnd ? dayjs(evaluationRoundInput.roundEnd) : null,\n  )\n\n  const [totalSubmissionLimit, setTotalSubmissionLimit] = useState<string>(\n    evaluationRoundInput.totalSubmissionLimit,\n  )\n\n  const [advancedMode, setAdvancedMode] = useState<boolean>(false)\n\n  const [startDateError, setStartDateError] =\n    useState<DateTimeValidationError | null>(null)\n  const [endDateError, setEndDateError] =\n    useState<DateTimeValidationError | null>(null)\n\n  const {\n    list: advancedLimits,\n    handleListRemove,\n    handleListChange: handleAdvancedLimitsChangeBase,\n    appendToList: appendAdvancedLimit,\n  } = useListState<EvaluationRoundLimitInput>(evaluationRoundInput.otherLimits)\n\n  const handleAdvancedLimitsChange = (\n    ...args: Parameters<typeof handleAdvancedLimitsChangeBase>\n  ) => {\n    setIsDirty(true)\n    return handleAdvancedLimitsChangeBase(...args)\n  }\n\n  const addAdvancedLimit = (\n    ...args: Parameters<typeof appendAdvancedLimit>\n  ) => {\n    setIsDirty(true)\n    return appendAdvancedLimit(...args)\n  }\n\n  // if we remove the last advanced limit, hide the advanced limits\n  const handleAdvancedLimitsRemove = (index: number) => {\n    const generatedRemoveFunc = handleListRemove(index)\n    return () => {\n      //we are deleting the last advanced limit\n      setIsDirty(true)\n      generatedRemoveFunc()\n      if (advancedLimits.length === 1) {\n        // NOTE: we dont check for length == 0 because we don't modify the original list,\n        // instead the generated function will setState() with a NEW empty list\n        // so the original list we reference still has 1 element\n        setAdvancedMode(false)\n      }\n    }\n  }\n\n  const onSaveButtonClick = () => {\n    setShowSaveSuccess(false)\n    let evaluationRound\n    try {\n      evaluationRound = convertInputsToEvaluationRound(\n        evaluationRoundInput,\n        startDate,\n        endDate,\n        totalSubmissionLimit,\n        advancedLimits,\n      )\n    } catch (err) {\n      // error thrown if number\n      setError(err)\n    }\n    if (evaluationRound) {\n      const promise = evaluationRound.id\n        ? updateEvaluationRound(evaluationRound, accessToken)\n        : createEvaluationRound(evaluationRound, accessToken)\n\n      promise\n        .then(createdOrUpdatedRound => {\n          const newInput = convertEvaluationRoundToInput(\n            createdOrUpdatedRound,\n            evaluationRoundInput.reactListKey,\n          )\n          //clear out previous error if any\n          setError(undefined)\n          setShowSaveSuccess(true)\n          setIsDirty(false)\n          onSave(newInput)\n        })\n        .catch(error => setError(error))\n    }\n  }\n\n  const onDeleteButtonClick = () => {\n    if (evaluationRoundInput.id) {\n      deleteEvaluationRound(\n        evaluationRoundInput.evaluationId,\n        evaluationRoundInput.id,\n        accessToken,\n      )\n        .then(() => onDelete())\n        .catch(error => setError(error))\n    } else {\n      onDelete()\n    }\n  }\n\n  const disableStartInput = dayjs().isSameOrAfter(\n    evaluationRoundInput.roundStart,\n  )\n\n  return (\n    <div className=\"evaluation-round-editor\">\n      <Card>\n        <CardContent sx={{ p: 3 }}>\n          <form aria-label={'Evaluation Round Form'}>\n            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n              <h5>\n                ROUND STATUS\n                {evaluationRoundInput.id &&\n                  ' (' + evaluationRoundInput.id + ')'}\n              </h5>\n              <EvaluationRoundEditorDropdown\n                onDelete={onDeleteButtonClick}\n                onSave={onSaveButtonClick}\n              />\n            </Box>\n            <Box className=\"round-status\" sx={{ mb: 2 }}>\n              {determineRoundStatus(\n                evaluationRoundInput.roundStart,\n                evaluationRoundInput.roundEnd,\n              )}\n            </Box>\n            <h5>DURATION</h5>\n\n            <Grid2 container>\n              <Grid2 size={6}>\n                <DateTimePicker\n                  label=\"Round Start\"\n                  value={startDate}\n                  onChange={date => {\n                    setStartDate(date)\n                    setIsDirty(true)\n                  }}\n                  onError={error => setStartDateError(error)}\n                  disabled={disableStartInput}\n                  // Don't allow the value to be a past date only if the input is not disabled.\n                  // i.e. allow a past date if the round has already started\n                  disablePast={!disableStartInput}\n                  slotProps={{\n                    textField: {\n                      helperText: getDateErrorMessage('start', startDateError),\n                    },\n                  }}\n                />\n              </Grid2>\n              <Grid2 size={6}>\n                <DateTimePicker\n                  label=\"Round End\"\n                  value={endDate}\n                  onChange={date => {\n                    setEndDate(date)\n                    setIsDirty(true)\n                  }}\n                  onError={error => setEndDateError(error)}\n                  disablePast={\n                    !dayjs(endDate).isSame(evaluationRoundInput.roundEnd)\n                  }\n                  slotProps={{\n                    textField: {\n                      helperText: getDateErrorMessage('end', endDateError),\n                    },\n                  }}\n                />\n              </Grid2>\n            </Grid2>\n            <h5 style={{ marginTop: '20px' }}>SUBMISSION LIMITS</h5>\n            <TextField\n              fullWidth\n              label=\"Total Submissions / Round\"\n              value={totalSubmissionLimit}\n              onChange={event => {\n                setTotalSubmissionLimit(event.target.value)\n                setIsDirty(true)\n              }}\n              // Chrome for some reason decides to autofill this input box with email address, so we must disable autofill\n              // this is a hacky, but consistent way to disable autofill because Chrome does not respect the spec :(\n              // https://bugs.chromium.org/p/chromium/issues/detail?id=914451\n              autoComplete=\"new-password\"\n              slotProps={{\n                htmlInput: {\n                  pattern: '[0-9]*',\n                },\n              }}\n            />\n            <Box sx={{ my: 2 }}>\n              <Button\n                variant=\"outlined\"\n                color=\"primary\"\n                size={'small'}\n                onClick={() => setAdvancedMode(!advancedMode)}\n              >\n                Advanced Limits\n              </Button>\n            </Box>\n            {advancedMode && (\n              <EvaluationRoundLimitOptionsList\n                limitInputs={advancedLimits}\n                handleChange={handleAdvancedLimitsChange}\n                handleDeleteLimit={handleAdvancedLimitsRemove}\n                onAddNewLimit={addAdvancedLimit}\n              />\n            )}\n\n            {error && (\n              <Box sx={{ my: 3 }}>\n                <ErrorBanner error={error} />\n              </Box>\n            )}\n\n            {showSaveSuccess && (\n              <Box sx={{ my: 3 }}>\n                <Alert\n                  className=\"save-success-alert\"\n                  severity=\"success\"\n                  onClose={() => setShowSaveSuccess(false)}\n                  sx={{ mb: '20px' }}\n                >\n                  Successfully saved.\n                </Alert>\n              </Box>\n            )}\n\n            <Box sx={{ mt: 3, textAlign: 'right' }}>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={onSaveButtonClick}\n              >\n                Save\n              </Button>\n            </Box>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport const HelpersToTest = {\n  disallowCalendarDateBefore,\n  determineRoundStatus,\n  convertInputsToEvaluationRound,\n}\n"],"mappings":"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"}
+{"version":3,"file":"EvaluationRoundEditor.js","names":[],"sources":["../../../src/components/Evaluation/EvaluationRoundEditor.tsx"],"sourcesContent":["import {\n  createEvaluationRound,\n  deleteEvaluationRound,\n  updateEvaluationRound,\n} from '@/synapse-client/SynapseClient'\nimport { useGlobalIsEditingContext } from '@/utils/context/GlobalIsEditingContext'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { useListState } from '@/utils/hooks/useListState'\nimport {\n  Alert,\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid as Grid2,\n  TextField,\n} from '@mui/material'\nimport { DateTimeValidationError } from '@mui/x-date-pickers'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  EvaluationRound,\n  EvaluationRoundLimit,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { Dayjs } from 'dayjs'\nimport isSameOrAfter from 'dayjs/plugin/isSameOrAfter'\nimport utc from 'dayjs/plugin/utc'\nimport { upperFirst } from 'lodash-es'\nimport { useEffect, useState } from 'react'\nimport DateTimePicker from '../DateTimePicker/DateTimePicker'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport IconSvg, { IconSvgProps } from '../IconSvg/IconSvg'\nimport { EvaluationRoundEditorDropdown } from './EvaluationRoundEditorDropdown'\nimport {\n  convertEvaluationRoundToInput,\n  EvaluationRoundInput,\n  EvaluationRoundLimitInput,\n} from './input_models/models'\nimport { EvaluationRoundLimitOptionsList } from './round_limits/EvaluationRoundLimitOptionsList'\n\ndayjs.extend(utc)\ndayjs.extend(isSameOrAfter)\n\nexport type EvaluationRoundEditorProps = {\n  evaluationRoundInput: EvaluationRoundInput\n  onDelete: () => void\n  onSave: (evaluationRound: EvaluationRoundInput) => void\n}\n\nconst disallowCalendarDateBefore = (date: Dayjs) => {\n  const startOfDay = date.startOf('day')\n  return (currentDate: Dayjs) => currentDate.isSameOrAfter(startOfDay)\n}\n\nconst determineRoundStatus = (\n  roundStart: Dayjs | string,\n  roundEnd: Dayjs | string,\n) => {\n  let className: string\n  let iconProps: IconSvgProps | undefined\n  let status: string\n  const now = dayjs()\n  // based off of start/end datetime from props so that users making\n  // unsaved changes to the start/end dates do not change the status\n  if (now.isSameOrAfter(roundStart)) {\n    if (now.isBefore(roundEnd)) {\n      className = 'status-in-progress'\n      iconProps = { icon: 'sync' }\n      status = 'IN PROGRESS'\n    } else {\n      className = 'status-completed'\n      iconProps = { icon: 'clipboardCheck' }\n      status = 'COMPLETED'\n    }\n  } else {\n    className = 'status-not-yet-started'\n    iconProps = undefined\n    status = 'NOT YET STARTED'\n  }\n\n  return (\n    <div className={className}>\n      <div className=\"status\">\n        {iconProps && <IconSvg {...iconProps} />}\n        <span>{status}</span>\n      </div>\n    </div>\n  )\n}\n\nconst convertInputsToEvaluationRound = (\n  evaluationRoundInputProp: EvaluationRoundInput,\n  startDate: string | Dayjs | null,\n  endDate: string | Dayjs | null,\n  totalSubmissionLimit: string,\n  advancedLimits: EvaluationRoundLimitInput[],\n): EvaluationRound => {\n  const limits: EvaluationRoundLimit[] = []\n  if (totalSubmissionLimit) {\n    const totalSubmissionLimitInt = Number(totalSubmissionLimit)\n    if (Number.isNaN(totalSubmissionLimitInt)) {\n      throw new TypeError('Total Submission is not an integer')\n    }\n    limits.push({\n      limitType: 'TOTAL',\n      maximumSubmissions: totalSubmissionLimitInt,\n    })\n  }\n  advancedLimits.forEach(limitInput => {\n    if (limitInput.maxSubmissionString) {\n      const maxSubmissionInt = Number(limitInput.maxSubmissionString)\n      if (Number.isNaN(maxSubmissionInt)) {\n        throw new TypeError(limitInput.type + ' Limit is not an integer')\n      }\n      limits.push({\n        limitType: limitInput.type,\n        maximumSubmissions: maxSubmissionInt,\n      })\n    }\n  })\n\n  return {\n    id: evaluationRoundInputProp.id,\n    etag: evaluationRoundInputProp.etag,\n    evaluationId: evaluationRoundInputProp.evaluationId,\n    roundStart: dayjs.utc(startDate).toJSON(),\n    roundEnd: dayjs.utc(endDate).toJSON(),\n    limits: limits,\n  }\n}\n\nfunction getDateErrorMessage(\n  dateField: 'start' | 'end',\n  error: DateTimeValidationError | null,\n): string | null {\n  if (error == null) return null\n  switch (error) {\n    case 'disablePast':\n      return `${upperFirst(dateField)} date cannot be in the past`\n    case 'invalidDate':\n    default:\n      return 'Invalid date'\n  }\n}\n\nexport function EvaluationRoundEditor({\n  evaluationRoundInput,\n  onSave,\n  onDelete,\n}: EvaluationRoundEditorProps) {\n  const { accessToken } = useSynapseContext()\n  const { setIsEditing } = useGlobalIsEditingContext()\n  const [isDirty, setIsDirty] = useState(false)\n  const [error, setError] = useState<string | SynapseClientError | undefined>()\n  const [showSaveSuccess, setShowSaveSuccess] = useState<boolean>(false)\n\n  useEffect(() => {\n    setIsEditing(isDirty)\n    return () => {\n      setIsEditing(false)\n    }\n  }, [isDirty, setIsEditing])\n\n  useEffect(() => {\n    if (error) {\n      setShowSaveSuccess(false)\n    }\n  }, [error])\n\n  const [startDate, setStartDate] = useState<Dayjs | null>(\n    evaluationRoundInput.roundStart\n      ? dayjs(evaluationRoundInput.roundStart)\n      : null,\n  )\n  const [endDate, setEndDate] = useState<Dayjs | null>(\n    evaluationRoundInput.roundEnd ? dayjs(evaluationRoundInput.roundEnd) : null,\n  )\n\n  const [totalSubmissionLimit, setTotalSubmissionLimit] = useState<string>(\n    evaluationRoundInput.totalSubmissionLimit,\n  )\n\n  const [advancedMode, setAdvancedMode] = useState<boolean>(false)\n\n  const [startDateError, setStartDateError] =\n    useState<DateTimeValidationError | null>(null)\n  const [endDateError, setEndDateError] =\n    useState<DateTimeValidationError | null>(null)\n\n  const {\n    list: advancedLimits,\n    handleListRemove,\n    handleListChange: handleAdvancedLimitsChangeBase,\n    appendToList: appendAdvancedLimit,\n  } = useListState<EvaluationRoundLimitInput>(evaluationRoundInput.otherLimits)\n\n  const handleAdvancedLimitsChange = (\n    ...args: Parameters<typeof handleAdvancedLimitsChangeBase>\n  ) => {\n    setIsDirty(true)\n    return handleAdvancedLimitsChangeBase(...args)\n  }\n\n  const addAdvancedLimit = (\n    ...args: Parameters<typeof appendAdvancedLimit>\n  ) => {\n    setIsDirty(true)\n    return appendAdvancedLimit(...args)\n  }\n\n  // if we remove the last advanced limit, hide the advanced limits\n  const handleAdvancedLimitsRemove = (index: number) => {\n    const generatedRemoveFunc = handleListRemove(index)\n    return () => {\n      //we are deleting the last advanced limit\n      setIsDirty(true)\n      generatedRemoveFunc()\n      if (advancedLimits.length === 1) {\n        // NOTE: we dont check for length == 0 because we don't modify the original list,\n        // instead the generated function will setState() with a NEW empty list\n        // so the original list we reference still has 1 element\n        setAdvancedMode(false)\n      }\n    }\n  }\n\n  const onSaveButtonClick = () => {\n    setShowSaveSuccess(false)\n    let evaluationRound\n    try {\n      evaluationRound = convertInputsToEvaluationRound(\n        evaluationRoundInput,\n        startDate,\n        endDate,\n        totalSubmissionLimit,\n        advancedLimits,\n      )\n    } catch (err) {\n      // error thrown if number\n      setError(err)\n    }\n    if (evaluationRound) {\n      const promise = evaluationRound.id\n        ? updateEvaluationRound(evaluationRound, accessToken)\n        : createEvaluationRound(evaluationRound, accessToken)\n\n      promise\n        .then(createdOrUpdatedRound => {\n          const newInput = convertEvaluationRoundToInput(\n            createdOrUpdatedRound,\n            evaluationRoundInput.reactListKey,\n          )\n          //clear out previous error if any\n          setError(undefined)\n          setShowSaveSuccess(true)\n          setIsDirty(false)\n          onSave(newInput)\n        })\n        .catch(error => setError(error))\n    }\n  }\n\n  const onDeleteButtonClick = () => {\n    if (evaluationRoundInput.id) {\n      deleteEvaluationRound(\n        evaluationRoundInput.evaluationId,\n        evaluationRoundInput.id,\n        accessToken,\n      )\n        .then(() => onDelete())\n        .catch(error => setError(error))\n    } else {\n      onDelete()\n    }\n  }\n\n  const disableStartInput = dayjs().isSameOrAfter(\n    evaluationRoundInput.roundStart,\n  )\n\n  return (\n    <div className=\"evaluation-round-editor\">\n      <Card>\n        <CardContent sx={{ p: 3 }}>\n          <form aria-label={'Evaluation Round Form'}>\n            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n              <h5>\n                ROUND STATUS\n                {evaluationRoundInput.id &&\n                  ' (' + evaluationRoundInput.id + ')'}\n              </h5>\n              <EvaluationRoundEditorDropdown\n                onDelete={onDeleteButtonClick}\n                onSave={onSaveButtonClick}\n              />\n            </Box>\n            <Box className=\"round-status\" sx={{ mb: 2 }}>\n              {determineRoundStatus(\n                evaluationRoundInput.roundStart,\n                evaluationRoundInput.roundEnd,\n              )}\n            </Box>\n            <h5>DURATION</h5>\n\n            <Grid2 container>\n              <Grid2 size={6}>\n                <DateTimePicker\n                  label=\"Round Start\"\n                  value={startDate}\n                  onChange={date => {\n                    setStartDate(date)\n                    setIsDirty(true)\n                  }}\n                  onError={error => setStartDateError(error)}\n                  disabled={disableStartInput}\n                  // Don't allow the value to be a past date only if the input is not disabled.\n                  // i.e. allow a past date if the round has already started\n                  disablePast={!disableStartInput}\n                  slotProps={{\n                    textField: {\n                      helperText: getDateErrorMessage('start', startDateError),\n                    },\n                  }}\n                />\n              </Grid2>\n              <Grid2 size={6}>\n                <DateTimePicker\n                  label=\"Round End\"\n                  value={endDate}\n                  onChange={date => {\n                    setEndDate(date)\n                    setIsDirty(true)\n                  }}\n                  onError={error => setEndDateError(error)}\n                  disablePast={\n                    !dayjs(endDate).isSame(evaluationRoundInput.roundEnd)\n                  }\n                  slotProps={{\n                    textField: {\n                      helperText: getDateErrorMessage('end', endDateError),\n                    },\n                  }}\n                />\n              </Grid2>\n            </Grid2>\n            <h5 style={{ marginTop: '20px' }}>SUBMISSION LIMITS</h5>\n            <TextField\n              fullWidth\n              label=\"Total Submissions / Round\"\n              value={totalSubmissionLimit}\n              onChange={event => {\n                setTotalSubmissionLimit(event.target.value)\n                setIsDirty(true)\n              }}\n              // Chrome for some reason decides to autofill this input box with email address, so we must disable autofill\n              // this is a hacky, but consistent way to disable autofill because Chrome does not respect the spec :(\n              // https://bugs.chromium.org/p/chromium/issues/detail?id=914451\n              autoComplete=\"new-password\"\n              slotProps={{\n                htmlInput: {\n                  pattern: '[0-9]*',\n                },\n              }}\n            />\n            <Box sx={{ my: 2 }}>\n              <Button\n                variant=\"outlined\"\n                color=\"primary\"\n                size={'small'}\n                onClick={() => setAdvancedMode(!advancedMode)}\n              >\n                Advanced Limits\n              </Button>\n            </Box>\n            {advancedMode && (\n              <EvaluationRoundLimitOptionsList\n                limitInputs={advancedLimits}\n                handleChange={handleAdvancedLimitsChange}\n                handleDeleteLimit={handleAdvancedLimitsRemove}\n                onAddNewLimit={addAdvancedLimit}\n              />\n            )}\n\n            {error && (\n              <Box sx={{ my: 3 }}>\n                <ErrorBanner error={error} />\n              </Box>\n            )}\n\n            {showSaveSuccess && (\n              <Box sx={{ my: 3 }}>\n                <Alert\n                  className=\"save-success-alert\"\n                  severity=\"success\"\n                  onClose={() => setShowSaveSuccess(false)}\n                  sx={{ mb: '20px' }}\n                >\n                  Successfully saved.\n                </Alert>\n              </Box>\n            )}\n\n            <Box sx={{ mt: 3, textAlign: 'right' }}>\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                onClick={onSaveButtonClick}\n              >\n                Save\n              </Button>\n            </Box>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport const HelpersToTest = {\n  disallowCalendarDateBefore,\n  determineRoundStatus,\n  convertInputsToEvaluationRound,\n}\n"],"mappings":"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"}

package/dist/components/FeaturedDataTabs/FacetPlotsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotsCard.d.ts","sourceRoot":"","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAGL,QAAQ,EACT,MAAM,oCAAoC,CAAA;AAY3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAkOD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAQ5E"}
+{"version":3,"file":"FacetPlotsCard.d.ts","sourceRoot":"","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,QAAQ,EACT,MAAM,oCAAoC,CAAA;AAY3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAyND,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAQ5E"}

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js

@@ -1,25 +1,26 @@
-import { useSynapseContext as e } from "../../utils/context/SynapseContext.js";
-import { SkeletonTable as t } from "../Skeleton/SkeletonTable.js";
-import { SkeletonParagraph as n } from "../Skeleton/SkeletonParagraph.js";
+import { useQueryVisualizationContext as e } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useSynapseContext as t } from "../../utils/context/SynapseContext.js";
+import { getEnumerationFacets as n } from "../../utils/functions/enumerationFacet.js";
+import { SkeletonTable as r } from "../Skeleton/SkeletonTable.js";
+import { SkeletonParagraph as i } from "../Skeleton/SkeletonParagraph.js";
 import "../Skeleton/index.js";
-import r from "../ShowMore/ShowMore.js";
+import a from "../ShowMore/ShowMore.js";
 import "../row_renderers/utils/index.js";
-import { useSuspenseGetQueryMetadata as i } from "../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as a } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useSuspenseGetQueryMetadata as o } from "../QueryWrapper/useGetQueryMetadata.js";
 import "../QueryVisualizationWrapper/index.js";
-import { Plot as o } from "../Plot/Plot.js";
-import { extractPlotDataArray as s, getPlotStyle as c } from "../widgets/facet-nav/FacetNavPanel.js";
-import { FacetPlotLegendTable as l } from "../widgets/facet-nav/FacetPlotLegendTable.js";
-import { getFacets as u } from "../widgets/facet-nav/useFacetPlots.js";
-import { FACET_PLOTS_CARD_CLASSNAME as d, FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME as f, FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME as p, FacetPlotsCardPlotContainer as m, FacetPlotsCardTitleContainer as h } from "./FacetPlotsCardGrid.js";
-import { Fragment as g, Suspense as _, useMemo as v } from "react";
-import { times as y } from "lodash-es";
-import { Box as b, Button as x, Divider as S, Paper as C, Skeleton as w, Typography as T } from "@mui/material";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { useSuspenseQuery as O } from "@tanstack/react-query";
-import { useMeasure as k } from "@react-hookz/web";
+import { Plot as s } from "../Plot/Plot.js";
+import { extractPlotDataArray as c, getPlotStyle as l } from "../widgets/facet-nav/FacetNavPanel.js";
+import { FacetPlotLegendTable as u } from "../widgets/facet-nav/FacetPlotLegendTable.js";
+import { getFacets as d } from "../widgets/facet-nav/useFacetPlots.js";
+import { FACET_PLOTS_CARD_CLASSNAME as f, FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME as p, FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME as m, FacetPlotsCardPlotContainer as h, FacetPlotsCardTitleContainer as g } from "./FacetPlotsCardGrid.js";
+import { Fragment as _, Suspense as v, useMemo as y } from "react";
+import { times as b } from "lodash-es";
+import { Box as x, Button as S, Divider as C, Paper as w, Skeleton as T, Typography as E } from "@mui/material";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useSuspenseQuery as k } from "@tanstack/react-query";
+import { useMeasure as A } from "@react-hookz/web";
 //#region src/components/FeaturedDataTabs/FacetPlotsCard.tsx
-var A = {
+var j = {
 	showlegend: !1,
 	annotations: [],
 	margin: {
@@ -38,148 +39,143 @@ var A = {
 		showgrid: !1
 	}
 };
-function j(e) {
-	let { numPlots: r } = e;
-	return /* @__PURE__ */ D(C, {
-		className: d,
-		children: [/* @__PURE__ */ D(h, {
-			className: p,
+function M(e) {
+	let { numPlots: t } = e;
+	return /* @__PURE__ */ O(w, {
+		className: f,
+		children: [/* @__PURE__ */ O(g, {
+			className: m,
 			children: [
-				/* @__PURE__ */ E(w, {
+				/* @__PURE__ */ D(T, {
 					width: "60%",
 					height: "24px"
 				}),
-				/* @__PURE__ */ E(n, { numRows: 5 }),
-				/* @__PURE__ */ E(w, {
+				/* @__PURE__ */ D(i, { numRows: 5 }),
+				/* @__PURE__ */ D(T, {
 					width: "40%",
-					children: /* @__PURE__ */ E(x, {
+					children: /* @__PURE__ */ D(S, {
 						variant: "contained",
 						children: "Explore"
 					})
 				})
 			]
-		}), y(r).map((e) => /* @__PURE__ */ D(m, {
-			className: f,
+		}), b(t).map((e) => /* @__PURE__ */ O(h, {
+			className: p,
 			sx: {
 				py: 3,
 				gridRow: `plot${e}`
 			},
-			children: [/* @__PURE__ */ E(w, {
+			children: [/* @__PURE__ */ D(T, {
 				width: "100%",
 				height: "300px"
-			}), /* @__PURE__ */ E(t, {
+			}), /* @__PURE__ */ D(r, {
 				numRows: 4,
 				numCols: 2
 			})]
 		}, e))]
 	});
 }
-function M(t) {
-	let { title: n, description: _, facetsToPlot: y, detailsPagePath: w, plotType: j = "PIE" } = t, { accessToken: M } = e(), { data: N } = i(), { getColumnDisplayName: P } = a(), [F, I] = k(), L = v(() => y ? u(N, y) : [], [y, N]), R = v(() => ({
-		...A,
-		barmode: j === "STACKED_HORIZONTAL_BAR" ? "stack" : void 0
-	}), [j]), z = j === "STACKED_HORIZONTAL_BAR" ? 50 : 150, { data: B } = O({
+function N(r) {
+	let { title: i, description: v, facetsToPlot: b, detailsPagePath: T, plotType: M = "PIE" } = r, { accessToken: N } = t(), { data: P } = o(), { getColumnDisplayName: F } = e(), [I, L] = A(), R = y(() => b ? d(P, b) : [], [b, P]), z = y(() => ({
+		...j,
+		barmode: M === "STACKED_HORIZONTAL_BAR" ? "stack" : void 0
+	}), [M]), B = M === "STACKED_HORIZONTAL_BAR" ? 50 : 150, { data: V } = k({
 		queryKey: [
 			"facetPlotDataArray",
-			y,
-			L
+			b,
+			R,
+			P.facetPostProcessingApplied
 		],
 		queryFn: async () => {
-			if (!y) return [];
-			let e = (e) => N.columnModels.find((t) => t.name === e.columnName)?.columnType;
-			return Promise.all(L.map(async (t, n) => await s(t, e(t), n + 1, j, M)));
+			if (!b) return [];
+			let e = (e) => P.columnModels.find((t) => t.name === e.columnName)?.columnType;
+			return Promise.all(R.map(async (t, n) => await c(t, e(t), n + 1, M, N, P.facetPostProcessingApplied)));
 		}
-	}), V = v(() => {
-		if (!y) return "";
-		let e = N?.facets.map((e) => {
-			let t = e.facetValues;
-			if (t) {
-				let e = t.filter((e) => e.isSelected);
-				return e.length > 0 ? e[0] : void 0;
-			} else return;
-		}).filter((e) => e !== void 0)[0];
+	}), H = y(() => {
+		if (!b) return "";
+		let e = n(P?.facets).flatMap((e) => e.facetValues).find((e) => e.isSelected);
 		return e?.value ? e?.value : "";
-	}, [y, N?.facets]), H = B.length > 1;
-	return /* @__PURE__ */ D(C, {
-		className: d,
+	}, [b, P?.facets]), U = V.length > 1;
+	return /* @__PURE__ */ O(w, {
+		className: f,
 		sx: { overflow: "hidden" },
-		children: [/* @__PURE__ */ D(h, {
-			className: p,
+		children: [/* @__PURE__ */ O(g, {
+			className: m,
 			children: [
-				/* @__PURE__ */ E(T, {
+				/* @__PURE__ */ D(E, {
 					variant: "headline1",
-					children: n ?? (H ? V : P(L[0].columnName))
+					children: i ?? (U ? H : F(R[0].columnName))
 				}),
-				_ && /* @__PURE__ */ E(T, {
+				v && /* @__PURE__ */ D(E, {
 					variant: "body1",
 					sx: {
 						color: "grey.700",
 						my: 2
 					},
-					children: /* @__PURE__ */ E(r, {
-						summary: _,
+					children: /* @__PURE__ */ D(a, {
+						summary: v,
 						maxCharacterCount: 200
 					})
 				}),
-				w && V && /* @__PURE__ */ E(b, {
+				T && H && /* @__PURE__ */ D(x, {
 					sx: { my: 2 },
-					children: /* @__PURE__ */ D(x, {
+					children: /* @__PURE__ */ O(S, {
 						variant: "contained",
-						href: w,
+						href: T,
 						color: "secondary",
 						sx: (e) => ({ [e.breakpoints.down("sm")]: { width: "100%" } }),
-						children: ["Explore ", V]
+						children: ["Explore ", H]
 					})
 				})
 			]
-		}), B.map((e, t) => /* @__PURE__ */ E(g, { children: /* @__PURE__ */ D(m, {
-			className: f,
+		}), V.map((e, t) => /* @__PURE__ */ D(_, { children: /* @__PURE__ */ O(h, {
+			className: p,
 			sx: {
 				pt: t === 0 ? 5 : 0,
 				gridRow: `plot${t}`
 			},
-			children: [t != 0 && /* @__PURE__ */ E(S, { sx: {
+			children: [t != 0 && /* @__PURE__ */ D(C, { sx: {
 				mt: 2,
 				mb: 4
-			} }), /* @__PURE__ */ D(b, {
+			} }), /* @__PURE__ */ O(x, {
 				sx: { minHeight: "130px" },
-				children: [/* @__PURE__ */ E(b, {
-					ref: I,
+				children: [/* @__PURE__ */ D(x, {
+					ref: L,
 					sx: {
 						display: "flex",
 						justifyContent: "center",
 						alignItems: "center"
 					},
-					children: /* @__PURE__ */ E(o, {
-						layout: R,
+					children: /* @__PURE__ */ D(s, {
+						layout: z,
 						data: e?.data ?? [],
-						style: c(F?.width, j, z),
+						style: l(I?.width, M, B),
 						config: { displayModeBar: !1 }
-					}, `${y[t]}-${F?.width}`)
-				}), /* @__PURE__ */ E(b, {
+					}, `${b[t]}-${I?.width}`)
+				}), /* @__PURE__ */ D(x, {
 					sx: {
 						mt: 4,
 						width: "100%"
 					},
-					children: /* @__PURE__ */ E(l, {
-						facetName: P(L[t].columnName),
+					children: /* @__PURE__ */ D(u, {
+						facetName: F(R[t].columnName),
 						labels: e?.labels,
 						colors: e?.colors,
 						isExpanded: !1,
-						linkToFullQuery: w
+						linkToFullQuery: T
 					})
 				})]
 			})]
 		}, t) }, t))]
 	});
 }
-function N(e) {
-	return /* @__PURE__ */ E(_, {
-		fallback: /* @__PURE__ */ E(j, { numPlots: (e.facetsToPlot ?? []).length }),
-		children: /* @__PURE__ */ E(M, { ...e })
+function P(e) {
+	return /* @__PURE__ */ D(v, {
+		fallback: /* @__PURE__ */ D(M, { numPlots: (e.facetsToPlot ?? []).length }),
+		children: /* @__PURE__ */ D(N, { ...e })
 	});
 }
 //#endregion
-export { N as default };
+export { P as default };
 
 //# sourceMappingURL=FacetPlotsCard.js.map

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: FacetColumnResult,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item as FacetColumnResultValues,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet: FacetColumnResultValueCount | undefined = queryMetadata\n      ?.facets!.map(item => {\n        const facetValues: FacetColumnResultValueCount[] = (\n          item as FacetColumnResultValues\n        ).facetValues\n        if (facetValues) {\n          const filteredFacetValues: FacetColumnResultValueCount[] =\n            facetValues.filter(facetValue => {\n              return facetValue.isSelected\n            })\n          return filteredFacetValues.length > 0\n            ? filteredFacetValues[0]\n            : undefined\n        } else {\n          return undefined\n        }\n      })\n      .filter(x => x !== undefined)[0]\n\n    if (selectedFacet?.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  EnumerationFacet,\n  getEnumerationFacets,\n} from '@/utils/functions/enumerationFacet'\nimport { ColumnTypeEnum } from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: [\n      'facetPlotDataArray',\n      facetsToPlot,\n      facetDataArray,\n      queryMetadata.facetPostProcessingApplied,\n    ],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: EnumerationFacet,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n            queryMetadata.facetPostProcessingApplied,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet = getEnumerationFacets(queryMetadata?.facets)\n      .flatMap(facet => facet.facetValues)\n      .find(facetValue => facetValue.isSelected)\n\n    if (selectedFacet?.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

package/dist/components/FormTemplateEditor/FormStructurePanel.js

@@ -4,8 +4,8 @@ import { createEditableStep as n } from "./utils.js";
 import { StepCard as r } from "./StepCard.js";
 import { Alert as i, Box as a, Button as o, Paper as s, Stack as c, Typography as l } from "@mui/material";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "@mui/icons-material/Add";
-import p from "pluralize";
+import f from "pluralize";
+import p from "@mui/icons-material/Add";
 //#region src/components/FormTemplateEditor/FormStructurePanel.tsx
 function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, onStepsChange: v, onBindField: y }) {
 	let b = (e, t) => {
@@ -45,7 +45,7 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				})] }), /* @__PURE__ */ u(o, {
 					size: "small",
 					variant: "outlined",
-					startIcon: /* @__PURE__ */ u(f, {}),
+					startIcon: /* @__PURE__ */ u(p, {}),
 					onClick: x,
 					children: "Add step"
 				})]
@@ -54,9 +54,9 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				severity: "error",
 				sx: { mb: 1.5 },
 				children: [
-					p("required field", w.length, !0),
+					f("required field", w.length, !0),
 					" ",
-					p("is", w.length),
+					f("is", w.length),
 					" not bound to a step and must be bound before saving:",
 					" ",
 					w.map((e) => e.subSchema.title ?? t(e.propertyKey)).join(", "),
@@ -67,9 +67,9 @@ function m({ steps: m, jsonSchema: h, unboundProperties: g, formTemplateId: _, o
 				severity: "warning",
 				sx: { mb: 1.5 },
 				children: [
-					p("field", T.length, !0),
+					f("field", T.length, !0),
 					" ",
-					p("is", T.length),
+					f("is", T.length),
 					" not yet bound to a step. Use a step's \"",
 					"Bind field",
 					"\" dropdown to add",

package/dist/components/FormTemplateEditor/StepCard.js

@@ -8,11 +8,11 @@ import { BIND_FIELD_LABEL as m } from "./utils.js";
 import { useState as h } from "react";
 import { Box as g, Collapse as _, IconButton as v, MenuItem as y, Paper as b, Stack as ee, TextField as x, Typography as S } from "@mui/material";
 import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import T from "@mui/icons-material/ExpandLess";
-import E from "@mui/icons-material/ExpandMore";
-import D from "@mui/icons-material/ArrowDownward";
-import O from "@mui/icons-material/ArrowUpward";
-import k from "pluralize";
+import T from "pluralize";
+import E from "@mui/icons-material/ExpandLess";
+import D from "@mui/icons-material/ExpandMore";
+import O from "@mui/icons-material/ArrowDownward";
+import k from "@mui/icons-material/ArrowUpward";
 import A from "@mui/icons-material/Delete";
 import { useDroppable as j } from "@dnd-kit/react";
 import M from "@mui/icons-material/DragIndicator";
@@ -39,7 +39,7 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 		H({ fields: e(F.fields, t, n) });
 	}, ae = (e) => {
 		H({ fields: F.fields.filter((t, n) => n !== e) });
-	}, oe = k("field", F.fields.length, !0);
+	}, oe = T("field", F.fields.length, !0);
 	return /* @__PURE__ */ w(b, {
 		ref: Y,
 		variant: "outlined",
@@ -67,7 +67,7 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 					size: "small",
 					onClick: () => J((e) => !e),
 					"aria-label": q ? "Collapse step" : "Expand step",
-					children: C(q ? T : E, { fontSize: "small" })
+					children: C(q ? E : D, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ w(g, {
 					sx: {
@@ -95,14 +95,14 @@ function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R
 					disabled: te,
 					onClick: W,
 					"aria-label": "Move step up",
-					children: /* @__PURE__ */ C(O, { fontSize: "small" })
+					children: /* @__PURE__ */ C(k, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ C(v, {
 					size: "small",
 					disabled: L,
 					onClick: G,
 					"aria-label": "Move step down",
-					children: /* @__PURE__ */ C(D, { fontSize: "small" })
+					children: /* @__PURE__ */ C(O, { fontSize: "small" })
 				}),
 				/* @__PURE__ */ C(v, {
 					size: "small",

package/dist/components/FormTemplateEditor/schemaFieldUtils.js

@@ -70,12 +70,12 @@ function i(e, t) {
 	return n;
 }
 function a(e, t) {
-	let n = e.toLowerCase().replace(/[^a-z0-9\s]/g, "").trim().split(/\s+/).filter(Boolean).map((e, t) => t === 0 ? e : e.charAt(0).toUpperCase() + e.slice(1)).join("") || "field", r = n, i = 1;
+	let n = e.toLowerCase().replaceAll(/[^a-z0-9\s]/g, "").trim().split(/\s+/).filter(Boolean).map((e, t) => t === 0 ? e : e.charAt(0).toUpperCase() + e.slice(1)).join("") || "field", r = n, i = 1;
 	for (; t.has(r);) i += 1, r = `${n}${i}`;
 	return r;
 }
 function o(e) {
-	let t = e.replace(/[^A-Za-z0-9_]/g, "");
+	let t = e.replaceAll(/[^A-Za-z0-9_]/g, "");
 	return /^[0-9]/.test(t) ? `_${t}` : t;
 }
 //#endregion

package/dist/components/FormTemplateEditor/schemaFieldUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"schemaFieldUtils.js","names":[],"sources":["../../../src/components/FormTemplateEditor/schemaFieldUtils.ts"],"sourcesContent":["import { RJSFSchema } from '@rjsf/utils'\n\n/**\n * The set of property shapes the simple editor knows how to author. Anything\n * outside this set surfaces in the UI as \"advanced\" and must be edited via the\n * raw JSON Schema view.\n */\nexport type SimpleFieldType =\n  | 'text'\n  | 'number'\n  | 'boolean'\n  | 'choice'\n  | 'multiChoice'\n  | 'file'\n\nexport const FIELD_TYPE_OPTIONS: { value: SimpleFieldType; label: string }[] = [\n  { value: 'text', label: 'Text' },\n  { value: 'number', label: 'Number' },\n  { value: 'boolean', label: 'Yes / No' },\n  { value: 'choice', label: 'Single choice' },\n  { value: 'multiChoice', label: 'Multiple choice (select many)' },\n  { value: 'file', label: 'File upload' },\n]\n\nexport function detectFieldType(\n  prop: RJSFSchema | undefined,\n): SimpleFieldType | null {\n  if (!prop || typeof prop !== 'object') return null\n  if (prop.format === 'synapse-filehandle-id') return 'file'\n  if (prop.type === 'string' && Array.isArray(prop.enum)) return 'choice'\n  // RJSF renders an array as a multi-select only when `uniqueItems` is set; without it the\n  // property renders as a repeatable list, which the simple editor does not author.\n  const items = prop.items as RJSFSchema | undefined\n  if (\n    prop.type === 'array' &&\n    prop.uniqueItems === true &&\n    items?.type === 'string' &&\n    Array.isArray(items.enum)\n  ) {\n    return 'multiChoice'\n  }\n  if (prop.type === 'string' && !prop.format) return 'text'\n  if (prop.type === 'number' || prop.type === 'integer') return 'number'\n  if (prop.type === 'boolean') return 'boolean'\n  return null\n}\n\nexport function fieldTypeLabel(type: SimpleFieldType | null): string {\n  if (type === null) return 'Advanced'\n  return FIELD_TYPE_OPTIONS.find(opt => opt.value === type)?.label ?? 'Advanced'\n}\n\n/** The options a 'choice' (`enum`) or 'multiChoice' (`items.enum`) property declares; empty if none. */\nexport function choiceOptions(prop: RJSFSchema): string[] {\n  const options = prop.enum ?? (prop.items as RJSFSchema | undefined)?.enum\n  return Array.isArray(options) ? (options as string[]) : []\n}\n\n/** Build a fresh schema body for the given simple type, preserving label and help text. */\nexport function applyFieldType(\n  prev: RJSFSchema,\n  type: SimpleFieldType,\n): RJSFSchema {\n  const next: RJSFSchema = {\n    title: prev.title,\n    description: prev.description,\n  }\n  const existingChoices = choiceOptions(prev)\n  // A choice field needs at least one option to be answerable.\n  const choices = existingChoices.length > 0 ? existingChoices : ['Option 1']\n  switch (type) {\n    case 'text':\n      next.type = 'string'\n      break\n    case 'number':\n      next.type = 'number'\n      break\n    case 'boolean':\n      next.type = 'boolean'\n      break\n    case 'choice':\n      next.type = 'string'\n      next.enum = choices\n      break\n    case 'multiChoice':\n      next.type = 'array'\n      next.items = { type: 'string', enum: choices }\n      next.uniqueItems = true\n      break\n    case 'file':\n      next.type = 'number'\n      next.format = 'synapse-filehandle-id'\n      break\n  }\n  return next\n}\n\n/** Derive a unique camelCase JSON property key from a display title. */\nexport function generatePropertyKey(\n  title: string,\n  existingKeys: Set<string>,\n): string {\n  const base =\n    title\n      .toLowerCase()\n      .replace(/[^a-z0-9\\s]/g, '')\n      .trim()\n      .split(/\\s+/)\n      .filter(Boolean)\n      .map((w, i) => (i === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)))\n      .join('') || 'field'\n  let key = base\n  let i = 1\n  while (existingKeys.has(key)) {\n    i += 1\n    key = `${base}${i}`\n  }\n  return key\n}\n\n/**\n * Sanitize a manually-typed property key: strip characters that aren't\n * valid in a JSON Schema property key used as a JS identifier, preserving\n * the editor's casing (unlike `generatePropertyKey`, which derives a\n * camelCase key from a display title).\n */\nexport function sanitizePropertyKey(raw: string): string {\n  const stripped = raw.replace(/[^A-Za-z0-9_]/g, '')\n  return /^[0-9]/.test(stripped) ? `_${stripped}` : stripped\n}\n"],"mappings":";AAeA,IAAa,IAAkE;CAC7E;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAU,OAAO;CAAS;CACnC;EAAE,OAAO;EAAW,OAAO;CAAW;CACtC;EAAE,OAAO;EAAU,OAAO;CAAgB;CAC1C;EAAE,OAAO;EAAe,OAAO;CAAgC;CAC/D;EAAE,OAAO;EAAQ,OAAO;CAAc;AACxC;AAEA,SAAgB,EACd,GACwB;CACxB,IAAI,CAAC,KAAQ,OAAO,KAAS,UAAU,OAAO;CAC9C,IAAI,EAAK,WAAW,yBAAyB,OAAO;CACpD,IAAI,EAAK,SAAS,YAAY,MAAM,QAAQ,EAAK,IAAI,GAAG,OAAO;CAG/D,IAAM,IAAQ,EAAK;CAYnB,OAVE,EAAK,SAAS,WACd,EAAK,gBAAgB,MACrB,GAAO,SAAS,YAChB,MAAM,QAAQ,EAAM,IAAI,IAEjB,gBAEL,EAAK,SAAS,YAAY,CAAC,EAAK,SAAe,SAC/C,EAAK,SAAS,YAAY,EAAK,SAAS,YAAkB,WAC1D,EAAK,SAAS,YAAkB,YAC7B;AACT;AAEA,SAAgB,EAAe,GAAsC;CAEnE,OADI,MAAS,OAAa,aACnB,EAAmB,MAAK,MAAO,EAAI,UAAU,CAAI,GAAG,SAAS;AACtE;AAGA,SAAgB,EAAc,GAA4B;CACxD,IAAM,IAAU,EAAK,QAAS,EAAK,OAAkC;CACrE,OAAO,MAAM,QAAQ,CAAO,IAAK,IAAuB,CAAC;AAC3D;AAGA,SAAgB,EACd,GACA,GACY;CACZ,IAAM,IAAmB;EACvB,OAAO,EAAK;EACZ,aAAa,EAAK;CACpB,GACM,IAAkB,EAAc,CAAI,GAEpC,IAAU,EAAgB,SAAS,IAAI,IAAkB,CAAC,UAAU;CAC1E,QAAQ,GAAR;EACE,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GAEH,AADA,EAAK,OAAO,UACZ,EAAK,OAAO;GACZ;EACF,KAAK;GAGH,AAFA,EAAK,OAAO,SACZ,EAAK,QAAQ;IAAE,MAAM;IAAU,MAAM;GAAQ,GAC7C,EAAK,cAAc;GACnB;EACF,KAAK;GAEH,AADA,EAAK,OAAO,UACZ,EAAK,SAAS;GACd;CACJ;CACA,OAAO;AACT;AAGA,SAAgB,EACd,GACA,GACQ;CACR,IAAM,IACJ,EACG,YAAY,EACZ,QAAQ,gBAAgB,EAAE,EAC1B,KAAK,EACL,MAAM,KAAK,EACX,OAAO,OAAO,EACd,KAAK,GAAG,MAAO,MAAM,IAAI,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAE,EACpE,KAAK,EAAE,KAAK,SACb,IAAM,GACN,IAAI;CACR,OAAO,EAAa,IAAI,CAAG,IAEzB,AADA,KAAK,GACL,IAAM,GAAG,IAAO;CAElB,OAAO;AACT;AAQA,SAAgB,EAAoB,GAAqB;CACvD,IAAM,IAAW,EAAI,QAAQ,kBAAkB,EAAE;CACjD,OAAO,SAAS,KAAK,CAAQ,IAAI,IAAI,MAAa;AACpD"}
+{"version":3,"file":"schemaFieldUtils.js","names":[],"sources":["../../../src/components/FormTemplateEditor/schemaFieldUtils.ts"],"sourcesContent":["import { RJSFSchema } from '@rjsf/utils'\n\n/**\n * The set of property shapes the simple editor knows how to author. Anything\n * outside this set surfaces in the UI as \"advanced\" and must be edited via the\n * raw JSON Schema view.\n */\nexport type SimpleFieldType =\n  | 'text'\n  | 'number'\n  | 'boolean'\n  | 'choice'\n  | 'multiChoice'\n  | 'file'\n\nexport const FIELD_TYPE_OPTIONS: { value: SimpleFieldType; label: string }[] = [\n  { value: 'text', label: 'Text' },\n  { value: 'number', label: 'Number' },\n  { value: 'boolean', label: 'Yes / No' },\n  { value: 'choice', label: 'Single choice' },\n  { value: 'multiChoice', label: 'Multiple choice (select many)' },\n  { value: 'file', label: 'File upload' },\n]\n\nexport function detectFieldType(\n  prop: RJSFSchema | undefined,\n): SimpleFieldType | null {\n  if (!prop || typeof prop !== 'object') return null\n  if (prop.format === 'synapse-filehandle-id') return 'file'\n  if (prop.type === 'string' && Array.isArray(prop.enum)) return 'choice'\n  // RJSF renders an array as a multi-select only when `uniqueItems` is set; without it the\n  // property renders as a repeatable list, which the simple editor does not author.\n  const items = prop.items as RJSFSchema | undefined\n  if (\n    prop.type === 'array' &&\n    prop.uniqueItems === true &&\n    items?.type === 'string' &&\n    Array.isArray(items.enum)\n  ) {\n    return 'multiChoice'\n  }\n  if (prop.type === 'string' && !prop.format) return 'text'\n  if (prop.type === 'number' || prop.type === 'integer') return 'number'\n  if (prop.type === 'boolean') return 'boolean'\n  return null\n}\n\nexport function fieldTypeLabel(type: SimpleFieldType | null): string {\n  if (type === null) return 'Advanced'\n  return FIELD_TYPE_OPTIONS.find(opt => opt.value === type)?.label ?? 'Advanced'\n}\n\n/** The options a 'choice' (`enum`) or 'multiChoice' (`items.enum`) property declares; empty if none. */\nexport function choiceOptions(prop: RJSFSchema): string[] {\n  const options = prop.enum ?? (prop.items as RJSFSchema | undefined)?.enum\n  return Array.isArray(options) ? (options as string[]) : []\n}\n\n/** Build a fresh schema body for the given simple type, preserving label and help text. */\nexport function applyFieldType(\n  prev: RJSFSchema,\n  type: SimpleFieldType,\n): RJSFSchema {\n  const next: RJSFSchema = {\n    title: prev.title,\n    description: prev.description,\n  }\n  const existingChoices = choiceOptions(prev)\n  // A choice field needs at least one option to be answerable.\n  const choices = existingChoices.length > 0 ? existingChoices : ['Option 1']\n  switch (type) {\n    case 'text':\n      next.type = 'string'\n      break\n    case 'number':\n      next.type = 'number'\n      break\n    case 'boolean':\n      next.type = 'boolean'\n      break\n    case 'choice':\n      next.type = 'string'\n      next.enum = choices\n      break\n    case 'multiChoice':\n      next.type = 'array'\n      next.items = { type: 'string', enum: choices }\n      next.uniqueItems = true\n      break\n    case 'file':\n      next.type = 'number'\n      next.format = 'synapse-filehandle-id'\n      break\n  }\n  return next\n}\n\n/** Derive a unique camelCase JSON property key from a display title. */\nexport function generatePropertyKey(\n  title: string,\n  existingKeys: Set<string>,\n): string {\n  const base =\n    title\n      .toLowerCase()\n      .replaceAll(/[^a-z0-9\\s]/g, '')\n      .trim()\n      .split(/\\s+/)\n      .filter(Boolean)\n      .map((w, i) => (i === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)))\n      .join('') || 'field'\n  let key = base\n  let i = 1\n  while (existingKeys.has(key)) {\n    i += 1\n    key = `${base}${i}`\n  }\n  return key\n}\n\n/**\n * Sanitize a manually-typed property key: strip characters that aren't\n * valid in a JSON Schema property key used as a JS identifier, preserving\n * the editor's casing (unlike `generatePropertyKey`, which derives a\n * camelCase key from a display title).\n */\nexport function sanitizePropertyKey(raw: string): string {\n  const stripped = raw.replaceAll(/[^A-Za-z0-9_]/g, '')\n  return /^[0-9]/.test(stripped) ? `_${stripped}` : stripped\n}\n"],"mappings":";AAeA,IAAa,IAAkE;CAC7E;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAU,OAAO;CAAS;CACnC;EAAE,OAAO;EAAW,OAAO;CAAW;CACtC;EAAE,OAAO;EAAU,OAAO;CAAgB;CAC1C;EAAE,OAAO;EAAe,OAAO;CAAgC;CAC/D;EAAE,OAAO;EAAQ,OAAO;CAAc;AACxC;AAEA,SAAgB,EACd,GACwB;CACxB,IAAI,CAAC,KAAQ,OAAO,KAAS,UAAU,OAAO;CAC9C,IAAI,EAAK,WAAW,yBAAyB,OAAO;CACpD,IAAI,EAAK,SAAS,YAAY,MAAM,QAAQ,EAAK,IAAI,GAAG,OAAO;CAG/D,IAAM,IAAQ,EAAK;CAYnB,OAVE,EAAK,SAAS,WACd,EAAK,gBAAgB,MACrB,GAAO,SAAS,YAChB,MAAM,QAAQ,EAAM,IAAI,IAEjB,gBAEL,EAAK,SAAS,YAAY,CAAC,EAAK,SAAe,SAC/C,EAAK,SAAS,YAAY,EAAK,SAAS,YAAkB,WAC1D,EAAK,SAAS,YAAkB,YAC7B;AACT;AAEA,SAAgB,EAAe,GAAsC;CAEnE,OADI,MAAS,OAAa,aACnB,EAAmB,MAAK,MAAO,EAAI,UAAU,CAAI,GAAG,SAAS;AACtE;AAGA,SAAgB,EAAc,GAA4B;CACxD,IAAM,IAAU,EAAK,QAAS,EAAK,OAAkC;CACrE,OAAO,MAAM,QAAQ,CAAO,IAAK,IAAuB,CAAC;AAC3D;AAGA,SAAgB,EACd,GACA,GACY;CACZ,IAAM,IAAmB;EACvB,OAAO,EAAK;EACZ,aAAa,EAAK;CACpB,GACM,IAAkB,EAAc,CAAI,GAEpC,IAAU,EAAgB,SAAS,IAAI,IAAkB,CAAC,UAAU;CAC1E,QAAQ,GAAR;EACE,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GACH,EAAK,OAAO;GACZ;EACF,KAAK;GAEH,AADA,EAAK,OAAO,UACZ,EAAK,OAAO;GACZ;EACF,KAAK;GAGH,AAFA,EAAK,OAAO,SACZ,EAAK,QAAQ;IAAE,MAAM;IAAU,MAAM;GAAQ,GAC7C,EAAK,cAAc;GACnB;EACF,KAAK;GAEH,AADA,EAAK,OAAO,UACZ,EAAK,SAAS;GACd;CACJ;CACA,OAAO;AACT;AAGA,SAAgB,EACd,GACA,GACQ;CACR,IAAM,IACJ,EACG,YAAY,EACZ,WAAW,gBAAgB,EAAE,EAC7B,KAAK,EACL,MAAM,KAAK,EACX,OAAO,OAAO,EACd,KAAK,GAAG,MAAO,MAAM,IAAI,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAE,EACpE,KAAK,EAAE,KAAK,SACb,IAAM,GACN,IAAI;CACR,OAAO,EAAa,IAAI,CAAG,IAEzB,AADA,KAAK,GACL,IAAM,GAAG,IAAO;CAElB,OAAO;AACT;AAQA,SAAgB,EAAoB,GAAqB;CACvD,IAAM,IAAW,EAAI,WAAW,kBAAkB,EAAE;CACpD,OAAO,SAAS,KAAK,CAAQ,IAAI,IAAI,MAAa;AACpD"}

package/dist/components/FullTextSearch/FullTextSearch.js

@@ -1,11 +1,11 @@
 import { useDebouncedEffect as e } from "../../utils/hooks/useDebouncedEffect.js";
+import { useQueryVisualizationContext as t } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../utils/hooks/index.js";
-import { HelpPopover as t } from "../HelpPopover/HelpPopover.js";
-import n from "../IconSvg/IconSvg.js";
-import { useQueryContext as r } from "../QueryContext/QueryContext.js";
+import { HelpPopover as n } from "../HelpPopover/HelpPopover.js";
+import r from "../IconSvg/IconSvg.js";
+import { useQueryContext as i } from "../QueryContext/QueryContext.js";
 import "../QueryContext/index.js";
-import { useGetQueryMetadata as i } from "../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as a } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useGetQueryMetadata as a } from "../QueryWrapper/useGetQueryMetadata.js";
 import "../QueryVisualizationWrapper/index.js";
 import { updateQueryUsingSearchTerm as o } from "./FullTextSearchUtils.js";
 import { IconSvgButton as s } from "../IconSvgButton.js";
@@ -15,7 +15,7 @@ import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/FullTextSearch/FullTextSearch.tsx
 var _ = 3, v = 300;
 function y({ ftsConfig: y }) {
-	let { executeQueryRequest: b } = r(), { showSearchBar: x } = a(), [S, C] = u(""), [w, T] = u([]), E = l(null), D = y?.minSearchQueryLength ?? _, { data: O } = i(), k = O?.columnModels;
+	let { executeQueryRequest: b } = i(), { showSearchBar: x } = t(), [S, C] = u(""), [w, T] = u([]), E = l(null), D = y?.minSearchQueryLength ?? _, { data: O } = a(), k = O?.columnModels;
 	c(() => {
 		(!y?.getSuggestions || S.trim().length < D) && T([]);
 	}, [
@@ -35,7 +35,7 @@ function y({ ftsConfig: y }) {
 		e.preventDefault(), S.trim().length < D ? E.current?.setCustomValidity(`Search term must have a minimum of ${D} characters`) : A(S);
 	}, M = (e) => {
 		E.current?.setCustomValidity(""), C(e.currentTarget.value);
-	}, N = /* @__PURE__ */ h(n, {
+	}, N = /* @__PURE__ */ h(r, {
 		icon: "search",
 		wrap: !1,
 		sx: {
@@ -48,7 +48,7 @@ function y({ ftsConfig: y }) {
 		onClick: () => {
 			C(""), T([]);
 		}
-	}), y?.searchHelpURL && /* @__PURE__ */ h(t, {
+	}), y?.searchHelpURL && /* @__PURE__ */ h(n, {
 		markdownText: "This search bar is powered by MySQL Full Text Search.",
 		helpUrl: y.searchHelpURL,
 		placement: "left"