npm - synapse-react-client - Versions diffs - 4.0.33 → 4.0.34 - Mend

synapse-react-client 4.0.33 → 4.0.34

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

Files changed (87) hide show

package/dist/components/dataaccess/ReviewerDashboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewerDashboard.js","names":[],"sources":["../../../src/components/dataaccess/ReviewerDashboard.tsx"],"sourcesContent":["import { useGetCurrentUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { Typography } from '@mui/material'\nimport { ReactNode, useMemo } from 'react'\nimport {\n createBrowserRouter,\n createMemoryRouter,\n Navigate,\n NavLink,\n Outlet,\n RouteObject,\n RouterProvider,\n useParams,\n} from 'react-router'\nimport { RouterProvider as DOMRouterProvider } from 'react-router/dom'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport OrientationBanner from '../OrientationBanner'\nimport { UserHistoryDashboard } from './AccessHistoryDashboard'\nimport { AccessRequirementDashboard } from './AccessRequirementDashboard'\nimport { DataAccessSubmissionDashboard } from './AccessSubmissionDashboard'\nimport SubmissionPage from './SubmissionPage/SubmissionPage'\n\nfunction LinkTab(props: { href: string; children: ReactNode; icon: IconName }) {\n const { href, children, icon } = props\n return (\n <NavLink className=\"Tab\" role=\"tab\" to={href}>\n <IconSvg\n icon={icon}\n sx={{\n paddingRight: '0.2rem',\n }}\n />\n <Typography variant=\"buttonLink\">{children}</Typography>\n </NavLink>\n )\n}\n\ntype ReviewerDashboardProps = {\n /** Used to determine the base path for the component. Default is DataAccessManagement:default /\n routerBaseName?: string\n /* If true use a MemoryRouter, which prevents the browser URL from updating. For demo purposes only. */\n useMemoryRouter?: boolean\n}\n\nexport function ReviewerDashboard(props: ReviewerDashboardProps) {\n const {\n routerBaseName = '/DataAccessManagement:default',\n useMemoryRouter = false,\n } = props\n\n const { data: userBundle, isLoading } = useGetCurrentUserBundle()\n\n const hasActPermissions = userBundle?.isACTMember\n const hasReviewerPermissions =\n userBundle?.isACTMember \|\| userBundle?.isARReviewer\n\n const routes: RouteObject[] = useMemo(\n () => [\n {\n path: '/',\n element: (\n <div className=\"ReviewerDashboard\">\n <div className=\"Tabs\" role=\"tablist\">\n {hasActPermissions && (\n <LinkTab href=\"/AccessRequirements\" icon=\"accessClosed\">\n Access Requirements\n </LinkTab>\n )}\n {hasReviewerPermissions && (\n <LinkTab href=\"/Submissions\" icon=\"discussion\">\n Submissions\n </LinkTab>\n )}\n {hasReviewerPermissions && (\n <LinkTab href=\"/UserAccessHistory\" icon=\"history\">\n User Access History\n </LinkTab>\n )}\n </div>\n <div className=\"TabContentContainer\">\n <SynapseErrorBoundary>\n <Outlet />\n </SynapseErrorBoundary>\n </div>\n </div>\n ),\n children: [\n {\n path: 'AccessRequirements',\n element: hasActPermissions ? <AccessRequirementDashboard /> : null,\n },\n {\n path: 'Submissions',\n element: hasReviewerPermissions ? (\n <>\n {!hasActPermissions && (\n <OrientationBanner\n name=\"DataAccessManagement\"\n title=\"Getting Started With Data Access Management\"\n text=\"When someone requests access to data, that request will show up here. Clicking on the Request ID will take you to a page where you can review the request.\"\n sx={{\n margin: '-20px -30px 20px -30px',\n width: 'auto',\n }}\n />\n )}\n <DataAccessSubmissionDashboard />\n </>\n ) : null,\n },\n {\n path: 'Submissions/:id',\n element: hasReviewerPermissions ? (\n <SubmissionPageRouteRenderer />\n ) : null,\n },\n {\n path: 'UserAccessHistory',\n element: <UserHistoryDashboard />,\n },\n ],\n },\n ],\n [hasActPermissions, hasReviewerPermissions],\n )\n\n const router = useMemo(() => {\n if (useMemoryRouter) {\n return createMemoryRouter(routes, {\n basename: routerBaseName,\n })\n } else {\n return createBrowserRouter(routes, {\n basename: routerBaseName,\n })\n }\n }, [useMemoryRouter, routes, routerBaseName])\n\n if (isLoading) {\n return <SynapseSpinner size={50} />\n }\n\n if (useMemoryRouter) {\n return <RouterProvider router={router} />\n }\n\n return <DOMRouterProvider router={router} />\n}\n\nfunction SubmissionPageRouteRenderer() {\n const { id } = useParams<{ id: string }>()\n if (!id) {\n return <Navigate to=\"Submissions/\" />\n }\n return <SubmissionPage submissionId={id} isReviewer={true} />\n}\n\nexport default ReviewerDashboard\n"],"mappings":"~~;;;;;;;;;;;;;;;AAuBA~~,SAAS,EAAQ,GAA8D;CAC7E,IAAM,EAAE,SAAM,aAAU,YAAS;CACjC,OACE,kBAAC,GAAD;EAAS,WAAU;EAAM,MAAK;EAAM,IAAI;YAAxC,CACE,kBAAC,GAAD;GACQ;GACN,IAAI,EACF,cAAc,SAChB;EACD,CAAA,GACD,kBAAC,GAAD;GAAY,SAAQ;GAAc;EAAqB,CAAA,CAChD;;AAEb;AASA,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EACJ,oBAAiB,iCACjB,qBAAkB,OAChB,GAEE,EAAE,MAAM,GAAY,iBAAc,EAAwB,GAE1D,IAAoB,GAAY,aAChC,IACJ,GAAY,eAAe,GAAY,cAEnC,IAAwB,QACtB,CACJ;EACE,MAAM;EACN,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;IAAO,MAAK;cAA3B;KACG,KACC,kBAAC,GAAD;MAAS,MAAK;MAAsB,MAAK;gBAAe;KAE/C,CAAA;KAEV,KACC,kBAAC,GAAD;MAAS,MAAK;MAAe,MAAK;gBAAa;KAEtC,CAAA;KAEV,KACC,kBAAC,GAAD;MAAS,MAAK;MAAqB,MAAK;gBAAU;KAEzC,CAAA;IAER;OACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAS,CAAA,EACW,CAAA;GACnB,CAAA,CACF;;EAEP,UAAU;GACR;IACE,MAAM;IACN,SAAS,IAAoB,kBAAC,GAAD,CAA6B,CAAA,IAAI;GAChE;GACA;IACE,MAAM;IACN,SAAS,IACP,kBAAA,GAAA,EAAA,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;KACE,MAAK;KACL,OAAM;KACN,MAAK;KACL,IAAI;MACF,QAAQ;MACR,OAAO;KACT;IACD,CAAA,GAEH,kBAAC,GAAD,CAAgC,CAAA,CAChC,EAAA,CAAA,IACA;GACN;GACA;IACE,MAAM;IACN,SAAS,IACP,kBAAC,GAAD,CAA8B,CAAA,IAC5B;GACN;GACA;IACE,MAAM;IACN,SAAS,kBAAC,GAAD,CAAuB,CAAA;GAClC;EACF;CACF,CACF,GACA,CAAC,GAAmB,CAAsB,CAC5C,GAEM,IAAS,QACT,IACK,EAAmB,GAAQ,EAChC,UAAU,EACZ,CAAC,IAEM,EAAoB,GAAQ,EACjC,UAAU,EACZ,CAAC,GAEF;EAAC;EAAiB;EAAQ;CAAc,CAAC;CAU5C,OARI,IACK,kBAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,IAI3B,EADL,IACM,IAGF,GAHC,EAAwB,UAAS,CAAA;AAI5C;AAEA,SAAS,IAA8B;CACrC,IAAM,EAAE,UAAO,EAA0B;CAIzC,OAHK,IAGE,kBAAC,GAAD;EAAgB,cAAc;EAAI,YAAY;CAAO,CAAA,IAFnD,kBAAC,GAAD,EAAU,IAAG,eAAgB,CAAA;AAGxC"}
1	+ {"version":3,"file":"ReviewerDashboard.js","names":[],"sources":["../../../src/components/dataaccess/ReviewerDashboard.tsx"],"sourcesContent":["import { useGetCurrentUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { Typography } from '@mui/material'\nimport { ReactNode, useMemo } from 'react'\nimport {\n createBrowserRouter,\n createMemoryRouter,\n Navigate,\n NavLink,\n Outlet,\n RouteObject,\n RouterProvider,\n useParams,\n} from 'react-router'\nimport { RouterProvider as DOMRouterProvider } from 'react-router/dom'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport OrientationBanner from '../OrientationBanner'\nimport { UserHistoryDashboard } from './AccessHistoryDashboard'\nimport { AccessRequirementDashboard } from './AccessRequirementDashboard'\nimport { DataAccessSubmissionDashboard } from './AccessSubmissionDashboard'\nimport { EDucTemplateTable } from './EDucTemplateTable'\nimport SubmissionPage from './SubmissionPage/SubmissionPage'\n\nfunction LinkTab(props: { href: string; children: ReactNode; icon: IconName }) {\n const { href, children, icon } = props\n return (\n <NavLink className=\"Tab\" role=\"tab\" to={href}>\n <IconSvg\n icon={icon}\n sx={{\n paddingRight: '0.2rem',\n }}\n />\n <Typography variant=\"buttonLink\">{children}</Typography>\n </NavLink>\n )\n}\n\ntype ReviewerDashboardProps = {\n /** Used to determine the base path for the component. Default is DataAccessManagement:default /\n routerBaseName?: string\n /* If true use a MemoryRouter, which prevents the browser URL from updating. For demo purposes only. */\n useMemoryRouter?: boolean\n}\n\nexport function ReviewerDashboard(props: ReviewerDashboardProps) {\n const {\n routerBaseName = '/DataAccessManagement:default',\n useMemoryRouter = false,\n } = props\n\n const { data: userBundle, isLoading } = useGetCurrentUserBundle()\n\n const hasActPermissions = userBundle?.isACTMember\n const hasReviewerPermissions =\n userBundle?.isACTMember \|\| userBundle?.isARReviewer\n\n const routes: RouteObject[] = useMemo(\n () => [\n {\n path: '/',\n element: (\n <div className=\"ReviewerDashboard\">\n <div className=\"Tabs\" role=\"tablist\">\n {hasActPermissions && (\n <LinkTab href=\"/AccessRequirements\" icon=\"accessClosed\">\n Access Requirements\n </LinkTab>\n )}\n {hasActPermissions && (\n <LinkTab href=\"/EDucTemplates\" icon=\"fileOutlined\">\n eDUC Templates\n </LinkTab>\n )}\n {hasReviewerPermissions && (\n <LinkTab href=\"/Submissions\" icon=\"discussion\">\n Submissions\n </LinkTab>\n )}\n {hasReviewerPermissions && (\n <LinkTab href=\"/UserAccessHistory\" icon=\"history\">\n User Access History\n </LinkTab>\n )}\n </div>\n <div className=\"TabContentContainer\">\n <SynapseErrorBoundary>\n <Outlet />\n </SynapseErrorBoundary>\n </div>\n </div>\n ),\n children: [\n {\n path: 'AccessRequirements',\n element: hasActPermissions ? <AccessRequirementDashboard /> : null,\n },\n {\n path: 'EDucTemplates',\n element: hasActPermissions ? <EDucTemplateTable /> : null,\n },\n {\n path: 'Submissions',\n element: hasReviewerPermissions ? (\n <>\n {!hasActPermissions && (\n <OrientationBanner\n name=\"DataAccessManagement\"\n title=\"Getting Started With Data Access Management\"\n text=\"When someone requests access to data, that request will show up here. Clicking on the Request ID will take you to a page where you can review the request.\"\n sx={{\n margin: '-20px -30px 20px -30px',\n width: 'auto',\n }}\n />\n )}\n <DataAccessSubmissionDashboard />\n </>\n ) : null,\n },\n {\n path: 'Submissions/:id',\n element: hasReviewerPermissions ? (\n <SubmissionPageRouteRenderer />\n ) : null,\n },\n {\n path: 'UserAccessHistory',\n element: <UserHistoryDashboard />,\n },\n ],\n },\n ],\n [hasActPermissions, hasReviewerPermissions],\n )\n\n const router = useMemo(() => {\n if (useMemoryRouter) {\n return createMemoryRouter(routes, {\n basename: routerBaseName,\n })\n } else {\n return createBrowserRouter(routes, {\n basename: routerBaseName,\n })\n }\n }, [useMemoryRouter, routes, routerBaseName])\n\n if (isLoading) {\n return <SynapseSpinner size={50} />\n }\n\n if (useMemoryRouter) {\n return <RouterProvider router={router} />\n }\n\n return <DOMRouterProvider router={router} />\n}\n\nfunction SubmissionPageRouteRenderer() {\n const { id } = useParams<{ id: string }>()\n if (!id) {\n return <Navigate to=\"Submissions/\" />\n }\n return <SubmissionPage submissionId={id} isReviewer={true} />\n}\n\nexport default ReviewerDashboard\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,SAAS,EAAQ,GAA8D;CAC7E,IAAM,EAAE,SAAM,aAAU,YAAS;CACjC,OACE,kBAAC,GAAD;EAAS,WAAU;EAAM,MAAK;EAAM,IAAI;YAAxC,CACE,kBAAC,GAAD;GACQ;GACN,IAAI,EACF,cAAc,SAChB;EACD,CAAA,GACD,kBAAC,GAAD;GAAY,SAAQ;GAAc;EAAqB,CAAA,CAChD;;AAEb;AASA,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EACJ,oBAAiB,iCACjB,qBAAkB,OAChB,GAEE,EAAE,MAAM,GAAY,iBAAc,EAAwB,GAE1D,IAAoB,GAAY,aAChC,IACJ,GAAY,eAAe,GAAY,cAEnC,IAAwB,QACtB,CACJ;EACE,MAAM;EACN,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;IAAO,MAAK;cAA3B;KACG,KACC,kBAAC,GAAD;MAAS,MAAK;MAAsB,MAAK;gBAAe;KAE/C,CAAA;KAEV,KACC,kBAAC,GAAD;MAAS,MAAK;MAAiB,MAAK;gBAAe;KAE1C,CAAA;KAEV,KACC,kBAAC,GAAD;MAAS,MAAK;MAAe,MAAK;gBAAa;KAEtC,CAAA;KAEV,KACC,kBAAC,GAAD;MAAS,MAAK;MAAqB,MAAK;gBAAU;KAEzC,CAAA;IAER;OACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAS,CAAA,EACW,CAAA;GACnB,CAAA,CACF;;EAEP,UAAU;GACR;IACE,MAAM;IACN,SAAS,IAAoB,kBAAC,GAAD,CAA6B,CAAA,IAAI;GAChE;GACA;IACE,MAAM;IACN,SAAS,IAAoB,kBAAC,GAAD,CAAoB,CAAA,IAAI;GACvD;GACA;IACE,MAAM;IACN,SAAS,IACP,kBAAA,GAAA,EAAA,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;KACE,MAAK;KACL,OAAM;KACN,MAAK;KACL,IAAI;MACF,QAAQ;MACR,OAAO;KACT;IACD,CAAA,GAEH,kBAAC,GAAD,CAAgC,CAAA,CAChC,EAAA,CAAA,IACA;GACN;GACA;IACE,MAAM;IACN,SAAS,IACP,kBAAC,GAAD,CAA8B,CAAA,IAC5B;GACN;GACA;IACE,MAAM;IACN,SAAS,kBAAC,GAAD,CAAuB,CAAA;GAClC;EACF;CACF,CACF,GACA,CAAC,GAAmB,CAAsB,CAC5C,GAEM,IAAS,QACT,IACK,EAAmB,GAAQ,EAChC,UAAU,EACZ,CAAC,IAEM,EAAoB,GAAQ,EACjC,UAAU,EACZ,CAAC,GAEF;EAAC;EAAiB;EAAQ;CAAc,CAAC;CAU5C,OARI,IACK,kBAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,IAI3B,EADL,IACM,IAGF,GAHC,EAAwB,UAAS,CAAA;AAI5C;AAEA,SAAS,IAA8B;CACrC,IAAM,EAAE,UAAO,EAA0B;CAIzC,OAHK,IAGE,kBAAC,GAAD;EAAgB,cAAc;EAAI,YAAY;CAAO,CAAA,IAFnD,kBAAC,GAAD,EAAU,IAAG,eAAgB,CAAA;AAGxC"}

package/dist/components/widgets/facet-nav/FacetNavPanel.d.ts CHANGED Viewed

@@ -12,6 +12,8 @@ export type FacetNavPanelProps = {
     isModalView: boolean;
     onCloseModal?: () => void;
 };
+export declare const MAX_PLOT_HEIGHT_PX = 150;
+export declare const MAX_EXPANDED_PLOT_HEIGHT_PX = 300;
 export type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR';
 export type GraphData = {
     data: Plotly.Data[];

package/dist/components/widgets/facet-nav/FacetNavPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;~~AAKD~~,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAE/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,~~2CAoN~~/C;AAED,eAAe,aAAa,CAAA"}
1	+ {"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAGD,eAAO,MAAM,kBAAkB,MAAM,CAAA;AACrC,eAAO,MAAM,2BAA2B,MAAM,CAAA;AAG9C,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAE/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAqN/C;AAED,eAAe,aAAa,CAAA"}

package/dist/components/widgets/facet-nav/FacetNavPanel.js CHANGED Viewed

@@ -23,8 +23,8 @@ import { useQuery as k } from "@tanstack/react-query";
 import { InfoOutlined as A } from "@mui/icons-material";
 import { useMeasure as j } from "@react-hookz/web";
 //#region src/components/widgets/facet-nav/FacetNavPanel.tsx
-var M = 19;
-async function N(r, i, a, o, s) {
+var M = 19, N = 150, P = 300;
+async function F(r, i, a, o, s) {
 	let c = f("odd", 0, r.facetValues.length), l = async (r, i, a) => {
 		let o = /* @__PURE__ */ new Map();
 		o.set(t, e);
@@ -77,13 +77,13 @@ async function N(r, i, a, o, s) {
 		colors: o === "PIE" ? b.marker?.colors : b.marker?.color
 	};
 }
-var P = (e, t, n) => {
+var I = (e, t, n) => {
 	if (e.points && e.points[0]) {
 		let r = e.points[0], i = r.data.facetEnumerationValues[r.pointNumber], a = t.facetValues.find((e) => e.value === i);
 		n(t, a, !a.isSelected);
 	}
 };
-function F(e, t, n) {
+function L(e, t, n) {
 	if (e != null) {
 		let r = 1;
 		switch (t) {
@@ -108,8 +108,8 @@ function F(e, t, n) {
 		height: `${n}px`
 	};
 }
-function I(e) {
-	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: L } = e, { accessToken: R } = r(), { data: z, isLoading: B } = c(), [V, H] = j(), { getColumnDisplayName: U } = l(), [W, G] = v(!1), K = U(O.columnName, O.jsonPath), q = _(() => a(O, z?.columnModels ?? []), [z?.columnModels, O]), J = q?.columnType, Y = _(() => ({
+function R(e) {
+	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: N } = e, { accessToken: P } = r(), { data: z, isLoading: B } = c(), [V, H] = j(), { getColumnDisplayName: U } = l(), W = V?.width ? Math.round(V.width) : void 0, [G, K] = v(!1), q = U(O.columnName, O.jsonPath), J = _(() => a(O, z?.columnModels ?? []), [z?.columnModels, O]), Y = J?.columnType, X = _(() => ({
 		showlegend: !1,
 		annotations: [],
 		margin: {
@@ -129,28 +129,28 @@ function I(e) {
 			showgrid: !1,
 			automargin: !0
 		}
-	}), [n, M]), { data: X } = k({
+	}), [n, M]), { data: Z } = k({
 		queryKey: [
 			"extractPlotDataArray",
 			O,
-			J,
+			Y,
 			h,
 			M,
-			R
+			P
 		],
-		queryFn: () => N(O, J, h, M, R),
+		queryFn: () => F(O, Y, h, M, P),
 		enabled: !!O
-	}), Z = g(), Q = g(), $ = /* @__PURE__ */ D(s, {
+	}), Q = g(), $ = g(), ee = /* @__PURE__ */ D(s, {
 		fullWidth: !0,
 		children: [/* @__PURE__ */ E(b, {
-			id: Z,
+			id: Q,
 			children: "Chart Type"
 		}), /* @__PURE__ */ D(S, {
-			labelId: Z,
+			labelId: Q,
 			label: "Chart Type",
 			value: M,
 			onChange: (e) => {
-				L(e.target.value);
+				N(e.target.value);
 			},
 			children: [/* @__PURE__ */ E(x, {
 				value: "BAR",
@@ -161,20 +161,20 @@ function I(e) {
 			})]
 		})]
 	});
-	return !z && B || !O || !q ? /* @__PURE__ */ E("div", {
+	return !z && B || !O || !J ? /* @__PURE__ */ E("div", {
 		className: "SRC-loadingContainer SRC-centerContentColumn",
 		children: i
 	}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
-		open: W,
-		onCancel: () => G(!1),
-		title: K ?? "",
-		content: /* @__PURE__ */ E(I, {
+		open: G,
+		onCancel: () => K(!1),
+		title: q ?? "",
+		content: /* @__PURE__ */ E(R, {
 			...e,
 			isModalView: !0
 		}),
 		hasCancelButton: !1,
 		confirmButtonProps: { children: "Apply Filters" },
-		onConfirm: () => G(!1),
+		onConfirm: () => K(!1),
 		maxWidth: "md"
 	}), /* @__PURE__ */ D("div", {
 		role: "figure",
@@ -183,15 +183,15 @@ function I(e) {
 			!n && /* @__PURE__ */ E(p, {
 				data: z,
 				isLoading: B,
-				title: K,
+				title: q,
 				facetToPlot: O,
 				onHide: t,
-				setShowModal: G
+				setShowModal: K
 			}),
 			n && /* @__PURE__ */ D(C, {
 				sx: { gap: 2 },
 				children: [/* @__PURE__ */ D(s, { children: [/* @__PURE__ */ D(b, {
-					id: Q,
+					id: $,
 					sx: {
 						display: "flex",
 						alignItems: "center",
@@ -202,39 +202,34 @@ function I(e) {
 						children: /* @__PURE__ */ E(A, { className: "SRC-hand-cursor SRC-secondary-text-color" })
 					})]
 				}), /* @__PURE__ */ E(u, {
-					labelId: Q,
+					labelId: $,
 					facet: O,
 					containerAs: "Dropdown",
 					dropdownType: "SelectBox"
-				})] }), $]
+				})] }), ee]
 			}),
 			/* @__PURE__ */ D(y, {
 				sx: {
 					display: "grid",
 					gridTemplateColumns: "50% 50%",
-					alignItems: "stretch",
-					height: "100%"
+					alignItems: "center"
 				},
 				role: "graphics-object",
 				className: "FacetNavPanel__body",
 				children: [/* @__PURE__ */ E("div", {
 					ref: H,
-					style: { height: "100%" },
-					children: /* @__PURE__ */ E(d, {
-						layout: Y,
-						data: X?.data ?? [],
-						style: {
-							...F(V?.width, M, n ? 300 : 150),
-							...V?.height ? { height: `${V.height}px` } : {}
-						},
+					children: W !== void 0 && /* @__PURE__ */ E(d, {
+						layout: X,
+						data: Z?.data ?? [],
+						style: L(W, M, n ? 300 : 150),
 						config: { displayModeBar: !1 },
-						onClick: (e) => P(e, O, f)
-					}, `${O.columnName}-${O.jsonPath}-${M}-${V?.width}-${V?.height}`)
+						onClick: (e) => I(e, O, f)
+					}, `${O.columnName}-${O.jsonPath}-${M}-${W}`)
 				}), /* @__PURE__ */ E(y, {
 					sx: { alignSelf: "center" },
 					children: /* @__PURE__ */ E(m, {
-						labels: X?.labels,
-						colors: X?.colors,
+						labels: Z?.labels,
+						colors: Z?.colors,
 						isExpanded: n
 					})
 				})]
@@ -243,6 +238,6 @@ function I(e) {
 	})] });
 }
 //#endregion
-export { I as default, N as extractPlotDataArray, F as getPlotStyle };
+export { P as MAX_EXPANDED_PLOT_HEIGHT_PX, N as MAX_PLOT_HEIGHT_PX, R as default, F as extractPlotDataArray, L as getPlotStyle };
 //# sourceMappingURL=FacetNavPanel.js.map

package/dist/components/widgets/facet-nav/FacetNavPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n Box,\n InputLabel,\n MenuItem,\n Select,\n Stack,\n Tooltip,\n} from '@mui/material'\nimport {\n ColumnTypeEnum,\n FacetColumnRequest,\n FacetColumnResultValueCount,\n FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useId, useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n applyChangesToGraphSlice: (\n facet: FacetColumnResultValues,\n value: FacetColumnResultValueCount \| undefined,\n isSelected: boolean,\n ) => void\n applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n index: number\n facetToPlot: FacetColumnResultValues\n plotType: PlotType\n onSetPlotType: (plotType: PlotType) => void\n onHide: () => void\n isModalView: boolean\n onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' \| 'BAR' \| 'STACKED_HORIZONTAL_BAR'\n\nexport type GraphData = {\n data: Plotly.Data[]\n labels: FacetWithLabel[]\n colors: string[]\n}\n\nexport async function extractPlotDataArray(\n facetToPlot: FacetColumnResultValues,\n columnType: ColumnTypeEnum \| undefined,\n index: number,\n plotType: PlotType,\n accessToken?: string,\n) {\n const colorPalette = getContrastColorPalette(\n // Use only the odd palette, using the same offset for all plots until palettes are improved.\n // See PORTALS-2916\n 'odd', // index % 2 === 0 ? 'even' : 'odd',\n 0, // Math.floor(index / 2),\n facetToPlot.facetValues.length,\n )\n\n const getLabels = async (\n facetValues: FacetColumnResultValueCount[],\n columnType?: ColumnTypeEnum,\n accessToken?: string,\n ) => {\n const map = new Map<string, string>()\n map.set(\n SynapseConstants.VALUE_NOT_SET,\n SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n )\n // Filter out empties\n const filteredValues = facetValues\n .map(value => value.value)\n .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n if (\n columnType === ColumnTypeEnum.ENTITYID \|\|\n columnType === ColumnTypeEnum.ENTITYID_LIST\n ) {\n // TODO: Pagination\n const response = await SynapseClient.getEntityHeadersByIds(\n filteredValues,\n accessToken,\n )\n for (const header of response.results) {\n map.set(header.id, header.name)\n }\n } else if (\n columnType === ColumnTypeEnum.USERID \|\|\n columnType === ColumnTypeEnum.USERID_LIST\n ) {\n const response = await SynapseClient.getGroupHeadersBatch(\n filteredValues,\n accessToken,\n )\n for (const header of response.children) {\n map.set(header.ownerId, header.userName)\n }\n }\n\n return facetValues.map(facetValue => ({\n facet: facetValue,\n label: getLabel(facetValue, false, map),\n truncatedLabel: getLabel(facetValue, true, map),\n count: facetValue.count,\n }))\n }\n\n const getLabel = (\n facetValue: FacetColumnResultValueCount,\n truncateFlag: boolean,\n labelMap: Map<string, string>,\n ): string => {\n let label = labelMap.get(facetValue.value) ?? facetValue.value\n if (truncateFlag) {\n label = truncate(label, maxLabelLength)!\n }\n return label\n }\n\n const labels = await getLabels(\n facetToPlot.facetValues,\n columnType,\n accessToken,\n )\n const text = labels.map(el => el.truncatedLabel)\n\n const anyFacetsSelected = facetToPlot.facetValues.some(\n value => value.isSelected,\n )\n const selectionAwareColorPalette = anyFacetsSelected\n ? facetToPlot.facetValues.map((facetValue, index) =>\n facetValue.isSelected\n ? colorPalette[index]\n : colorPalette[index]\n .replace('rgb(', 'rgba(')\n .replace(')', ', 0.25)'),\n )\n : colorPalette\n const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n facet => facet.count,\n )\n let x: Plotly.Datum[] \| Plotly.Datum[][] \| Plotly.TypedArray \| undefined\n\n if (plotType === 'BAR') {\n x = facetToPlot.facetValues.map(\n facet =>\n labels.find(label => label.facet === facet)?.label ?? facet.value,\n )\n } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n x = counts\n }\n\n let y: Plotly.Datum[] \| Plotly.Datum[][] \| Plotly.TypedArray \| undefined\n if (plotType === 'BAR') {\n y = facetToPlot.facetValues.map(facet => facet.count)\n } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n y = Array(x?.length).fill('Proportional') // single value for every x value\n }\n\n const singleChartData: Plotly.Data = {\n values: plotType === 'PIE' ? counts : undefined,\n labels: labels.map(el => el.label),\n text,\n x,\n y,\n orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n // @ts-expect-error\n facetEnumerationValues: facetToPlot.facetValues.map(\n facetValue => facetValue.value,\n ),\n name: facetToPlot.columnName,\n textposition:\n plotType === 'STACKED_HORIZONTAL_BAR' \|\| plotType === 'BAR'\n ? 'none'\n : 'inside',\n hovertemplate:\n plotType === 'PIE'\n ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n textinfo: 'none',\n type: plotType === 'PIE' ? 'pie' : 'bar',\n pull:\n plotType === 'PIE'\n ? facetToPlot.facetValues.map(facetValue =>\n facetValue.isSelected ? 0.1 : 0,\n )\n : undefined,\n selectedpoints: anyFacetsSelected\n ? facetToPlot.facetValues\n .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n .filter(index => index !== -1)\n : undefined,\n selected: { marker: { opacity: 1 } },\n unselected: { marker: { opacity: 0.25 } },\n\n marker: {\n colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n },\n }\n const result = {\n data: [singleChartData],\n labels,\n colors:\n plotType === 'PIE'\n ? ((singleChartData as any).marker?.colors as string[])\n : ((singleChartData as any).marker?.color as string[]),\n }\n return result\n}\n\nconst applyFacetFilter = (\n event: Plotly.PlotMouseEvent,\n allFacetValues: FacetColumnResultValues,\n callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n if (event.points && event.points[0]) {\n const plotPointData: any = event.points[0]\n const facetValueClickedValue =\n plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n const facetValueClicked = allFacetValues.facetValues.find(\n facet => facet.value === facetValueClickedValue,\n )\n callbackApplyFn(\n allFacetValues,\n facetValueClicked,\n !facetValueClicked!.isSelected,\n )\n }\n}\n\nexport function getPlotStyle(\n parentWidth: number \| null \| undefined,\n plotType: PlotType,\n maxHeight: number,\n): { width: string; height: string } {\n if (parentWidth != undefined) {\n let quotient = 1\n switch (plotType) {\n case 'BAR':\n quotient = 0.8\n break\n case 'PIE':\n quotient = 0.6\n break\n case 'STACKED_HORIZONTAL_BAR':\n quotient = 1\n break\n }\n const width = parentWidth ? parentWidth * quotient : 200\n let height = plotType === 'PIE' ? width : width / 3\n // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n if (height > maxHeight) {\n height = maxHeight\n }\n return {\n width: `${width}px`,\n height: `${height}px`,\n }\n }\n //else parent width is undefined\n return {\n width: '100%',\n height: `${maxHeight}px`,\n }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n const {\n onHide,\n isModalView,\n applyChangesToGraphSlice,\n index,\n facetToPlot,\n plotType,\n onSetPlotType,\n } = props\n const { accessToken } = useSynapseContext()\n const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n useGetQueryMetadata()\n\n const [plotContainerMeasurements, plotContainerRef] =\n useMeasure<HTMLDivElement>()\n const { getColumnDisplayName } = useQueryVisualizationContext()\n\n const [showModal, setShowModal] = useState(false)\n\n const plotTitle = getColumnDisplayName(\n facetToPlot.columnName,\n facetToPlot.jsonPath,\n )\n\n const columnModel = useMemo(\n () =>\n getCorrespondingColumnForFacet(\n facetToPlot,\n queryMetadata?.columnModels ?? [],\n ),\n [queryMetadata?.columnModels, facetToPlot],\n )\n const columnType = columnModel?.columnType as ColumnTypeEnum\n\n // Plotly.js mutates the layout object it receives, so each component instance\n // must have its own layout object. Sharing a single object across instances\n // (e.g. when the expand modal mounts a second FacetNavPanel) causes Plotly's\n // mutations on one chart to silently corrupt the other. Use useMemo to\n // produce a fresh layout object per instance — do NOT hoist this to module scope.\n const plotLayout = useMemo<Partial<Plotly.Layout>>(\n () => ({\n showlegend: false,\n annotations: [],\n margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n yaxis: {\n visible: plotType === 'BAR',\n showgrid: false,\n automargin: true,\n },\n xaxis: {\n // Show category labels on the x-axis for vertical bar charts in modal view\n visible: isModalView && plotType === 'BAR',\n showgrid: false,\n automargin: true,\n },\n }),\n [isModalView, plotType],\n )\n\n const { data: plotData } = useQuery({\n queryKey: [\n 'extractPlotDataArray',\n facetToPlot,\n columnType,\n index,\n plotType,\n accessToken,\n ],\n\n queryFn: () =>\n extractPlotDataArray(\n facetToPlot,\n columnType,\n index,\n plotType,\n accessToken,\n ),\n\n enabled: !!facetToPlot,\n })\n\n const chartSelectionInputLabelId = useId()\n const filterByInputLabelId = useId()\n\n /* rendering functions */\n const chartSelectionToggle = (\n <StyledFormControl fullWidth>\n <InputLabel id={chartSelectionInputLabelId}>Chart Type</InputLabel>\n <Select\n labelId={chartSelectionInputLabelId}\n label=\"Chart Type\"\n value={plotType}\n onChange={e => {\n onSetPlotType(e.target.value as PlotType)\n }}\n >\n <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n </Select>\n </StyledFormControl>\n )\n\n if (\n (!queryMetadata && isLoadingQueryMetadata) \|\|\n !facetToPlot \|\|\n !columnModel\n ) {\n return (\n <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n {loadingScreen}\n </div>\n )\n } else {\n return (\n <>\n <ConfirmationDialog\n open={showModal}\n onCancel={() => setShowModal(false)}\n title={plotTitle ?? ''}\n content={<FacetNavPanel {...props} isModalView={true} />}\n hasCancelButton={false}\n confirmButtonProps={{ children: 'Apply Filters' }}\n onConfirm={() => setShowModal(false)}\n maxWidth={'md'}\n />\n <div\n role=\"figure\"\n className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n >\n {!isModalView && (\n <PlotPanelHeader\n data={queryMetadata}\n isLoading={isLoadingQueryMetadata}\n title={plotTitle}\n facetToPlot={facetToPlot}\n onHide={onHide}\n setShowModal={setShowModal}\n />\n )}\n {isModalView && (\n <Stack\n sx={{\n gap: 2,\n }}\n >\n <StyledFormControl>\n <InputLabel\n id={filterByInputLabelId}\n sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n >\n <span>Filter All Data By</span>\n <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n </Tooltip>\n </InputLabel>\n <EnumFacetFilter\n labelId={filterByInputLabelId}\n facet={facetToPlot}\n containerAs=\"Dropdown\"\n dropdownType=\"SelectBox\"\n />\n </StyledFormControl>\n {chartSelectionToggle}\n </Stack>\n )}\n <Box\n sx={{\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n // alignItems:stretch + height:100% propagate the body's flex:1\n // height (set in SCSS) down into the plot container so useMeasure\n // can read it and size the Plotly chart to fill available space.\n alignItems: 'stretch',\n height: '100%',\n }}\n role=\"graphics-object\"\n className=\"FacetNavPanel__body\"\n >\n <div ref={plotContainerRef} style={{ height: '100%' }}>\n <Plot\n key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}-${plotContainerMeasurements?.height}`}\n layout={plotLayout}\n data={plotData?.data ?? []}\n style={{\n ...getPlotStyle(\n plotContainerMeasurements?.width,\n plotType,\n isModalView ? 300 : 150,\n ),\n ...(plotContainerMeasurements?.height\n ? { height: `${plotContainerMeasurements.height}px` }\n : {}),\n }}\n config={{ displayModeBar: false }}\n onClick={evt =>\n applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n }\n />\n </div>\n <Box sx={{ alignSelf: 'center' }}>\n <FacetPlotLegendList\n labels={plotData?.labels}\n colors={plotData?.colors}\n isExpanded={isModalView}\n />\n </Box>\n </Box>\n </div>\n </>\n )\n }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}
1	+ {"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n Box,\n InputLabel,\n MenuItem,\n Select,\n Stack,\n Tooltip,\n} from '@mui/material'\nimport {\n ColumnTypeEnum,\n FacetColumnRequest,\n FacetColumnResultValueCount,\n FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useId, useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n applyChangesToGraphSlice: (\n facet: FacetColumnResultValues,\n value: FacetColumnResultValueCount \| undefined,\n isSelected: boolean,\n ) => void\n applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n index: number\n facetToPlot: FacetColumnResultValues\n plotType: PlotType\n onSetPlotType: (plotType: PlotType) => void\n onHide: () => void\n isModalView: boolean\n onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\nexport const MAX_PLOT_HEIGHT_PX = 150\nexport const MAX_EXPANDED_PLOT_HEIGHT_PX = 300\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' \| 'BAR' \| 'STACKED_HORIZONTAL_BAR'\n\nexport type GraphData = {\n data: Plotly.Data[]\n labels: FacetWithLabel[]\n colors: string[]\n}\n\nexport async function extractPlotDataArray(\n facetToPlot: FacetColumnResultValues,\n columnType: ColumnTypeEnum \| undefined,\n index: number,\n plotType: PlotType,\n accessToken?: string,\n) {\n const colorPalette = getContrastColorPalette(\n // Use only the odd palette, using the same offset for all plots until palettes are improved.\n // See PORTALS-2916\n 'odd', // index % 2 === 0 ? 'even' : 'odd',\n 0, // Math.floor(index / 2),\n facetToPlot.facetValues.length,\n )\n\n const getLabels = async (\n facetValues: FacetColumnResultValueCount[],\n columnType?: ColumnTypeEnum,\n accessToken?: string,\n ) => {\n const map = new Map<string, string>()\n map.set(\n SynapseConstants.VALUE_NOT_SET,\n SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n )\n // Filter out empties\n const filteredValues = facetValues\n .map(value => value.value)\n .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n if (\n columnType === ColumnTypeEnum.ENTITYID \|\|\n columnType === ColumnTypeEnum.ENTITYID_LIST\n ) {\n // TODO: Pagination\n const response = await SynapseClient.getEntityHeadersByIds(\n filteredValues,\n accessToken,\n )\n for (const header of response.results) {\n map.set(header.id, header.name)\n }\n } else if (\n columnType === ColumnTypeEnum.USERID \|\|\n columnType === ColumnTypeEnum.USERID_LIST\n ) {\n const response = await SynapseClient.getGroupHeadersBatch(\n filteredValues,\n accessToken,\n )\n for (const header of response.children) {\n map.set(header.ownerId, header.userName)\n }\n }\n\n return facetValues.map(facetValue => ({\n facet: facetValue,\n label: getLabel(facetValue, false, map),\n truncatedLabel: getLabel(facetValue, true, map),\n count: facetValue.count,\n }))\n }\n\n const getLabel = (\n facetValue: FacetColumnResultValueCount,\n truncateFlag: boolean,\n labelMap: Map<string, string>,\n ): string => {\n let label = labelMap.get(facetValue.value) ?? facetValue.value\n if (truncateFlag) {\n label = truncate(label, maxLabelLength)!\n }\n return label\n }\n\n const labels = await getLabels(\n facetToPlot.facetValues,\n columnType,\n accessToken,\n )\n const text = labels.map(el => el.truncatedLabel)\n\n const anyFacetsSelected = facetToPlot.facetValues.some(\n value => value.isSelected,\n )\n const selectionAwareColorPalette = anyFacetsSelected\n ? facetToPlot.facetValues.map((facetValue, index) =>\n facetValue.isSelected\n ? colorPalette[index]\n : colorPalette[index]\n .replace('rgb(', 'rgba(')\n .replace(')', ', 0.25)'),\n )\n : colorPalette\n const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n facet => facet.count,\n )\n let x: Plotly.Datum[] \| Plotly.Datum[][] \| Plotly.TypedArray \| undefined\n\n if (plotType === 'BAR') {\n x = facetToPlot.facetValues.map(\n facet =>\n labels.find(label => label.facet === facet)?.label ?? facet.value,\n )\n } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n x = counts\n }\n\n let y: Plotly.Datum[] \| Plotly.Datum[][] \| Plotly.TypedArray \| undefined\n if (plotType === 'BAR') {\n y = facetToPlot.facetValues.map(facet => facet.count)\n } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n y = Array(x?.length).fill('Proportional') // single value for every x value\n }\n\n const singleChartData: Plotly.Data = {\n values: plotType === 'PIE' ? counts : undefined,\n labels: labels.map(el => el.label),\n text,\n x,\n y,\n orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n // @ts-expect-error\n facetEnumerationValues: facetToPlot.facetValues.map(\n facetValue => facetValue.value,\n ),\n name: facetToPlot.columnName,\n textposition:\n plotType === 'STACKED_HORIZONTAL_BAR' \|\| plotType === 'BAR'\n ? 'none'\n : 'inside',\n hovertemplate:\n plotType === 'PIE'\n ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n textinfo: 'none',\n type: plotType === 'PIE' ? 'pie' : 'bar',\n pull:\n plotType === 'PIE'\n ? facetToPlot.facetValues.map(facetValue =>\n facetValue.isSelected ? 0.1 : 0,\n )\n : undefined,\n selectedpoints: anyFacetsSelected\n ? facetToPlot.facetValues\n .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n .filter(index => index !== -1)\n : undefined,\n selected: { marker: { opacity: 1 } },\n unselected: { marker: { opacity: 0.25 } },\n\n marker: {\n colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n },\n }\n const result = {\n data: [singleChartData],\n labels,\n colors:\n plotType === 'PIE'\n ? ((singleChartData as any).marker?.colors as string[])\n : ((singleChartData as any).marker?.color as string[]),\n }\n return result\n}\n\nconst applyFacetFilter = (\n event: Plotly.PlotMouseEvent,\n allFacetValues: FacetColumnResultValues,\n callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n if (event.points && event.points[0]) {\n const plotPointData: any = event.points[0]\n const facetValueClickedValue =\n plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n const facetValueClicked = allFacetValues.facetValues.find(\n facet => facet.value === facetValueClickedValue,\n )\n callbackApplyFn(\n allFacetValues,\n facetValueClicked,\n !facetValueClicked!.isSelected,\n )\n }\n}\n\nexport function getPlotStyle(\n parentWidth: number \| null \| undefined,\n plotType: PlotType,\n maxHeight: number,\n): { width: string; height: string } {\n if (parentWidth != undefined) {\n let quotient = 1\n switch (plotType) {\n case 'BAR':\n quotient = 0.8\n break\n case 'PIE':\n quotient = 0.6\n break\n case 'STACKED_HORIZONTAL_BAR':\n quotient = 1\n break\n }\n const width = parentWidth ? parentWidth * quotient : 200\n let height = plotType === 'PIE' ? width : width / 3\n // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n if (height > maxHeight) {\n height = maxHeight\n }\n return {\n width: `${width}px`,\n height: `${height}px`,\n }\n }\n //else parent width is undefined\n return {\n width: '100%',\n height: `${maxHeight}px`,\n }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n const {\n onHide,\n isModalView,\n applyChangesToGraphSlice,\n index,\n facetToPlot,\n plotType,\n onSetPlotType,\n } = props\n const { accessToken } = useSynapseContext()\n const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n useGetQueryMetadata()\n\n const [plotContainerMeasurements, plotContainerRef] =\n useMeasure<HTMLDivElement>()\n const { getColumnDisplayName } = useQueryVisualizationContext()\n\n // Wait for a non-zero measured width before rendering the plot.\n // Round width to avoid rebuilds from small pixel fluctuations.\n const plotWidth = plotContainerMeasurements?.width\n ? Math.round(plotContainerMeasurements.width)\n : undefined\n\n const [showModal, setShowModal] = useState(false)\n\n const plotTitle = getColumnDisplayName(\n facetToPlot.columnName,\n facetToPlot.jsonPath,\n )\n\n const columnModel = useMemo(\n () =>\n getCorrespondingColumnForFacet(\n facetToPlot,\n queryMetadata?.columnModels ?? [],\n ),\n [queryMetadata?.columnModels, facetToPlot],\n )\n const columnType = columnModel?.columnType as ColumnTypeEnum\n\n // Plotly.js mutates the layout object it receives, so each component instance\n // must have its own layout object. Sharing a single object across instances\n // (e.g. when the expand modal mounts a second FacetNavPanel) causes Plotly's\n // mutations on one chart to silently corrupt the other. Use useMemo to\n // produce a fresh layout object per instance — do NOT hoist this to module scope.\n const plotLayout = useMemo<Partial<Plotly.Layout>>(\n () => ({\n showlegend: false,\n annotations: [],\n margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n yaxis: {\n visible: plotType === 'BAR',\n showgrid: false,\n automargin: true,\n },\n xaxis: {\n // Show category labels on the x-axis for vertical bar charts in modal view\n visible: isModalView && plotType === 'BAR',\n showgrid: false,\n automargin: true,\n },\n }),\n [isModalView, plotType],\n )\n\n const { data: plotData } = useQuery({\n queryKey: [\n 'extractPlotDataArray',\n facetToPlot,\n columnType,\n index,\n plotType,\n accessToken,\n ],\n\n queryFn: () =>\n extractPlotDataArray(\n facetToPlot,\n columnType,\n index,\n plotType,\n accessToken,\n ),\n\n enabled: !!facetToPlot,\n })\n\n const chartSelectionInputLabelId = useId()\n const filterByInputLabelId = useId()\n\n /* rendering functions */\n const chartSelectionToggle = (\n <StyledFormControl fullWidth>\n <InputLabel id={chartSelectionInputLabelId}>Chart Type</InputLabel>\n <Select\n labelId={chartSelectionInputLabelId}\n label=\"Chart Type\"\n value={plotType}\n onChange={e => {\n onSetPlotType(e.target.value as PlotType)\n }}\n >\n <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n </Select>\n </StyledFormControl>\n )\n\n if (\n (!queryMetadata && isLoadingQueryMetadata) \|\|\n !facetToPlot \|\|\n !columnModel\n ) {\n return (\n <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n {loadingScreen}\n </div>\n )\n } else {\n return (\n <>\n <ConfirmationDialog\n open={showModal}\n onCancel={() => setShowModal(false)}\n title={plotTitle ?? ''}\n content={<FacetNavPanel {...props} isModalView={true} />}\n hasCancelButton={false}\n confirmButtonProps={{ children: 'Apply Filters' }}\n onConfirm={() => setShowModal(false)}\n maxWidth={'md'}\n />\n <div\n role=\"figure\"\n className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n >\n {!isModalView && (\n <PlotPanelHeader\n data={queryMetadata}\n isLoading={isLoadingQueryMetadata}\n title={plotTitle}\n facetToPlot={facetToPlot}\n onHide={onHide}\n setShowModal={setShowModal}\n />\n )}\n {isModalView && (\n <Stack\n sx={{\n gap: 2,\n }}\n >\n <StyledFormControl>\n <InputLabel\n id={filterByInputLabelId}\n sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n >\n <span>Filter All Data By</span>\n <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n </Tooltip>\n </InputLabel>\n <EnumFacetFilter\n labelId={filterByInputLabelId}\n facet={facetToPlot}\n containerAs=\"Dropdown\"\n dropdownType=\"SelectBox\"\n />\n </StyledFormControl>\n {chartSelectionToggle}\n </Stack>\n )}\n <Box\n sx={{\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n alignItems: 'center',\n }}\n role=\"graphics-object\"\n className=\"FacetNavPanel__body\"\n >\n <div ref={plotContainerRef}>\n {plotWidth !== undefined && (\n <Plot\n key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotWidth}`}\n layout={plotLayout}\n data={plotData?.data ?? []}\n style={getPlotStyle(\n plotWidth,\n plotType,\n isModalView\n ? MAX_EXPANDED_PLOT_HEIGHT_PX\n : MAX_PLOT_HEIGHT_PX,\n )}\n config={{ displayModeBar: false }}\n onClick={evt =>\n applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n }\n />\n )}\n </div>\n <Box sx={{ alignSelf: 'center' }}>\n <FacetPlotLegendList\n labels={plotData?.labels}\n colors={plotData?.colors}\n isExpanded={isModalView}\n />\n </Box>\n </Box>\n </div>\n </>\n )\n }\n}\n\nexport default FacetNavPanel\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAM,IAAyB,IAClB,IAAqB,KACrB,IAA8B;AAW3C,eAAsB,EACpB,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,IAAe,EAGnB,OACA,GACA,EAAY,YAAY,MAC1B,GAEM,IAAY,OAChB,GACA,GACA,MACG;EACH,IAAM,oBAAM,IAAI,IAAoB;EACpC,EAAI,IACF,GACA,CACF;EAEA,IAAM,IAAiB,EACpB,KAAI,MAAS,EAAM,KAAK,EACxB,QAAO,MAAO,MAAQ,CAA8B;EACvD,IACE,MAAe,EAAe,YAC9B,MAAe,EAAe,eAC9B;GAEA,IAAM,IAAW,MAAM,EAAc,sBACnC,GACA,CACF;GACA,KAAK,IAAM,KAAU,EAAS,SAC5B,EAAI,IAAI,EAAO,IAAI,EAAO,IAAI;EAElC,OAAO,IACL,MAAe,EAAe,UAC9B,MAAe,EAAe,aAC9B;GACA,IAAM,IAAW,MAAM,EAAc,qBACnC,GACA,CACF;GACA,KAAK,IAAM,KAAU,EAAS,UAC5B,EAAI,IAAI,EAAO,SAAS,EAAO,QAAQ;EAE3C;EAEA,OAAO,EAAY,KAAI,OAAe;GACpC,OAAO;GACP,OAAO,EAAS,GAAY,IAAO,CAAG;GACtC,gBAAgB,EAAS,GAAY,IAAM,CAAG;GAC9C,OAAO,EAAW;EACpB,EAAE;CACJ,GAEM,KACJ,GACA,GACA,MACW;EACX,IAAI,IAAQ,EAAS,IAAI,EAAW,KAAK,KAAK,EAAW;EAIzD,OAHI,MACF,IAAQ,EAAS,GAAO,CAAc,IAEjC;CACT,GAEM,IAAS,MAAM,EACnB,EAAY,aACZ,GACA,CACF,GACM,IAAO,EAAO,KAAI,MAAM,EAAG,cAAc,GAEzC,IAAoB,EAAY,YAAY,MAChD,MAAS,EAAM,UACjB,GACM,IAA6B,IAC/B,EAAY,YAAY,KAAK,GAAY,MACvC,EAAW,aACP,EAAa,KACb,EAAa,GACV,QAAQ,QAAQ,OAAO,EACvB,QAAQ,KAAK,SAAS,CAC/B,IACA,GACE,IAAyB,EAAY,YAAY,KACrD,MAAS,EAAM,KACjB,GACI;CAEJ,AAAI,MAAa,QACf,IAAI,EAAY,YAAY,KAC1B,MACE,EAAO,MAAK,MAAS,EAAM,UAAU,CAAK,GAAG,SAAS,EAAM,KAChE,IACS,MAAa,6BACtB,IAAI;CAGN,IAAI;CACJ,AAAI,MAAa,QACf,IAAI,EAAY,YAAY,KAAI,MAAS,EAAM,KAAK,IAC3C,MAAa,6BACtB,IAAI,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc;CAG1C,IAAM,IAA+B;EACnC,QAAQ,MAAa,QAAQ,IAAS,KAAA;EACtC,QAAQ,EAAO,KAAI,MAAM,EAAG,KAAK;EACjC;EACA;EACA;EACA,aAAa,MAAa,2BAA2B,MAAM;EAE3D,wBAAwB,EAAY,YAAY,KAC9C,MAAc,EAAW,KAC3B;EACA,MAAM,EAAY;EAClB,cACE,MAAa,4BAA4B,MAAa,QAClD,SACA;EACN,eACE,MAAa,QACT,+DACA;EACN,UAAU;EACV,MAAM,MAAa,QAAQ,QAAQ;EACnC,MACE,MAAa,QACT,EAAY,YAAY,KAAI,MAC1B,EAAW,aAAa,KAAM,CAChC,IACA,KAAA;EACN,gBAAgB,IACZ,EAAY,YACT,KAAK,GAAY,MAAW,EAAW,aAAa,IAAQ,EAAG,EAC/D,QAAO,MAAS,MAAU,EAAE,IAC/B,KAAA;EACJ,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;EACnC,YAAY,EAAE,QAAQ,EAAE,SAAS,IAAK,EAAE;EAExC,QAAQ;GACN,QAAQ,MAAa,QAAQ,IAA6B,KAAA;GAC1D,OAAO,MAAa,QAAQ,KAAA,IAAY;EAC1C;CACF;CASA,OAAO;EAPL,MAAM,CAAC,CAAe;EACtB;EACA,QACE,MAAa,QACP,EAAwB,QAAQ,SAChC,EAAwB,QAAQ;CAEnC;AACT;AAEA,IAAM,KACJ,GACA,GACA,MACG;CACH,IAAI,EAAM,UAAU,EAAM,OAAO,IAAI;EACnC,IAAM,IAAqB,EAAM,OAAO,IAClC,IACJ,EAAc,KAAK,uBAAuB,EAAc,cACpD,IAAoB,EAAe,YAAY,MACnD,MAAS,EAAM,UAAU,CAC3B;EACA,EACE,GACA,GACA,CAAC,EAAmB,UACtB;CACF;AACF;AAEA,SAAgB,EACd,GACA,GACA,GACmC;CACnC,IAAI,KAAe,MAAW;EAC5B,IAAI,IAAW;EACf,QAAQ,GAAR;GACE,KAAK;IACH,IAAW;IACX;GACF,KAAK;IACH,IAAW;IACX;GACF,KAAK;IACH,IAAW;IACX;EACJ;EACA,IAAM,IAAQ,IAAc,IAAc,IAAW,KACjD,IAAS,MAAa,QAAQ,IAAQ,IAAQ;EAKlD,OAHI,IAAS,MACX,IAAS,IAEJ;GACL,OAAO,GAAG,EAAM;GAChB,QAAQ,GAAG,EAAO;EACpB;CACF;CAEA,OAAO;EACL,OAAO;EACP,QAAQ,GAAG,EAAU;CACvB;AACF;AAEA,SAAS,EAAc,GAA2B;CAChD,IAAM,EACJ,WACA,gBACA,6BACA,UACA,gBACA,aACA,qBACE,GACE,EAAE,mBAAgB,EAAkB,GACpC,EAAE,MAAM,GAAe,WAAW,MACtC,EAAoB,GAEhB,CAAC,GAA2B,KAChC,EAA2B,GACvB,EAAE,4BAAyB,EAA6B,GAIxD,IAAY,GAA2B,QACzC,KAAK,MAAM,EAA0B,KAAK,IAC1C,KAAA,GAEE,CAAC,GAAW,KAAgB,EAAS,EAAK,GAE1C,IAAY,EAChB,EAAY,YACZ,EAAY,QACd,GAEM,IAAc,QAEhB,EACE,GACA,GAAe,gBAAgB,CAAC,CAClC,GACF,CAAC,GAAe,cAAc,CAAW,CAC3C,GACM,IAAa,GAAa,YAO1B,IAAa,SACV;EACL,YAAY;EACZ,aAAa,CAAC;EACd,QAAQ;GAAE,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,KAAK;EAAE;EACzC,OAAO;GACL,SAAS,MAAa;GACtB,UAAU;GACV,YAAY;EACd;EACA,OAAO;GAEL,SAAS,KAAe,MAAa;GACrC,UAAU;GACV,YAAY;EACd;CACF,IACA,CAAC,GAAa,CAAQ,CACxB,GAEM,EAAE,MAAM,MAAa,EAAS;EAClC,UAAU;GACR;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,eACE,EACE,GACA,GACA,GACA,GACA,CACF;EAEF,SAAS,CAAC,CAAC;CACb,CAAC,GAEK,IAA6B,EAAM,GACnC,IAAuB,EAAM,GAG7B,KACJ,kBAAC,GAAD;EAAmB,WAAA;YAAnB,CACE,kBAAC,GAAD;GAAY,IAAI;aAA4B;EAAsB,CAAA,GAClE,kBAAC,GAAD;GACE,SAAS;GACT,OAAM;GACN,OAAO;GACP,WAAU,MAAK;IACb,EAAc,EAAE,OAAO,KAAiB;GAC1C;aANF,CAQE,kBAAC,GAAD;IAAU,OAAO;cAAO;GAAmB,CAAA,GAC3C,kBAAC,GAAD;IAAU,OAAO;cAAO;GAAmB,CAAA,CACrC;IACS;;CAcnB,OAVC,CAAC,KAAiB,KACnB,CAAC,KACD,CAAC,IAGC,kBAAC,OAAD;EAAK,WAAU;YACZ;CACE,CAAA,IAIL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,MAAM;EACN,gBAAgB,EAAa,EAAK;EAClC,OAAO,KAAa;EACpB,SAAS,kBAAC,GAAD;GAAe,GAAI;GAAO,aAAa;EAAO,CAAA;EACvD,iBAAiB;EACjB,oBAAoB,EAAE,UAAU,gBAAgB;EAChD,iBAAiB,EAAa,EAAK;EACnC,UAAU;CACX,CAAA,GACD,kBAAC,OAAD;EACE,MAAK;EACL,WAAW,gBAAgB,IAAc,eAAe;YAF1D;GAIG,CAAC,KACA,kBAAC,GAAD;IACE,MAAM;IACN,WAAW;IACX,OAAO;IACM;IACL;IACM;GACf,CAAA;GAEF,KACC,kBAAC,GAAD;IACE,IAAI,EACF,KAAK,EACP;cAHF,CAKE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KACE,IAAI;KACJ,IAAI;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;KAAI;eAFxD,CAIE,kBAAC,QAAD,EAAA,UAAM,qBAAwB,CAAA,GAC9B,kBAAC,GAAD;MAAS,OAAM;gBACb,kBAAC,GAAD,EAAc,WAAU,2CAA4C,CAAA;KAC7D,CAAA,CACC;QACZ,kBAAC,GAAD;KACE,SAAS;KACT,OAAO;KACP,aAAY;KACZ,cAAa;IACd,CAAA,CACgB,EAAA,CAAA,GAClB,EACI;;GAET,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;IACd;IACA,MAAK;IACL,WAAU;cAPZ,CASE,kBAAC,OAAD;KAAK,KAAK;eACP,MAAc,KAAA,KACb,kBAAC,GAAD;MAEE,QAAQ;MACR,MAAM,GAAU,QAAQ,CAAC;MACzB,OAAO,EACL,GACA,GACA,IAAA,MAAA,GAGF;MACA,QAAQ,EAAE,gBAAgB,GAAM;MAChC,UAAS,MACP,EAAiB,GAAK,GAAa,CAAwB;KAE9D,GAdM,GAAG,EAAY,WAAW,GAAG,EAAY,SAAS,GAAG,EAAS,GAAG,GAcvE;IAEA,CAAA,GACL,kBAAC,GAAD;KAAK,IAAI,EAAE,WAAW,SAAS;eAC7B,kBAAC,GAAD;MACE,QAAQ,GAAU;MAClB,QAAQ,GAAU;MAClB,YAAY;KACb,CAAA;IACE,CAAA,CACF;;EACF;GACL,EAAA,CAAA;AAGR"}

package/dist/mocks/msw/handlers/dataAccessRequestHandlers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dataAccessRequestHandlers.d.ts","sourceRoot":"","sources":["../../../../src/mocks/msw/handlers/dataAccessRequestHandlers.ts"],"names":[],"mappings":"~~AA0CA~~,wBAAgB,4BAA4B,CAAC,aAAa,EAAE,MAAM,+~~BAqDjE~~"}
1	+ {"version":3,"file":"dataAccessRequestHandlers.d.ts","sourceRoot":"","sources":["../../../../src/mocks/msw/handlers/dataAccessRequestHandlers.ts"],"names":[],"mappings":"AA8CA,wBAAgB,4BAA4B,CAAC,aAAa,EAAE,MAAM,+BAyFjE"}

package/dist/mocks/msw/handlers/dataAccessRequestHandlers.js CHANGED Viewed

@@ -1,38 +1,63 @@
-import { ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE as e, DATA_ACCESS_REQUEST as t, DATA_ACCESS_REQUEST_SUBMISSION as n } from "../../../utils/APIConstants.js";
-import { MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID as r, mockManagedACTAccessRequirement as i } from "../../accessRequirement/mockAccessRequirements.js";
-import a from "../util/BasicMockedCrudService.js";
-import { MOCK_DATA_ACCESS_RENEWAL as o, MOCK_DATA_ACCESS_REQUEST as s } from "../../dataaccess/MockDataAccessRequest.js";
-import { HttpResponse as c, http as l } from "msw";
+import { ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE as e, DATA_ACCESS_REQUEST as t, DATA_ACCESS_REQUEST_SIGNATURE as n, DATA_ACCESS_REQUEST_SIGNATURE_FILEHANDLE_ID as r, DATA_ACCESS_REQUEST_SIGNATURE_STATUS as i, DATA_ACCESS_REQUEST_SUBMISSION as a } from "../../../utils/APIConstants.js";
+import { MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID as o, mockManagedACTAccessRequirement as s } from "../../accessRequirement/mockAccessRequirements.js";
+import c from "../util/BasicMockedCrudService.js";
+import { MOCK_DATA_ACCESS_RENEWAL as l, MOCK_DATA_ACCESS_REQUEST as u } from "../../dataaccess/MockDataAccessRequest.js";
+import { HttpResponse as d, http as f } from "msw";
 //#region src/mocks/msw/handlers/dataAccessRequestHandlers.ts
-var u = new a({
+var p = new c({
 	idField: "id",
 	autoGenerateId: !0,
-	initialData: [s, o]
-}), d = new a({ initialData: [{
-	accessRequirementId: String(i.id),
-	requestId: s.id
+	initialData: [u, l]
+}), m = new c({ initialData: [{
+	accessRequirementId: String(s.id),
+	requestId: u.id
 }, {
-	accessRequirementId: String(r),
-	requestId: o.id
+	accessRequirementId: String(o),
+	requestId: l.id
 }] });
-function f(r) {
+function h(o) {
 	return [
-		l.get(`${r}${e(":id")}`, ({ params: e }) => {
-			let t = d.getOneByField("accessRequirementId", e.id);
+		f.get(`${o}${e(":id")}`, ({ params: e }) => {
+			let t = m.getOneByField("accessRequirementId", e.id);
 			if (t && t.requestId) {
-				let e = u.getOneById(t.requestId);
-				if (e) return c.json(e, { status: 200 });
+				let e = p.getOneById(t.requestId);
+				if (e) return d.json(e, { status: 200 });
 			}
-			return c.json({ message: `MSW: Request or Renewal not found for access requirement ID: ${e.id}` }, { status: 404 });
+			return d.json({ message: `MSW: Request or Renewal not found for access requirement ID: ${e.id}` }, { status: 404 });
 		}),
-		l.post(`${r}${t}`, async ({ request: e }) => {
-			let t = await e.json(), n = t.id ? u.getOneById(t.id) : null, r;
-			return r = n ? u.update(t.id, t) : u.create(t), c.json(r, { status: 201 });
+		f.post(`${o}${t}`, async ({ request: e }) => {
+			let t = await e.json(), n = t.id ? p.getOneById(t.id) : null, r;
+			return r = n ? p.update(t.id, t) : p.create(t), d.json(r, { status: 201 });
 		}),
-		l.post(`${r}${n(":id")}`, () => c.json({}, { status: 201 }))
+		f.post(`${o}${a(":id")}`, () => d.json({}, { status: 201 })),
+		f.post(`${o}${n(":id")}`, () => d.json({
+			quota: 5,
+			remaining: 4
+		}, { status: 200 })),
+		f.get(`${o}${i(":id")}`, () => d.json({
+			ducStatus: "sent",
+			includesRequestChanges: !0,
+			signerStatus: [
+				{
+					name: "Alice Accessor",
+					userId: "3388888",
+					status: "done"
+				},
+				{
+					name: "Bob Collaborator",
+					userId: "3388889",
+					status: "pending"
+				},
+				{
+					name: "Cara Officer",
+					status: "pending"
+				}
+			]
+		}, { status: 200 })),
+		f.get(`${o}${r(":id")}`, () => d.json({ fileHandleId: "mock-signed-duc-file-handle" }, { status: 200 }))
 	];
 }
 //#endregion
-export { f as getDataAccessRequestHandlers };
+export { h as getDataAccessRequestHandlers };
 //# sourceMappingURL=dataAccessRequestHandlers.js.map

package/dist/mocks/msw/handlers/dataAccessRequestHandlers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dataAccessRequestHandlers.js","names":[],"sources":["../../../../src/mocks/msw/handlers/dataAccessRequestHandlers.ts"],"sourcesContent":["import {\n ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE,\n DATA_ACCESS_REQUEST,\n DATA_ACCESS_REQUEST_SUBMISSION,\n} from '@/utils/APIConstants'\nimport { Renewal, Request } from '@sage-bionetworks/synapse-types'\nimport { http, HttpResponse } from 'msw'\nimport {\n MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID,\n mockManagedACTAccessRequirement,\n} from '../../accessRequirement/mockAccessRequirements'\nimport {\n MOCK_DATA_ACCESS_RENEWAL,\n MOCK_DATA_ACCESS_REQUEST,\n} from '../../dataaccess/MockDataAccessRequest'\nimport BasicMockedCrudService from '../util/BasicMockedCrudService'\n\nconst mockDataAccessRequestService = new BasicMockedCrudService<\n Request \| Renewal,\n 'id'\n>({\n idField: 'id',\n autoGenerateId: true,\n initialData: [MOCK_DATA_ACCESS_REQUEST, MOCK_DATA_ACCESS_RENEWAL],\n})\n\nconst mockMapARToDataAccessRequestService = new BasicMockedCrudService<{\n accessRequirementId: string\n requestId: string\n}>({\n initialData: [\n {\n accessRequirementId: String(mockManagedACTAccessRequirement.id),\n requestId: MOCK_DATA_ACCESS_REQUEST.id,\n },\n {\n accessRequirementId: String(MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID),\n requestId: MOCK_DATA_ACCESS_RENEWAL.id,\n },\n ],\n})\n\nexport function getDataAccessRequestHandlers(backendOrigin: string) {\n return [\n http.get(\n `${backendOrigin}${ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE(\n ':id',\n )}`,\n ({ params }) => {\n const response = mockMapARToDataAccessRequestService.getOneByField(\n 'accessRequirementId',\n params.id as string,\n )\n if (response && response.requestId) {\n const dataAccessRequest = mockDataAccessRequestService.getOneById(\n response.requestId,\n )\n if (dataAccessRequest) {\n return HttpResponse.json(dataAccessRequest, { status: 200 })\n }\n }\n return HttpResponse.json(\n {\n message: `MSW: Request or Renewal not found for access requirement ID: ${params.id}`,\n },\n { status: 404 },\n )\n },\n ),\n http.post<never, Request \| Renewal>(\n `${backendOrigin}${DATA_ACCESS_REQUEST}`,\n async ({ request }) => {\n const resp = await request.json()\n const existingRequest = resp.id\n ? mockDataAccessRequestService.getOneById(resp.id)\n : null\n\n let updated\n if (existingRequest) {\n updated = mockDataAccessRequestService.update(resp.id, resp)\n } else {\n updated = mockDataAccessRequestService.create(resp)\n }\n\n return HttpResponse.json(updated, { status: 201 })\n },\n ),\n\n http.post(\n `${backendOrigin}${DATA_ACCESS_REQUEST_SUBMISSION(':id')}`,\n () => {\n return HttpResponse.json({}, { status: 201 })\n },\n ),\n ]\n}\n"],"mappings":";;;;;;~~AAiBA~~,IAAM,IAA+B,IAAI,EAGvC;CACA,SAAS;CACT,gBAAgB;CAChB,aAAa,CAAC,GAA0B,CAAwB;AAClE,CAAC,GAEK,IAAsC,IAAI,EAG7C,EACD,aAAa,CACX;CACE,qBAAqB,OAAO,EAAgC,EAAE;CAC9D,WAAW,EAAyB;AACtC,GACA;CACE,qBAAqB,OAAO,CAAsC;CAClE,WAAW,EAAyB;AACtC,CACF,EACF,CAAC;AAED,SAAgB,EAA6B,GAAuB;CAClE,OAAO;EACL,EAAK,IACH,GAAG,IAAgB,EACjB,KACF,MACC,EAAE,gBAAa;GACd,IAAM,IAAW,EAAoC,cACnD,uBACA,EAAO,EACT;GACA,IAAI,KAAY,EAAS,WAAW;IAClC,IAAM,IAAoB,EAA6B,WACrD,EAAS,SACX;IACA,IAAI,GACF,OAAO,EAAa,KAAK,GAAmB,EAAE,QAAQ,IAAI,CAAC;GAE/D;GACA,OAAO,EAAa,KAClB,EACE,SAAS,gEAAgE,EAAO,KAClF,GACA,EAAE,QAAQ,IAAI,CAChB;EACF,CACF;EACA,EAAK,KACH,GAAG,IAAgB,KACnB,OAAO,EAAE,iBAAc;GACrB,IAAM,IAAO,MAAM,EAAQ,KAAK,GAC1B,IAAkB,EAAK,KACzB,EAA6B,WAAW,EAAK,EAAE,IAC/C,MAEA;GAOJ,OANA,AAGE,IAHE,IACQ,EAA6B,OAAO,EAAK,IAAI,CAAI,IAEjD,EAA6B,OAAO,CAAI,GAG7C,EAAa,KAAK,GAAS,EAAE,QAAQ,IAAI,CAAC;EACnD,CACF;EAEA,EAAK,KACH,GAAG,IAAgB,EAA+B,KAAK,WAE9C,EAAa,KAAK,CAAC,GAAG,EAAE,QAAQ,IAAI,CAAC,CAEhD;CACF;AACF"}
1	+ {"version":3,"file":"dataAccessRequestHandlers.js","names":[],"sources":["../../../../src/mocks/msw/handlers/dataAccessRequestHandlers.ts"],"sourcesContent":["import {\n ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE,\n DATA_ACCESS_REQUEST,\n DATA_ACCESS_REQUEST_SIGNATURE,\n DATA_ACCESS_REQUEST_SIGNATURE_FILEHANDLE_ID,\n DATA_ACCESS_REQUEST_SIGNATURE_STATUS,\n DATA_ACCESS_REQUEST_SUBMISSION,\n} from '@/utils/APIConstants'\nimport { Renewal, Request } from '@sage-bionetworks/synapse-types'\nimport { http, HttpResponse } from 'msw'\nimport {\n MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID,\n mockManagedACTAccessRequirement,\n} from '../../accessRequirement/mockAccessRequirements'\nimport {\n MOCK_DATA_ACCESS_RENEWAL,\n MOCK_DATA_ACCESS_REQUEST,\n} from '../../dataaccess/MockDataAccessRequest'\nimport BasicMockedCrudService from '../util/BasicMockedCrudService'\nimport { EDucSignatureStatus } from '@sage-bionetworks/synapse-client'\n\nconst mockDataAccessRequestService = new BasicMockedCrudService<\n Request \| Renewal,\n 'id'\n>({\n idField: 'id',\n autoGenerateId: true,\n initialData: [MOCK_DATA_ACCESS_REQUEST, MOCK_DATA_ACCESS_RENEWAL],\n})\n\nconst mockMapARToDataAccessRequestService = new BasicMockedCrudService<{\n accessRequirementId: string\n requestId: string\n}>({\n initialData: [\n {\n accessRequirementId: String(mockManagedACTAccessRequirement.id),\n requestId: MOCK_DATA_ACCESS_REQUEST.id,\n },\n {\n accessRequirementId: String(MOCK_ACCESS_REQUIREMENT_WITHOUT_ACL_ID),\n requestId: MOCK_DATA_ACCESS_RENEWAL.id,\n },\n ],\n})\n\nexport function getDataAccessRequestHandlers(backendOrigin: string) {\n return [\n http.get(\n `${backendOrigin}${ACCESS_REQUIREMENT_DATA_ACCESS_REQUEST_FOR_UPDATE(\n ':id',\n )}`,\n ({ params }) => {\n const response = mockMapARToDataAccessRequestService.getOneByField(\n 'accessRequirementId',\n params.id as string,\n )\n if (response && response.requestId) {\n const dataAccessRequest = mockDataAccessRequestService.getOneById(\n response.requestId,\n )\n if (dataAccessRequest) {\n return HttpResponse.json(dataAccessRequest, { status: 200 })\n }\n }\n return HttpResponse.json(\n {\n message: `MSW: Request or Renewal not found for access requirement ID: ${params.id}`,\n },\n { status: 404 },\n )\n },\n ),\n http.post<never, Request \| Renewal>(\n `${backendOrigin}${DATA_ACCESS_REQUEST}`,\n async ({ request }) => {\n const resp = await request.json()\n const existingRequest = resp.id\n ? mockDataAccessRequestService.getOneById(resp.id)\n : null\n\n let updated\n if (existingRequest) {\n updated = mockDataAccessRequestService.update(resp.id, resp)\n } else {\n updated = mockDataAccessRequestService.create(resp)\n }\n\n return HttpResponse.json(updated, { status: 201 })\n },\n ),\n\n http.post(\n `${backendOrigin}${DATA_ACCESS_REQUEST_SUBMISSION(':id')}`,\n () => {\n return HttpResponse.json({}, { status: 201 })\n },\n ),\n\n http.post(`${backendOrigin}${DATA_ACCESS_REQUEST_SIGNATURE(':id')}`, () => {\n return HttpResponse.json({ quota: 5, remaining: 4 }, { status: 200 })\n }),\n\n http.get(\n `${backendOrigin}${DATA_ACCESS_REQUEST_SIGNATURE_STATUS(':id')}`,\n () => {\n return HttpResponse.json<EDucSignatureStatus>(\n {\n ducStatus: 'sent',\n includesRequestChanges: true,\n signerStatus: [\n { name: 'Alice Accessor', userId: '3388888', status: 'done' },\n {\n name: 'Bob Collaborator',\n userId: '3388889',\n status: 'pending',\n },\n { name: 'Cara Officer', status: 'pending' },\n ],\n },\n { status: 200 },\n )\n },\n ),\n\n http.get(\n `${backendOrigin}${DATA_ACCESS_REQUEST_SIGNATURE_FILEHANDLE_ID(':id')}`,\n () => {\n return HttpResponse.json(\n { fileHandleId: 'mock-signed-duc-file-handle' },\n { status: 200 },\n )\n },\n ),\n ]\n}\n"],"mappings":";;;;;;AAqBA,IAAM,IAA+B,IAAI,EAGvC;CACA,SAAS;CACT,gBAAgB;CAChB,aAAa,CAAC,GAA0B,CAAwB;AAClE,CAAC,GAEK,IAAsC,IAAI,EAG7C,EACD,aAAa,CACX;CACE,qBAAqB,OAAO,EAAgC,EAAE;CAC9D,WAAW,EAAyB;AACtC,GACA;CACE,qBAAqB,OAAO,CAAsC;CAClE,WAAW,EAAyB;AACtC,CACF,EACF,CAAC;AAED,SAAgB,EAA6B,GAAuB;CAClE,OAAO;EACL,EAAK,IACH,GAAG,IAAgB,EACjB,KACF,MACC,EAAE,gBAAa;GACd,IAAM,IAAW,EAAoC,cACnD,uBACA,EAAO,EACT;GACA,IAAI,KAAY,EAAS,WAAW;IAClC,IAAM,IAAoB,EAA6B,WACrD,EAAS,SACX;IACA,IAAI,GACF,OAAO,EAAa,KAAK,GAAmB,EAAE,QAAQ,IAAI,CAAC;GAE/D;GACA,OAAO,EAAa,KAClB,EACE,SAAS,gEAAgE,EAAO,KAClF,GACA,EAAE,QAAQ,IAAI,CAChB;EACF,CACF;EACA,EAAK,KACH,GAAG,IAAgB,KACnB,OAAO,EAAE,iBAAc;GACrB,IAAM,IAAO,MAAM,EAAQ,KAAK,GAC1B,IAAkB,EAAK,KACzB,EAA6B,WAAW,EAAK,EAAE,IAC/C,MAEA;GAOJ,OANA,AAGE,IAHE,IACQ,EAA6B,OAAO,EAAK,IAAI,CAAI,IAEjD,EAA6B,OAAO,CAAI,GAG7C,EAAa,KAAK,GAAS,EAAE,QAAQ,IAAI,CAAC;EACnD,CACF;EAEA,EAAK,KACH,GAAG,IAAgB,EAA+B,KAAK,WAE9C,EAAa,KAAK,CAAC,GAAG,EAAE,QAAQ,IAAI,CAAC,CAEhD;EAEA,EAAK,KAAK,GAAG,IAAgB,EAA8B,KAAK,WACvD,EAAa,KAAK;GAAE,OAAO;GAAG,WAAW;EAAE,GAAG,EAAE,QAAQ,IAAI,CAAC,CACrE;EAED,EAAK,IACH,GAAG,IAAgB,EAAqC,KAAK,WAEpD,EAAa,KAClB;GACE,WAAW;GACX,wBAAwB;GACxB,cAAc;IACZ;KAAE,MAAM;KAAkB,QAAQ;KAAW,QAAQ;IAAO;IAC5D;KACE,MAAM;KACN,QAAQ;KACR,QAAQ;IACV;IACA;KAAE,MAAM;KAAgB,QAAQ;IAAU;GAC5C;EACF,GACA,EAAE,QAAQ,IAAI,CAChB,CAEJ;EAEA,EAAK,IACH,GAAG,IAAgB,EAA4C,KAAK,WAE3D,EAAa,KAClB,EAAE,cAAc,8BAA8B,GAC9C,EAAE,QAAQ,IAAI,CAChB,CAEJ;CACF;AACF"}

package/dist/mocks/msw/handlers/eDucTemplateHandlers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eDucTemplateHandlers.d.ts","sourceRoot":"","sources":["../../../../src/mocks/msw/handlers/eDucTemplateHandlers.ts"],"names":[],"mappings":"~~AAKA~~,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,MAAM,+~~BAS5D~~"}
1	+ {"version":3,"file":"eDucTemplateHandlers.d.ts","sourceRoot":"","sources":["../../../../src/mocks/msw/handlers/eDucTemplateHandlers.ts"],"names":[],"mappings":"AAQA,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,MAAM,+BAgB5D"}

package/dist/mocks/msw/handlers/eDucTemplateHandlers.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { EDUC_TEMPLATE as e } from "../../../utils/APIConstants.js";
-import { mockEDucTemplates as t } from "../../eDuc/mockEDucTemplates.js";
-import { HttpResponse as n, http as r } from "msw";
+import { EDUC_TEMPLATE as e, EDUC_TEMPLATE_VALIDATION as t } from "../../../utils/APIConstants.js";
+import { mockEDucTemplates as n } from "../../eDuc/mockEDucTemplates.js";
+import { HttpResponse as r, http as i } from "msw";
 //#region src/mocks/msw/handlers/eDucTemplateHandlers.ts
-function i(i) {
-	return [r.post(`${i}${e}`, () => {
-		let e = { results: t };
-		return n.json(e);
-	})];
+function a(a) {
+	return [i.post(`${a}${e}`, () => {
+		let e = { results: n };
+		return r.json(e);
+	}), i.get(`${a}${t(":templateId")}`, () => r.json({ isValid: !0 }))];
 }
 //#endregion
-export { i as getEDucTemplateHandlers };
+export { a as getEDucTemplateHandlers };
 //# sourceMappingURL=eDucTemplateHandlers.js.map

package/dist/mocks/msw/handlers/eDucTemplateHandlers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eDucTemplateHandlers.js","names":[],"sources":["../../../../src/mocks/msw/handlers/eDucTemplateHandlers.ts"],"sourcesContent":["import { EDUC_TEMPLATE } from '@/utils/APIConstants'\nimport { EDucTemplatePage } from '@sage-bionetworks/synapse-client'\nimport { http, HttpResponse } from 'msw'\nimport { mockEDucTemplates } from '../../eDuc/mockEDucTemplates'\n\nexport function getEDucTemplateHandlers(backendOrigin: string) {\n return [\n http.post(`${backendOrigin}${EDUC_TEMPLATE}`, () => {\n const response: EDucTemplatePage = {\n results: mockEDucTemplates,\n }\n return HttpResponse.json(response)\n }),\n ]\n}\n"],"mappings":";;;;~~AAKA~~,SAAgB,EAAwB,GAAuB;CAC7D,OAAO,CACL,EAAK,KAAK,GAAG,IAAgB,WAAuB;EAClD,IAAM,IAA6B,EACjC,SAAS,EACX;EACA,OAAO,EAAa,KAAK,CAAQ;CACnC,CAAC,~~CACH~~;AACF"}
1	+ {"version":3,"file":"eDucTemplateHandlers.js","names":[],"sources":["../../../../src/mocks/msw/handlers/eDucTemplateHandlers.ts"],"sourcesContent":["import { EDUC_TEMPLATE, EDUC_TEMPLATE_VALIDATION } from '@/utils/APIConstants'\nimport {\n EDucTemplatePage,\n EDucTemplateValidationResult,\n} from '@sage-bionetworks/synapse-client'\nimport { http, HttpResponse } from 'msw'\nimport { mockEDucTemplates } from '../../eDuc/mockEDucTemplates'\n\nexport function getEDucTemplateHandlers(backendOrigin: string) {\n return [\n http.post(`${backendOrigin}${EDUC_TEMPLATE}`, () => {\n const response: EDucTemplatePage = {\n results: mockEDucTemplates,\n }\n return HttpResponse.json(response)\n }),\n http.get(\n `${backendOrigin}${EDUC_TEMPLATE_VALIDATION(':templateId')}`,\n () => {\n const response: EDucTemplateValidationResult = { isValid: true }\n return HttpResponse.json(response)\n },\n ),\n ]\n}\n"],"mappings":";;;;AAQA,SAAgB,EAAwB,GAAuB;CAC7D,OAAO,CACL,EAAK,KAAK,GAAG,IAAgB,WAAuB;EAClD,IAAM,IAA6B,EACjC,SAAS,EACX;EACA,OAAO,EAAa,KAAK,CAAQ;CACnC,CAAC,GACD,EAAK,IACH,GAAG,IAAgB,EAAyB,aAAa,WAGhD,EAAa,KAAK,EADwB,SAAS,GACjC,CAAQ,CAErC,CACF;AACF"}

package/dist/style/components/facet_nav/_facet-nav-panel.scss CHANGED Viewed

@@ -2,10 +2,6 @@
   --facetNavPanel-btn-padding: 3px;
   --facetNavPanel-btn-margin: 0 1px;
   height: 100%;
-  // Flex column so the body can fill the remaining space after the header
-  // using flex:1 (externally determined height, not content-driven). Without
-  // this, height:100% on the body creates an infinite growth loop because the
-  // chart height feeds back into the panel height.
   display: flex;
   flex-direction: column;
   &--expanded .main-svg,
@@ -69,8 +65,6 @@
   }
   &__body {
     padding: 20px 0;
-    // Fill the remaining height after the header without overflowing. flex:1
-    // + min-height:0 are the flex equivalents of "fill remaining space".
     flex: 1;
     min-height: 0;
   }