synapse-react-client 4.0.2 → 4.0.4

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

@@ -4,7 +4,7 @@ import * as R from "../../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
 import "@sage-bionetworks/synapse-client/util/SynapseClientError";
-import { ColumnTypeEnum as v } from "@sage-bionetworks/synapse-types";
+import { ColumnTypeEnum as y } from "@sage-bionetworks/synapse-types";
 import "../../../utils/functions/EntityTypeUtils.js";
 import { VALUE_NOT_SET as L, FRIENDLY_VALUE_NOT_SET as _ } from "../../../utils/SynapseConstants.js";
 import "lodash-es";
@@ -18,9 +18,9 @@ import "@tanstack/query-core";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "lodash-es/xorWith";
-import { Stack as k, InputLabel as P, Tooltip as $, Box as H, Select as T, MenuItem as B } from "@mui/material";
+import { Stack as k, InputLabel as P, Tooltip as $, Box as H, Select as K, MenuItem as B } from "@mui/material";
 import "@sage-bionetworks/synapse-client";
-import { getCorrespondingColumnForFacet as K } from "../../../utils/functions/queryUtils.js";
+import { getCorrespondingColumnForFacet as T } from "../../../utils/functions/queryUtils.js";
 import "../../../utils/hooks/useCookiePreferences.js";
 import "../../../utils/hooks/useSourceAppConfigs.js";
 import "universal-cookie";
@@ -71,28 +71,28 @@ async function oe(o, m, i, t, c) {
       _
     );
     const b = e.map((l) => l.value).filter((l) => l !== L);
