synapse-react-client 4.0.46 → 4.0.48

package/dist/components/widgets/facet-nav/FacetPlotLegendList.js

@@ -43,9 +43,11 @@ function o(o) {
 						variant: "body2",
 						sx: {
 							color: "grey.600",
-							fontSize: "14px"
+							fontSize: "14px",
+							whiteSpace: "nowrap",
+							flexShrink: 0
 						},
-						children: r.count.toLocaleString()
+						children: r.countText
 					})
 				]
 			})

package/dist/components/widgets/facet-nav/FacetPlotLegendList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{ color: 'grey.600', fontSize: '14px' }}\n              >\n                {facetValue.count.toLocaleString()}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,CAAC,GAAG,kBAAe;CAC5C,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;IACP;cANF;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;MAC1B;MAEA,OAAO,EAAE,QAAQ,UAAU;KAC5B,GAFM,eAAe,GAErB;KACD,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;MACZ;gBAEC,EAAW;KACF,CAAA;KACZ,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OAAE,OAAO;OAAY,UAAU;MAAO;gBAEzC,EAAW,MAAM,eAAe;KACvB,CAAA;IACT;;EACE,GAxCF,EAAW,KAwCT,CAEZ;CACE,CAAA;AAET"}
+{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  color: 'grey.600',\n                  fontSize: '14px',\n                  whiteSpace: 'nowrap',\n                  flexShrink: 0,\n                }}\n              >\n                {facetValue.countText}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,CAAC,GAAG,kBAAe;CAC5C,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;IACP;cANF;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;MAC1B;MAEA,OAAO,EAAE,QAAQ,UAAU;KAC5B,GAFM,eAAe,GAErB;KACD,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;MACZ;gBAEC,EAAW;KACF,CAAA;KACZ,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,OAAO;OACP,UAAU;OACV,YAAY;OACZ,YAAY;MACd;gBAEC,EAAW;KACF,CAAA;IACT;;EACE,GA7CF,EAAW,KA6CT,CAEZ;CACE,CAAA;AAET"}

package/dist/components/widgets/facet-nav/FacetPlotLegendTable.js

@@ -72,7 +72,7 @@ function c(c) {
 					color: "grey.600",
 					textAlign: "right"
 				},
