synapse-react-client 4.0.18 → 4.0.20

package/dist/components/MissingQueryResultsWarning/MissingQueryResultsWarning.js.map

@@ -1 +1 @@
-{"version":3,"file":"MissingQueryResultsWarning.js","names":[],"sources":["../../../src/components/MissingQueryResultsWarning/MissingQueryResultsWarning.tsx"],"sourcesContent":["import { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { isEntityRefCollectionView } from '@/utils/functions/EntityTypeUtils'\nimport { WarningSharp } from '@mui/icons-material'\nimport { Typography } from '@mui/material'\nimport { QueryBundleRequest, Table } from '@sage-bionetworks/synapse-types'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\n\nconst DATASETS_CURRENT_VERSION_HELP =\n  'Files may be unavailable because you do not have permission to see them, they have been deleted, or the Dataset has been misconfigured.'\n\n// Help text for snapshot does not indicate that files were deleted, because the deleted file would have been captured in the snapshot\nconst DATASETS_SNAPSHOT_HELP =\n  'Files may be unavailable because you do not have permission to see them or the Dataset was misconfigured.'\n\nexport type MissingQueryResultsWarningProps = {\n  entity: Table\n  versionNumber?: number\n}\n\n/**\n * If possible, this component will render a warning message if results may be missing from the query due to user permissions or\n * entities being deleted. If not possible, it will render an empty fragment.\n */\nfunction MissingQueryResultsWarning({\n  entity,\n}: MissingQueryResultsWarningProps) {\n  // Currently, Datasets and Dataset collections are the only table type for which we can reliably get this info.\n  // Other cases will need a new service, tracked by PLFM-7046\n  const isMissingResultsCalculable = entity && isEntityRefCollectionView(entity)\n\n  const request: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    query: {\n      sql: `SELECT * FROM ${entity.id!}${\n        !entity.isLatestVersion && entity.versionNumber\n          ? `.${entity.versionNumber}`\n          : ''\n      }`,\n    },\n    entityId: entity.id!,\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_COUNT,\n  }\n\n  const { data: queryResult } = useGetQueryResultBundleWithAsyncStatus(\n    request,\n    {\n      enabled: isMissingResultsCalculable,\n    },\n  )\n  if (isMissingResultsCalculable && queryResult && entity) {\n    const totalVisibleResults = queryResult.responseBody!.queryCount!\n    const totalResults = entity.items?.length ?? 0\n\n    if (totalVisibleResults >= totalResults) {\n      // All the results are visible, so there is no need to show a warning.\n      // SWC-6727 / PLFM-8326 - `totalVisibleResults` should never be greater than `totalResults`, but in case it is (e.g. stale cache),\n      // don't show the warning.\n      return <></>\n    }\n\n    const difference = totalResults - totalVisibleResults\n\n    let helpMessage = ''\n\n    if (entity.isLatestVersion) {\n      helpMessage = DATASETS_CURRENT_VERSION_HELP\n    } else {\n      helpMessage = DATASETS_SNAPSHOT_HELP\n    }\n\n    return (\n      <Typography\n        component={'div'}\n        className=\"SRC-centerContent\"\n        style={{\n          marginLeft: 10,\n        }}\n        variant=\"smallText1\"\n        color=\"textSecondary\"\n      >\n        <WarningSharp\n          className=\"SRC-color-warning\"\n          style={{ fontSize: '16px' }}\n        />\n        {difference.toLocaleString() + ' Unavailable'}\n        <HelpPopover\n          className=\"SRC-margin-left-5\"\n          markdownText={helpMessage}\n          placement=\"right\"\n        ></HelpPopover>\n      </Typography>\n    )\n  } else {\n    return <></>\n  }\n}\n\nexport default MissingQueryResultsWarning\n"],"mappings":";;;;;;;;;;AAQA,IAAM,IACJ,2IAGI,IACJ;AAWF,SAAS,EAA2B,EAClC,aACkC;CAGlC,IAAM,IAA6B,KAAU,EAA0B,EAAO,EAexE,EAAE,MAAM,MAAgB,EAC5B;EAbA,cAAc;EACd,OAAO,EACL,KAAK,iBAAiB,EAAO,KAC3B,CAAC,EAAO,mBAAmB,EAAO,gBAC9B,IAAI,EAAO,kBACX,MAEP;EACD,UAAU,EAAO;EACjB,UAAU;EAIV,EACA,EACE,SAAS,GACV,CACF;AACD,KAAI,KAA8B,KAAe,GAAQ;EACvD,IAAM,IAAsB,EAAY,aAAc,YAChD,IAAe,EAAO,OAAO,UAAU;AAE7C,MAAI,KAAuB,EAIzB,QAAO,kBAAA,GAAA,EAAK,CAAA;EAGd,IAAM,IAAa,IAAe,GAE9B,IAAc;AAQlB,SANA,AAGE,IAHE,EAAO,kBACK,IAEA,GAId,kBAAC,GAAD;GACE,WAAW;GACX,WAAU;GACV,OAAO,EACL,YAAY,IACb;GACD,SAAQ;GACR,OAAM;aAPR;IASE,kBAAC,GAAD;KACE,WAAU;KACV,OAAO,EAAE,UAAU,QAAQ;KAC3B,CAAA;IACD,EAAW,gBAAgB,GAAG;IAC/B,kBAAC,GAAD;KACE,WAAU;KACV,cAAc;KACd,WAAU;KACG,CAAA;IACJ;;OAGf,QAAO,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"MissingQueryResultsWarning.js","names":[],"sources":["../../../src/components/MissingQueryResultsWarning/MissingQueryResultsWarning.tsx"],"sourcesContent":["import { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { isEntityRefCollectionView } from '@/utils/functions/EntityTypeUtils'\nimport { WarningSharp } from '@mui/icons-material'\nimport { Typography } from '@mui/material'\nimport { QueryBundleRequest, Table } from '@sage-bionetworks/synapse-types'\nimport { HelpPopover } from '../HelpPopover/HelpPopover'\n\nconst DATASETS_CURRENT_VERSION_HELP =\n  'Files may be unavailable because you do not have permission to see them, they have been deleted, or the Dataset has been misconfigured.'\n\n// Help text for snapshot does not indicate that files were deleted, because the deleted file would have been captured in the snapshot\nconst DATASETS_SNAPSHOT_HELP =\n  'Files may be unavailable because you do not have permission to see them or the Dataset was misconfigured.'\n\nexport type MissingQueryResultsWarningProps = {\n  entity: Table\n  versionNumber?: number\n}\n\n/**\n * If possible, this component will render a warning message if results may be missing from the query due to user permissions or\n * entities being deleted. If not possible, it will render an empty fragment.\n */\nfunction MissingQueryResultsWarning({\n  entity,\n}: MissingQueryResultsWarningProps) {\n  // Currently, Datasets and Dataset collections are the only table type for which we can reliably get this info.\n  // Other cases will need a new service, tracked by PLFM-7046\n  const isMissingResultsCalculable = entity && isEntityRefCollectionView(entity)\n\n  const request: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    query: {\n      sql: `SELECT * FROM ${entity.id!}${\n        !entity.isLatestVersion && entity.versionNumber\n          ? `.${entity.versionNumber}`\n          : ''\n      }`,\n    },\n    entityId: entity.id!,\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_COUNT,\n  }\n\n  const { data: queryResult } = useGetQueryResultBundleWithAsyncStatus(\n    request,\n    {\n      enabled: isMissingResultsCalculable,\n    },\n  )\n  if (isMissingResultsCalculable && queryResult && entity) {\n    const totalVisibleResults = queryResult.responseBody!.queryCount!\n    const totalResults = entity.items?.length ?? 0\n\n    if (totalVisibleResults >= totalResults) {\n      // All the results are visible, so there is no need to show a warning.\n      // SWC-6727 / PLFM-8326 - `totalVisibleResults` should never be greater than `totalResults`, but in case it is (e.g. stale cache),\n      // don't show the warning.\n      return <></>\n    }\n\n    const difference = totalResults - totalVisibleResults\n\n    let helpMessage = ''\n\n    if (entity.isLatestVersion) {\n      helpMessage = DATASETS_CURRENT_VERSION_HELP\n    } else {\n      helpMessage = DATASETS_SNAPSHOT_HELP\n    }\n\n    return (\n      <Typography\n        component={'div'}\n        className=\"SRC-centerContent\"\n        style={{\n          marginLeft: 10,\n        }}\n        variant=\"smallText1\"\n        color=\"textSecondary\"\n      >\n        <WarningSharp\n          className=\"SRC-color-warning\"\n          style={{ fontSize: '16px' }}\n        />\n        {difference.toLocaleString() + ' Unavailable'}\n        <HelpPopover\n          className=\"SRC-margin-left-5\"\n          markdownText={helpMessage}\n          placement=\"right\"\n        ></HelpPopover>\n      </Typography>\n    )\n  } else {\n    return <></>\n  }\n}\n\nexport default MissingQueryResultsWarning\n"],"mappings":";;;;;;;;;;AAQA,IAAM,IACJ,2IAGI,IACJ;AAWF,SAAS,EAA2B,EAClC,aACkC;CAGlC,IAAM,IAA6B,KAAU,EAA0B,CAAM,GAevE,EAAE,MAAM,MAAgB,EAC5B;EAbA,cAAc;EACd,OAAO,EACL,KAAK,iBAAiB,EAAO,KAC3B,CAAC,EAAO,mBAAmB,EAAO,gBAC9B,IAAI,EAAO,kBACX,KAER;EACA,UAAU,EAAO;EACjB,UAAU;CAIV,GACA,EACE,SAAS,EACX,CACF;CACA,IAAI,KAA8B,KAAe,GAAQ;EACvD,IAAM,IAAsB,EAAY,aAAc,YAChD,IAAe,EAAO,OAAO,UAAU;EAE7C,IAAI,KAAuB,GAIzB,OAAO,kBAAA,GAAA,CAAI,CAAA;EAGb,IAAM,IAAa,IAAe,GAE9B,IAAc;EAQlB,OANA,AAGE,IAHE,EAAO,kBACK,IAEA,GAId,kBAAC,GAAD;GACE,WAAW;GACX,WAAU;GACV,OAAO,EACL,YAAY,GACd;GACA,SAAQ;GACR,OAAM;aAPR;IASE,kBAAC,GAAD;KACE,WAAU;KACV,OAAO,EAAE,UAAU,OAAO;IAC3B,CAAA;IACA,EAAW,eAAe,IAAI;IAC/B,kBAAC,GAAD;KACE,WAAU;KACV,cAAc;KACd,WAAU;IACE,CAAA;GACJ;;CAEhB,OACE,OAAO,kBAAA,GAAA,CAAI,CAAA;AAEf"}

package/dist/components/ModalDownload/ModalDownload.FormSchema.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDownload.FormSchema.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.FormSchema.ts"],"sourcesContent":["import { UiSchema } from '@rjsf/utils'\nimport { JSONSchema7 } from 'json-schema'\n\nexport const writeHeaderOption = 'First line is the columns names.'\nexport const includeRowIdAndRowVersionOption =\n  'Include row metadata (Row Id and Row Version).'\nexport const csvOption = 'Comma Separated Values (CSV)'\nexport const tsvOption = 'Tab Separated Values (TSV)'\n\n// Step 1\nconst stepOneFormSchema: JSONSchema7 = {\n  type: 'object',\n  properties: {\n    'File Type': {\n      type: 'string',\n      oneOf: [\n        {\n          const: csvOption,\n          title: csvOption,\n        },\n        {\n          const: tsvOption,\n          title: tsvOption,\n        },\n      ],\n    },\n    Contents: {\n      type: 'array',\n      title: 'Contents',\n      items: {\n        type: 'string',\n        enum: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n      uniqueItems: true,\n    },\n  },\n}\n\nconst stepOneFormUISchema: UiSchema = {\n  'File Type': {\n    'ui:widget': 'radio',\n  },\n  Contents: {\n    'ui:widget': 'checkboxes',\n  },\n}\n\n// Step 2\nconst stepTwoFormSchema: JSONSchema7 = {\n  description:\n    'File is ready for download. Select the download button to download the file.',\n  type: 'object',\n}\n\nconst stepTwoFormUISchema: UiSchema = {}\n\nexport const formSchemaArray = [stepOneFormSchema, stepTwoFormSchema]\nexport const formSchemaUIArray = [stepOneFormUISchema, stepTwoFormUISchema]\n"],"mappings":";AAGA,IAAa,IAAoB,oCACpB,IACX,kDACW,IAAY,gCACZ,IAAY,8BAGnB,IAAiC;CACrC,MAAM;CACN,YAAY;EACV,aAAa;GACX,MAAM;GACN,OAAO,CACL;IACE,OAAO;IACP,OAAO;IACR,EACD;IACE,OAAO;IACP,OAAO;IACR,CACF;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACP,OAAO;IACL,MAAM;IACN,MAAM,CAAC,GAAmB,EAAgC;IAC3D;GACD,aAAa;GACd;EACF;CACF,EAEK,IAAgC;CACpC,aAAa,EACX,aAAa,SACd;CACD,UAAU,EACR,aAAa,cACd;CACF,EAGK,IAAiC;CACrC,aACE;CACF,MAAM;CACP,EAEK,IAAgC,EAAE,EAE3B,IAAkB,CAAC,GAAmB,EAAkB,EACxD,IAAoB,CAAC,GAAqB,EAAoB"}
+{"version":3,"file":"ModalDownload.FormSchema.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.FormSchema.ts"],"sourcesContent":["import { UiSchema } from '@rjsf/utils'\nimport { JSONSchema7 } from 'json-schema'\n\nexport const writeHeaderOption = 'First line is the columns names.'\nexport const includeRowIdAndRowVersionOption =\n  'Include row metadata (Row Id and Row Version).'\nexport const csvOption = 'Comma Separated Values (CSV)'\nexport const tsvOption = 'Tab Separated Values (TSV)'\n\n// Step 1\nconst stepOneFormSchema: JSONSchema7 = {\n  type: 'object',\n  properties: {\n    'File Type': {\n      type: 'string',\n      oneOf: [\n        {\n          const: csvOption,\n          title: csvOption,\n        },\n        {\n          const: tsvOption,\n          title: tsvOption,\n        },\n      ],\n    },\n    Contents: {\n      type: 'array',\n      title: 'Contents',\n      items: {\n        type: 'string',\n        enum: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n      uniqueItems: true,\n    },\n  },\n}\n\nconst stepOneFormUISchema: UiSchema = {\n  'File Type': {\n    'ui:widget': 'radio',\n  },\n  Contents: {\n    'ui:widget': 'checkboxes',\n  },\n}\n\n// Step 2\nconst stepTwoFormSchema: JSONSchema7 = {\n  description:\n    'File is ready for download. Select the download button to download the file.',\n  type: 'object',\n}\n\nconst stepTwoFormUISchema: UiSchema = {}\n\nexport const formSchemaArray = [stepOneFormSchema, stepTwoFormSchema]\nexport const formSchemaUIArray = [stepOneFormUISchema, stepTwoFormUISchema]\n"],"mappings":";AAGA,IAAa,IAAoB,oCACpB,IACX,kDACW,IAAY,gCACZ,IAAY,8BAGnB,IAAiC;CACrC,MAAM;CACN,YAAY;EACV,aAAa;GACX,MAAM;GACN,OAAO,CACL;IACE,OAAO;IACP,OAAO;GACT,GACA;IACE,OAAO;IACP,OAAO;GACT,CACF;EACF;EACA,UAAU;GACR,MAAM;GACN,OAAO;GACP,OAAO;IACL,MAAM;IACN,MAAM,CAAC,GAAmB,CAA+B;GAC3D;GACA,aAAa;EACf;CACF;AACF,GAEM,IAAgC;CACpC,aAAa,EACX,aAAa,QACf;CACA,UAAU,EACR,aAAa,aACf;AACF,GAGM,IAAiC;CACrC,aACE;CACF,MAAM;AACR,GAEM,IAAgC,CAAC,GAE1B,IAAkB,CAAC,GAAmB,CAAiB,GACvD,IAAoB,CAAC,GAAqB,CAAmB"}

package/dist/components/ModalDownload/ModalDownload.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDownload.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { SynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Button } from '@mui/material'\nimport Form, { IChangeEvent } from '@rjsf/core'\nimport validator from '@rjsf/validator-ajv8'\nimport {\n  DownloadFromTableRequest,\n  DownloadFromTableResult,\n  QueryBundleRequest,\n  SortItem,\n} from '@sage-bionetworks/synapse-types'\nimport { Component, ContextType, CSSProperties, Fragment } from 'react'\nimport { DialogBase } from '../DialogBase'\nimport SynapseFormCheckboxesWidget from '../SynapseForm/SynapseFormCheckboxesWidget'\nimport SynapseFormCheckboxWidget from '../SynapseForm/SynapseFormCheckboxWidget'\nimport SynapseFormRadioWidget from '../SynapseForm/SynapseFormRadioWidget'\nimport {\n  csvOption,\n  formSchemaArray,\n  formSchemaUIArray,\n  includeRowIdAndRowVersionOption,\n  writeHeaderOption,\n} from './ModalDownload.FormSchema'\n\ntype ModalDownloadState = {\n  isLoading: boolean\n  step: number\n  data?: DownloadFromTableResult\n  formData: Record<string, unknown>\n}\n\nexport type ModalDownloadProps = {\n  onClose: (...args: any[]) => void\n  includeEntityEtag?: boolean\n  queryBundleRequest?: QueryBundleRequest // either the query bundle request needs to be provided, or getLastQueryRequest\n  getLastQueryRequest?: () => QueryBundleRequest\n  offset?: number\n  limit?: number\n  sort?: SortItem[]\n}\n\nexport class ModalDownload extends Component<\n  ModalDownloadProps,\n  ModalDownloadState\n> {\n  static contextType = SynapseContext\n  declare context: NonNullable<ContextType<typeof SynapseContext>>\n\n  constructor(props: ModalDownloadProps) {\n    super(props)\n    this.state = {\n      isLoading: false,\n      step: 0,\n      formData: {\n        'File Type': csvOption,\n        Contents: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n    }\n  }\n\n  handleSubmit = (event: IChangeEvent) => {\n    if (this.state.step === 0) {\n      this.handleDownloadSetup(event)\n    } else {\n      this.onDownload()\n    }\n  }\n\n  handleDownloadSetup = (event: IChangeEvent) => {\n    this.setState({\n      isLoading: true,\n    })\n    const { formData } = event\n    const fileType = formData['File Type']\n    const contents = formData.Contents as string[]\n    const { queryBundleRequest, getLastQueryRequest } = this.props\n    const separator = fileType === csvOption ? ',' : '\\t'\n    const writeHeader = contents.includes(writeHeaderOption)\n    const includeRowIdAndRowVersion = contents.includes(\n      includeRowIdAndRowVersionOption,\n    )\n    const queryRequest = queryBundleRequest ?? getLastQueryRequest!()\n    const sql = queryRequest.query.sql\n    const downloadFromTableRequest: DownloadFromTableRequest = {\n      sql,\n      entityId: parseEntityIdFromSqlStatement(sql),\n      selectedFacets: queryRequest.query.selectedFacets,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.DownloadFromTableRequest',\n      writeHeader,\n      includeRowIdAndRowVersion,\n      csvTableDescriptor: { separator },\n      additionalFilters: queryRequest.query.additionalFilters,\n    }\n    SynapseClient.createTableCsvForDownload(\n      downloadFromTableRequest,\n      this.context.accessToken,\n    )\n      .then(data => {\n        this.setState({\n          isLoading: false,\n          step: 1,\n          data,\n        })\n      })\n      .catch(err => {\n        console.log('Error getDownloadFromTableRequest: ', err)\n      })\n  }\n\n  onDownload = () => {\n    const { data } = this.state\n    // data will always be defined if calling this function\n    SynapseClient.getFileHandleByIdURL(\n      data!.resultsFileHandleId,\n      this.context.accessToken,\n    ).then(url => {\n      window.location.href = url\n      this.props.onClose()\n    })\n  }\n\n  handleChange = (event: IChangeEvent) => {\n    const { formData } = event\n    this.setState({\n      formData,\n    })\n  }\n\n  render() {\n    const spinnerStyle: CSSProperties = {\n      height: 50,\n      width: 50,\n      backgroundSize: 50,\n    }\n    return (\n      <DialogBase\n        open={true}\n        onCancel={this.props.onClose}\n        title=\"Download query results\"\n        content={\n          <>\n            <Form\n              validator={validator}\n              id=\"modal-download-form\"\n              schema={formSchemaArray[this.state.step]}\n              uiSchema={formSchemaUIArray[this.state.step]}\n              onChange={this.handleChange}\n              formData={this.state.formData}\n              onSubmit={this.handleSubmit}\n              widgets={{\n                CheckboxWidget: SynapseFormCheckboxWidget,\n                CheckboxesWidget: SynapseFormCheckboxesWidget,\n                RadioWidget: SynapseFormRadioWidget,\n              }}\n            >\n              {this.state.isLoading && (\n                <div className=\"SRC-centerAndJustifyContent\">\n                  <div className=\"SRC-center-text\">\n                    <p> Creating the File </p>\n                    <div style={spinnerStyle} className=\"spinner\" />\n                    <p> Loading... </p>\n                  </div>\n                </div>\n              )}\n              <Fragment />\n            </Form>\n          </>\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={this.props.onClose}\n            >\n              Cancel\n            </Button>\n            <Button\n              form=\"modal-download-form\"\n              type=\"submit\"\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              {this.state.step === 0 ? 'Next' : 'Download'}\n            </Button>\n          </>\n        }\n      />\n    )\n  }\n}\n\nexport default ModalDownload\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,IAAb,cAAmC,EAGjC;CACA,OAAO,cAAc;CAGrB,YAAY,GAA2B;AAErC,EADA,MAAM,EAAM,EACZ,KAAK,QAAQ;GACX,WAAW;GACX,MAAM;GACN,UAAU;IACR,aAAa;IACb,UAAU,CAAC,GAAmB,EAAgC;IAC/D;GACF;;CAGH,gBAAgB,MAAwB;AACtC,EAAI,KAAK,MAAM,SAAS,IACtB,KAAK,oBAAoB,EAAM,GAE/B,KAAK,YAAY;;CAIrB,uBAAuB,MAAwB;AAC7C,OAAK,SAAS,EACZ,WAAW,IACZ,CAAC;EACF,IAAM,EAAE,gBAAa,GACf,IAAW,EAAS,cACpB,IAAW,EAAS,UACpB,EAAE,uBAAoB,2BAAwB,KAAK,OACnD,IAAY,MAAA,iCAAyB,MAAM,KAC3C,IAAc,EAAS,SAAS,EAAkB,EAClD,IAA4B,EAAS,SACzC,EACD,EACK,IAAe,KAAsB,GAAsB,EAC3D,IAAM,EAAa,MAAM,KACzB,IAAqD;GACzD;GACA,UAAU,EAA8B,EAAI;GAC5C,gBAAgB,EAAa,MAAM;GACnC,cACE;GACF;GACA;GACA,oBAAoB,EAAE,cAAW;GACjC,mBAAmB,EAAa,MAAM;GACvC;AACD,IAAc,0BACZ,GACA,KAAK,QAAQ,YACd,CACE,MAAK,MAAQ;AACZ,QAAK,SAAS;IACZ,WAAW;IACX,MAAM;IACN;IACD,CAAC;IACF,CACD,OAAM,MAAO;AACZ,WAAQ,IAAI,uCAAuC,EAAI;IACvD;;CAGN,mBAAmB;EACjB,IAAM,EAAE,YAAS,KAAK;AAEtB,IAAc,qBACZ,EAAM,qBACN,KAAK,QAAQ,YACd,CAAC,MAAK,MAAO;AAEZ,GADA,OAAO,SAAS,OAAO,GACvB,KAAK,MAAM,SAAS;IACpB;;CAGJ,gBAAgB,MAAwB;EACtC,IAAM,EAAE,gBAAa;AACrB,OAAK,SAAS,EACZ,aACD,CAAC;;CAGJ,SAAS;AAMP,SACE,kBAAC,GAAD;GACE,MAAM;GACN,UAAU,KAAK,MAAM;GACrB,OAAM;GACN,SACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;IACa;IACX,IAAG;IACH,QAAQ,EAAgB,KAAK,MAAM;IACnC,UAAU,EAAkB,KAAK,MAAM;IACvC,UAAU,KAAK;IACf,UAAU,KAAK,MAAM;IACrB,UAAU,KAAK;IACf,SAAS;KACP,gBAAgB;KAChB,kBAAkB;KAClB,aAAa;KACd;cAZH,CAcG,KAAK,MAAM,aACV,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD,EAAA,UAAG,uBAAuB,CAAA;OAC1B,kBAAC,OAAD;QAAK,OAAO;SA7B1B,QAAQ;SACR,OAAO;SACP,gBAAgB;SA2BU;QAAc,WAAU;QAAY,CAAA;OAChD,kBAAC,KAAD,EAAA,UAAG,gBAAgB,CAAA;OACf;;KACF,CAAA,EAER,kBAAC,GAAD,EAAY,CAAA,CACP;OACN,CAAA;GAEL,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,SAAS,KAAK,MAAM;cACrB;IAEQ,CAAA,EACT,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,OAAM;cAEL,KAAK,MAAM,SAAS,IAAI,SAAS;IAC3B,CAAA,CACR,EAAA,CAAA;GAEL,CAAA"}
+{"version":3,"file":"ModalDownload.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { SynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Button } from '@mui/material'\nimport Form, { IChangeEvent } from '@rjsf/core'\nimport validator from '@rjsf/validator-ajv8'\nimport {\n  DownloadFromTableRequest,\n  DownloadFromTableResult,\n  QueryBundleRequest,\n  SortItem,\n} from '@sage-bionetworks/synapse-types'\nimport { Component, ContextType, CSSProperties, Fragment } from 'react'\nimport { DialogBase } from '../DialogBase'\nimport SynapseFormCheckboxesWidget from '../SynapseForm/SynapseFormCheckboxesWidget'\nimport SynapseFormCheckboxWidget from '../SynapseForm/SynapseFormCheckboxWidget'\nimport SynapseFormRadioWidget from '../SynapseForm/SynapseFormRadioWidget'\nimport {\n  csvOption,\n  formSchemaArray,\n  formSchemaUIArray,\n  includeRowIdAndRowVersionOption,\n  writeHeaderOption,\n} from './ModalDownload.FormSchema'\n\ntype ModalDownloadState = {\n  isLoading: boolean\n  step: number\n  data?: DownloadFromTableResult\n  formData: Record<string, unknown>\n}\n\nexport type ModalDownloadProps = {\n  onClose: (...args: any[]) => void\n  includeEntityEtag?: boolean\n  queryBundleRequest?: QueryBundleRequest // either the query bundle request needs to be provided, or getLastQueryRequest\n  getLastQueryRequest?: () => QueryBundleRequest\n  offset?: number\n  limit?: number\n  sort?: SortItem[]\n}\n\nexport class ModalDownload extends Component<\n  ModalDownloadProps,\n  ModalDownloadState\n> {\n  static contextType = SynapseContext\n  declare context: NonNullable<ContextType<typeof SynapseContext>>\n\n  constructor(props: ModalDownloadProps) {\n    super(props)\n    this.state = {\n      isLoading: false,\n      step: 0,\n      formData: {\n        'File Type': csvOption,\n        Contents: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n    }\n  }\n\n  handleSubmit = (event: IChangeEvent) => {\n    if (this.state.step === 0) {\n      this.handleDownloadSetup(event)\n    } else {\n      this.onDownload()\n    }\n  }\n\n  handleDownloadSetup = (event: IChangeEvent) => {\n    this.setState({\n      isLoading: true,\n    })\n    const { formData } = event\n    const fileType = formData['File Type']\n    const contents = formData.Contents as string[]\n    const { queryBundleRequest, getLastQueryRequest } = this.props\n    const separator = fileType === csvOption ? ',' : '\\t'\n    const writeHeader = contents.includes(writeHeaderOption)\n    const includeRowIdAndRowVersion = contents.includes(\n      includeRowIdAndRowVersionOption,\n    )\n    const queryRequest = queryBundleRequest ?? getLastQueryRequest!()\n    const sql = queryRequest.query.sql\n    const downloadFromTableRequest: DownloadFromTableRequest = {\n      sql,\n      entityId: parseEntityIdFromSqlStatement(sql),\n      selectedFacets: queryRequest.query.selectedFacets,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.DownloadFromTableRequest',\n      writeHeader,\n      includeRowIdAndRowVersion,\n      csvTableDescriptor: { separator },\n      additionalFilters: queryRequest.query.additionalFilters,\n    }\n    SynapseClient.createTableCsvForDownload(\n      downloadFromTableRequest,\n      this.context.accessToken,\n    )\n      .then(data => {\n        this.setState({\n          isLoading: false,\n          step: 1,\n          data,\n        })\n      })\n      .catch(err => {\n        console.log('Error getDownloadFromTableRequest: ', err)\n      })\n  }\n\n  onDownload = () => {\n    const { data } = this.state\n    // data will always be defined if calling this function\n    SynapseClient.getFileHandleByIdURL(\n      data!.resultsFileHandleId,\n      this.context.accessToken,\n    ).then(url => {\n      window.location.href = url\n      this.props.onClose()\n    })\n  }\n\n  handleChange = (event: IChangeEvent) => {\n    const { formData } = event\n    this.setState({\n      formData,\n    })\n  }\n\n  render() {\n    const spinnerStyle: CSSProperties = {\n      height: 50,\n      width: 50,\n      backgroundSize: 50,\n    }\n    return (\n      <DialogBase\n        open={true}\n        onCancel={this.props.onClose}\n        title=\"Download query results\"\n        content={\n          <>\n            <Form\n              validator={validator}\n              id=\"modal-download-form\"\n              schema={formSchemaArray[this.state.step]}\n              uiSchema={formSchemaUIArray[this.state.step]}\n              onChange={this.handleChange}\n              formData={this.state.formData}\n              onSubmit={this.handleSubmit}\n              widgets={{\n                CheckboxWidget: SynapseFormCheckboxWidget,\n                CheckboxesWidget: SynapseFormCheckboxesWidget,\n                RadioWidget: SynapseFormRadioWidget,\n              }}\n            >\n              {this.state.isLoading && (\n                <div className=\"SRC-centerAndJustifyContent\">\n                  <div className=\"SRC-center-text\">\n                    <p> Creating the File </p>\n                    <div style={spinnerStyle} className=\"spinner\" />\n                    <p> Loading... </p>\n                  </div>\n                </div>\n              )}\n              <Fragment />\n            </Form>\n          </>\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={this.props.onClose}\n            >\n              Cancel\n            </Button>\n            <Button\n              form=\"modal-download-form\"\n              type=\"submit\"\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              {this.state.step === 0 ? 'Next' : 'Download'}\n            </Button>\n          </>\n        }\n      />\n    )\n  }\n}\n\nexport default ModalDownload\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,IAAb,cAAmC,EAGjC;CACA,OAAO,cAAc;CAGrB,YAAY,GAA2B;EAErC,AADA,MAAM,CAAK,GACX,KAAK,QAAQ;GACX,WAAW;GACX,MAAM;GACN,UAAU;IACR,aAAa;IACb,UAAU,CAAC,GAAmB,CAA+B;GAC/D;EACF;CACF;CAEA,gBAAgB,MAAwB;EACtC,AAAI,KAAK,MAAM,SAAS,IACtB,KAAK,oBAAoB,CAAK,IAE9B,KAAK,WAAW;CAEpB;CAEA,uBAAuB,MAAwB;EAC7C,KAAK,SAAS,EACZ,WAAW,GACb,CAAC;EACD,IAAM,EAAE,gBAAa,GACf,IAAW,EAAS,cACpB,IAAW,EAAS,UACpB,EAAE,uBAAoB,2BAAwB,KAAK,OACnD,IAAY,MAAA,iCAAyB,MAAM,KAC3C,IAAc,EAAS,SAAS,CAAiB,GACjD,IAA4B,EAAS,SACzC,CACF,GACM,IAAe,KAAsB,EAAqB,GAC1D,IAAM,EAAa,MAAM,KACzB,IAAqD;GACzD;GACA,UAAU,EAA8B,CAAG;GAC3C,gBAAgB,EAAa,MAAM;GACnC,cACE;GACF;GACA;GACA,oBAAoB,EAAE,aAAU;GAChC,mBAAmB,EAAa,MAAM;EACxC;EACA,EAAc,0BACZ,GACA,KAAK,QAAQ,WACf,EACG,MAAK,MAAQ;GACZ,KAAK,SAAS;IACZ,WAAW;IACX,MAAM;IACN;GACF,CAAC;EACH,CAAC,EACA,OAAM,MAAO;GACZ,QAAQ,IAAI,uCAAuC,CAAG;EACxD,CAAC;CACL;CAEA,mBAAmB;EACjB,IAAM,EAAE,YAAS,KAAK;EAEtB,EAAc,qBACZ,EAAM,qBACN,KAAK,QAAQ,WACf,EAAE,MAAK,MAAO;GAEZ,AADA,OAAO,SAAS,OAAO,GACvB,KAAK,MAAM,QAAQ;EACrB,CAAC;CACH;CAEA,gBAAgB,MAAwB;EACtC,IAAM,EAAE,gBAAa;EACrB,KAAK,SAAS,EACZ,YACF,CAAC;CACH;CAEA,SAAS;EAMP,OACE,kBAAC,GAAD;GACE,MAAM;GACN,UAAU,KAAK,MAAM;GACrB,OAAM;GACN,SACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;IACa;IACX,IAAG;IACH,QAAQ,EAAgB,KAAK,MAAM;IACnC,UAAU,EAAkB,KAAK,MAAM;IACvC,UAAU,KAAK;IACf,UAAU,KAAK,MAAM;IACrB,UAAU,KAAK;IACf,SAAS;KACP,gBAAgB;KAChB,kBAAkB;KAClB,aAAa;IACf;cAZF,CAcG,KAAK,MAAM,aACV,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD,EAAA,UAAG,sBAAsB,CAAA;OACzB,kBAAC,OAAD;QAAK,OAAO;SA7B1B,QAAQ;SACR,OAAO;SACP,gBAAgB;QA2BU;QAAc,WAAU;OAAW,CAAA;OAC/C,kBAAC,KAAD,EAAA,UAAG,eAAe,CAAA;MACf;;IACF,CAAA,GAEP,kBAAC,GAAD,CAAW,CAAA,CACP;MACN,CAAA;GAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,SAAS,KAAK,MAAM;cACrB;GAEO,CAAA,GACR,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,OAAM;cAEL,KAAK,MAAM,SAAS,IAAI,SAAS;GAC5B,CAAA,CACR,EAAA,CAAA;EAEL,CAAA;CAEL;AACF"}

package/dist/components/MuiContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiContainer.js","names":[],"sources":["../../src/components/MuiContainer.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled } from '@mui/material'\n\n/**\n * Drop in MUI substitute class for Bootstrap Container component\n */\nexport const MuiContainer: StyledComponent<BoxProps> = styled(Box, {\n  label: 'MuiContainer',\n})(({ theme }) => ({\n  paddingRight: 15,\n  paddingLeft: 15,\n  marginRight: 'auto',\n  marginLeft: 'auto',\n\n  // Full width for (xs, extra-small: 0px or larger) and (sm, small: 600px or larger)\n  [theme.breakpoints.up('md')]: {\n    // medium: 960px or larger\n    width: 920,\n  },\n  [theme.breakpoints.up('lg')]: {\n    // large: 1280px or larger\n    width: 1170,\n  },\n  [theme.breakpoints.up('xl')]: {\n    // extra-large: 1920px or larger\n    width: 1366,\n  },\n}))\n\nexport default MuiContainer\n"],"mappings":";;AAMA,IAAa,IAA0C,EAAO,GAAK,EACjE,OAAO,gBACR,CAAC,EAAE,EAAE,gBAAa;CACjB,cAAc;CACd,aAAa;CACb,aAAa;CACb,YAAY;EAGX,EAAM,YAAY,GAAG,KAAK,GAAG,EAE5B,OAAO,KACR;EACA,EAAM,YAAY,GAAG,KAAK,GAAG,EAE5B,OAAO,MACR;EACA,EAAM,YAAY,GAAG,KAAK,GAAG,EAE5B,OAAO,MACR;CACF,EAAE"}
+{"version":3,"file":"MuiContainer.js","names":[],"sources":["../../src/components/MuiContainer.tsx"],"sourcesContent":["import { StyledComponent } from '@emotion/styled'\nimport { Box, BoxProps, styled } from '@mui/material'\n\n/**\n * Drop in MUI substitute class for Bootstrap Container component\n */\nexport const MuiContainer: StyledComponent<BoxProps> = styled(Box, {\n  label: 'MuiContainer',\n})(({ theme }) => ({\n  paddingRight: 15,\n  paddingLeft: 15,\n  marginRight: 'auto',\n  marginLeft: 'auto',\n\n  // Full width for (xs, extra-small: 0px or larger) and (sm, small: 600px or larger)\n  [theme.breakpoints.up('md')]: {\n    // medium: 960px or larger\n    width: 920,\n  },\n  [theme.breakpoints.up('lg')]: {\n    // large: 1280px or larger\n    width: 1170,\n  },\n  [theme.breakpoints.up('xl')]: {\n    // extra-large: 1920px or larger\n    width: 1366,\n  },\n}))\n\nexport default MuiContainer\n"],"mappings":";;AAMA,IAAa,IAA0C,EAAO,GAAK,EACjE,OAAO,eACT,CAAC,GAAG,EAAE,gBAAa;CACjB,cAAc;CACd,aAAa;CACb,aAAa;CACb,YAAY;EAGX,EAAM,YAAY,GAAG,IAAI,IAAI,EAE5B,OAAO,IACT;EACC,EAAM,YAAY,GAAG,IAAI,IAAI,EAE5B,OAAO,KACT;EACC,EAAM,YAAY,GAAG,IAAI,IAAI,EAE5B,OAAO,KACT;AACF,EAAE"}

package/dist/components/OAuthClientAclEditor/OAuthAclEditorModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthAclEditorModal.js","names":[],"sources":["../../../src/components/OAuthClientAclEditor/OAuthAclEditorModal.tsx"],"sourcesContent":["import { noop } from 'lodash-es'\nimport { useRef } from 'react'\nimport { displayToast } from '../ToastMessage'\nimport {\n  OAuthClientAclEditor,\n  OAuthClientAclEditorHandle,\n} from './OAuthClientAclEditor'\nimport { DialogBase } from '../DialogBase'\nimport { Button } from '@mui/material'\n\nexport type OAuthAclEditorModalProps = {\n  clientId: string\n  open: boolean\n  onUpdateSuccess?: () => void\n  onClose: () => void\n}\n\nexport default function OAuthAclEditorModal(\n  props: OAuthAclEditorModalProps,\n): React.ReactNode {\n  const { clientId, open, onUpdateSuccess = noop, onClose } = props\n  const ref = useRef<OAuthClientAclEditorHandle>(null)\n  return (\n    <>\n      <DialogBase\n        open={open}\n        title=\"OAuth Client Sharing Settings\"\n        onCancel={onClose}\n        maxWidth={'md'}\n        content={\n          <OAuthClientAclEditor\n            ref={ref}\n            clientId={clientId}\n            onSaveComplete={() => {\n              displayToast(\n                'Permissions were successfully saved to Synapse',\n                'info',\n              )\n              onUpdateSuccess()\n              onClose()\n            }}\n          />\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              onClick={() => {\n                onClose()\n              }}\n            >\n              Cancel\n            </Button>\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={() => {\n                ref.current?.save()\n              }}\n            >\n              Save\n            </Button>\n          </>\n        }\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAiBA,SAAwB,EACtB,GACiB;CACjB,IAAM,EAAE,aAAU,SAAM,qBAAkB,GAAM,eAAY,GACtD,IAAM,EAAmC,KAAK;AACpD,QACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;EACQ;EACN,OAAM;EACN,UAAU;EACV,UAAU;EACV,SACE,kBAAC,GAAD;GACO;GACK;GACV,sBAAsB;AAMpB,IALA,EACE,kDACA,OACD,EACD,GAAiB,EACjB,GAAS;;GAEX,CAAA;EAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,eAAe;AACb,OAAS;;aAEZ;GAEQ,CAAA,EACT,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,eAAe;AACb,MAAI,SAAS,MAAM;;aAEtB;GAEQ,CAAA,CACR,EAAA,CAAA;EAEL,CAAA,EACD,CAAA"}
+{"version":3,"file":"OAuthAclEditorModal.js","names":[],"sources":["../../../src/components/OAuthClientAclEditor/OAuthAclEditorModal.tsx"],"sourcesContent":["import { noop } from 'lodash-es'\nimport { useRef } from 'react'\nimport { displayToast } from '../ToastMessage'\nimport {\n  OAuthClientAclEditor,\n  OAuthClientAclEditorHandle,\n} from './OAuthClientAclEditor'\nimport { DialogBase } from '../DialogBase'\nimport { Button } from '@mui/material'\n\nexport type OAuthAclEditorModalProps = {\n  clientId: string\n  open: boolean\n  onUpdateSuccess?: () => void\n  onClose: () => void\n}\n\nexport default function OAuthAclEditorModal(\n  props: OAuthAclEditorModalProps,\n): React.ReactNode {\n  const { clientId, open, onUpdateSuccess = noop, onClose } = props\n  const ref = useRef<OAuthClientAclEditorHandle>(null)\n  return (\n    <>\n      <DialogBase\n        open={open}\n        title=\"OAuth Client Sharing Settings\"\n        onCancel={onClose}\n        maxWidth={'md'}\n        content={\n          <OAuthClientAclEditor\n            ref={ref}\n            clientId={clientId}\n            onSaveComplete={() => {\n              displayToast(\n                'Permissions were successfully saved to Synapse',\n                'info',\n              )\n              onUpdateSuccess()\n              onClose()\n            }}\n          />\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              onClick={() => {\n                onClose()\n              }}\n            >\n              Cancel\n            </Button>\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={() => {\n                ref.current?.save()\n              }}\n            >\n              Save\n            </Button>\n          </>\n        }\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAiBA,SAAwB,EACtB,GACiB;CACjB,IAAM,EAAE,aAAU,SAAM,qBAAkB,GAAM,eAAY,GACtD,IAAM,EAAmC,IAAI;CACnD,OACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;EACQ;EACN,OAAM;EACN,UAAU;EACV,UAAU;EACV,SACE,kBAAC,GAAD;GACO;GACK;GACV,sBAAsB;IAMpB,AALA,EACE,kDACA,MACF,GACA,EAAgB,GAChB,EAAQ;GACV;EACD,CAAA;EAEH,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAQ;GACR,eAAe;IACb,EAAQ;GACV;aACD;EAEO,CAAA,GACR,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,eAAe;IACb,EAAI,SAAS,KAAK;GACpB;aACD;EAEO,CAAA,CACR,EAAA,CAAA;CAEL,CAAA,EACD,CAAA;AAEN"}

package/dist/components/OAuthClientAclEditor/OAuthClientAclEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthClientAclEditor.js","names":[],"sources":["../../../src/components/OAuthClientAclEditor/OAuthClientAclEditor.tsx"],"sourcesContent":["import {\n  useGetOAuthClientACL,\n  useUpdateOAuthClientACL,\n} from '@/synapse-queries'\nimport {\n  getAccessTypeFromPermissionLevel,\n  PermissionLevel,\n} from '@/utils/PermissionLevelToAccessType'\nimport { Alert, Stack } from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  consolidateResourceAccessList,\n  convertResourceAccessSetToSRC,\n  updateACLWithSRCResourceAccessList,\n} from '@/utils/functions/AccessControlListUtils'\nimport { isEqual } from 'lodash-es'\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\nimport { AclEditor } from '../AclEditor/AclEditor'\nimport useUpdateAcl from '../AclEditor/useUpdateAcl'\nimport { AccessControlList } from '@sage-bionetworks/synapse-client'\n\nconst availablePermissionLevels: PermissionLevel[] = [\n  'CAN_ADMINISTER_OAUTH_CLIENT',\n]\n\nexport type OAuthClientAclEditorHandle = {\n  /* Allow the parent component to trigger saving the ACL, so this may be embedded in an arbitrary modal. */\n  save: () => void\n}\n\nexport type OAuthClientAclEditorProps = {\n  clientId: string\n  onSaveComplete: (saveSuccessful: boolean) => void\n}\n\nexport const OAuthClientAclEditor = forwardRef(function OAuthClientAclEditor(\n  props: OAuthClientAclEditorProps,\n  ref: ForwardedRef<OAuthClientAclEditorHandle>,\n) {\n  const { clientId, onSaveComplete } = props\n  const [error, setError] = useState<string | null>(null)\n\n  const onMutationSuccess = () => {\n    setError(null)\n    onSaveComplete(true)\n  }\n\n  const onMutationError = (error: SynapseClientError) => {\n    setError(error.reason)\n    onSaveComplete(false)\n  }\n\n  const { data: originalAcl, isLoading: isLoadingOriginalAcl } =\n    useGetOAuthClientACL(clientId, {\n      // Infinite staleTime ensures this won't get re-fetched unless explicitly invalidated by the mutation\n      staleTime: Infinity,\n    })\n\n  const consolidatedOriginalResourceAccess = useMemo(\n    () =>\n      consolidateResourceAccessList(\n        convertResourceAccessSetToSRC(originalAcl?.resourceAccess),\n      ),\n    [originalAcl],\n  )\n\n  const {\n    resourceAccessList,\n    setResourceAccessList,\n    addResourceAccessItem,\n    updateResourceAccessItem,\n    removeResourceAccessItem,\n    resetDirtyState,\n  } = useUpdateAcl({\n    onChange: () => setError(null),\n    onError: setError,\n  })\n\n  // set resourceAccessList when the fetched acl changes\n  useEffect(() => {\n    if (originalAcl) {\n      resetDirtyState()\n      setResourceAccessList(consolidatedOriginalResourceAccess)\n    }\n  }, [\n    originalAcl,\n    consolidatedOriginalResourceAccess,\n    resetDirtyState,\n    setResourceAccessList,\n  ])\n\n  const { mutate: updateAcl } = useUpdateOAuthClientACL({\n    onSuccess: () => onMutationSuccess(),\n    onError: (error: SynapseClientError) => onMutationError(error),\n  })\n\n  useImperativeHandle(ref, () => {\n    return {\n      save() {\n        const updatedAcl: AccessControlList =\n          updateACLWithSRCResourceAccessList(originalAcl, resourceAccessList)\n        const aclIsUnchanged =\n          (originalAcl === null && updatedAcl == null) ||\n          // ignore properties that will change when the ACL is saved (etag, modifiedOn)\n          (isEqual(consolidatedOriginalResourceAccess, resourceAccessList) &&\n            originalAcl?.id === updatedAcl?.id)\n\n        if (aclIsUnchanged) {\n          // noop\n          onSaveComplete(true)\n        } else {\n          updateAcl(updatedAcl)\n        }\n      },\n    }\n  }, [\n    clientId,\n    originalAcl,\n    consolidatedOriginalResourceAccess,\n    resourceAccessList,\n    onSaveComplete,\n    updateAcl,\n  ])\n\n  return (\n    <Stack\n      direction=\"column\"\n      sx={{\n        gap: '20px',\n      }}\n    >\n      <AclEditor\n        resourceAccessList={resourceAccessList}\n        availablePermissionLevels={availablePermissionLevels}\n        isLoading={isLoadingOriginalAcl}\n        canEdit={true}\n        emptyText={/* This should never happen */ ''}\n        onAddPrincipalToAcl={id =>\n          addResourceAccessItem(\n            id,\n            getAccessTypeFromPermissionLevel('CAN_ADMINISTER_OAUTH_CLIENT'),\n          )\n        }\n        updateResourceAccessItem={updateResourceAccessItem}\n        removeResourceAccessItem={removeResourceAccessItem}\n        showAddRemovePublicButton={false}\n        showNotifyCheckbox={false}\n        isInherited={false}\n      />\n      {error && <Alert severity=\"error\">{error}</Alert>}\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,IAA+C,CACnD,8BACD,EAYY,IAAuB,EAAW,SAC7C,GACA,GACA;CACA,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAO,KAAY,EAAwB,KAAK,EAEjD,UAA0B;AAE9B,EADA,EAAS,KAAK,EACd,EAAe,GAAK;IAGhB,KAAmB,MAA8B;AAErD,EADA,EAAS,EAAM,OAAO,EACtB,EAAe,GAAM;IAGjB,EAAE,MAAM,GAAa,WAAW,MACpC,EAAqB,GAAU,EAE7B,WAAW,UACZ,CAAC,EAEE,IAAqC,QAEvC,EACE,EAA8B,GAAa,eAAe,CAC3D,EACH,CAAC,EAAY,CACd,EAEK,EACJ,uBACA,0BACA,0BACA,6BACA,6BACA,uBACE,EAAa;EACf,gBAAgB,EAAS,KAAK;EAC9B,SAAS;EACV,CAAC;AAGF,SAAgB;AACd,EAAI,MACF,GAAiB,EACjB,EAAsB,EAAmC;IAE1D;EACD;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,EAAE,QAAQ,MAAc,EAAwB;EACpD,iBAAiB,GAAmB;EACpC,UAAU,MAA8B,EAAgB,EAAM;EAC/D,CAAC;AA8BF,QA5BA,EAAoB,UACX,EACL,OAAO;EACL,IAAM,IACJ,EAAmC,GAAa,EAAmB;AAOrE,EALG,MAAgB,QAAQ,KAAc,QAEtC,EAAQ,GAAoC,EAAmB,IAC9D,GAAa,OAAO,GAAY,KAIlC,EAAe,GAAK,GAEpB,EAAU,EAAW;IAG1B,GACA;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAGA,kBAAC,GAAD;EACE,WAAU;EACV,IAAI,EACF,KAAK,QACN;YAJH,CAME,kBAAC,GAAD;GACsB;GACO;GAC3B,WAAW;GACX,SAAS;GACT,WAA0C;GAC1C,sBAAqB,MACnB,EACE,GACA,EAAiC,8BAA8B,CAChE;GAEuB;GACA;GAC1B,2BAA2B;GAC3B,oBAAoB;GACpB,aAAa;GACb,CAAA,EACD,KAAS,kBAAC,GAAD;GAAO,UAAS;aAAS;GAAc,CAAA,CAC3C;;EAEV"}
+{"version":3,"file":"OAuthClientAclEditor.js","names":[],"sources":["../../../src/components/OAuthClientAclEditor/OAuthClientAclEditor.tsx"],"sourcesContent":["import {\n  useGetOAuthClientACL,\n  useUpdateOAuthClientACL,\n} from '@/synapse-queries'\nimport {\n  getAccessTypeFromPermissionLevel,\n  PermissionLevel,\n} from '@/utils/PermissionLevelToAccessType'\nimport { Alert, Stack } from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport {\n  consolidateResourceAccessList,\n  convertResourceAccessSetToSRC,\n  updateACLWithSRCResourceAccessList,\n} from '@/utils/functions/AccessControlListUtils'\nimport { isEqual } from 'lodash-es'\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\nimport { AclEditor } from '../AclEditor/AclEditor'\nimport useUpdateAcl from '../AclEditor/useUpdateAcl'\nimport { AccessControlList } from '@sage-bionetworks/synapse-client'\n\nconst availablePermissionLevels: PermissionLevel[] = [\n  'CAN_ADMINISTER_OAUTH_CLIENT',\n]\n\nexport type OAuthClientAclEditorHandle = {\n  /* Allow the parent component to trigger saving the ACL, so this may be embedded in an arbitrary modal. */\n  save: () => void\n}\n\nexport type OAuthClientAclEditorProps = {\n  clientId: string\n  onSaveComplete: (saveSuccessful: boolean) => void\n}\n\nexport const OAuthClientAclEditor = forwardRef(function OAuthClientAclEditor(\n  props: OAuthClientAclEditorProps,\n  ref: ForwardedRef<OAuthClientAclEditorHandle>,\n) {\n  const { clientId, onSaveComplete } = props\n  const [error, setError] = useState<string | null>(null)\n\n  const onMutationSuccess = () => {\n    setError(null)\n    onSaveComplete(true)\n  }\n\n  const onMutationError = (error: SynapseClientError) => {\n    setError(error.reason)\n    onSaveComplete(false)\n  }\n\n  const { data: originalAcl, isLoading: isLoadingOriginalAcl } =\n    useGetOAuthClientACL(clientId, {\n      // Infinite staleTime ensures this won't get re-fetched unless explicitly invalidated by the mutation\n      staleTime: Infinity,\n    })\n\n  const consolidatedOriginalResourceAccess = useMemo(\n    () =>\n      consolidateResourceAccessList(\n        convertResourceAccessSetToSRC(originalAcl?.resourceAccess),\n      ),\n    [originalAcl],\n  )\n\n  const {\n    resourceAccessList,\n    setResourceAccessList,\n    addResourceAccessItem,\n    updateResourceAccessItem,\n    removeResourceAccessItem,\n    resetDirtyState,\n  } = useUpdateAcl({\n    onChange: () => setError(null),\n    onError: setError,\n  })\n\n  // set resourceAccessList when the fetched acl changes\n  useEffect(() => {\n    if (originalAcl) {\n      resetDirtyState()\n      setResourceAccessList(consolidatedOriginalResourceAccess)\n    }\n  }, [\n    originalAcl,\n    consolidatedOriginalResourceAccess,\n    resetDirtyState,\n    setResourceAccessList,\n  ])\n\n  const { mutate: updateAcl } = useUpdateOAuthClientACL({\n    onSuccess: () => onMutationSuccess(),\n    onError: (error: SynapseClientError) => onMutationError(error),\n  })\n\n  useImperativeHandle(ref, () => {\n    return {\n      save() {\n        const updatedAcl: AccessControlList =\n          updateACLWithSRCResourceAccessList(originalAcl, resourceAccessList)\n        const aclIsUnchanged =\n          (originalAcl === null && updatedAcl == null) ||\n          // ignore properties that will change when the ACL is saved (etag, modifiedOn)\n          (isEqual(consolidatedOriginalResourceAccess, resourceAccessList) &&\n            originalAcl?.id === updatedAcl?.id)\n\n        if (aclIsUnchanged) {\n          // noop\n          onSaveComplete(true)\n        } else {\n          updateAcl(updatedAcl)\n        }\n      },\n    }\n  }, [\n    clientId,\n    originalAcl,\n    consolidatedOriginalResourceAccess,\n    resourceAccessList,\n    onSaveComplete,\n    updateAcl,\n  ])\n\n  return (\n    <Stack\n      direction=\"column\"\n      sx={{\n        gap: '20px',\n      }}\n    >\n      <AclEditor\n        resourceAccessList={resourceAccessList}\n        availablePermissionLevels={availablePermissionLevels}\n        isLoading={isLoadingOriginalAcl}\n        canEdit={true}\n        emptyText={/* This should never happen */ ''}\n        onAddPrincipalToAcl={id =>\n          addResourceAccessItem(\n            id,\n            getAccessTypeFromPermissionLevel('CAN_ADMINISTER_OAUTH_CLIENT'),\n          )\n        }\n        updateResourceAccessItem={updateResourceAccessItem}\n        removeResourceAccessItem={removeResourceAccessItem}\n        showAddRemovePublicButton={false}\n        showNotifyCheckbox={false}\n        isInherited={false}\n      />\n      {error && <Alert severity=\"error\">{error}</Alert>}\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;AA4BA,IAAM,IAA+C,CACnD,6BACF,GAYa,IAAuB,EAAW,SAC7C,GACA,GACA;CACA,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAO,KAAY,EAAwB,IAAI,GAEhD,UAA0B;EAE9B,AADA,EAAS,IAAI,GACb,EAAe,EAAI;CACrB,GAEM,KAAmB,MAA8B;EAErD,AADA,EAAS,EAAM,MAAM,GACrB,EAAe,EAAK;CACtB,GAEM,EAAE,MAAM,GAAa,WAAW,MACpC,EAAqB,GAAU,EAE7B,WAAW,SACb,CAAC,GAEG,IAAqC,QAEvC,EACE,EAA8B,GAAa,cAAc,CAC3D,GACF,CAAC,CAAW,CACd,GAEM,EACJ,uBACA,0BACA,0BACA,6BACA,6BACA,uBACE,EAAa;EACf,gBAAgB,EAAS,IAAI;EAC7B,SAAS;CACX,CAAC;CAGD,QAAgB;EACd,AAAI,MACF,EAAgB,GAChB,EAAsB,CAAkC;CAE5D,GAAG;EACD;EACA;EACA;EACA;CACF,CAAC;CAED,IAAM,EAAE,QAAQ,MAAc,EAAwB;EACpD,iBAAiB,EAAkB;EACnC,UAAU,MAA8B,EAAgB,CAAK;CAC/D,CAAC;CA8BD,OA5BA,EAAoB,UACX,EACL,OAAO;EACL,IAAM,IACJ,EAAmC,GAAa,CAAkB;EAOpE,AALG,MAAgB,QAAQ,KAAc,QAEtC,EAAQ,GAAoC,CAAkB,KAC7D,GAAa,OAAO,GAAY,KAIlC,EAAe,EAAI,IAEnB,EAAU,CAAU;CAExB,EACF,IACC;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAGC,kBAAC,GAAD;EACE,WAAU;EACV,IAAI,EACF,KAAK,OACP;YAJF,CAME,kBAAC,GAAD;GACsB;GACO;GAC3B,WAAW;GACX,SAAS;GACT,WAA0C;GAC1C,sBAAqB,MACnB,EACE,GACA,EAAiC,6BAA6B,CAChE;GAEwB;GACA;GAC1B,2BAA2B;GAC3B,oBAAoB;GACpB,aAAa;EACd,CAAA,GACA,KAAS,kBAAC,GAAD;GAAO,UAAS;aAAS;EAAa,CAAA,CAC3C;;AAEX,CAAC"}

package/dist/components/OAuthClientManagement/CreateOAuthClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOAuthClient.js","names":[],"sources":["../../../src/components/OAuthClientManagement/CreateOAuthClient.tsx"],"sourcesContent":["import {\n  useCreateOAuthClient,\n  useDeleteOAuthClient,\n  useUpdateOAuthClient,\n} from '@/synapse-queries'\nimport { SynapseClientError, useSynapseContext } from '@/utils'\nimport { useDebouncedEffect } from '@/utils/hooks'\nimport DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone'\nimport {\n  Alert,\n  Box,\n  Button,\n  GridLegacy as Grid,\n  IconButton,\n  InputAdornment,\n  MenuItem,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport { OIDCSigningAlgorithm } from '@sage-bionetworks/synapse-client/generated/models/OIDCSigningAlgorithm'\nimport { ChangeEvent, useEffect, useMemo, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { WarningDialog } from '../SynapseForm/WarningDialog'\nimport { displayToast } from '../ToastMessage/ToastMessage'\n\nexport const defaultUserInfoSignedResponseAlgorithm = 'JSON'\nexport const warningHeader = 'Are you absolutely sure?'\nexport const warningBody =\n  'Editing this detail will render your client invalid and will require you to resubmit verification. This action cannot be undone.'\nconst INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\nconst GRID_NARROW = 12\nconst GRID_WIDE = 6\nconst GRID_ROW_SPACING = 1\nconst GRID_COL_SPACING = 2\n\nexport type CreateOAuthModalProps = {\n  isShowingModal: boolean\n  isEdit: boolean\n  onClose: () => void\n  setIsShowingConfirmModal: (a: boolean) => void\n  isShowingConfirmModal: boolean\n  client?: OAuthClient\n  setIsShowingModal: (a: boolean) => void\n}\n\nexport function CreateOAuthModal({\n  isShowingModal = false,\n  isEdit,\n  onClose,\n  client,\n  setIsShowingConfirmModal,\n  isShowingConfirmModal,\n  setIsShowingModal,\n}: CreateOAuthModalProps) {\n  const { synapseClient } = useSynapseContext()\n  const [clientName, setClientName] = useState('')\n  const [redirectUris, setRedirectUris] = useState([{ uri: '' }])\n  const [policyUri, setPolicyUri] = useState<string>('')\n  const [clientUri, setClientUri] = useState<string>('')\n  const [sectorUri, setSectorUri] = useState<string>('')\n  const [tosUri, setTosUri] = useState<string>('')\n  const [userinfoSignedResponseAlg, setUserinfoSignedResponseAlg] = useState<\n    'JSON' | OIDCSigningAlgorithm\n  >(defaultUserInfoSignedResponseAlgorithm)\n  const [warnTrigger, setWarnTrigger] = useState(false)\n  const [isDelete, setIsDelete] = useState<boolean>(false)\n  const [updatedClient, setUpdatedClient] = useState<OAuthClient>()\n  const [error, setError] = useState<SynapseClientError>()\n\n  // Return the OAuth Client definition based on the current client-side UI state\n  const oAuthClient: OAuthClient = useMemo(() => {\n    return {\n      client_id: client?.client_id,\n      client_name: clientName,\n      redirect_uris: redirectUris?.map(str => str.uri) ?? [''],\n      policy_uri: policyUri,\n      client_uri: clientUri,\n      sector_identifier_uri: sectorUri,\n      userinfo_signed_response_alg:\n        userinfoSignedResponseAlg === defaultUserInfoSignedResponseAlgorithm\n          ? undefined\n          : userinfoSignedResponseAlg,\n      tos_uri: tosUri,\n      etag: client?.etag,\n    }\n  }, [\n    client?.client_id,\n    client?.etag,\n    clientName,\n    clientUri,\n    policyUri,\n    redirectUris,\n    sectorUri,\n    userinfoSignedResponseAlg,\n    tosUri,\n  ])\n\n  useEffect(() => {\n    setClientName(client?.client_name ?? '')\n    setRedirectUris(\n      client?.redirect_uris?.map((str: string) => ({ uri: str })) ?? [\n        { uri: '' },\n      ],\n    )\n    setPolicyUri(client?.policy_uri ?? '')\n    setClientUri(client?.client_uri ?? '')\n    setSectorUri(client?.sector_identifier_uri ?? '')\n    setUserinfoSignedResponseAlg(\n      client?.userinfo_signed_response_alg ??\n        defaultUserInfoSignedResponseAlgorithm,\n    )\n    setTosUri(client?.tos_uri ?? '')\n  }, [isShowingModal, client])\n\n  useDebouncedEffect(\n    () => {\n      if (oAuthClient.client_id) {\n        // SWC-6365: use the pre-check service to determine if we need to show a warning on edit\n        synapseClient.openIDConnectServicesClient\n          .putAuthV1Oauth2ClientIdVerificationPrecheck({\n            id: oAuthClient.client_id,\n            oAuthClient: oAuthClient,\n          })\n          .then(precheckResult => {\n            setWarnTrigger(precheckResult.reverificationRequired!)\n          })\n      }\n    },\n    [oAuthClient, synapseClient.openIDConnectServicesClient],\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n\n  const hide = () => {\n    setClientName('')\n    setRedirectUris([{ uri: '' }])\n    setPolicyUri('')\n    setClientUri('')\n    setSectorUri('')\n    setUserinfoSignedResponseAlg(defaultUserInfoSignedResponseAlgorithm)\n    setTosUri('')\n    onClose()\n  }\n\n  const hideConfirmModal = () => {\n    setIsShowingConfirmModal(false)\n    setIsDelete(false)\n  }\n\n  const { mutate: createClient } = useCreateOAuthClient({\n    onSuccess: () => {\n      displayToast('Successfully created', 'success')\n      setError(undefined)\n      hide()\n    },\n    onError: err => {\n      setError(err)\n    },\n  })\n\n  const { mutate: updateClient, isPending: updateIsPending } =\n    useUpdateOAuthClient({\n      onSuccess: () => {\n        displayToast('Successfully saved', 'success')\n        setError(undefined)\n        hide()\n      },\n      onError: err => {\n        setError(err)\n        setIsShowingModal(true)\n      },\n    })\n\n  const { mutate: deleteClient } = useDeleteOAuthClient({\n    onSuccess: () => {\n      displayToast('Successfully deleted', 'success')\n      hide()\n    },\n    onError: error => {\n      displayToast(error.reason, 'danger')\n    },\n  })\n\n  const onCreateClient = () => {\n    try {\n      setUpdatedClient(oAuthClient)\n      if (warnTrigger === true) {\n        setIsShowingConfirmModal(true)\n      } else {\n        if (isEdit) {\n          updateClient(oAuthClient)\n        } else {\n          createClient(oAuthClient)\n        }\n      }\n    } catch (err) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const handleRedirectUriAdd = () => {\n    if (redirectUris) {\n      setRedirectUris([...redirectUris, { uri: '' }])\n    }\n  }\n\n  const handleRedirectUriRemove = (index: number) => {\n    if (redirectUris) {\n      const list = [...redirectUris]\n      list.splice(index, 1)\n      setRedirectUris(list)\n    }\n  }\n\n  const handleUriChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    index: number,\n  ) => {\n    if (redirectUris) {\n      const { name, value } = e.target\n      const list = [...redirectUris]\n      list[index][name as 'uri'] = value\n      setRedirectUris(list)\n    }\n  }\n\n  const dangerLabelSx = {\n    color: isEdit ? 'error.main' : undefined,\n    '&.Mui-focused': {\n      color: isEdit ? 'error.main' : undefined,\n    },\n  }\n\n  const sectorIdentifierURIInput = (\n    <TextField\n      onChange={e => setSectorUri(e.target.value)}\n      placeholder=\"https://\"\n      type=\"text\"\n      value={sectorUri}\n      id=\"sectorURI\"\n      label=\"Sector Identifier URI\"\n      margin=\"normal\"\n      fullWidth\n      slotProps={{\n        inputLabel: { sx: dangerLabelSx },\n      }}\n    />\n  )\n\n  const redirectURIInputs = (\n    <>\n      {redirectUris?.map((singleUri, idx) => (\n        <div key={idx}>\n          <TextField\n            required={idx === 0}\n            label={idx === 0 && 'Redirect URI(s)'}\n            name=\"uri\"\n            fullWidth\n            id={`redirect-uri-${idx}`}\n            onChange={e => handleUriChange(e, idx)}\n            value={singleUri.uri}\n            placeholder=\"https://\"\n            type=\"text\"\n            margin={idx === 0 ? 'normal' : 'dense'}\n            slotProps={{\n              input: {\n                endAdornment: redirectUris.length > 1 && (\n                  <InputAdornment position=\"end\">\n                    <IconButton onClick={() => handleRedirectUriRemove(idx)}>\n                      <DeleteTwoToneIcon sx={{ color: 'error.main' }} />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              },\n\n              inputLabel: { sx: dangerLabelSx },\n            }}\n          />\n          {redirectUris.length - 1 === idx && (\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={handleRedirectUriAdd}\n              disabled={singleUri.uri.length === 0}\n              sx={{ my: '10px' }}\n            >\n              Add URI\n            </Button>\n          )}\n        </div>\n      ))}\n    </>\n  )\n\n  const content = (\n    <>\n      {updateIsPending && (\n        <div className={'SRC-center-text'}>\n          <SynapseSpinner size={40} />\n        </div>\n      )}\n      {!updateIsPending && (\n        <>\n          <Typography\n            variant=\"body1\"\n            sx={{\n              mb: '10px',\n            }}\n          >\n            To protect you and your users, your consent screen and application\n            will need to be verified by Sage Bionetworks. Before your consent\n            screen and application are verified by Sage Bionetworks, you can\n            still test your application with limitations.\n          </Typography>\n\n          {isEdit && (\n            <Typography sx={{ mt: '16px' }} variant=\"label\">\n              Client ID: {client?.client_id}\n            </Typography>\n          )}\n          <Grid\n            container\n            rowSpacing={GRID_ROW_SPACING}\n            columnSpacing={GRID_COL_SPACING}\n          >\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Client Name\"\n                required\n                onChange={e => setClientName(e.target.value)}\n                placeholder=\"Client Name\"\n                type=\"text\"\n                value={clientName}\n                id=\"clientName\"\n                margin=\"normal\"\n                fullWidth\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Client Homepage\"\n                onChange={e => setClientUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={clientUri}\n                id=\"clientUri\"\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            {!isEdit && (\n              <>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {redirectURIInputs}\n                </Grid>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {sectorIdentifierURIInput}\n                </Grid>\n              </>\n            )}\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Link to Privacy Policy\"\n                onChange={e => setPolicyUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={policyUri}\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Links to Terms of Service\"\n                onChange={e => setTosUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={tosUri}\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"User Info Signed Response Algorithm\"\n                value={userinfoSignedResponseAlg}\n                onChange={e =>\n                  setUserinfoSignedResponseAlg(\n                    e.target.value as OIDCSigningAlgorithm,\n                  )\n                }\n                select\n                fullWidth\n                margin=\"normal\"\n              >\n                <MenuItem value={defaultUserInfoSignedResponseAlgorithm}>\n                  JSON\n                </MenuItem>\n                <MenuItem value={OIDCSigningAlgorithm.RS256}>JWT</MenuItem>\n              </TextField>\n            </Grid>\n          </Grid>\n          {isEdit && (\n            <Box\n              sx={{\n                mt: '10px',\n                padding: 1,\n                backgroundColor: 'rgb(178, 36, 42, 0.03)',\n              }}\n            >\n              <Typography sx={{ my: 1 }} color=\"error\" variant=\"headline3\">\n                DANGER ZONE\n              </Typography>\n              <Typography variant=\"smallText1\">\n                Editing the following information will render your client\n                invalid and will require you to create it again and resubmit\n                verification if needed.\n              </Typography>\n              <Grid\n                container\n                rowSpacing={GRID_ROW_SPACING}\n                columnSpacing={GRID_COL_SPACING}\n              >\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {redirectURIInputs}\n                </Grid>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {sectorIdentifierURIInput}\n                </Grid>\n              </Grid>\n\n              <Button\n                onClick={() => {\n                  setIsDelete(true)\n                  setIsShowingConfirmModal(true)\n                }}\n                color=\"error\"\n                variant=\"text\"\n                startIcon={<DeleteTwoToneIcon />}\n                sx={{ padding: 0, mb: 1 }}\n              >\n                DELETE CLIENT\n              </Button>\n            </Box>\n          )}\n        </>\n      )}\n      {error && <Alert severity=\"error\">{error?.reason}</Alert>}\n    </>\n  )\n\n  return (\n    <>\n      <ConfirmationDialog\n        open={isShowingModal && !isShowingConfirmModal}\n        onCancel={() => {\n          hide()\n          setError(undefined)\n        }}\n        maxWidth=\"md\"\n        title={isEdit ? 'Client Details' : 'Create New OAuth Client'}\n        content={content}\n        onConfirm={onCreateClient}\n        confirmButtonProps={{ children: 'Save' }}\n      />\n      <WarningDialog\n        open={isShowingConfirmModal}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={hideConfirmModal}\n        onConfirm={() => {\n          if (isDelete) {\n            deleteClient(client?.client_id!)\n          } else {\n            updateClient(updatedClient!)\n          }\n          hideConfirmModal()\n        }}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateOAuthClient.js","names":[],"sources":["../../../src/components/OAuthClientManagement/CreateOAuthClient.tsx"],"sourcesContent":["import {\n  useCreateOAuthClient,\n  useDeleteOAuthClient,\n  useUpdateOAuthClient,\n} from '@/synapse-queries'\nimport { SynapseClientError, useSynapseContext } from '@/utils'\nimport { useDebouncedEffect } from '@/utils/hooks'\nimport DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone'\nimport {\n  Alert,\n  Box,\n  Button,\n  GridLegacy as Grid,\n  IconButton,\n  InputAdornment,\n  MenuItem,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport { OIDCSigningAlgorithm } from '@sage-bionetworks/synapse-client/generated/models/OIDCSigningAlgorithm'\nimport { ChangeEvent, useEffect, useMemo, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport { WarningDialog } from '../SynapseForm/WarningDialog'\nimport { displayToast } from '../ToastMessage/ToastMessage'\n\nexport const defaultUserInfoSignedResponseAlgorithm = 'JSON'\nexport const warningHeader = 'Are you absolutely sure?'\nexport const warningBody =\n  'Editing this detail will render your client invalid and will require you to resubmit verification. This action cannot be undone.'\nconst INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\nconst GRID_NARROW = 12\nconst GRID_WIDE = 6\nconst GRID_ROW_SPACING = 1\nconst GRID_COL_SPACING = 2\n\nexport type CreateOAuthModalProps = {\n  isShowingModal: boolean\n  isEdit: boolean\n  onClose: () => void\n  setIsShowingConfirmModal: (a: boolean) => void\n  isShowingConfirmModal: boolean\n  client?: OAuthClient\n  setIsShowingModal: (a: boolean) => void\n}\n\nexport function CreateOAuthModal({\n  isShowingModal = false,\n  isEdit,\n  onClose,\n  client,\n  setIsShowingConfirmModal,\n  isShowingConfirmModal,\n  setIsShowingModal,\n}: CreateOAuthModalProps) {\n  const { synapseClient } = useSynapseContext()\n  const [clientName, setClientName] = useState('')\n  const [redirectUris, setRedirectUris] = useState([{ uri: '' }])\n  const [policyUri, setPolicyUri] = useState<string>('')\n  const [clientUri, setClientUri] = useState<string>('')\n  const [sectorUri, setSectorUri] = useState<string>('')\n  const [tosUri, setTosUri] = useState<string>('')\n  const [userinfoSignedResponseAlg, setUserinfoSignedResponseAlg] = useState<\n    'JSON' | OIDCSigningAlgorithm\n  >(defaultUserInfoSignedResponseAlgorithm)\n  const [warnTrigger, setWarnTrigger] = useState(false)\n  const [isDelete, setIsDelete] = useState<boolean>(false)\n  const [updatedClient, setUpdatedClient] = useState<OAuthClient>()\n  const [error, setError] = useState<SynapseClientError>()\n\n  // Return the OAuth Client definition based on the current client-side UI state\n  const oAuthClient: OAuthClient = useMemo(() => {\n    return {\n      client_id: client?.client_id,\n      client_name: clientName,\n      redirect_uris: redirectUris?.map(str => str.uri) ?? [''],\n      policy_uri: policyUri,\n      client_uri: clientUri,\n      sector_identifier_uri: sectorUri,\n      userinfo_signed_response_alg:\n        userinfoSignedResponseAlg === defaultUserInfoSignedResponseAlgorithm\n          ? undefined\n          : userinfoSignedResponseAlg,\n      tos_uri: tosUri,\n      etag: client?.etag,\n    }\n  }, [\n    client?.client_id,\n    client?.etag,\n    clientName,\n    clientUri,\n    policyUri,\n    redirectUris,\n    sectorUri,\n    userinfoSignedResponseAlg,\n    tosUri,\n  ])\n\n  useEffect(() => {\n    setClientName(client?.client_name ?? '')\n    setRedirectUris(\n      client?.redirect_uris?.map((str: string) => ({ uri: str })) ?? [\n        { uri: '' },\n      ],\n    )\n    setPolicyUri(client?.policy_uri ?? '')\n    setClientUri(client?.client_uri ?? '')\n    setSectorUri(client?.sector_identifier_uri ?? '')\n    setUserinfoSignedResponseAlg(\n      client?.userinfo_signed_response_alg ??\n        defaultUserInfoSignedResponseAlgorithm,\n    )\n    setTosUri(client?.tos_uri ?? '')\n  }, [isShowingModal, client])\n\n  useDebouncedEffect(\n    () => {\n      if (oAuthClient.client_id) {\n        // SWC-6365: use the pre-check service to determine if we need to show a warning on edit\n        synapseClient.openIDConnectServicesClient\n          .putAuthV1Oauth2ClientIdVerificationPrecheck({\n            id: oAuthClient.client_id,\n            oAuthClient: oAuthClient,\n          })\n          .then(precheckResult => {\n            setWarnTrigger(precheckResult.reverificationRequired!)\n          })\n      }\n    },\n    [oAuthClient, synapseClient.openIDConnectServicesClient],\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n\n  const hide = () => {\n    setClientName('')\n    setRedirectUris([{ uri: '' }])\n    setPolicyUri('')\n    setClientUri('')\n    setSectorUri('')\n    setUserinfoSignedResponseAlg(defaultUserInfoSignedResponseAlgorithm)\n    setTosUri('')\n    onClose()\n  }\n\n  const hideConfirmModal = () => {\n    setIsShowingConfirmModal(false)\n    setIsDelete(false)\n  }\n\n  const { mutate: createClient } = useCreateOAuthClient({\n    onSuccess: () => {\n      displayToast('Successfully created', 'success')\n      setError(undefined)\n      hide()\n    },\n    onError: err => {\n      setError(err)\n    },\n  })\n\n  const { mutate: updateClient, isPending: updateIsPending } =\n    useUpdateOAuthClient({\n      onSuccess: () => {\n        displayToast('Successfully saved', 'success')\n        setError(undefined)\n        hide()\n      },\n      onError: err => {\n        setError(err)\n        setIsShowingModal(true)\n      },\n    })\n\n  const { mutate: deleteClient } = useDeleteOAuthClient({\n    onSuccess: () => {\n      displayToast('Successfully deleted', 'success')\n      hide()\n    },\n    onError: error => {\n      displayToast(error.reason, 'danger')\n    },\n  })\n\n  const onCreateClient = () => {\n    try {\n      setUpdatedClient(oAuthClient)\n      if (warnTrigger === true) {\n        setIsShowingConfirmModal(true)\n      } else {\n        if (isEdit) {\n          updateClient(oAuthClient)\n        } else {\n          createClient(oAuthClient)\n        }\n      }\n    } catch (err) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const handleRedirectUriAdd = () => {\n    if (redirectUris) {\n      setRedirectUris([...redirectUris, { uri: '' }])\n    }\n  }\n\n  const handleRedirectUriRemove = (index: number) => {\n    if (redirectUris) {\n      const list = [...redirectUris]\n      list.splice(index, 1)\n      setRedirectUris(list)\n    }\n  }\n\n  const handleUriChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    index: number,\n  ) => {\n    if (redirectUris) {\n      const { name, value } = e.target\n      const list = [...redirectUris]\n      list[index][name as 'uri'] = value\n      setRedirectUris(list)\n    }\n  }\n\n  const dangerLabelSx = {\n    color: isEdit ? 'error.main' : undefined,\n    '&.Mui-focused': {\n      color: isEdit ? 'error.main' : undefined,\n    },\n  }\n\n  const sectorIdentifierURIInput = (\n    <TextField\n      onChange={e => setSectorUri(e.target.value)}\n      placeholder=\"https://\"\n      type=\"text\"\n      value={sectorUri}\n      id=\"sectorURI\"\n      label=\"Sector Identifier URI\"\n      margin=\"normal\"\n      fullWidth\n      slotProps={{\n        inputLabel: { sx: dangerLabelSx },\n      }}\n    />\n  )\n\n  const redirectURIInputs = (\n    <>\n      {redirectUris?.map((singleUri, idx) => (\n        <div key={idx}>\n          <TextField\n            required={idx === 0}\n            label={idx === 0 && 'Redirect URI(s)'}\n            name=\"uri\"\n            fullWidth\n            id={`redirect-uri-${idx}`}\n            onChange={e => handleUriChange(e, idx)}\n            value={singleUri.uri}\n            placeholder=\"https://\"\n            type=\"text\"\n            margin={idx === 0 ? 'normal' : 'dense'}\n            slotProps={{\n              input: {\n                endAdornment: redirectUris.length > 1 && (\n                  <InputAdornment position=\"end\">\n                    <IconButton onClick={() => handleRedirectUriRemove(idx)}>\n                      <DeleteTwoToneIcon sx={{ color: 'error.main' }} />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              },\n\n              inputLabel: { sx: dangerLabelSx },\n            }}\n          />\n          {redirectUris.length - 1 === idx && (\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={handleRedirectUriAdd}\n              disabled={singleUri.uri.length === 0}\n              sx={{ my: '10px' }}\n            >\n              Add URI\n            </Button>\n          )}\n        </div>\n      ))}\n    </>\n  )\n\n  const content = (\n    <>\n      {updateIsPending && (\n        <div className={'SRC-center-text'}>\n          <SynapseSpinner size={40} />\n        </div>\n      )}\n      {!updateIsPending && (\n        <>\n          <Typography\n            variant=\"body1\"\n            sx={{\n              mb: '10px',\n            }}\n          >\n            To protect you and your users, your consent screen and application\n            will need to be verified by Sage Bionetworks. Before your consent\n            screen and application are verified by Sage Bionetworks, you can\n            still test your application with limitations.\n          </Typography>\n\n          {isEdit && (\n            <Typography sx={{ mt: '16px' }} variant=\"label\">\n              Client ID: {client?.client_id}\n            </Typography>\n          )}\n          <Grid\n            container\n            rowSpacing={GRID_ROW_SPACING}\n            columnSpacing={GRID_COL_SPACING}\n          >\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Client Name\"\n                required\n                onChange={e => setClientName(e.target.value)}\n                placeholder=\"Client Name\"\n                type=\"text\"\n                value={clientName}\n                id=\"clientName\"\n                margin=\"normal\"\n                fullWidth\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Client Homepage\"\n                onChange={e => setClientUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={clientUri}\n                id=\"clientUri\"\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            {!isEdit && (\n              <>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {redirectURIInputs}\n                </Grid>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {sectorIdentifierURIInput}\n                </Grid>\n              </>\n            )}\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Link to Privacy Policy\"\n                onChange={e => setPolicyUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={policyUri}\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"Links to Terms of Service\"\n                onChange={e => setTosUri(e.target.value)}\n                placeholder=\"https://\"\n                type=\"text\"\n                value={tosUri}\n                fullWidth\n                margin=\"normal\"\n              />\n            </Grid>\n            <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n              <TextField\n                label=\"User Info Signed Response Algorithm\"\n                value={userinfoSignedResponseAlg}\n                onChange={e =>\n                  setUserinfoSignedResponseAlg(\n                    e.target.value as OIDCSigningAlgorithm,\n                  )\n                }\n                select\n                fullWidth\n                margin=\"normal\"\n              >\n                <MenuItem value={defaultUserInfoSignedResponseAlgorithm}>\n                  JSON\n                </MenuItem>\n                <MenuItem value={OIDCSigningAlgorithm.RS256}>JWT</MenuItem>\n              </TextField>\n            </Grid>\n          </Grid>\n          {isEdit && (\n            <Box\n              sx={{\n                mt: '10px',\n                padding: 1,\n                backgroundColor: 'rgb(178, 36, 42, 0.03)',\n              }}\n            >\n              <Typography sx={{ my: 1 }} color=\"error\" variant=\"headline3\">\n                DANGER ZONE\n              </Typography>\n              <Typography variant=\"smallText1\">\n                Editing the following information will render your client\n                invalid and will require you to create it again and resubmit\n                verification if needed.\n              </Typography>\n              <Grid\n                container\n                rowSpacing={GRID_ROW_SPACING}\n                columnSpacing={GRID_COL_SPACING}\n              >\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {redirectURIInputs}\n                </Grid>\n                <Grid item md={GRID_WIDE} xs={GRID_NARROW}>\n                  {sectorIdentifierURIInput}\n                </Grid>\n              </Grid>\n\n              <Button\n                onClick={() => {\n                  setIsDelete(true)\n                  setIsShowingConfirmModal(true)\n                }}\n                color=\"error\"\n                variant=\"text\"\n                startIcon={<DeleteTwoToneIcon />}\n                sx={{ padding: 0, mb: 1 }}\n              >\n                DELETE CLIENT\n              </Button>\n            </Box>\n          )}\n        </>\n      )}\n      {error && <Alert severity=\"error\">{error?.reason}</Alert>}\n    </>\n  )\n\n  return (\n    <>\n      <ConfirmationDialog\n        open={isShowingModal && !isShowingConfirmModal}\n        onCancel={() => {\n          hide()\n          setError(undefined)\n        }}\n        maxWidth=\"md\"\n        title={isEdit ? 'Client Details' : 'Create New OAuth Client'}\n        content={content}\n        onConfirm={onCreateClient}\n        confirmButtonProps={{ children: 'Save' }}\n      />\n      <WarningDialog\n        open={isShowingConfirmModal}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={hideConfirmModal}\n        onConfirm={() => {\n          if (isDelete) {\n            deleteClient(client?.client_id!)\n          } else {\n            updateClient(updatedClient!)\n          }\n          hideConfirmModal()\n        }}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/OAuthClientManagement/OAuthManagement.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthManagement.js","names":[],"sources":["../../../src/components/OAuthClientManagement/OAuthManagement.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport SynapseClient from '@/synapse-client'\nimport { useGetOAuthClientInfinite } from '@/synapse-queries'\nimport { MoreVert } from '@mui/icons-material'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, Link, IconButton, Menu, MenuItem } from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  Row,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { DialogBase } from '../DialogBase'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { displayToast } from '../ToastMessage'\nimport { CreateOAuthModal } from './CreateOAuthClient'\nimport OAuthAclEditorModal from '../OAuthClientAclEditor/OAuthAclEditorModal'\n\nconst columnHelper = createColumnHelper<OAuthClient>()\nfunction getColumns(columnOptions: {\n  setIsShowingVerification: (value: boolean) => void\n  setSelectedClient: (value: OAuthClient) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const {\n    setIsShowingVerification,\n    setSelectedClient,\n    setIsShowingSecretWarning,\n    setIsEdit,\n    setIsShowingCreateClientModal,\n    setIsShowingSharingSettings,\n  } = columnOptions\n  return [\n    columnHelper.accessor('createdOn', {\n      header: props => <ColumnHeader {...props} title={'Created'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: props => <ColumnHeader {...props} title={'Modified'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('client_id', {\n      header: props => <ColumnHeader {...props} title={'ID'} />,\n    }),\n    columnHelper.accessor('client_name', {\n      header: props => <ColumnHeader {...props} title={'Client'} />,\n    }),\n    columnHelper.accessor('verified', {\n      header: props => <ColumnHeader {...props} title={'Verified'} />,\n      cell: ({ getValue }) =>\n        getValue() ? (\n          'Yes'\n        ) : (\n          <Button\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={() => setIsShowingVerification(true)}\n          >\n            Submit Verification\n          </Button>\n        ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: props => <ColumnHeader {...props} title={'Actions'} />,\n      cell: ({ row }) => (\n        <ActionsMenuCell\n          row={row}\n          setSelectedClient={setSelectedClient}\n          setIsEdit={setIsEdit}\n          setIsShowingCreateClientModal={setIsShowingCreateClientModal}\n          setIsShowingSecretWarning={setIsShowingSecretWarning}\n          setIsShowingSharingSettings={setIsShowingSharingSettings}\n        />\n      ),\n    }),\n  ]\n}\n\nfunction ActionsMenuCell({\n  row,\n  setSelectedClient,\n  setIsEdit,\n  setIsShowingCreateClientModal,\n  setIsShowingSecretWarning,\n  setIsShowingSharingSettings,\n}: {\n  row: Row<OAuthClient>\n  setSelectedClient: (value: OAuthClient) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setAnchorEl(null)\n  }\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls={`actions-menu-${row.id}`}\n        aria-haspopup=\"true\"\n        onClick={handleMenuOpen}\n        size=\"small\"\n      >\n        <MoreVert />\n      </IconButton>\n      <Menu\n        id={`actions-menu-${row.id}`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleMenuClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsEdit(true)\n            setIsShowingCreateClientModal(true)\n            handleMenuClose()\n          }}\n        >\n          Edit\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSecretWarning(true)\n            handleMenuClose()\n          }}\n        >\n          Generate Secret\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSharingSettings(true)\n            handleMenuClose()\n          }}\n        >\n          Sharing Settings\n        </MenuItem>\n      </Menu>\n    </>\n  )\n}\n\nexport function OAuthManagement() {\n  const { accessToken } = useSynapseContext()\n  const [isShowingSharingSettings, setIsShowingSharingSettings] =\n    useState(false)\n  const [isShowingCreateClientModal, setIsShowingCreateClientModal] =\n    useState(false)\n  const [isEdit, setIsEdit] = useState<boolean>(false)\n  const [selectedClient, setSelectedClient] = useState<OAuthClient>()\n  const [isShowingConfirmModal, setIsShowingConfirmModal] = useState(false)\n  const [isShowingSecretWarning, setIsShowingSecretWarning] = useState(false)\n  const [isShowingSecret, setIsShowingSecret] = useState(false)\n  const [secret, setSecret] = useState<string>()\n  const [isShowingVerification, setIsShowingVerification] = useState(false)\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetOAuthClientInfinite()\n  const oAuthClientList = useMemo(\n    () => data?.pages.flatMap(page => page.results || []) || [],\n    [data],\n  )\n\n  const warningHeader = 'Are you absolutely sure?'\n  const warningBody =\n    'If you have an existing secret, generating a new secret will make your application invalid after generation. This action cannot be undone.'\n\n  const onShowSecret = async () => {\n    setIsShowingSecretWarning(false)\n    try {\n      const secret = await SynapseClient.createOAuthClientSecret(\n        accessToken!,\n        selectedClient?.client_id!,\n      )\n      setSelectedClient(undefined)\n      setIsShowingSecret(true)\n      setSecret(secret.client_secret)\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const columns = useMemo(\n    () =>\n      getColumns({\n        setIsShowingVerification,\n        setSelectedClient,\n        setIsShowingSecretWarning,\n        setIsEdit,\n        setIsShowingCreateClientModal,\n        setIsShowingSharingSettings,\n      }),\n    [],\n  )\n\n  const table: Table<OAuthClient> = useReactTable<OAuthClient>({\n    data: oAuthClientList,\n    columns,\n    getRowId: row => row.client_id!,\n    enableRowSelection: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n          justifyContent: 'flex-end',\n          mb: 2,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => {\n            setIsShowingCreateClientModal(true)\n            setIsEdit(false)\n          }}\n          sx={{ float: 'right' }}\n          startIcon={<AddCircleTwoTone />}\n        >\n          Create New Client\n        </Button>\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={table} />}\n        isLoading={isLoading}\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n      <CreateOAuthModal\n        onClose={() => {\n          setIsShowingCreateClientModal(false)\n        }}\n        isShowingModal={isShowingCreateClientModal}\n        client={isEdit ? selectedClient : undefined}\n        isEdit={isEdit}\n        setIsShowingConfirmModal={setIsShowingConfirmModal}\n        isShowingConfirmModal={isShowingConfirmModal}\n        setIsShowingModal={setIsShowingCreateClientModal}\n      />\n      <DialogBase\n        open={isShowingVerification}\n        onCancel={() => setIsShowingVerification(false)}\n        title=\"Submit Verification\"\n        content={\n          <>\n            <p>\n              In order to verify an OAuth client please submit a request to the{' '}\n              <Link\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href=\"https://sagebionetworks.jira.com/servicedesk/customer/portal/9\"\n              >\n                Synapse Service Desk.\n              </Link>\n            </p>\n            <b>Please list the following items in your request:</b>\n            <ul>\n              <li>Your name</li>\n              <li>\n                The ID of the client to be verified <br />\n              </li>\n              <li>A description of your application</li>\n            </ul>\n            {/* <p>\n            Verification can take up to X weeks and we will notify you via X.\n          </p> */}\n          </>\n        }\n      />\n      <OAuthAclEditorModal\n        clientId={selectedClient?.client_id!}\n        open={isShowingSharingSettings}\n        onClose={() => setIsShowingSharingSettings(false)}\n      />\n      <WarningDialog\n        open={isShowingSecretWarning}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={() => {\n          setIsShowingSecretWarning(false)\n          setSelectedClient(undefined)\n        }}\n        onConfirm={onShowSecret}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n      {secret && (\n        <DialogBase\n          open={isShowingSecret}\n          title=\"App Secret\"\n          onCancel={() => {\n            setIsShowingSecret(false)\n            setSecret(undefined)\n          }}\n          content={\n            <>\n              <p>\n                <b>This secret will not be able to be retrieved again.</b> If\n                needed, in order to generate a new secret select Generate from\n                the Client List.\n              </p>\n              <CopyToClipboardInput value={secret} inputWidth={'400px'} />\n            </>\n          }\n        />\n      )}\n    </div>\n  )\n}\n\nexport default OAuthManagement\n"],"mappings":"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"}
+{"version":3,"file":"OAuthManagement.js","names":[],"sources":["../../../src/components/OAuthClientManagement/OAuthManagement.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport SynapseClient from '@/synapse-client'\nimport { useGetOAuthClientInfinite } from '@/synapse-queries'\nimport { MoreVert } from '@mui/icons-material'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, Link, IconButton, Menu, MenuItem } from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  Row,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { DialogBase } from '../DialogBase'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { displayToast } from '../ToastMessage'\nimport { CreateOAuthModal } from './CreateOAuthClient'\nimport OAuthAclEditorModal from '../OAuthClientAclEditor/OAuthAclEditorModal'\n\nconst columnHelper = createColumnHelper<OAuthClient>()\nfunction getColumns(columnOptions: {\n  setIsShowingVerification: (value: boolean) => void\n  setSelectedClient: (value: OAuthClient) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const {\n    setIsShowingVerification,\n    setSelectedClient,\n    setIsShowingSecretWarning,\n    setIsEdit,\n    setIsShowingCreateClientModal,\n    setIsShowingSharingSettings,\n  } = columnOptions\n  return [\n    columnHelper.accessor('createdOn', {\n      header: props => <ColumnHeader {...props} title={'Created'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: props => <ColumnHeader {...props} title={'Modified'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('client_id', {\n      header: props => <ColumnHeader {...props} title={'ID'} />,\n    }),\n    columnHelper.accessor('client_name', {\n      header: props => <ColumnHeader {...props} title={'Client'} />,\n    }),\n    columnHelper.accessor('verified', {\n      header: props => <ColumnHeader {...props} title={'Verified'} />,\n      cell: ({ getValue }) =>\n        getValue() ? (\n          'Yes'\n        ) : (\n          <Button\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={() => setIsShowingVerification(true)}\n          >\n            Submit Verification\n          </Button>\n        ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: props => <ColumnHeader {...props} title={'Actions'} />,\n      cell: ({ row }) => (\n        <ActionsMenuCell\n          row={row}\n          setSelectedClient={setSelectedClient}\n          setIsEdit={setIsEdit}\n          setIsShowingCreateClientModal={setIsShowingCreateClientModal}\n          setIsShowingSecretWarning={setIsShowingSecretWarning}\n          setIsShowingSharingSettings={setIsShowingSharingSettings}\n        />\n      ),\n    }),\n  ]\n}\n\nfunction ActionsMenuCell({\n  row,\n  setSelectedClient,\n  setIsEdit,\n  setIsShowingCreateClientModal,\n  setIsShowingSecretWarning,\n  setIsShowingSharingSettings,\n}: {\n  row: Row<OAuthClient>\n  setSelectedClient: (value: OAuthClient) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setAnchorEl(null)\n  }\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls={`actions-menu-${row.id}`}\n        aria-haspopup=\"true\"\n        onClick={handleMenuOpen}\n        size=\"small\"\n      >\n        <MoreVert />\n      </IconButton>\n      <Menu\n        id={`actions-menu-${row.id}`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleMenuClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsEdit(true)\n            setIsShowingCreateClientModal(true)\n            handleMenuClose()\n          }}\n        >\n          Edit\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSecretWarning(true)\n            handleMenuClose()\n          }}\n        >\n          Generate Secret\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSharingSettings(true)\n            handleMenuClose()\n          }}\n        >\n          Sharing Settings\n        </MenuItem>\n      </Menu>\n    </>\n  )\n}\n\nexport function OAuthManagement() {\n  const { accessToken } = useSynapseContext()\n  const [isShowingSharingSettings, setIsShowingSharingSettings] =\n    useState(false)\n  const [isShowingCreateClientModal, setIsShowingCreateClientModal] =\n    useState(false)\n  const [isEdit, setIsEdit] = useState<boolean>(false)\n  const [selectedClient, setSelectedClient] = useState<OAuthClient>()\n  const [isShowingConfirmModal, setIsShowingConfirmModal] = useState(false)\n  const [isShowingSecretWarning, setIsShowingSecretWarning] = useState(false)\n  const [isShowingSecret, setIsShowingSecret] = useState(false)\n  const [secret, setSecret] = useState<string>()\n  const [isShowingVerification, setIsShowingVerification] = useState(false)\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetOAuthClientInfinite()\n  const oAuthClientList = useMemo(\n    () => data?.pages.flatMap(page => page.results || []) || [],\n    [data],\n  )\n\n  const warningHeader = 'Are you absolutely sure?'\n  const warningBody =\n    'If you have an existing secret, generating a new secret will make your application invalid after generation. This action cannot be undone.'\n\n  const onShowSecret = async () => {\n    setIsShowingSecretWarning(false)\n    try {\n      const secret = await SynapseClient.createOAuthClientSecret(\n        accessToken!,\n        selectedClient?.client_id!,\n      )\n      setSelectedClient(undefined)\n      setIsShowingSecret(true)\n      setSecret(secret.client_secret)\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const columns = useMemo(\n    () =>\n      getColumns({\n        setIsShowingVerification,\n        setSelectedClient,\n        setIsShowingSecretWarning,\n        setIsEdit,\n        setIsShowingCreateClientModal,\n        setIsShowingSharingSettings,\n      }),\n    [],\n  )\n\n  const table: Table<OAuthClient> = useReactTable<OAuthClient>({\n    data: oAuthClientList,\n    columns,\n    getRowId: row => row.client_id!,\n    enableRowSelection: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n          justifyContent: 'flex-end',\n          mb: 2,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => {\n            setIsShowingCreateClientModal(true)\n            setIsEdit(false)\n          }}\n          sx={{ float: 'right' }}\n          startIcon={<AddCircleTwoTone />}\n        >\n          Create New Client\n        </Button>\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={table} />}\n        isLoading={isLoading}\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n      <CreateOAuthModal\n        onClose={() => {\n          setIsShowingCreateClientModal(false)\n        }}\n        isShowingModal={isShowingCreateClientModal}\n        client={isEdit ? selectedClient : undefined}\n        isEdit={isEdit}\n        setIsShowingConfirmModal={setIsShowingConfirmModal}\n        isShowingConfirmModal={isShowingConfirmModal}\n        setIsShowingModal={setIsShowingCreateClientModal}\n      />\n      <DialogBase\n        open={isShowingVerification}\n        onCancel={() => setIsShowingVerification(false)}\n        title=\"Submit Verification\"\n        content={\n          <>\n            <p>\n              In order to verify an OAuth client please submit a request to the{' '}\n              <Link\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href=\"https://sagebionetworks.jira.com/servicedesk/customer/portal/9\"\n              >\n                Synapse Service Desk.\n              </Link>\n            </p>\n            <b>Please list the following items in your request:</b>\n            <ul>\n              <li>Your name</li>\n              <li>\n                The ID of the client to be verified <br />\n              </li>\n              <li>A description of your application</li>\n            </ul>\n            {/* <p>\n            Verification can take up to X weeks and we will notify you via X.\n          </p> */}\n          </>\n        }\n      />\n      <OAuthAclEditorModal\n        clientId={selectedClient?.client_id!}\n        open={isShowingSharingSettings}\n        onClose={() => setIsShowingSharingSettings(false)}\n      />\n      <WarningDialog\n        open={isShowingSecretWarning}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={() => {\n          setIsShowingSecretWarning(false)\n          setSelectedClient(undefined)\n        }}\n        onConfirm={onShowSecret}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n      {secret && (\n        <DialogBase\n          open={isShowingSecret}\n          title=\"App Secret\"\n          onCancel={() => {\n            setIsShowingSecret(false)\n            setSecret(undefined)\n          }}\n          content={\n            <>\n              <p>\n                <b>This secret will not be able to be retrieved again.</b> If\n                needed, in order to generate a new secret select Generate from\n                the Client List.\n              </p>\n              <CopyToClipboardInput value={secret} inputWidth={'400px'} />\n            </>\n          }\n        />\n      )}\n    </div>\n  )\n}\n\nexport default OAuthManagement\n"],"mappings":"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"}

package/dist/components/OrientationBanner/OrientationBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrientationBanner.js","names":[],"sources":["../../../src/components/OrientationBanner/OrientationBanner.tsx"],"sourcesContent":["import Illustrations from '@/assets/illustrations'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useCookiePreferences } from '@/utils/hooks/useCookiePreferences'\nimport { Theme } from '@mui/material'\nimport { SxProps } from '@mui/system'\nimport React, { ReactNode, useState } from 'react'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n  FullWidthAlertProps,\n} from '../FullWidthAlert/FullWidthAlert'\nimport {\n  getOrientationBannerKey,\n  OrientationBannerName,\n} from '@/utils/OrientationBannerConstants'\n\nexport interface OrientationBannerProps {\n  name: OrientationBannerName\n  title: string\n  text: ReactNode\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  sx?: FullWidthAlertProps['sx']\n}\n\nfunction OrientationBanner(props: OrientationBannerProps): React.ReactNode {\n  const { name, title, text, primaryButtonConfig, secondaryButtonConfig, sx } =\n    props\n  const [cookiePreferences] = useCookiePreferences()\n\n  const storageBannerId = getOrientationBannerKey(name)\n  const [showBanner, setShowBanner] = useState(\n    localStorage.getItem(storageBannerId) === null,\n  )\n\n  const defaultSx: SxProps<Theme> = theme => ({\n    [theme.breakpoints.down('md')]: {\n      display: 'none',\n    },\n    backgroundColor: '#F9FAFB',\n    border: 'none',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',\n    minHeight: '152px',\n    mt: 0,\n    paddingLeft: 4,\n    '.MuiAlert-icon': { mr: 5 },\n    '.MuiAlertTitle-root': { color: theme.palette.grey[1000] },\n  })\n  const BannerIllustration = Illustrations[name]\n\n  return (\n    <FullWidthAlert\n      show={showBanner}\n      isGlobal={false}\n      title={title}\n      description={text}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n      icon={<BannerIllustration />}\n      onClose={() => {\n        if (cookiePreferences.functionalAllowed) {\n          localStorage.setItem(storageBannerId, 'true')\n        }\n        setShowBanner(false)\n      }}\n      sx={spreadSx(defaultSx, sx)}\n    />\n  )\n}\n\nexport default OrientationBanner\n"],"mappings":";;;;;;;;AAwBA,SAAS,EAAkB,GAAgD;CACzE,IAAM,EAAE,SAAM,UAAO,SAAM,wBAAqB,0BAAuB,UACrE,GACI,CAAC,KAAqB,GAAsB,EAE5C,IAAkB,EAAwB,EAAK,EAC/C,CAAC,GAAY,KAAiB,EAClC,aAAa,QAAQ,EAAgB,KAAK,KAC3C,EAEK,KAA4B,OAAU;GACzC,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,SAAS,QACV;EACD,iBAAiB;EACjB,QAAQ;EACR,WAAW;EACX,WAAW;EACX,IAAI;EACJ,aAAa;EACb,kBAAkB,EAAE,IAAI,GAAG;EAC3B,uBAAuB,EAAE,OAAO,EAAM,QAAQ,KAAK,MAAO;EAC3D,GACK,IAAqB,EAAc;AAEzC,QACE,kBAAC,GAAD;EACE,MAAM;EACN,UAAU;EACH;EACP,aAAa;EACQ;EACE;EACvB,MAAM,kBAAC,GAAD,EAAsB,CAAA;EAC5B,eAAe;AAIb,GAHI,EAAkB,qBACpB,aAAa,QAAQ,GAAiB,OAAO,EAE/C,EAAc,GAAM;;EAEtB,IAAI,EAAS,GAAW,EAAG;EAC3B,CAAA"}
+{"version":3,"file":"OrientationBanner.js","names":[],"sources":["../../../src/components/OrientationBanner/OrientationBanner.tsx"],"sourcesContent":["import Illustrations from '@/assets/illustrations'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useCookiePreferences } from '@/utils/hooks/useCookiePreferences'\nimport { Theme } from '@mui/material'\nimport { SxProps } from '@mui/system'\nimport React, { ReactNode, useState } from 'react'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n  FullWidthAlertProps,\n} from '../FullWidthAlert/FullWidthAlert'\nimport {\n  getOrientationBannerKey,\n  OrientationBannerName,\n} from '@/utils/OrientationBannerConstants'\n\nexport interface OrientationBannerProps {\n  name: OrientationBannerName\n  title: string\n  text: ReactNode\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  sx?: FullWidthAlertProps['sx']\n}\n\nfunction OrientationBanner(props: OrientationBannerProps): React.ReactNode {\n  const { name, title, text, primaryButtonConfig, secondaryButtonConfig, sx } =\n    props\n  const [cookiePreferences] = useCookiePreferences()\n\n  const storageBannerId = getOrientationBannerKey(name)\n  const [showBanner, setShowBanner] = useState(\n    localStorage.getItem(storageBannerId) === null,\n  )\n\n  const defaultSx: SxProps<Theme> = theme => ({\n    [theme.breakpoints.down('md')]: {\n      display: 'none',\n    },\n    backgroundColor: '#F9FAFB',\n    border: 'none',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',\n    minHeight: '152px',\n    mt: 0,\n    paddingLeft: 4,\n    '.MuiAlert-icon': { mr: 5 },\n    '.MuiAlertTitle-root': { color: theme.palette.grey[1000] },\n  })\n  const BannerIllustration = Illustrations[name]\n\n  return (\n    <FullWidthAlert\n      show={showBanner}\n      isGlobal={false}\n      title={title}\n      description={text}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n      icon={<BannerIllustration />}\n      onClose={() => {\n        if (cookiePreferences.functionalAllowed) {\n          localStorage.setItem(storageBannerId, 'true')\n        }\n        setShowBanner(false)\n      }}\n      sx={spreadSx(defaultSx, sx)}\n    />\n  )\n}\n\nexport default OrientationBanner\n"],"mappings":";;;;;;;;AAwBA,SAAS,EAAkB,GAAgD;CACzE,IAAM,EAAE,SAAM,UAAO,SAAM,wBAAqB,0BAAuB,UACrE,GACI,CAAC,KAAqB,EAAqB,GAE3C,IAAkB,EAAwB,CAAI,GAC9C,CAAC,GAAY,KAAiB,EAClC,aAAa,QAAQ,CAAe,MAAM,IAC5C,GAEM,KAA4B,OAAU;GACzC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,SAAS,OACX;EACA,iBAAiB;EACjB,QAAQ;EACR,WAAW;EACX,WAAW;EACX,IAAI;EACJ,aAAa;EACb,kBAAkB,EAAE,IAAI,EAAE;EAC1B,uBAAuB,EAAE,OAAO,EAAM,QAAQ,KAAK,KAAM;CAC3D,IACM,IAAqB,EAAc;CAEzC,OACE,kBAAC,GAAD;EACE,MAAM;EACN,UAAU;EACH;EACP,aAAa;EACQ;EACE;EACvB,MAAM,kBAAC,GAAD,CAAqB,CAAA;EAC3B,eAAe;GAIb,AAHI,EAAkB,qBACpB,aAAa,QAAQ,GAAiB,MAAM,GAE9C,EAAc,EAAK;EACrB;EACA,IAAI,EAAS,GAAW,CAAE;CAC3B,CAAA;AAEL"}

package/dist/components/PageProgress/PageProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProgress.js","names":[],"sources":["../../../src/components/PageProgress/PageProgress.tsx"],"sourcesContent":["import { useEffect, useState, MouseEvent } from 'react'\nimport { Box, Button, LinearProgress } from '@mui/material'\n\nexport type PageProgressProps = {\n  barColor: string\n  barPercent: number\n  backBtnLabel: string\n  backBtnCallback?: () => void\n  forwardBtnLabel: string\n  forwardBtnCallback?: () => void\n  forwardBtnActive: boolean\n}\n\nexport function PageProgress(props: PageProgressProps) {\n  const {\n    barColor,\n    barPercent,\n    backBtnLabel,\n    forwardBtnLabel,\n    forwardBtnActive,\n    backBtnCallback,\n    forwardBtnCallback,\n  } = props\n  const [progressPercent, setProgressPercent] = useState<number>(0)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setProgressPercent(barPercent)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [barPercent])\n\n  const handleBackButtonClick = (e: MouseEvent) => {\n    if (backBtnCallback) {\n      backBtnCallback()\n    }\n  }\n\n  const handleNextButtonClick = (e: MouseEvent) => {\n    if (forwardBtnCallback && forwardBtnActive) {\n      forwardBtnCallback()\n    }\n  }\n\n  const buttonSx = {\n    padding: '10px 120px',\n    marginRight: '30px',\n  }\n  const progressSx = {\n    backgroundColor: 'transparent',\n    '& .MuiLinearProgress-bar': {\n      backgroundColor: barColor,\n    },\n    height: '10px',\n  }\n\n  return (\n    <section>\n      <LinearProgress\n        value={progressPercent}\n        variant=\"determinate\"\n        sx={progressSx}\n      />\n      <Box\n        sx={{\n          padding: '30px 0',\n          textAlign: 'center',\n        }}\n      >\n        <Button\n          onClick={handleBackButtonClick}\n          sx={buttonSx}\n          variant=\"outlined\"\n          color=\"primary\"\n        >\n          {backBtnLabel}\n        </Button>\n        <Button\n          onClick={handleNextButtonClick}\n          disabled={!forwardBtnActive}\n          sx={buttonSx}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          {forwardBtnLabel}\n        </Button>\n      </Box>\n    </section>\n  )\n}\n\nexport default PageProgress\n"],"mappings":";;;;AAaA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,aACA,eACA,iBACA,oBACA,qBACA,oBACA,0BACE,GACE,CAAC,GAAiB,KAAsB,EAAiB,EAAE,EAC7D,IAAU;AAEd,UACM,KACF,EAAmB,EAAW,QAEnB;AACX,MAAU;KAEX,CAAC,EAAW,CAAC;CAEhB,IAAM,KAAyB,MAAkB;AAC/C,EAAI,KACF,GAAiB;IAIf,KAAyB,MAAkB;AAC/C,EAAI,KAAsB,KACxB,GAAoB;IAIlB,IAAW;EACf,SAAS;EACT,aAAa;EACd;AASD,QACE,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,IAAI;GAZR,iBAAiB;GACjB,4BAA4B,EAC1B,iBAAiB,GAClB;GACD,QAAQ;GAQA;EACJ,CAAA,EACF,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,WAAW;GACZ;YAJH,CAME,kBAAC,GAAD;GACE,SAAS;GACT,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;GACM,CAAA,EACT,kBAAC,GAAD;GACE,SAAS;GACT,UAAU,CAAC;GACX,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;GACM,CAAA,CACL;IACE,EAAA,CAAA"}
+{"version":3,"file":"PageProgress.js","names":[],"sources":["../../../src/components/PageProgress/PageProgress.tsx"],"sourcesContent":["import { useEffect, useState, MouseEvent } from 'react'\nimport { Box, Button, LinearProgress } from '@mui/material'\n\nexport type PageProgressProps = {\n  barColor: string\n  barPercent: number\n  backBtnLabel: string\n  backBtnCallback?: () => void\n  forwardBtnLabel: string\n  forwardBtnCallback?: () => void\n  forwardBtnActive: boolean\n}\n\nexport function PageProgress(props: PageProgressProps) {\n  const {\n    barColor,\n    barPercent,\n    backBtnLabel,\n    forwardBtnLabel,\n    forwardBtnActive,\n    backBtnCallback,\n    forwardBtnCallback,\n  } = props\n  const [progressPercent, setProgressPercent] = useState<number>(0)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setProgressPercent(barPercent)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [barPercent])\n\n  const handleBackButtonClick = (e: MouseEvent) => {\n    if (backBtnCallback) {\n      backBtnCallback()\n    }\n  }\n\n  const handleNextButtonClick = (e: MouseEvent) => {\n    if (forwardBtnCallback && forwardBtnActive) {\n      forwardBtnCallback()\n    }\n  }\n\n  const buttonSx = {\n    padding: '10px 120px',\n    marginRight: '30px',\n  }\n  const progressSx = {\n    backgroundColor: 'transparent',\n    '& .MuiLinearProgress-bar': {\n      backgroundColor: barColor,\n    },\n    height: '10px',\n  }\n\n  return (\n    <section>\n      <LinearProgress\n        value={progressPercent}\n        variant=\"determinate\"\n        sx={progressSx}\n      />\n      <Box\n        sx={{\n          padding: '30px 0',\n          textAlign: 'center',\n        }}\n      >\n        <Button\n          onClick={handleBackButtonClick}\n          sx={buttonSx}\n          variant=\"outlined\"\n          color=\"primary\"\n        >\n          {backBtnLabel}\n        </Button>\n        <Button\n          onClick={handleNextButtonClick}\n          disabled={!forwardBtnActive}\n          sx={buttonSx}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          {forwardBtnLabel}\n        </Button>\n      </Box>\n    </section>\n  )\n}\n\nexport default PageProgress\n"],"mappings":";;;;AAaA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,aACA,eACA,iBACA,oBACA,qBACA,oBACA,0BACE,GACE,CAAC,GAAiB,KAAsB,EAAiB,CAAC,GAC5D,IAAU;CAEd,SACM,KACF,EAAmB,CAAU,SAElB;EACX,IAAU;CACZ,IACC,CAAC,CAAU,CAAC;CAEf,IAAM,KAAyB,MAAkB;EAC/C,AAAI,KACF,EAAgB;CAEpB,GAEM,KAAyB,MAAkB;EAC/C,AAAI,KAAsB,KACxB,EAAmB;CAEvB,GAEM,IAAW;EACf,SAAS;EACT,aAAa;CACf;CASA,OACE,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,IAAI;GAZR,iBAAiB;GACjB,4BAA4B,EAC1B,iBAAiB,EACnB;GACA,QAAQ;EAQA;CACL,CAAA,GACD,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,WAAW;EACb;YAJF,CAME,kBAAC,GAAD;GACE,SAAS;GACT,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;EACK,CAAA,GACR,kBAAC,GAAD;GACE,SAAS;GACT,UAAU,CAAC;GACX,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;EACK,CAAA,CACL;GACE,EAAA,CAAA;AAEb"}

package/dist/components/Plot/BarPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'])).sort()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;AACP,CAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,EAAO;CAE/C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,MAAS,CAAC,CAAC,MAAM,EACrD,IAAgB,EAAE,EAClB,IAAgB,CAAC,kBAAkB,qBAAqB;AAoB9D,QAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,EAAM;AACvD,IAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,EAAE;GAC5B,GAAG,EAAM,KAAI,MAAQ,EAAK,EAAE;GAC5B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;IACR;GACD,MAAM,CAAC,EAAM;GACb,eAAe;GACf,cAAc;GACd,MAAM;GACP,CAAC;GACF,EAEK;;AAGT,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,EAAa;AAkBtC,QAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,EAAS;EACrB,EACG,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,IACP,EACF,GAEH,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;;AAGT,IAAM,IAAuC,EAAE,iBAAiB,eAAe,EACzE,IAAuC;CAC3C,OAAO;CACP,QAAQ;CACT;AAED,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;AACf,QACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;GAC5B,CAAC;EACF,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,EAAO;EACnD,UAAS,MAAM,IAAU,EAAQ,EAAE,GAAG;EACtC,CAAA"}
+{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'])).sort()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;CACP,AAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,CAAM;CAE9C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,KAAQ,CAAC,EAAE,KAAK,GACpD,IAAgB,CAAC,GACjB,IAAgB,CAAC,kBAAkB,oBAAoB;CAoB7D,OAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,CAAK;EACtD,EAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;GACT;GACA,MAAM,CAAC,CAAK;GACZ,eAAe;GACf,cAAc;GACd,MAAM;EACR,CAAC;CACH,CAAC,GAEM;AACT;AAEA,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,CAAY;CAkBrC,OAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,CAAQ;CACrB,GACI,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,GACR,EACF,IAEF,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;AACT;AAEA,IAAM,IAAuC,EAAE,iBAAiB,cAAc,GACxE,IAAuC;CAC3C,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;CACf,OACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;EAC7B,CAAC;EACD,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,CAAM;EAClD,UAAS,MAAM,IAAU,EAAQ,CAAC,IAAI;CACvC,CAAA;AAEL"}

package/dist/components/Plot/DotPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DotPlot.js","names":[],"sources":["../../../src/components/Plot/DotPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport countBy from 'lodash-es/countBy'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { Dictionary, GraphItem, PlotStyle } from './types'\n\nexport type DotPlotProps = {\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label?: string\n  style?: CSSProperties\n  id: string\n  isLegend?: boolean\n  isXAxis?: boolean\n  xMax?: number\n  plotStyle?: PlotStyle\n  markerSymbols?: Dictionary\n  onClick?: (e: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isLegend: boolean\n  isXAxis: boolean\n  maxValue?: number\n  backgroundColor?: string\n}\n\nfunction getLayout(\n  dotPlotLayoutConfig: Partial<Plotly.Layout>,\n  layoutOptions?: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const result = cloneDeep(dotPlotLayoutConfig)\n  if (!layoutOptions) {\n    return result\n  }\n  if (layoutOptions.backgroundColor) {\n    result.plot_bgcolor = layoutOptions.backgroundColor\n  }\n  result.yaxis!.showgrid = false\n  result.yaxis!.zeroline = true\n  result.yaxis!.zerolinecolor = '#aeb5bc'\n  result.yaxis!.showticklabels = false\n  if (result.xaxis!.type === 'log') {\n    result.xaxis!.tickformat = 'f'\n    result.xaxis!.range = [-0.1, Math.log10(layoutOptions.maxValue!) + 0.1]\n  } else {\n    result.xaxis!.range = [\n      (layoutOptions.maxValue! / 50) * -1,\n      layoutOptions.maxValue! + 30,\n    ]\n  }\n  result.xaxis!.visible = layoutOptions.isXAxis\n  result.showlegend = layoutOptions.isLegend\n  result.margin = {\n    t: 0,\n    b: layoutOptions.isXAxis ? 50 : 0,\n    l: 0,\n    r: 0,\n    pad: 15,\n  }\n  let height = 40\n  if (layoutOptions.isLegend) {\n    height = 35\n    result.margin.pad = 0\n    result.xaxis = {\n      visible: false,\n      zeroline: false,\n      showgrid: false,\n      showline: false,\n      range: [0, 1],\n    }\n\n    result.yaxis = {\n      visible: false,\n      showline: false,\n    }\n  }\n  if (layoutOptions.isXAxis) {\n    result.yaxis = {\n      visible: false,\n      showgrid: false,\n      showline: false,\n    }\n    height = 50\n  }\n\n  result.height = height\n\n  return result\n}\n\nfunction createArrayOfGroupValues(\n  headers: string[],\n  items: GraphItem[],\n): number[] {\n  const result: number[] = new Array(headers.length)\n  items.forEach(item => {\n    const index = headers.indexOf(item.y)\n    if (index !== -1) {\n      result[index] = item.x\n    }\n  })\n  return result\n}\n\n/**\n * Generates a sequence of n numbers centered around 0\n *\n * Examples:\n * if n is 4, the result would be [-1.5, -0.5, 0.5, 1.5]\n * if n is 5 the result would be [-2, -1, 0, 1, 2]\n * @param n\n */\nexport function generateCenteredSequence(n: number): number[] {\n  const sequence: number[] = []\n  const half = (n - 1) / 2\n  for (let i = 0; i < n; i++) {\n    sequence.push(i - half)\n  }\n  return sequence\n}\n\n/**\n * Returns a set of y values where\n *  - if an x value is unique, the y value is 0\n *  - if an x value is repeated, the y value is an offset from 0\n *\n * This has the effect of preventing overlapping points in a dot plot\n * @param xDataByGroup\n */\nexport function getYDataForDotPlotOffset(\n  xDataByGroup: Record<string, number[]>,\n): Record<string, number[]> {\n  const counts = countBy(xDataByGroup, val => val[0])\n\n  const yDataByGroup: Record<string, number[]> = {}\n  // keep track of how many times we have seen each duplicate value\n  const seen: Record<number, number> = {}\n  Object.keys(xDataByGroup).forEach(group => {\n    const value = xDataByGroup[group][0]\n    if (counts[value] === 1) {\n      // The value is not duplicated by another group, so the y-value (vertical offset) is 0\n      yDataByGroup[group] = [0]\n    } else {\n      // The value is duplicated by another group, so get an offset value that will be\n      //   - centered around 0\n      //   - unique for this item among all items with the same value\n      if (seen[value] == undefined) {\n        seen[value] = 0\n      }\n      const offsets = generateCenteredSequence(counts[value])\n      const offset = offsets[seen[value]]\n\n      yDataByGroup[group] = [offset]\n      seen[value] = seen[value] + 1\n    }\n  })\n  return yDataByGroup\n}\n\nfunction getPlotDataPoints(\n  graphItems: GraphItem[],\n  plotStyle: PlotStyle,\n  ySorted?: string[],\n  markerSymbols?: Dictionary,\n): Plotly.Data[] {\n  const isFakeData = ySorted === undefined\n  const groups = uniq(graphItems.map(item => item.group))\n  const defaultSymbols = [\n    'y-down',\n    'triangle-up',\n    'cross-thin-open',\n    'triangle-up-open-dot',\n    'star-square-open',\n    'diamond-x',\n  ]\n\n  const xDataByGroup: Record<string, number[]> = groups.reduce(\n    (prev, group) => {\n      const xDataForGroup = isFakeData\n        ? [-100] // fake datavalue outside of the bounds\n        : createArrayOfGroupValues(\n            ySorted,\n            graphItems.filter(row => row.group === group),\n          )\n      return { ...prev, [group]: xDataForGroup }\n    },\n    {},\n  )\n  const yDataByGroup: Record<string, number[]> =\n    getYDataForDotPlotOffset(xDataByGroup)\n\n  const data: Plotly.Data[] = groups.map((group, i) => {\n    const xData: number[] = xDataByGroup[group]\n    const yData: number[] = yDataByGroup[group]\n    return {\n      type: 'scatter',\n      x: xData,\n      y: yData,\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      mode: 'markers',\n      name: group,\n      marker: {\n        color: plotStyle.markerFill,\n        line: {\n          color: plotStyle.markerLine,\n          width: 1,\n        },\n\n        symbol: markerSymbols ? markerSymbols[group] : defaultSymbols[i],\n        size: plotStyle.markerSize,\n      },\n    }\n  })\n\n  return data\n}\n\nconst DEFAULT_DOTPLOT_PLOTSTYLE: PlotStyle = {\n  markerFill: '#515359',\n  markerLine: '#515359',\n  markerSize: 9,\n  backgroundColor: 'transparent',\n}\nconst DEFAULT_DOTPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction DotPlot({\n  plotData,\n  optionsConfig,\n  layoutConfig,\n  label,\n  id,\n  xMax,\n  style = DEFAULT_DOTPLOT_STYLE,\n  markerSymbols,\n  plotStyle = DEFAULT_DOTPLOT_PLOTSTYLE,\n  onClick,\n  isLegend = false,\n  isXAxis = false,\n}: DotPlotProps) {\n  const pointsTypes = label ? [label] : undefined\n\n  return (\n    <Plot\n      key={`dotPlot_${id}`}\n      layout={getLayout(layoutConfig, {\n        isLegend: isLegend,\n        isXAxis: isXAxis,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      style={style}\n      data={getPlotDataPoints(plotData, plotStyle, pointsTypes, markerSymbols)}\n      config={optionsConfig}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default DotPlot\n"],"mappings":"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"}
+{"version":3,"file":"DotPlot.js","names":[],"sources":["../../../src/components/Plot/DotPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport countBy from 'lodash-es/countBy'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { Dictionary, GraphItem, PlotStyle } from './types'\n\nexport type DotPlotProps = {\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label?: string\n  style?: CSSProperties\n  id: string\n  isLegend?: boolean\n  isXAxis?: boolean\n  xMax?: number\n  plotStyle?: PlotStyle\n  markerSymbols?: Dictionary\n  onClick?: (e: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isLegend: boolean\n  isXAxis: boolean\n  maxValue?: number\n  backgroundColor?: string\n}\n\nfunction getLayout(\n  dotPlotLayoutConfig: Partial<Plotly.Layout>,\n  layoutOptions?: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const result = cloneDeep(dotPlotLayoutConfig)\n  if (!layoutOptions) {\n    return result\n  }\n  if (layoutOptions.backgroundColor) {\n    result.plot_bgcolor = layoutOptions.backgroundColor\n  }\n  result.yaxis!.showgrid = false\n  result.yaxis!.zeroline = true\n  result.yaxis!.zerolinecolor = '#aeb5bc'\n  result.yaxis!.showticklabels = false\n  if (result.xaxis!.type === 'log') {\n    result.xaxis!.tickformat = 'f'\n    result.xaxis!.range = [-0.1, Math.log10(layoutOptions.maxValue!) + 0.1]\n  } else {\n    result.xaxis!.range = [\n      (layoutOptions.maxValue! / 50) * -1,\n      layoutOptions.maxValue! + 30,\n    ]\n  }\n  result.xaxis!.visible = layoutOptions.isXAxis\n  result.showlegend = layoutOptions.isLegend\n  result.margin = {\n    t: 0,\n    b: layoutOptions.isXAxis ? 50 : 0,\n    l: 0,\n    r: 0,\n    pad: 15,\n  }\n  let height = 40\n  if (layoutOptions.isLegend) {\n    height = 35\n    result.margin.pad = 0\n    result.xaxis = {\n      visible: false,\n      zeroline: false,\n      showgrid: false,\n      showline: false,\n      range: [0, 1],\n    }\n\n    result.yaxis = {\n      visible: false,\n      showline: false,\n    }\n  }\n  if (layoutOptions.isXAxis) {\n    result.yaxis = {\n      visible: false,\n      showgrid: false,\n      showline: false,\n    }\n    height = 50\n  }\n\n  result.height = height\n\n  return result\n}\n\nfunction createArrayOfGroupValues(\n  headers: string[],\n  items: GraphItem[],\n): number[] {\n  const result: number[] = new Array(headers.length)\n  items.forEach(item => {\n    const index = headers.indexOf(item.y)\n    if (index !== -1) {\n      result[index] = item.x\n    }\n  })\n  return result\n}\n\n/**\n * Generates a sequence of n numbers centered around 0\n *\n * Examples:\n * if n is 4, the result would be [-1.5, -0.5, 0.5, 1.5]\n * if n is 5 the result would be [-2, -1, 0, 1, 2]\n * @param n\n */\nexport function generateCenteredSequence(n: number): number[] {\n  const sequence: number[] = []\n  const half = (n - 1) / 2\n  for (let i = 0; i < n; i++) {\n    sequence.push(i - half)\n  }\n  return sequence\n}\n\n/**\n * Returns a set of y values where\n *  - if an x value is unique, the y value is 0\n *  - if an x value is repeated, the y value is an offset from 0\n *\n * This has the effect of preventing overlapping points in a dot plot\n * @param xDataByGroup\n */\nexport function getYDataForDotPlotOffset(\n  xDataByGroup: Record<string, number[]>,\n): Record<string, number[]> {\n  const counts = countBy(xDataByGroup, val => val[0])\n\n  const yDataByGroup: Record<string, number[]> = {}\n  // keep track of how many times we have seen each duplicate value\n  const seen: Record<number, number> = {}\n  Object.keys(xDataByGroup).forEach(group => {\n    const value = xDataByGroup[group][0]\n    if (counts[value] === 1) {\n      // The value is not duplicated by another group, so the y-value (vertical offset) is 0\n      yDataByGroup[group] = [0]\n    } else {\n      // The value is duplicated by another group, so get an offset value that will be\n      //   - centered around 0\n      //   - unique for this item among all items with the same value\n      if (seen[value] == undefined) {\n        seen[value] = 0\n      }\n      const offsets = generateCenteredSequence(counts[value])\n      const offset = offsets[seen[value]]\n\n      yDataByGroup[group] = [offset]\n      seen[value] = seen[value] + 1\n    }\n  })\n  return yDataByGroup\n}\n\nfunction getPlotDataPoints(\n  graphItems: GraphItem[],\n  plotStyle: PlotStyle,\n  ySorted?: string[],\n  markerSymbols?: Dictionary,\n): Plotly.Data[] {\n  const isFakeData = ySorted === undefined\n  const groups = uniq(graphItems.map(item => item.group))\n  const defaultSymbols = [\n    'y-down',\n    'triangle-up',\n    'cross-thin-open',\n    'triangle-up-open-dot',\n    'star-square-open',\n    'diamond-x',\n  ]\n\n  const xDataByGroup: Record<string, number[]> = groups.reduce(\n    (prev, group) => {\n      const xDataForGroup = isFakeData\n        ? [-100] // fake datavalue outside of the bounds\n        : createArrayOfGroupValues(\n            ySorted,\n            graphItems.filter(row => row.group === group),\n          )\n      return { ...prev, [group]: xDataForGroup }\n    },\n    {},\n  )\n  const yDataByGroup: Record<string, number[]> =\n    getYDataForDotPlotOffset(xDataByGroup)\n\n  const data: Plotly.Data[] = groups.map((group, i) => {\n    const xData: number[] = xDataByGroup[group]\n    const yData: number[] = yDataByGroup[group]\n    return {\n      type: 'scatter',\n      x: xData,\n      y: yData,\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      mode: 'markers',\n      name: group,\n      marker: {\n        color: plotStyle.markerFill,\n        line: {\n          color: plotStyle.markerLine,\n          width: 1,\n        },\n\n        symbol: markerSymbols ? markerSymbols[group] : defaultSymbols[i],\n        size: plotStyle.markerSize,\n      },\n    }\n  })\n\n  return data\n}\n\nconst DEFAULT_DOTPLOT_PLOTSTYLE: PlotStyle = {\n  markerFill: '#515359',\n  markerLine: '#515359',\n  markerSize: 9,\n  backgroundColor: 'transparent',\n}\nconst DEFAULT_DOTPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction DotPlot({\n  plotData,\n  optionsConfig,\n  layoutConfig,\n  label,\n  id,\n  xMax,\n  style = DEFAULT_DOTPLOT_STYLE,\n  markerSymbols,\n  plotStyle = DEFAULT_DOTPLOT_PLOTSTYLE,\n  onClick,\n  isLegend = false,\n  isXAxis = false,\n}: DotPlotProps) {\n  const pointsTypes = label ? [label] : undefined\n\n  return (\n    <Plot\n      key={`dotPlot_${id}`}\n      layout={getLayout(layoutConfig, {\n        isLegend: isLegend,\n        isXAxis: isXAxis,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      style={style}\n      data={getPlotDataPoints(plotData, plotStyle, pointsTypes, markerSymbols)}\n      config={optionsConfig}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default DotPlot\n"],"mappings":"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"}

package/dist/components/Plot/Plot.d.ts

@@ -1,9 +1,20 @@
 import { PlotParams } from 'react-plotly.js';
+export declare const safeESModule: <T>(a: T | {
+    default: T;
+}) => T;
 /**
- * Wrapper around react-plotly.js, lazy loads the plotly.js library.
+ * Wrapper around react-plotly.js, lazy loads plotly.js-basic-dist.
+ * Use this for standard chart types (bar, scatter, pie).
  * @param props
  * @constructor
  */
 export declare function Plot(props: PlotParams): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wrapper around react-plotly.js, lazy loads the full plotly.js bundle.
+ * Use this for trace types not available in plotly.js-basic-dist, such as Sankey.
+ * @param props
+ * @constructor
+ */
+export declare function PlotFullBundle(props: PlotParams): import("react/jsx-runtime").JSX.Element;
 export default Plot;
 //# sourceMappingURL=Plot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Plot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/Plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAgB5C;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,UAAU,2CAMrC;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Plot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/Plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK5C,eAAO,MAAM,YAAY,GAAI,CAAC,EAAG,GAAG,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,KAAG,CAGxD,CAAA;AASD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,UAAU,2CAMrC;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,2CAM/C;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Plot/Plot.js

@@ -9,7 +9,11 @@ var i = (e) => {
 function o(e) {
 	return /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(a, { ...e }) });
 }
+var s = n(async () => ({ default: e(i(await import("plotly.js"))) }));
+function c(e) {
+	return /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { ...e }) });
+}
 //#endregion
-export { o as Plot, o as default };
+export { o as Plot, o as default, c as PlotFullBundle, i as safeESModule };
 
 //# sourceMappingURL=Plot.js.map

package/dist/components/Plot/Plot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Plot.js","names":[],"sources":["../../../src/components/Plot/Plot.tsx"],"sourcesContent":["import { PlotParams } from 'react-plotly.js'\nimport createPlotlyComponent from './safe-react-plotly-factory'\nimport { lazy, Suspense } from 'react'\n\n// Lazy-load plotly.js since it is very large!\nconst safeESModule = <T,>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\nconst LazyLoadedPlot = lazy(async () => {\n  const Plotly = await import('plotly.js-basic-dist')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads the plotly.js library.\n * @param props\n * @constructor\n */\nexport function Plot(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedPlot {...props} />\n    </Suspense>\n  )\n}\n\nexport default Plot\n"],"mappings":";;;;AAKA,IAAM,KAAoB,MAA6B;CACrD,IAAM,IAAI;AACV,QAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;GAGpE,IAAiB,EAAK,aAGnB,EAAE,SAAS,EADH,EAAa,MADP,OAAO,wBAEY,CAAO,EAAE,EACjD;AAOF,SAAgB,EAAK,GAAmB;AACtC,QACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAgB,GAAI,GAAS,CAAA,EACpB,CAAA"}
+{"version":3,"file":"Plot.js","names":[],"sources":["../../../src/components/Plot/Plot.tsx"],"sourcesContent":["import { PlotParams } from 'react-plotly.js'\nimport createPlotlyComponent from './safe-react-plotly-factory'\nimport { lazy, Suspense } from 'react'\n\n// Lazy-load plotly.js since it is very large!\nexport const safeESModule = <T,>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\n// Lazy-load plotly.js-basic-dist (scatter, bar, pie, scattergl traces).\nconst LazyLoadedPlot = lazy(async () => {\n  const Plotly = await import('plotly.js-basic-dist')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads plotly.js-basic-dist.\n * Use this for standard chart types (bar, scatter, pie).\n * @param props\n * @constructor\n */\nexport function Plot(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedPlot {...props} />\n    </Suspense>\n  )\n}\n\n// Lazy-load the full plotly.js bundle which includes all trace types (e.g. Sankey).\nconst LazyLoadedFullBundlePlot = lazy(async () => {\n  const Plotly = await import('plotly.js')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads the full plotly.js bundle.\n * Use this for trace types not available in plotly.js-basic-dist, such as Sankey.\n * @param props\n * @constructor\n */\nexport function PlotFullBundle(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedFullBundlePlot {...props} />\n    </Suspense>\n  )\n}\n\nexport default Plot\n"],"mappings":";;;;AAKA,IAAa,KAAoB,MAA6B;CAC5D,IAAM,IAAI;CACV,OAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;AAC1E,GAGM,IAAiB,EAAK,aAGnB,EAAE,SAAS,EADH,EAAa,MADP,OAAO,uBAEY,CAAM,EAAE,EACjD;AAQD,SAAgB,EAAK,GAAmB;CACtC,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA,EACpB,CAAA;AAEd;AAGA,IAAM,IAA2B,EAAK,aAG7B,EAAE,SAAS,EADH,EAAa,MADP,OAAO,YAEY,CAAM,EAAE,EACjD;AAQD,SAAgB,EAAe,GAAmB;CAChD,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAA0B,GAAI,EAAQ,CAAA,EAC9B,CAAA;AAEd"}

package/dist/components/Plot/PlotPanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import {\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: FacetColumnResultValues\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;AACtE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,KAAO,CAAA,GAEnC,kBAAC,QAAD;GAAM,WAAU;aAA8B;GAAa,CAAA,EAE7D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;KAAa,CAAA;IAE/D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,GAAK;KACjC,MAAK;KACL,MAAK;KACL,CAAA;IAEJ,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,GAAQ;KACvB,MAAK;KACL,MAAK;KACL,CAAA;IACE;KACF"}
+{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import {\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: FacetColumnResultValues\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;CACtE,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA,IAElC,kBAAC,QAAD;GAAM,WAAU;aAA8B;EAAY,CAAA,GAE5D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;IAAY,CAAA;IAE9D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,EAAI;KAChC,MAAK;KACL,MAAK;IACN,CAAA;IAEH,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAO;KACtB,MAAK;KACL,MAAK;IACN,CAAA;GACE;IACF;;AAET"}

package/dist/components/Plot/SynapsePlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapsePlot.js","names":[],"sources":["../../../src/components/Plot/SynapsePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton } from '@mui/material'\nimport {\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryFilter,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly, { AxisType, PlotType } from 'plotly.js-basic-dist'\nimport { QueryContextType } from '../QueryContext'\nimport { QueryWrapperSynapsePlotRowClickEvent } from '../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport Plot from './Plot'\nimport './SynapsePlot.scss'\n\nexport type SynapsePlotWidgetParams = {\n  query: string //sql string\n  title?: string //plot title\n  xtitle?: Plotly.LayoutAxis['title'] // x-axis title\n  ytitle?: Plotly.LayoutAxis['title'] // y-axis title\n  type: PlotType\n  xaxistype?: AxisType\n  showlegend?: Plotly.Layout['showlegend'] // sets the legend visibility\n  horizontal?: boolean // sets the if a bar chart should be horizontal or vertical\n  barmode?: Plotly.Layout['barmode'] // Plotly barmode\n  displayModeBar?: Plotly.Config['displayModeBar'] // sets the modebar visibility\n  hoverinfo?: Plotly.PlotData['hoverinfo'] // sets the hover info\n}\n\n// QueryWrapperPlotNav customPlot parameters, undefined otherwise\nexport type QueryWrapperPlotNavCustomPlotParams = {\n  selectedFacets: FacetColumnRequest[]\n  additionalFilters: QueryFilter[]\n  onCustomPlotClick?: (event: QueryWrapperSynapsePlotRowClickEvent) => void\n  queryContext?: QueryContextType\n}\nexport type SynapsePlotProps = {\n  synapsePlotWidgetParams: SynapsePlotWidgetParams\n  customPlotParams?: QueryWrapperPlotNavCustomPlotParams\n}\n\nexport const SynapsePlot = (props: SynapsePlotProps): React.ReactNode => {\n  const { query } = props.synapsePlotWidgetParams\n  const { selectedFacets, additionalFilters, onCustomPlotClick, queryContext } =\n    props.customPlotParams ?? {}\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(query),\n    query: {\n      sql: query,\n      selectedFacets,\n      additionalFilters,\n    },\n  }\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'200px'} />\n  }\n  if (!queryData) {\n    return <></>\n  }\n\n  const {\n    title,\n    xtitle,\n    ytitle,\n    type,\n    xaxistype,\n    showlegend,\n    barmode,\n    horizontal,\n    displayModeBar,\n    hoverinfo,\n  } = props.synapsePlotWidgetParams\n\n  const config: Partial<Plotly.Config> = {\n    displayModeBar,\n  }\n  const layout: Partial<Plotly.Layout> = {\n    showlegend: showlegend,\n    title,\n    barmode: barmode,\n  }\n  if (xtitle) {\n    layout.xaxis = {\n      title: xtitle,\n    }\n  }\n  if (xaxistype) {\n    layout.xaxis = {\n      ...layout.xaxis,\n      type: xaxistype,\n    }\n  }\n  if (ytitle) {\n    layout.yaxis = {\n      title: ytitle,\n    }\n  }\n  // init plot_data\n  const plotData: Partial<Plotly.PlotData>[] = []\n  const orientation = horizontal ? 'h' : 'v'\n  const headers = queryData.queryResult?.queryResults.headers ?? []\n  const rows = queryData.queryResult?.queryResults.rows ?? []\n  if (headers.length == 0 || rows.length == 0) {\n    return <></>\n  }\n  for (let i = 0; i < headers.length - 1; i += 1) {\n    // make an entry for each set of data points\n    plotData[i] = {\n      orientation,\n      name: headers[i + 1].name,\n      type: type,\n      x: [],\n      y: [],\n      customdata: [],\n      ...(hoverinfo !== undefined && { hoverinfo }),\n    }\n  }\n  // grab all the data\n  for (const row of rows) {\n    for (let j = 1; j < row.values.length; j += 1) {\n      // create pairs of data\n      const rowValues = row.values\n      const xArray = plotData[j - 1].x as Plotly.Datum[]\n      const yArray = plotData[j - 1].y as Plotly.Datum[]\n      const customdata = plotData[j - 1].customdata as Plotly.Datum[]\n\n      xArray.push(horizontal ? rowValues[j] : rowValues[0])\n      yArray.push(horizontal ? rowValues[0] : rowValues[j])\n      customdata.push(JSON.stringify(row))\n    }\n  }\n  let onPlotClick:\n    | ((event: Readonly<Plotly.PlotMouseEvent>) => void)\n    | undefined\n  if (onCustomPlotClick) {\n    onPlotClick = eventData => {\n      const selectedRow = JSON.parse(\n        eventData.points[0].customdata as string,\n      ) as Row\n      onCustomPlotClick({\n        row: selectedRow,\n        queryContext,\n      })\n    }\n  }\n\n  return (\n    <Plot\n      style={{ width: '100%', height: '450px' }}\n      className={onPlotClick ? 'SynapsePlot--clickable' : undefined}\n      layout={layout}\n      data={plotData}\n      config={config}\n      onClick={onPlotClick}\n    />\n  )\n}\n\nexport default SynapsePlot\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,KAAe,MAA6C;CACvE,IAAM,EAAE,aAAU,EAAM,yBAClB,EAAE,mBAAgB,sBAAmB,sBAAmB,oBAC5D,EAAM,oBAAoB,EAAE,EAWxB,EAAE,MAAM,GAAW,iBACvB,EAA4B;EAV5B,cAAc;EACd,UAAU;EACV,UAAU,EAA8B,EAAM;EAC9C,OAAO;GACL,KAAK;GACL;GACA;GACD;EAG2B,CAAa;AAC3C,KAAI,EACF,QAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;EAAW,CAAA;AAErD,KAAI,CAAC,EACH,QAAO,kBAAA,GAAA,EAAK,CAAA;CAGd,IAAM,EACJ,UACA,WACA,WACA,SACA,cACA,eACA,YACA,eACA,mBACA,iBACE,EAAM,yBAEJ,IAAiC,EACrC,mBACD,EACK,IAAiC;EACzB;EACZ;EACS;EACV;AAYD,CAXI,MACF,EAAO,QAAQ,EACb,OAAO,GACR,GAEC,MACF,EAAO,QAAQ;EACb,GAAG,EAAO;EACV,MAAM;EACP,GAEC,MACF,EAAO,QAAQ,EACb,OAAO,GACR;CAGH,IAAM,IAAuC,EAAE,EACzC,IAAc,IAAa,MAAM,KACjC,IAAU,EAAU,aAAa,aAAa,WAAW,EAAE,EAC3D,IAAO,EAAU,aAAa,aAAa,QAAQ,EAAE;AAC3D,KAAI,EAAQ,UAAU,KAAK,EAAK,UAAU,EACxC,QAAO,kBAAA,GAAA,EAAK,CAAA;AAEd,MAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,SAAS,GAAG,KAAK,EAE3C,GAAS,KAAK;EACZ;EACA,MAAM,EAAQ,IAAI,GAAG;EACf;EACN,GAAG,EAAE;EACL,GAAG,EAAE;EACL,YAAY,EAAE;EACd,GAAI,MAAc,KAAA,KAAa,EAAE,cAAW;EAC7C;AAGH,MAAK,IAAM,KAAO,EAChB,MAAK,IAAI,IAAI,GAAG,IAAI,EAAI,OAAO,QAAQ,KAAK,GAAG;EAE7C,IAAM,IAAY,EAAI,QAChB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAa,EAAS,IAAI,GAAG;AAInC,EAFA,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,GAAG,EACrD,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,GAAG,EACrD,EAAW,KAAK,KAAK,UAAU,EAAI,CAAC;;CAGxC,IAAI;AAeJ,QAZI,MACF,KAAc,MAAa;AAIzB,IAAkB;GAChB,KAJkB,KAAK,MACvB,EAAU,OAAO,GAAG,WAGf;GACL;GACD,CAAC;KAKJ,kBAAC,GAAD;EACE,OAAO;GAAE,OAAO;GAAQ,QAAQ;GAAS;EACzC,WAAW,IAAc,2BAA2B,KAAA;EAC5C;EACR,MAAM;EACE;EACR,SAAS;EACT,CAAA"}
+{"version":3,"file":"SynapsePlot.js","names":[],"sources":["../../../src/components/Plot/SynapsePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton } from '@mui/material'\nimport {\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryFilter,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly, { AxisType, PlotType } from 'plotly.js-basic-dist'\nimport { QueryContextType } from '../QueryContext'\nimport { QueryWrapperSynapsePlotRowClickEvent } from '../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport Plot from './Plot'\nimport './SynapsePlot.scss'\n\nexport type SynapsePlotWidgetParams = {\n  query: string //sql string\n  title?: string //plot title\n  xtitle?: Plotly.LayoutAxis['title'] // x-axis title\n  ytitle?: Plotly.LayoutAxis['title'] // y-axis title\n  type: PlotType\n  xaxistype?: AxisType\n  showlegend?: Plotly.Layout['showlegend'] // sets the legend visibility\n  horizontal?: boolean // sets the if a bar chart should be horizontal or vertical\n  barmode?: Plotly.Layout['barmode'] // Plotly barmode\n  displayModeBar?: Plotly.Config['displayModeBar'] // sets the modebar visibility\n  hoverinfo?: Plotly.PlotData['hoverinfo'] // sets the hover info\n}\n\n// QueryWrapperPlotNav customPlot parameters, undefined otherwise\nexport type QueryWrapperPlotNavCustomPlotParams = {\n  selectedFacets: FacetColumnRequest[]\n  additionalFilters: QueryFilter[]\n  onCustomPlotClick?: (event: QueryWrapperSynapsePlotRowClickEvent) => void\n  queryContext?: QueryContextType\n}\nexport type SynapsePlotProps = {\n  synapsePlotWidgetParams: SynapsePlotWidgetParams\n  customPlotParams?: QueryWrapperPlotNavCustomPlotParams\n}\n\nexport const SynapsePlot = (props: SynapsePlotProps): React.ReactNode => {\n  const { query } = props.synapsePlotWidgetParams\n  const { selectedFacets, additionalFilters, onCustomPlotClick, queryContext } =\n    props.customPlotParams ?? {}\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(query),\n    query: {\n      sql: query,\n      selectedFacets,\n      additionalFilters,\n    },\n  }\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'200px'} />\n  }\n  if (!queryData) {\n    return <></>\n  }\n\n  const {\n    title,\n    xtitle,\n    ytitle,\n    type,\n    xaxistype,\n    showlegend,\n    barmode,\n    horizontal,\n    displayModeBar,\n    hoverinfo,\n  } = props.synapsePlotWidgetParams\n\n  const config: Partial<Plotly.Config> = {\n    displayModeBar,\n  }\n  const layout: Partial<Plotly.Layout> = {\n    showlegend: showlegend,\n    title,\n    barmode: barmode,\n  }\n  if (xtitle) {\n    layout.xaxis = {\n      title: xtitle,\n    }\n  }\n  if (xaxistype) {\n    layout.xaxis = {\n      ...layout.xaxis,\n      type: xaxistype,\n    }\n  }\n  if (ytitle) {\n    layout.yaxis = {\n      title: ytitle,\n    }\n  }\n  // init plot_data\n  const plotData: Partial<Plotly.PlotData>[] = []\n  const orientation = horizontal ? 'h' : 'v'\n  const headers = queryData.queryResult?.queryResults.headers ?? []\n  const rows = queryData.queryResult?.queryResults.rows ?? []\n  if (headers.length == 0 || rows.length == 0) {\n    return <></>\n  }\n  for (let i = 0; i < headers.length - 1; i += 1) {\n    // make an entry for each set of data points\n    plotData[i] = {\n      orientation,\n      name: headers[i + 1].name,\n      type: type,\n      x: [],\n      y: [],\n      customdata: [],\n      ...(hoverinfo !== undefined && { hoverinfo }),\n    }\n  }\n  // grab all the data\n  for (const row of rows) {\n    for (let j = 1; j < row.values.length; j += 1) {\n      // create pairs of data\n      const rowValues = row.values\n      const xArray = plotData[j - 1].x as Plotly.Datum[]\n      const yArray = plotData[j - 1].y as Plotly.Datum[]\n      const customdata = plotData[j - 1].customdata as Plotly.Datum[]\n\n      xArray.push(horizontal ? rowValues[j] : rowValues[0])\n      yArray.push(horizontal ? rowValues[0] : rowValues[j])\n      customdata.push(JSON.stringify(row))\n    }\n  }\n  let onPlotClick:\n    | ((event: Readonly<Plotly.PlotMouseEvent>) => void)\n    | undefined\n  if (onCustomPlotClick) {\n    onPlotClick = eventData => {\n      const selectedRow = JSON.parse(\n        eventData.points[0].customdata as string,\n      ) as Row\n      onCustomPlotClick({\n        row: selectedRow,\n        queryContext,\n      })\n    }\n  }\n\n  return (\n    <Plot\n      style={{ width: '100%', height: '450px' }}\n      className={onPlotClick ? 'SynapsePlot--clickable' : undefined}\n      layout={layout}\n      data={plotData}\n      config={config}\n      onClick={onPlotClick}\n    />\n  )\n}\n\nexport default SynapsePlot\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,KAAe,MAA6C;CACvE,IAAM,EAAE,aAAU,EAAM,yBAClB,EAAE,mBAAgB,sBAAmB,sBAAmB,oBAC5D,EAAM,oBAAoB,CAAC,GAWvB,EAAE,MAAM,GAAW,iBACvB,EAA4B;EAV5B,cAAc;EACd,UAAU;EACV,UAAU,EAA8B,CAAK;EAC7C,OAAO;GACL,KAAK;GACL;GACA;EACF;CAG4B,CAAY;CAC1C,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAU,CAAA;CAEpD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,IAAM,EACJ,UACA,WACA,WACA,SACA,cACA,eACA,YACA,eACA,mBACA,iBACE,EAAM,yBAEJ,IAAiC,EACrC,kBACF,GACM,IAAiC;EACzB;EACZ;EACS;CACX;CAYA,AAXI,MACF,EAAO,QAAQ,EACb,OAAO,EACT,IAEE,MACF,EAAO,QAAQ;EACb,GAAG,EAAO;EACV,MAAM;CACR,IAEE,MACF,EAAO,QAAQ,EACb,OAAO,EACT;CAGF,IAAM,IAAuC,CAAC,GACxC,IAAc,IAAa,MAAM,KACjC,IAAU,EAAU,aAAa,aAAa,WAAW,CAAC,GAC1D,IAAO,EAAU,aAAa,aAAa,QAAQ,CAAC;CAC1D,IAAI,EAAQ,UAAU,KAAK,EAAK,UAAU,GACxC,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,KAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,SAAS,GAAG,KAAK,GAE3C,EAAS,KAAK;EACZ;EACA,MAAM,EAAQ,IAAI,GAAG;EACf;EACN,GAAG,CAAC;EACJ,GAAG,CAAC;EACJ,YAAY,CAAC;EACb,GAAI,MAAc,KAAA,KAAa,EAAE,aAAU;CAC7C;CAGF,KAAK,IAAM,KAAO,GAChB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAI,OAAO,QAAQ,KAAK,GAAG;EAE7C,IAAM,IAAY,EAAI,QAChB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAa,EAAS,IAAI,GAAG;EAInC,AAFA,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,EAAE,GACpD,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,EAAE,GACpD,EAAW,KAAK,KAAK,UAAU,CAAG,CAAC;CACrC;CAEF,IAAI;CAeJ,OAZI,MACF,KAAc,MAAa;EAIzB,EAAkB;GAChB,KAJkB,KAAK,MACvB,EAAU,OAAO,GAAG,UAGf;GACL;EACF,CAAC;CACH,IAIA,kBAAC,GAAD;EACE,OAAO;GAAE,OAAO;GAAQ,QAAQ;EAAQ;EACxC,WAAW,IAAc,2BAA2B,KAAA;EAC5C;EACR,MAAM;EACE;EACR,SAAS;CACV,CAAA;AAEL"}