-    if (r === v.ENTITYID || r === v.ENTITYID_LIST) {
+    if (r === y.ENTITYID || r === y.ENTITYID_LIST) {
       const l = await R.getEntityHeadersByIds(
         b,
         u
       );
-      for (const E of l.results)
-        s.set(E.id, E.name);
-    } else if (r === v.USERID || r === v.USERID_LIST) {
+      for (const I of l.results)
+        s.set(I.id, I.name);
+    } else if (r === y.USERID || r === y.USERID_LIST) {
       const l = await R.getGroupHeadersBatch(
         b,
         u
       );
-      for (const E of l.children)
-        s.set(E.ownerId, E.userName);
+      for (const I of l.children)
+        s.set(I.ownerId, I.userName);
     }
     return e.map((l) => ({
       facet: l,
-      label: I(l, !1, s),
-      truncatedLabel: I(l, !0, s),
+      label: A(l, !1, s),
+      truncatedLabel: A(l, !0, s),
       count: l.count
     }));
-  }, I = (e, r, u) => {
+  }, A = (e, r, u) => {
     let s = u.get(e.value) ?? e.value;
     return r && (s = X(s, te)), s;
   }, f = await d(
@@ -101,23 +101,23 @@ async function oe(o, m, i, t, c) {
     c
   ), g = f.map((e) => e.truncatedLabel), S = o.facetValues.some(
     (e) => e.isSelected
-  ) ? o.facetValues.map(
+  ), x = S ? o.facetValues.map(
     (e, r) => e.isSelected ? a[r] : a[r].replace("rgb(", "rgba(").replace(")", ", 0.25)")
-  ) : a, A = o.facetValues.map(
+  ) : a, v = o.facetValues.map(
     (e) => e.count
   );
   let C;
   t === "BAR" ? C = o.facetValues.map(
     (e) => f.find((r) => r.facet === e)?.label ?? e.value
-  ) : t === "STACKED_HORIZONTAL_BAR" && (C = A);
-  let x;
-  t === "BAR" ? x = o.facetValues.map((e) => e.count) : t === "STACKED_HORIZONTAL_BAR" && (x = Array(C?.length).fill("Proportional"));
+  ) : t === "STACKED_HORIZONTAL_BAR" && (C = v);
+  let E;
+  t === "BAR" ? E = o.facetValues.map((e) => e.count) : t === "STACKED_HORIZONTAL_BAR" && (E = Array(C?.length).fill("Proportional"));
   const h = {
-    values: t === "PIE" ? A : void 0,
+    values: t === "PIE" ? v : void 0,
     labels: f.map((e) => e.label),
     text: g,
     x: C,
-    y: x,
+    y: E,
     orientation: t === "STACKED_HORIZONTAL_BAR" ? "h" : "v",
     // @ts-expect-error
     facetEnumerationValues: o.facetValues.map(
@@ -131,9 +131,12 @@ async function oe(o, m, i, t, c) {
     pull: t === "PIE" ? o.facetValues.map(
       (e) => e.isSelected ? 0.1 : 0
     ) : void 0,
+    selectedpoints: S ? o.facetValues.map((e, r) => e.isSelected ? r : -1).filter((e) => e !== -1) : void 0,
+    selected: { marker: { opacity: 1 } },
+    unselected: { marker: { opacity: 0.25 } },
     marker: {
-      colors: t === "PIE" ? S : void 0,
-      color: t === "PIE" ? void 0 : S
+      colors: t === "PIE" ? x : void 0,
+      color: t === "PIE" ? void 0 : x
     }
   };
   return {
@@ -188,12 +191,12 @@ function ie(o) {
     index: c,
     facetToPlot: a,
     plotType: d,
-    onSetPlotType: I
-  } = o, { accessToken: f } = V(), { data: g, isLoading: y } = Y(), [S, A] = ee(), { getColumnDisplayName: C } = z(), [x, h] = F(!1), w = C(
+    onSetPlotType: A
+  } = o, { accessToken: f } = V(), { data: g, isLoading: S } = Y(), [x, v] = ee(), { getColumnDisplayName: C } = z(), [E, h] = F(!1), w = C(
     a.columnName,
     a.jsonPath
   ), e = M(
-    () => K(
+    () => T(
       a,
       g?.columnModels ?? []
     ),
@@ -218,11 +221,11 @@ function ie(o) {
   }), s = /* @__PURE__ */ p(N, { fullWidth: !0, children: [
     /* @__PURE__ */ n(P, { children: "Chart Type" }),
     /* @__PURE__ */ p(
-      T,
+      K,
       {
         value: d,
         onChange: (b) => {
-          I(b.target.value);
+          A(b.target.value);
         },
         children: [
           /* @__PURE__ */ n(B, { value: "BAR", children: "Bar Chart" }),
@@ -231,11 +234,11 @@ function ie(o) {
       }
     )
   ] });
-  return !g && y || !a || !e ? /* @__PURE__ */ n("div", { className: "SRC-loadingContainer SRC-centerContentColumn", children: j }) : /* @__PURE__ */ p(D, { children: [
+  return !g && S || !a || !e ? /* @__PURE__ */ n("div", { className: "SRC-loadingContainer SRC-centerContentColumn", children: j }) : /* @__PURE__ */ p(D, { children: [
     /* @__PURE__ */ n(
       Q,
       {
-        open: x,
+        open: E,
         onCancel: () => h(!1),
         title: w ?? "",
         content: /* @__PURE__ */ n(ie, { ...o, isModalView: !0 }),
@@ -255,7 +258,7 @@ function ie(o) {
             G,
             {
               data: g,
-              isLoading: y,
+              isLoading: S,
               title: w,
               facetToPlot: a,
               onHide: m,
@@ -304,20 +307,20 @@ function ie(o) {
               role: "graphics-object",
               className: "FacetNavPanel__body",
               children: [
-                /* @__PURE__ */ n("div", { ref: A, children: /* @__PURE__ */ n(
+                /* @__PURE__ */ n("div", { ref: v, children: /* @__PURE__ */ n(
                   U,
                   {
                     layout: ae,
                     data: u?.data ?? [],
                     style: ne(
-                      S?.width,
+                      x?.width,
                       d,
                       i ? 300 : 150
                     ),
                     config: { displayModeBar: !1 },
                     onClick: (b) => re(b, a, t)
                   },
-                  `${a.columnName}-${a.jsonPath}-${d}-${S?.width}`
+                  `${a.columnName}-${a.jsonPath}-${d}-${x?.width}`
                 ) }),
                 /* @__PURE__ */ n(
                   W,

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

@@ -1 +1 @@
-{"version":3,"file":"FacetNavPanel.js","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 { 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\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\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\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\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    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  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  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel>Chart Type</InputLabel>\n      <Select\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                  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                  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              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}`}\n                layout={layout}\n                data={plotData?.data ?? []}\n                style={getPlotStyle(\n                  plotContainerMeasurements?.width,\n                  plotType,\n                  isModalView ? 300 : 150,\n                )}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <FacetPlotLegendList\n              labels={plotData?.labels}\n              colors={plotData?.colors}\n              isExpanded={isModalView}\n            />\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"names":["maxLabelLength","layout","extractPlotDataArray","facetToPlot","columnType","index","plotType","accessToken","colorPalette","getContrastColorPalette","getLabels","facetValues","map","SynapseConstants.VALUE_NOT_SET","SynapseConstants.FRIENDLY_VALUE_NOT_SET","filteredValues","value","val","ColumnTypeEnum","response","SynapseClient","header","facetValue","getLabel","truncateFlag","labelMap","label","truncate","labels","text","el","selectionAwareColorPalette","counts","facet","x","y","singleChartData","applyFacetFilter","event","allFacetValues","callbackApplyFn","plotPointData","facetValueClickedValue","facetValueClicked","getPlotStyle","parentWidth","maxHeight","quotient","width","height","FacetNavPanel","props","onHide","isModalView","applyChangesToGraphSlice","onSetPlotType","useSynapseContext","queryMetadata","isLoadingQueryMetadata","useGetQueryMetadata","plotContainerMeasurements","plotContainerRef","useMeasure","getColumnDisplayName","useQueryVisualizationContext","showModal","setShowModal","useState","plotTitle","columnModel","useMemo","getCorrespondingColumnForFacet","plotData","useQuery","chartSelectionToggle","jsxs","StyledFormControl","jsx","InputLabel","Select","e","MenuItem","loadingScreen","Fragment","ConfirmationDialog","PlotPanelHeader","Stack","Tooltip","InfoOutlined","EnumFacetFilter","Box","Plot","evt","FacetPlotLegendList"],"mappings":"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"}
+{"version":3,"file":"FacetNavPanel.js","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 { 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\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\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  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  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel>Chart Type</InputLabel>\n      <Select\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                  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                  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              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}`}\n                layout={layout}\n                data={plotData?.data ?? []}\n                style={getPlotStyle(\n                  plotContainerMeasurements?.width,\n                  plotType,\n                  isModalView ? 300 : 150,\n                )}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <FacetPlotLegendList\n              labels={plotData?.labels}\n              colors={plotData?.colors}\n              isExpanded={isModalView}\n            />\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"names":["maxLabelLength","layout","extractPlotDataArray","facetToPlot","columnType","index","plotType","accessToken","colorPalette","getContrastColorPalette","getLabels","facetValues","map","SynapseConstants.VALUE_NOT_SET","SynapseConstants.FRIENDLY_VALUE_NOT_SET","filteredValues","value","val","ColumnTypeEnum","response","SynapseClient","header","facetValue","getLabel","truncateFlag","labelMap","label","truncate","labels","text","el","anyFacetsSelected","selectionAwareColorPalette","counts","facet","x","y","singleChartData","applyFacetFilter","event","allFacetValues","callbackApplyFn","plotPointData","facetValueClickedValue","facetValueClicked","getPlotStyle","parentWidth","maxHeight","quotient","width","height","FacetNavPanel","props","onHide","isModalView","applyChangesToGraphSlice","onSetPlotType","useSynapseContext","queryMetadata","isLoadingQueryMetadata","useGetQueryMetadata","plotContainerMeasurements","plotContainerRef","useMeasure","getColumnDisplayName","useQueryVisualizationContext","showModal","setShowModal","useState","plotTitle","columnModel","useMemo","getCorrespondingColumnForFacet","plotData","useQuery","chartSelectionToggle","jsxs","StyledFormControl","jsx","InputLabel","Select","e","MenuItem","loadingScreen","Fragment","ConfirmationDialog","PlotPanelHeader","Stack","Tooltip","InfoOutlined","EnumFacetFilter","Box","Plot","evt","FacetPlotLegendList"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { PlotType } from '../facet-nav/FacetNavPanel';
 export type PlotsContainerProps = {
     facetsToPlot?: string[];
     customPlots?: QueryWrapperSynapsePlotProps[];
-    initialPlotType?: PlotType;
+    initialPlotTypeByFacetColumnName?: Record<string, PlotType>;
 };
 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,eAAe,CAAC,EAAE,QAAQ,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;AAuSD,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;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;AA+SD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}

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

@@ -1,6 +1,6 @@
-import { jsx as p, Fragment as F, jsxs as C } from "react/jsx-runtime";
-import { facetObjectMatchesDefinition as M } from "../../../utils/functions/queryUtils.js";
-import { Box as O, Button as A } from "@mui/material";
+import { jsx as d, Fragment as g, jsxs as C } from "react/jsx-runtime";
+import { facetObjectMatchesDefinition as A } from "../../../utils/functions/queryUtils.js";
+import { Box as M, Button as O } from "@mui/material";
 import { Suspense as b, useState as v, useEffect as j, useMemo as k } from "react";
 import "@sage-bionetworks/synapse-types";
 import "../../../utils/PermissionLevelToAccessType.js";
@@ -30,120 +30,121 @@ import '../../../style/components/_spinner.css';/* empty css
 import "react-router";
 import "../../../utils/types/IsType.js";
 import "../../QueryContext/QueryContext.js";
-import { useSuspenseGetQueryMetadata as D } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as N } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
-import B from "../../QueryWrapperPlotNav/QueryWrapperSynapsePlot.js";
+import { useSuspenseGetQueryMetadata as B } from "../../QueryWrapper/useGetQueryMetadata.js";
+import { useQueryVisualizationContext as E } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import D from "../../QueryWrapperPlotNav/QueryWrapperSynapsePlot.js";
 import V from "./FacetNavPanel.js";
 import { PlotsContainerSkeleton as $ } from "./PlotsContainerSkeleton.js";
-import G, { getFacets as Q } from "./useFacetPlots.js";
-const f = 2, d = (o, e) => "__custom" in e && "__custom" in o ? o.title == e.title : !("__custom" in e) && !("__custom" in o) ? M(o, e) : !1;
-function R(o) {
+import R, { getFacets as G } from "./useFacetPlots.js";
+const f = 2, m = (o, e) => "__custom" in e && "__custom" in o ? o.title == e.title : !("__custom" in e) && !("__custom" in o) ? A(o, e) : !1;
+function Q(o) {
   return o === "bar" ? "BAR" : "PIE";
 }
-const W = (o) => "__custom" in o.plotId ? `custom-${o.plotId.title}` : `facet-${o.plotId.columnName}-${o.plotId.jsonPath}`, z = (o, e) => !!e.find((i) => d(i.plotId, o)), h = (o) => ({ __custom: !0, title: o.title ?? "" }), q = (o = [], e = [], i = y) => [
-  ...o.map((l, a) => ({
-    plotId: h(l),
+const W = (o) => "__custom" in o.plotId ? `custom-${o.plotId.title}` : `facet-${o.plotId.columnName}-${o.plotId.jsonPath}`, z = (o, e) => !!e.find((l) => m(l.plotId, o)), I = (o) => ({ __custom: !0, title: o.title ?? "" }), q = (o = [], e = [], l) => [
+  ...o.map((r, a) => ({
+    plotId: I(r),
     isHidden: a >= f,
-    plotType: R(l.type)
+    plotType: Q(r.type)
   })),
-  ...e.map((l, a) => ({
-    plotId: l.facetToPlot,
+  ...e.map((r, a) => ({
+    plotId: r.facetToPlot,
     isHidden: a + o.length >= f,
-    plotType: i
+    plotType: l?.[r.facetToPlot.columnName] ?? N
   }))
-], K = (o, e, i) => e.some(
-  (l) => d(
-    h(l),
+], K = (o, e, l) => e.some(
+  (r) => m(
+    I(r),
     o.plotId
   )
-) || i.some(
-  (l) => d(l.facetToPlot, o.plotId)
-), y = "PIE", Y = [], J = [];
+) || l.some(
+  (r) => m(r.facetToPlot, o.plotId)
+), N = "PIE", Y = [], J = [];
 function X(o) {
   const {
     facetsToPlot: e = Y,
-    customPlots: i = J,
-    initialPlotType: l = y
-  } = o, { data: a } = D(), { showPlots: S } = N(), [m, I] = v([]), u = G(e), x = (t) => m.find(
-    (r) => d(t, r.plotId)
-  )?.plotType ?? y;
+    customPlots: l = J,
+    initialPlotTypeByFacetColumnName: r
+  } = o, { data: a } = B(), { showPlots: w } = E(), [p, T] = v([]), u = R(e), x = (t) => p.find(
+    (s) => m(t, s.plotId)
+  )?.plotType ?? N;
   j(() => {
     const t = q(
-      i,
+      l,
       u,
-      l
+      r
     );
-    I((n) => {
-      const r = t.filter((T) => !z(T.plotId, n));
+    T((n) => {
+      const s = t.filter((y) => !z(y.plotId, n));
       return [...n.filter(
-        (T) => K(T, i, u)
-      ), ...r];
+        (y) => K(y, l, u)
+      ), ...s];
     });
-  }, [i, u]);
+  }, [l, u, r]);
   const H = (t) => {
-    I((n) => n.map((r, c) => t ? { ...r, isHidden: !1 } : { ...r, isHidden: c >= f }));
-  }, w = (t) => m.find(
-    (c) => d(t, c.plotId) && c.isHidden === !0
+    T((n) => n.map((s, c) => t ? { ...s, isHidden: !1 } : { ...s, isHidden: c >= f }));
+  }, S = (t) => p.find(
+    (c) => m(t, c.plotId) && c.isHidden === !0
   ) !== void 0, P = k(() => (
     // if at least one item is hidden
-    m.find((t) => t.isHidden === !0) ? "MORE" : m.length <= f ? "NONE" : "LESS"
-  ), [m]), _ = (t) => {
-    E(t, "isHidden", !0);
-  }, L = (t, n) => {
-    E(t, "plotType", n);
-  }, E = (t, n, r) => {
-    I(
+    p.find((t) => t.isHidden === !0) ? "MORE" : p.length <= f ? "NONE" : "LESS"
+  ), [p]), _ = (t) => {
+    h(t, "isHidden", !0);
+  }, F = (t, n) => {
+    h(t, "plotType", n);
+  }, h = (t, n, s) => {
+    T(
       (c) => c.map(
-        (s) => d(t, s.plotId) ? { ...s, [n]: r } : s
+        (i) => m(t, i.plotId) ? { ...i, [n]: s } : i
       )
     );
-  }, g = (
+  }, L = (
     // TODO: customPlots should use the color index
     // additionally, it is unclear why this object is created
     // We can probably just pass the index from `plotUiStateArray.map)
-    Q(a, e).map((t, n) => ({
+    G(a, e).map((t, n) => ({
       facet: { columnName: t.columnName, jsonPath: t.jsonPath },
       colorIndex: n
     }))
   );
-  return /* @__PURE__ */ p(F, { children: m.length > 0 && /* @__PURE__ */ C(
+  return /* @__PURE__ */ d(g, { children: p.length > 0 && /* @__PURE__ */ C(
     "div",
     {
-      className: `PlotsContainer ${S ? "" : "hidden"} ${P === "LESS" ? "less" : ""}`,
+      className: `PlotsContainer ${w ? "" : "hidden"} ${P === "LESS" ? "less" : ""}`,
       children: [
-        /* @__PURE__ */ p("div", { className: "PlotsContainer__row", role: "list", children: m.map((t) => {
-          const n = "__custom" in t.plotId, r = i.find(
-            (s) => d(
-              h(s),
+        /* @__PURE__ */ d("div", { className: "PlotsContainer__row", role: "list", children: p.map((t) => {
+          const n = "__custom" in t.plotId, s = l.find(
+            (i) => m(
+              I(i),
               t.plotId
             )
           ), c = u.find(
-            (s) => d(s.facetToPlot, t.plotId)
+            (i) => m(i.facetToPlot, t.plotId)
           );
           return /* @__PURE__ */ C(
             "div",
             {
+              className: t.plotType === "BAR" ? "PlotsContainer__row__item--full-width" : void 0,
               style: {
                 minWidth: "435px",
-                display: w(t.plotId) ? "none" : "block"
+                display: S(t.plotId) ? "none" : "block"
               },
               children: [
-                n && r && /* @__PURE__ */ p(
-                  B,
+                n && s && /* @__PURE__ */ d(
+                  D,
                   {
-                    ...r,
+                    ...s,
                     onHide: () => _(t.plotId)
                   }
                 ),
-                !n && c && /* @__PURE__ */ p(
+                !n && c && /* @__PURE__ */ d(
                   V,
                   {
-                    index: g.find(
-                      (s) => d(s.facet, t.plotId)
+                    index: L.find(
+                      (i) => m(i.facet, t.plotId)
                     )?.colorIndex,
                     onHide: () => _(t.plotId),
                     plotType: x(t.plotId),
-                    onSetPlotType: (s) => L(t.plotId, s),
+                    onSetPlotType: (i) => F(t.plotId, i),
                     isModalView: !1,
                     ...c
                   }
@@ -153,8 +154,8 @@ function X(o) {
             W(t)
           );
         }) }),
-        P !== "NONE" && /* @__PURE__ */ p(
-          O,
+        P !== "NONE" && /* @__PURE__ */ d(
+          M,
           {
             sx: {
               display: "flex",
@@ -163,8 +164,8 @@ function X(o) {
               p: 2,
               mt: 2
             },
-            children: /* @__PURE__ */ p(
-              A,
+            children: /* @__PURE__ */ d(
+              O,
               {
                 variant: "contained",
                 color: "secondary",
@@ -180,8 +181,8 @@ function X(o) {
   ) });
 }
 function kt(o) {
-  const { showPlots: e } = N();
-  return /* @__PURE__ */ p(b, { fallback: e ? /* @__PURE__ */ p($, {}) : null, children: /* @__PURE__ */ p(X, { ...o }) });
+  const { showPlots: e } = E();
+  return /* @__PURE__ */ d(b, { fallback: e ? /* @__PURE__ */ d($, {}) : null, children: /* @__PURE__ */ d(X, { ...o }) });
 }
 export {
   kt as default

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

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.js","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  initialPlotType?: 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  initialPlotType: PlotType = DEFAULT_PLOT_TYPE,\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: initialPlotType,\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    initialPlotType = DEFAULT_PLOT_TYPE,\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      initialPlotType,\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])\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  // 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                  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"],"names":["DEFAULT_VISIBLE_PLOTS","plotMatchesDefinition","definition","plotId","facetObjectMatchesDefinition","convertPlotlyPlotTypeToFacetNavPlotType","plotlyPlotType","generatePlotKey","plotUiState","isPlotInState","plotUiStateArray","plot","getCustomPlotIdentifier","customPlot","getCombinedNewPlots","customPlots","facetNavPanelPropsArray","initialPlotType","DEFAULT_PLOT_TYPE","plotProps","index","facetPlotProps","isPlotStillPresent","prevPlot","facetNavPanelProps","facetPlot","DEFAULT_FACETS_TO_PLOT","DEFAULT_CUSTOM_PLOTS","PlotsContainer","props","facetsToPlot","queryMetadata","useSuspenseGetQueryMetadata","showPlotVisualization","useQueryVisualizationContext","setPlotUiStateArray","useState","useFacetPlots","getPlotType","item","useEffect","combinedNewPlots","prevPlots","newPlots","onShowMoreClick","shouldShowMore","isPlotHiddenInGrid","showMoreButtonState","useMemo","hidePlotInGrid","setUiPropertyForPlot","setPlotType","plotType","propName","value","colorTracker","getFacets","el","jsx","Fragment","jsxs","isCustomPlot","customPlotProps","QueryWrapperSynapsePlot","FacetNavPanel","Box","Button","PlotsContainerWithSuspense","showPlots","Suspense","PlotsContainerSkeleton"],"mappings":"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"}
+{"version":3,"file":"PlotsContainer.js","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  // 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                    plotUiState.plotType === 'BAR'\n                      ? 'PlotsContainer__row__item--full-width'\n                      : 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"],"names":["DEFAULT_VISIBLE_PLOTS","plotMatchesDefinition","definition","plotId","facetObjectMatchesDefinition","convertPlotlyPlotTypeToFacetNavPlotType","plotlyPlotType","generatePlotKey","plotUiState","isPlotInState","plotUiStateArray","plot","getCustomPlotIdentifier","customPlot","getCombinedNewPlots","customPlots","facetNavPanelPropsArray","initialPlotTypeByFacetColumnName","plotProps","index","facetPlotProps","DEFAULT_PLOT_TYPE","isPlotStillPresent","prevPlot","facetNavPanelProps","facetPlot","DEFAULT_FACETS_TO_PLOT","DEFAULT_CUSTOM_PLOTS","PlotsContainer","props","facetsToPlot","queryMetadata","useSuspenseGetQueryMetadata","showPlotVisualization","useQueryVisualizationContext","setPlotUiStateArray","useState","useFacetPlots","getPlotType","item","useEffect","combinedNewPlots","prevPlots","newPlots","onShowMoreClick","shouldShowMore","isPlotHiddenInGrid","showMoreButtonState","useMemo","hidePlotInGrid","setUiPropertyForPlot","setPlotType","plotType","propName","value","colorTracker","getFacets","el","jsx","Fragment","jsxs","isCustomPlot","customPlotProps","QueryWrapperSynapsePlot","FacetNavPanel","Box","Button","PlotsContainerWithSuspense","showPlots","Suspense","PlotsContainerSkeleton"],"mappings":"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"}