-				children: e.count
+				children: e.countText
 			}) })] }, e.label);
 		}) })]
 	}), p && /* @__PURE__ */ o(n, {

package/dist/components/widgets/facet-nav/FacetPlotLegendTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.count}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,CAAC,GAAG,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,EAA6B;CAEzD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,GAAI;EAAE;YAL/D,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;GAAW;aAFjE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,EACV,CAAA,GACJ,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;IAAO;cACnD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;KACb;eAEC;IACS,CAAA;GACV,CAAA,CACD;KACA,CAAA,GACP,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,EAAwB;GACjE,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;IACP;cALF,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;KAC1B;KAEA,OAAO,EAAE,QAAQ,UAAU;IAC5B,GAFM,eAAe,GAErB,GACD,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,OAAO;eAChD;IACS,CAAA,CACT;MACH,CAAA,GACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;IACb;cAEC,EAAW;GACF,CAAA,EACV,CAAA,CACF,EAAA,GApCK,EAAW,KAoChB;EAER,CAAC,EACI,CAAA,CACJ;KACJ,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YACf,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;GAC5B;;CACH,CAAA,CAEP,EAAA,CAAA;AAEN"}
+{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.countText}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,CAAC,GAAG,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,EAA6B;CAEzD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,GAAI;EAAE;YAL/D,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;GAAW;aAFjE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,EACV,CAAA,GACJ,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;IAAO;cACnD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;KACb;eAEC;IACS,CAAA;GACV,CAAA,CACD;KACA,CAAA,GACP,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,EAAwB;GACjE,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;IACP;cALF,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;KAC1B;KAEA,OAAO,EAAE,QAAQ,UAAU;IAC5B,GAFM,eAAe,GAErB,GACD,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,OAAO;eAChD;IACS,CAAA,CACT;MACH,CAAA,GACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;IACb;cAEC,EAAW;GACF,CAAA,EACV,CAAA,CACF,EAAA,GApCK,EAAW,KAoChB;EAER,CAAC,EACI,CAAA,CACJ;KACJ,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YACf,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;GAC5B;;CACH,CAAA,CAEP,EAAA,CAAA;AAEN"}

package/dist/components/widgets/facet-nav/FacetPlotLegendUtils.d.ts

@@ -3,6 +3,8 @@ export declare function truncate(str: string | undefined, n: number): string | u
 export type FacetWithLabel = {
     label: string;
     count: number;
+    /** The count as displayed: localized, or a range/approximation for post-processed facet counts. */
+    countText: string;
 };
 export type FacetPlotLegendProps = {
     labels?: FacetWithLabel[];

package/dist/components/widgets/facet-nav/FacetPlotLegendUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,EAAE,MAAW,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,MAAM,sBAM1D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"FacetPlotLegendUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,EAAE,MAAW,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,MAAM,sBAM1D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA"}

package/dist/components/widgets/facet-nav/FacetPlotLegendUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;CAC3D,IAAI,CAAC,GACH,OAAO;CAET,IAAM,IAAqB,EAAI,KAAK;CACpC,OAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,CAAC,IAAI,MAAM;AACxE"}
+{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n  /** The count as displayed: localized, or a range/approximation for post-processed facet counts. */\n  countText: string\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;CAC3D,IAAI,CAAC,GACH,OAAO;CAET,IAAM,IAAqB,EAAI,KAAK;CACpC,OAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,CAAC,IAAI,MAAM;AACxE"}

package/dist/components/widgets/facet-nav/PlotsContainer.d.ts

@@ -5,6 +5,13 @@ export type PlotsContainerProps = {
     facetsToPlot?: string[];
     customPlots?: QueryWrapperSynapsePlotProps[];
     initialPlotTypeByFacetColumnName?: Record<string, PlotType>;
+    /** Chart type of facet plots without an entry in `initialPlotTypeByFacetColumnName`. Defaults to a pie chart. */
+    defaultPlotType?: PlotType;
+    /**
+     * When true, the facet plots cannot change the query: slices can't be clicked and the filter
+     * dropdowns are hidden. Set while the Query Builder owns the filters.
+     */
+    disableFiltering?: boolean;
 };
 type CustomPlotIdentifier = {
     title: string;

package/dist/components/widgets/facet-nav/PlotsContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAC5D,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAgUD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}
+{"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,iHAAiH;IACjH,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA0UD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}

package/dist/components/widgets/facet-nav/PlotsContainer.js

@@ -1,6 +1,6 @@
-import { facetObjectMatchesDefinition as e } from "../../../utils/functions/queryUtils.js";
-import { useSuspenseGetQueryMetadata as t } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as n } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useQueryVisualizationContext as e } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { facetObjectMatchesDefinition as t } from "../../../utils/functions/queryUtils.js";
+import { useSuspenseGetQueryMetadata as n } from "../../QueryWrapper/useGetQueryMetadata.js";
 import "../../QueryVisualizationWrapper/index.js";
 import r from "./FacetNavPanel.js";
 import i, { getFacets as a } from "./useFacetPlots.js";
@@ -10,92 +10,94 @@ import { Suspense as c, useEffect as l, useMemo as u, useState as d } from "reac
 import { Box as f, Button as p } from "@mui/material";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/widgets/facet-nav/PlotsContainer.tsx
-var _ = 2, v = (t, n) => "__custom" in n && "__custom" in t ? t.title == n.title : !("__custom" in n) && !("__custom" in t) ? e(t, n) : !1;
+var _ = 2, v = (e, n) => "__custom" in n && "__custom" in e ? e.title == n.title : !("__custom" in n) && !("__custom" in e) ? t(e, n) : !1;
 function y(e) {
 	return e === "bar" ? "BAR" : "PIE";
 }
-var b = (e) => "__custom" in e.plotId ? `custom-${e.plotId.title}` : `facet-${e.plotId.columnName}-${e.plotId.jsonPath}`, x = (e, t) => !!t.find((t) => v(t.plotId, e)), S = (e) => ({
+var b = (e) => "__custom" in e.plotId ? `custom-${e.plotId.title}` : `facet-${e.plotId.columnName}-${e.plotId.jsonPath}`, x = (e, t) => t.some((t) => v(t.plotId, e)), S = (e) => ({
 	__custom: !0,
 	title: e.title ?? ""
-}), C = (e = [], t = [], n) => [...e.map((e, t) => ({
+}), C = (e = [], t = [], n, r) => [...e.map((e, t) => ({
 	plotId: S(e),
 	isHidden: t >= _,
 	plotType: y(e.type)
-})), ...t.map((t, r) => ({
+})), ...t.map((t, i) => ({
 	plotId: t.facetToPlot,
-	isHidden: r + e.length >= _,
-	plotType: n?.[t.facetToPlot.columnName] ?? T
+	isHidden: i + e.length >= _,
+	plotType: n?.[t.facetToPlot.columnName] ?? r
 }))], w = (e, t, n) => t.some((t) => v(S(t), e.plotId)) || n.some((t) => v(t.facetToPlot, e.plotId)), T = "PIE", E = [], D = [];
-function O(e) {
-	let { facetsToPlot: s = E, customPlots: c = D, initialPlotTypeByFacetColumnName: y } = e, { data: O } = t(), { showPlots: k } = n(), [A, j] = d([]), M = i(s), N = (e) => A.find((t) => v(e, t.plotId))?.plotType ?? T;
+function O(t) {
+	let { facetsToPlot: s = E, customPlots: c = D, initialPlotTypeByFacetColumnName: y, defaultPlotType: O = T, disableFiltering: k } = t, { data: A } = n(), { showPlots: j } = e(), [M, N] = d([]), P = i(s), F = (e) => M.find((t) => v(e, t.plotId))?.plotType ?? O;
 	l(() => {
-		let e = C(c, M, y);
-		j((t) => {
+		let e = C(c, P, y, O);
+		N((t) => {
 			let n = e.filter((e) => !x(e.plotId, t));
-			return [...t.filter((e) => w(e, c, M)), ...n];
+			return [...t.filter((e) => w(e, c, P)), ...n];
 		});
 	}, [
 		c,
-		M,
-		y
+		P,
+		y,
+		O
 	]);
-	let P = (e) => {
-		j((t) => t.map((t, n) => e ? {
+	let I = (e) => {
+		N((t) => t.map((t, n) => e ? {
 			...t,
 			isHidden: !1
 		} : {
 			...t,
 			isHidden: n >= _
 		}));
-	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]);
+	}, L = (e) => M.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, R = u(() => M.some((e) => e.isHidden === !0) ? "MORE" : M.length <= _ ? "NONE" : "LESS", [M]);
 	l(() => {
-		I === "LESS" && requestAnimationFrame(() => {
+		R === "LESS" && requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("resize"));
 		});
-	}, [I]);
-	let L = (e) => {
-		z(e, "isHidden", !0);
-	}, R = (e, t) => {
-		z(e, "plotType", t);
-	}, z = (e, t, n) => {
-		j((r) => r.map((r) => v(e, r.plotId) ? {
+	}, [R]);
+	let z = (e) => {
+		V(e, "isHidden", !0);
+	}, B = (e, t) => {
+		V(e, "plotType", t);
+	}, V = (e, t, n) => {
+		N((r) => r.map((r) => v(e, r.plotId) ? {
 			...r,
 			[t]: n
 		} : r));
-	}, B = a(O, s).map((e, t) => ({
+	}, H = a(A, s).map((e, t) => ({
 		facet: {
 			columnName: e.columnName,
 			jsonPath: e.jsonPath
 		},
 		colorIndex: t
 	}));
-	return /* @__PURE__ */ h(m, { children: A.length > 0 && /* @__PURE__ */ g("div", {
-		className: `PlotsContainer ${k ? "" : "hidden"} ${I === "LESS" ? "less" : ""}`,
+	return /* @__PURE__ */ h(m, { children: M.length > 0 && /* @__PURE__ */ g("div", {
+		className: `PlotsContainer ${j ? "" : "hidden"} ${R === "LESS" ? "less" : ""}`,
 		children: [/* @__PURE__ */ h("div", {
 			className: "PlotsContainer__row",
 			role: "list",
-			children: A.map((e) => {
-				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = M.find((t) => v(t.facetToPlot, e.plotId));
+			children: M.map((e) => {
+				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = P.find((t) => v(t.facetToPlot, e.plotId));
 				return /* @__PURE__ */ g("div", {
 					className: [t ? "PlotsContainer__row__item--custom" : void 0, t && n?.fullWidth ? "PlotsContainer__row__item--full-width" : void 0].filter(Boolean).join(" ") || void 0,
 					style: {
 						minWidth: "435px",
-						display: F(e.plotId) ? "none" : "block"
+						display: L(e.plotId) ? "none" : "block"
 					},
 					children: [t && n && /* @__PURE__ */ h(o, {
 						...n,
-						onHide: () => L(e.plotId)
+						onHide: () => z(e.plotId)
 					}), !t && i && /* @__PURE__ */ h(r, {
-						index: B.find((t) => v(t.facet, e.plotId))?.colorIndex,
-						onHide: () => L(e.plotId),
-						plotType: N(e.plotId),
-						onSetPlotType: (t) => R(e.plotId, t),
+						index: H.find((t) => v(t.facet, e.plotId))?.colorIndex,
+						onHide: () => z(e.plotId),
+						plotType: F(e.plotId),
+						onSetPlotType: (t) => B(e.plotId, t),
 						isModalView: !1,
+						disableFiltering: k,
 						...i
 					})]
 				}, b(e));
 			})
-		}), I !== "NONE" && /* @__PURE__ */ h(f, {
+		}), R !== "NONE" && /* @__PURE__ */ h(f, {
 			sx: {
 				display: "flex",
 				justifyContent: "center",
@@ -106,18 +108,18 @@ function O(e) {
 			children: /* @__PURE__ */ h(p, {
 				variant: "contained",
 				color: "secondary",
-				onClick: () => P(I === "MORE"),
+				onClick: () => I(R === "MORE"),
 				sx: { width: "150px" },
-				children: I === "LESS" ? "Hide Charts" : "View All Charts"
+				children: R === "LESS" ? "Hide Charts" : "View All Charts"
 			})
 		})]
 	}) });
 }
-function k(e) {
-	let { showPlots: t } = n();
+function k(t) {
+	let { showPlots: n } = e();
 	return /* @__PURE__ */ h(c, {
-		fallback: t ? /* @__PURE__ */ h(s, {}) : null,
-		children: /* @__PURE__ */ h(O, { ...e })
+		fallback: n ? /* @__PURE__ */ h(s, {}) : null,
+		children: /* @__PURE__ */ h(O, { ...t })
 	});
 }
 //#endregion

package/dist/components/widgets/facet-nav/PlotsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return !!plotUiStateArray.find(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? DEFAULT_PLOT_TYPE,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? DEFAULT_PLOT_TYPE\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.find(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // When all charts become visible (transition to 'LESS'), trigger a resize event so\n  // Plotly recalculates dimensions for charts that were previously hidden (display: none).\n  useEffect(() => {\n    if (showMoreButtonState === 'LESS') {\n      requestAnimationFrame(() => {\n        window.dispatchEvent(new Event('resize'))\n      })\n    }\n  }, [showMoreButtonState])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    [\n                      isCustomPlot\n                        ? 'PlotsContainer__row__item--custom'\n                        : undefined,\n                      isCustomPlot && customPlotProps?.fullWidth\n                        ? 'PlotsContainer__row__item--full-width'\n                        : undefined,\n                    ]\n                      .filter(Boolean)\n                      .join(' ') || undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n  /** Chart type of facet plots without an entry in `initialPlotTypeByFacetColumnName`. Defaults to a pie chart. */\n  defaultPlotType?: PlotType\n  /**\n   * When true, the facet plots cannot change the query: slices can't be clicked and the filter\n   * dropdowns are hidden. Set while the Query Builder owns the filters.\n   */\n  disableFiltering?: boolean\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return plotUiStateArray.some(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName: Record<string, PlotType> | undefined,\n  defaultPlotType: PlotType,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? defaultPlotType,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n    defaultPlotType = DEFAULT_PLOT_TYPE,\n    disableFiltering,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? defaultPlotType\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n      defaultPlotType,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [\n    customPlots,\n    facetNavPanelPropsArray,\n    initialPlotTypeByFacetColumnName,\n    defaultPlotType,\n  ])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.some(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // When all charts become visible (transition to 'LESS'), trigger a resize event so\n  // Plotly recalculates dimensions for charts that were previously hidden (display: none).\n  useEffect(() => {\n    if (showMoreButtonState === 'LESS') {\n      requestAnimationFrame(() => {\n        window.dispatchEvent(new Event('resize'))\n      })\n    }\n  }, [showMoreButtonState])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    [\n                      isCustomPlot\n                        ? 'PlotsContainer__row__item--custom'\n                        : undefined,\n                      isCustomPlot && customPlotProps?.fullWidth\n                        ? 'PlotsContainer__row__item--full-width'\n                        : undefined,\n                    ]\n                      .filter(Boolean)\n                      .join(' ') || undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      disableFiltering={disableFiltering}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/facet-nav/SelectionCriteriaPills.js

@@ -1,10 +1,10 @@
 import { FRIENDLY_VALUE_NOT_SET as e } from "../../../utils/SynapseConstants.js";
 import { isColumnMultiValueFunctionQueryFilter as t, isColumnSingleValueQueryFilter as n, isFacetColumnRangeRequest as r, isFacetColumnValuesRequest as i, isTextMatchesQueryFilter as a } from "../../../utils/types/IsType.js";
+import { useQueryVisualizationContext as o } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../../utils/index.js";
-import { useQueryContext as o } from "../../QueryContext/QueryContext.js";
+import { useQueryContext as s } from "../../QueryContext/QueryContext.js";
 import "../../QueryContext/index.js";
-import { useGetQueryMetadata as s } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as c } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useGetQueryMetadata as c } from "../../QueryWrapper/useGetQueryMetadata.js";
 import "../../QueryVisualizationWrapper/index.js";
 import l from "./SelectionCriteriaPill.js";
 import { getSearchTextFromBooleanModeSearchExpression as u } from "../../FullTextSearch/FullTextSearchUtils.js";
@@ -120,7 +120,7 @@ function b(e, t, n, a, o) {
 	});
 }
 function x() {
-	let e = o(), t = e.lockedColumn, n = c(), { lockTextMatchesQueryFilterPill: r } = n, { currentQueryRequest: i } = e, { data: a } = s(), u = v(i.query?.additionalFilters ?? [], e, a?.columnModels || [], n, t, r), m = b(i.query.selectedFacets ?? [], e, a?.columnModels || [], n, t);
+	let e = s(), t = e.lockedColumn, n = o(), { lockTextMatchesQueryFilterPill: r } = n, { currentQueryRequest: i } = e, { data: a } = c(), u = v(i.query?.additionalFilters ?? [], e, a?.columnModels || [], n, t, r), m = b(i.query.selectedFacets ?? [], e, a?.columnModels || [], n, t);
 	return /* @__PURE__ */ p(f, { children: [...u, ...m].map((e) => {
 		let t = encodeURIComponent(e.key);
 		return /* @__PURE__ */ d(l, {

package/dist/components/widgets/facet-nav/useFacetPlots.d.ts

@@ -1,5 +1,6 @@
-import { FacetColumnResult, QueryResultBundle } from '@sage-bionetworks/synapse-types';
+import { EnumerationFacet } from '@/utils/functions/enumerationFacet';
+import { QueryResultBundle } from '@sage-bionetworks/synapse-types';
 import { FacetNavPanelProps } from './FacetNavPanel';
 export default function useFacetPlots(facetsToPlot: string[]): Pick<FacetNavPanelProps, 'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'>[];
-export declare function getFacets(data: QueryResultBundle | undefined, facetsToPlot?: string[]): FacetColumnResult[];
+export declare function getFacets(data: QueryResultBundle | undefined, facetsToPlot?: string[]): EnumerationFacet[];
 //# sourceMappingURL=useFacetPlots.d.ts.map

package/dist/components/widgets/facet-nav/useFacetPlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFacetPlots.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAGjB,iBAAiB,EAClB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,YAAY,EAAE,MAAM,EAAE,GACrB,IAAI,CACL,kBAAkB,EAClB,2BAA2B,GAAG,0BAA0B,GAAG,aAAa,CACzE,EAAE,CAqDF;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,iBAAiB,GAAG,SAAS,EACnC,YAAY,CAAC,EAAE,MAAM,EAAE,GACtB,iBAAiB,EAAE,CAoBrB"}
+{"version":3,"file":"useFacetPlots.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAEjB,MAAM,oCAAoC,CAAA;AAE3C,OAAO,EAGL,iBAAiB,EAClB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,YAAY,EAAE,MAAM,EAAE,GACrB,IAAI,CACL,kBAAkB,EAClB,2BAA2B,GAAG,0BAA0B,GAAG,aAAa,CACzE,EAAE,CAqDF;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,iBAAiB,GAAG,SAAS,EACnC,YAAY,CAAC,EAAE,MAAM,EAAE,GACtB,gBAAgB,EAAE,CAgBpB"}

package/dist/components/widgets/facet-nav/useFacetPlots.js

@@ -1,29 +1,30 @@
-import { isSingleNotSetValue as e } from "../../../utils/functions/queryUtils.js";
-import { useQueryContext as t } from "../../QueryContext/QueryContext.js";
+import { getEnumerationFacets as e } from "../../../utils/functions/enumerationFacet.js";
+import { isSingleNotSetValue as t } from "../../../utils/functions/queryUtils.js";
+import { useQueryContext as n } from "../../QueryContext/QueryContext.js";
 import "../../QueryContext/index.js";
-import { useSuspenseGetQueryMetadata as n } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { applyChangesToValuesColumn as r } from "../query-filter/FacetFilterControls.js";
-import { useCallback as i, useMemo as a } from "react";
+import { useSuspenseGetQueryMetadata as r } from "../../QueryWrapper/useGetQueryMetadata.js";
+import { applyChangesToValuesColumn as i } from "../query-filter/FacetFilterControls.js";
+import { useCallback as a, useMemo as o } from "react";
 //#region src/components/widgets/facet-nav/useFacetPlots.ts
-function o(e) {
-	let { getCurrentQueryRequest: o, executeQueryRequest: c } = t(), { data: l } = n(), u = a(() => o(), [o]), d = a(() => s(l, e), [l, e]), f = i((e) => {
-		c((t) => (t.query.selectedFacets = e, t.query.offset = 0, t), { debounce: !0 });
-	}, [c]);
-	return a(() => d.map((e) => ({
+function s(e) {
+	let { getCurrentQueryRequest: t, executeQueryRequest: s } = n(), { data: l } = r(), u = o(() => t(), [t]), d = o(() => c(l, e), [l, e]), f = a((e) => {
+		s((t) => (t.query.selectedFacets = e, t.query.offset = 0, t), { debounce: !0 });
+	}, [s]);
+	return o(() => d.map((e) => ({
 		facetToPlot: e,
 		applyChangesToFacetFilter: f,
-		applyChangesToGraphSlice: (e, t, n) => r(u, e, f, t?.value, n)
+		applyChangesToGraphSlice: (e, t, n) => i(u, e, f, t?.value, n)
 	})), [
 		d,
 		f,
 		u
 	]);
 }
-function s(t, n) {
-	let r = t?.facets?.filter((t) => t.facetType === "enumeration" && (!n?.length || n.indexOf(t.columnName) > -1) && t.facetValues.length > 0 && !e(t)) ?? [];
-	return n?.length && r.sort((e, t) => n.indexOf(e.columnName) - n.indexOf(t.columnName)), r;
+function c(n, r) {
+	let i = e(n?.facets?.filter((e) => !t(e))).filter((e) => (!r?.length || r.includes(e.columnName)) && e.facetValues.length > 0);
+	return r?.length && i.sort((e, t) => r.indexOf(e.columnName) - r.indexOf(t.columnName)), i;
 }
 //#endregion
-export { o as default, s as getFacets };
+export { s as default, c as getFacets };
 
 //# sourceMappingURL=useFacetPlots.js.map

package/dist/components/widgets/facet-nav/useFacetPlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFacetPlots.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"sourcesContent":["import { isSingleNotSetValue } from '@/utils/functions/queryUtils'\nimport {\n  FacetColumnRequest,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { applyChangesToValuesColumn } from '../query-filter/FacetFilterControls'\nimport { FacetNavPanelProps } from './FacetNavPanel'\n\n// Custom hook for generating properties for FacetNavPanel components with filter controls based on the given facets\nexport default function useFacetPlots(\n  facetsToPlot: string[],\n): Pick<\n  FacetNavPanelProps,\n  'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n>[] {\n  const { getCurrentQueryRequest, executeQueryRequest } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n\n  const lastQueryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n  const facets = useMemo(\n    () => getFacets(queryMetadata, facetsToPlot),\n    [queryMetadata, facetsToPlot],\n  )\n\n  const applyChangesFromQueryFilter = useCallback(\n    (facets: FacetColumnRequest[]) => {\n      executeQueryRequest(\n        lastQueryRequest => {\n          lastQueryRequest.query.selectedFacets = facets\n          lastQueryRequest.query.offset = 0\n          return lastQueryRequest\n        },\n        { debounce: true },\n      )\n    },\n    [executeQueryRequest],\n  )\n\n  const facetNavPanelProps = useMemo(\n    () =>\n      facets.map(facet => {\n        return {\n          facetToPlot: facet as FacetColumnResultValues,\n\n          applyChangesToFacetFilter: applyChangesFromQueryFilter,\n\n          applyChangesToGraphSlice: (\n            facet: FacetColumnResultValues,\n            value: FacetColumnResultValueCount | undefined,\n            isSelected: boolean,\n          ) =>\n            applyChangesToValuesColumn(\n              lastQueryRequest,\n              facet,\n              applyChangesFromQueryFilter,\n              value?.value,\n              isSelected,\n            ),\n        }\n      }),\n    [facets, applyChangesFromQueryFilter, lastQueryRequest],\n  )\n  return facetNavPanelProps\n}\n\nexport function getFacets(\n  data: QueryResultBundle | undefined,\n  facetsToPlot?: string[],\n): FacetColumnResult[] {\n  const result =\n    data?.facets?.filter(item => {\n      const isFacetToPlot =\n        item.facetType === 'enumeration' &&\n        (!facetsToPlot?.length || facetsToPlot.indexOf(item.columnName) > -1)\n      // PORTALS-1993: only plot if the facet has count data\n      return (\n        isFacetToPlot &&\n        item.facetValues.length > 0 &&\n        !isSingleNotSetValue(item)\n      )\n    }) ?? []\n  if (facetsToPlot?.length) {\n    result.sort(\n      (a, b) =>\n        facetsToPlot.indexOf(a.columnName) - facetsToPlot.indexOf(b.columnName),\n    )\n  }\n  return result\n}\n"],"mappings":";;;;;;;AAeA,SAAwB,EACtB,GAIE;CACF,IAAM,EAAE,2BAAwB,2BAAwB,EAAgB,GAElE,EAAE,MAAM,MAAkB,EAA4B,GAEtD,IAAmB,QACjB,EAAuB,GAC7B,CAAC,CAAsB,CACzB,GACM,IAAS,QACP,EAAU,GAAe,CAAY,GAC3C,CAAC,GAAe,CAAY,CAC9B,GAEM,IAA8B,GACjC,MAAiC;EAChC,GACE,OACE,EAAiB,MAAM,iBAAiB,GACxC,EAAiB,MAAM,SAAS,GACzB,IAET,EAAE,UAAU,GAAK,CACnB;CACF,GACA,CAAC,CAAmB,CACtB;CA0BA,OAxB2B,QAEvB,EAAO,KAAI,OACF;EACL,aAAa;EAEb,2BAA2B;EAE3B,2BACE,GACA,GACA,MAEA,EACE,GACA,GACA,GACA,GAAO,OACP,CACF;CACJ,EACD,GACH;EAAC;EAAQ;EAA6B;CAAgB,CAEjD;AACT;AAEA,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,IACJ,GAAM,QAAQ,QAAO,MAEjB,EAAK,cAAc,kBAClB,CAAC,GAAc,UAAU,EAAa,QAAQ,EAAK,UAAU,IAAI,OAIlE,EAAK,YAAY,SAAS,KAC1B,CAAC,EAAoB,CAAI,CAE5B,KAAK,CAAC;CAOT,OANI,GAAc,UAChB,EAAO,MACJ,GAAG,MACF,EAAa,QAAQ,EAAE,UAAU,IAAI,EAAa,QAAQ,EAAE,UAAU,CAC1E,GAEK;AACT"}
+{"version":3,"file":"useFacetPlots.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"sourcesContent":["import {\n  EnumerationFacet,\n  getEnumerationFacets,\n} from '@/utils/functions/enumerationFacet'\nimport { isSingleNotSetValue } from '@/utils/functions/queryUtils'\nimport {\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { applyChangesToValuesColumn } from '../query-filter/FacetFilterControls'\nimport { FacetNavPanelProps } from './FacetNavPanel'\n\n// Custom hook for generating properties for FacetNavPanel components with filter controls based on the given facets\nexport default function useFacetPlots(\n  facetsToPlot: string[],\n): Pick<\n  FacetNavPanelProps,\n  'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n>[] {\n  const { getCurrentQueryRequest, executeQueryRequest } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n\n  const lastQueryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n  const facets = useMemo(\n    () => getFacets(queryMetadata, facetsToPlot),\n    [queryMetadata, facetsToPlot],\n  )\n\n  const applyChangesFromQueryFilter = useCallback(\n    (facets: FacetColumnRequest[]) => {\n      executeQueryRequest(\n        lastQueryRequest => {\n          lastQueryRequest.query.selectedFacets = facets\n          lastQueryRequest.query.offset = 0\n          return lastQueryRequest\n        },\n        { debounce: true },\n      )\n    },\n    [executeQueryRequest],\n  )\n\n  const facetNavPanelProps = useMemo(\n    () =>\n      facets.map(facet => {\n        return {\n          facetToPlot: facet,\n\n          applyChangesToFacetFilter: applyChangesFromQueryFilter,\n\n          applyChangesToGraphSlice: (\n            facet: EnumerationFacet,\n            value: FacetColumnResultValueCount | undefined,\n            isSelected: boolean,\n          ) =>\n            applyChangesToValuesColumn(\n              lastQueryRequest,\n              facet,\n              applyChangesFromQueryFilter,\n              value?.value,\n              isSelected,\n            ),\n        }\n      }),\n    [facets, applyChangesFromQueryFilter, lastQueryRequest],\n  )\n  return facetNavPanelProps\n}\n\nexport function getFacets(\n  data: QueryResultBundle | undefined,\n  facetsToPlot?: string[],\n): EnumerationFacet[] {\n  const result = getEnumerationFacets(\n    data?.facets?.filter(facet => !isSingleNotSetValue(facet)),\n  ).filter(\n    facet =>\n      (!facetsToPlot?.length || facetsToPlot.includes(facet.columnName)) &&\n      // PORTALS-1993: only plot if the facet has count data\n      facet.facetValues.length > 0,\n  )\n  if (facetsToPlot?.length) {\n    result.sort(\n      (a, b) =>\n        facetsToPlot.indexOf(a.columnName) - facetsToPlot.indexOf(b.columnName),\n    )\n  }\n  return result\n}\n"],"mappings":";;;;;;;;AAiBA,SAAwB,EACtB,GAIE;CACF,IAAM,EAAE,2BAAwB,2BAAwB,EAAgB,GAElE,EAAE,MAAM,MAAkB,EAA4B,GAEtD,IAAmB,QACjB,EAAuB,GAC7B,CAAC,CAAsB,CACzB,GACM,IAAS,QACP,EAAU,GAAe,CAAY,GAC3C,CAAC,GAAe,CAAY,CAC9B,GAEM,IAA8B,GACjC,MAAiC;EAChC,GACE,OACE,EAAiB,MAAM,iBAAiB,GACxC,EAAiB,MAAM,SAAS,GACzB,IAET,EAAE,UAAU,GAAK,CACnB;CACF,GACA,CAAC,CAAmB,CACtB;CA0BA,OAxB2B,QAEvB,EAAO,KAAI,OACF;EACL,aAAa;EAEb,2BAA2B;EAE3B,2BACE,GACA,GACA,MAEA,EACE,GACA,GACA,GACA,GAAO,OACP,CACF;CACJ,EACD,GACH;EAAC;EAAQ;EAA6B;CAAgB,CAEjD;AACT;AAEA,SAAgB,EACd,GACA,GACoB;CACpB,IAAM,IAAS,EACb,GAAM,QAAQ,QAAO,MAAS,CAAC,EAAoB,CAAK,CAAC,CAC3D,EAAE,QACA,OACG,CAAC,GAAc,UAAU,EAAa,SAAS,EAAM,UAAU,MAEhE,EAAM,YAAY,SAAS,CAC/B;CAOA,OANI,GAAc,UAChB,EAAO,MACJ,GAAG,MACF,EAAa,QAAQ,EAAE,UAAU,IAAI,EAAa,QAAQ,EAAE,UAAU,CAC1E,GAEK;AACT"}

package/dist/components/widgets/query-filter/CombinedRangeFacetFilter.js

@@ -1,10 +1,10 @@
 import { VALUE_NOT_SET as e } from "../../../utils/SynapseConstants.js";
+import { useQueryVisualizationContext as t } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../../utils/index.js";
-import { useGetQueryResultBundleWithAsyncStatus as t } from "../../../synapse-queries/entity/useGetQueryResultBundle.js";
+import { useGetQueryResultBundleWithAsyncStatus as n } from "../../../synapse-queries/entity/useGetQueryResultBundle.js";
 import "../../../synapse-queries/index.js";
-import { useQueryContext as n } from "../../QueryContext/QueryContext.js";
+import { useQueryContext as r } from "../../QueryContext/QueryContext.js";
 import "../../QueryContext/index.js";
-import { useQueryVisualizationContext as r } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../QueryVisualizationWrapper/index.js";
 import { RangeFacetFilterUI as i } from "./RangeFacetFilterUI.js";
 import { useMemo as a } from "react";
@@ -13,7 +13,7 @@ import { Skeleton as s } from "@mui/material";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/components/widgets/query-filter/CombinedRangeFacetFilter.tsx
 function l({ facetResults: l, label: u, columnType: d }) {
-	let { getCurrentQueryRequest: f, setRangeFacetValue: p, removeSelectedFacet: m } = n(), { getColumnDisplayName: h } = r(), { columnName: g, selectedMax: _ } = l[0], { columnName: v, selectedMin: y } = l[1], { data: b, isLoading: x } = t(a(() => {
+	let { getCurrentQueryRequest: f, setRangeFacetValue: p, removeSelectedFacet: m } = r(), { getColumnDisplayName: h } = t(), { columnName: g, selectedMax: _ } = l[0], { columnName: v, selectedMin: y } = l[1], { data: b, isLoading: x } = n(a(() => {
 		let e = f();
 		e.partMask = 32;
 		let { selectedFacets: t } = e.query;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.d.ts

@@ -1,7 +1,7 @@
-import { FacetColumnResultValues } from '@sage-bionetworks/synapse-types';
+import { EnumerationFacet } from '@/utils/functions/enumerationFacet';
 export type EnumFacetFilterProps = {
     labelId?: string;
-    facet: FacetColumnResultValues;
+    facet: EnumerationFacet;
     containerAs?: 'Collapsible' | 'Dropdown';
     dropdownType?: 'Icon' | 'SelectBox';
     hideCollapsible?: boolean;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAML,uBAAuB,EAIxB,MAAM,iCAAiC,CAAA;AAWxC,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,uBAAuB,CAAA;IAC9B,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AA4MD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAc1D"}
+{"version":3,"file":"EnumFacetFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AAqBrE,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,gBAAgB,CAAA;IACvB,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAiND,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAc1D"}