synapse-react-client 4.0.3 → 4.0.5-b

package/dist/components/widgets/Range.js

@@ -1,4 +1,4 @@
-import { jsxs as d, jsx as a, Fragment as x } from "react/jsx-runtime";
+import { jsxs as d, Fragment as x, jsx as a } from "react/jsx-runtime";
 import { useState as f } from "react";
 import r from "dayjs";
 import { DatePicker as c } from "@mui/x-date-pickers";

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

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

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAMA,KAAyB,IAKzBC,KAAiC;AAAA,EACrC,YAAY;AAAA,EACZ,aAAa,CAAA;AAAA,EACb,QAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,EAAA;AAAA,EACvC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;AAQA,eAAsBC,GACpBC,GACAC,GACAC,GACAC,GACAC,GACA;AACA,QAAMC,IAAeC;AAAA;AAAA;AAAA,IAGnB;AAAA;AAAA,IACA;AAAA;AAAA,IACAN,EAAY,YAAY;AAAA,EAAA,GAGpBO,IAAY,OAChBC,GACAP,GACAG,MACG;AACH,UAAMK,wBAAU,IAAA;AAChB,IAAAA,EAAI;AAAA,MACFC;AAAAA,MACAC;AAAAA,IAAiB;AAGnB,UAAMC,IAAiBJ,EACpB,IAAI,CAAAK,MAASA,EAAM,KAAK,EACxB,OAAO,CAAAC,MAAOA,MAAQJ,CAA8B;AACvD,QACET,MAAec,EAAe,YAC9Bd,MAAec,EAAe,eAC9B;AAEA,YAAMC,IAAW,MAAMC,EAAc;AAAA,QACnCL;AAAA,QACAR;AAAAA,MAAA;AAEF,iBAAWc,KAAUF,EAAS;AAC5B,QAAAP,EAAI,IAAIS,EAAO,IAAIA,EAAO,IAAI;AAAA,IAElC,WACEjB,MAAec,EAAe,UAC9Bd,MAAec,EAAe,aAC9B;AACA,YAAMC,IAAW,MAAMC,EAAc;AAAA,QACnCL;AAAA,QACAR;AAAAA,MAAA;AAEF,iBAAWc,KAAUF,EAAS;AAC5B,QAAAP,EAAI,IAAIS,EAAO,SAASA,EAAO,QAAQ;AAAA,IAE3C;AAEA,WAAOV,EAAY,IAAI,CAAAW,OAAe;AAAA,MACpC,OAAOA;AAAA,MACP,OAAOC,EAASD,GAAY,IAAOV,CAAG;AAAA,MACtC,gBAAgBW,EAASD,GAAY,IAAMV,CAAG;AAAA,MAC9C,OAAOU,EAAW;AAAA,IAAA,EAClB;AAAA,EACJ,GAEMC,IAAW,CACfD,GACAE,GACAC,MACW;AACX,QAAIC,IAAQD,EAAS,IAAIH,EAAW,KAAK,KAAKA,EAAW;AACzD,WAAIE,MACFE,IAAQC,EAASD,GAAO1B,EAAc,IAEjC0B;AAAA,EACT,GAEME,IAAS,MAAMlB;AAAA,IACnBP,EAAY;AAAA,IACZC;AAAA,IACAG;AAAA,EAAA,GAEIsB,IAAOD,EAAO,IAAI,CAAAE,MAAMA,EAAG,cAAc,GAMzCC,IAJoB5B,EAAY,YAAY;AAAA,IAChD,OAASa,EAAM;AAAA,EAAA,IAIbb,EAAY,YAAY;AAAA,IAAI,CAACmB,GAAYjB,MACvCiB,EAAW,aACPd,EAAaH,CAAK,IAClBG,EAAaH,CAAK,EACf,QAAQ,QAAQ,OAAO,EACvB,QAAQ,KAAK,SAAS;AAAA,EAAA,IAE/BG,GAEEwB,IAAyB7B,EAAY,YAAY;AAAA,IACrD,OAAS8B,EAAM;AAAA,EAAA;AAEjB,MAAIC;AAEJ,EAAI5B,MAAa,QACf4B,IAAI/B,EAAY,YAAY;AAAA,IAC1B,CAAA8B,MACEL,EAAO,KAAK,CAAAF,MAASA,EAAM,UAAUO,CAAK,GAAG,SAASA,EAAM;AAAA,EAAA,IAEvD3B,MAAa,6BACtB4B,IAAIF;AAGN,MAAIG;AACJ,EAAI7B,MAAa,QACf6B,IAAIhC,EAAY,YAAY,IAAI,CAAA8B,MAASA,EAAM,KAAK,IAC3C3B,MAAa,6BACtB6B,IAAI,MAAMD,GAAG,MAAM,EAAE,KAAK,cAAc;AAG1C,QAAME,IAA+B;AAAA,IACnC,QAAQ9B,MAAa,QAAQ0B,IAAS;AAAA,IACtC,QAAQJ,EAAO,IAAI,CAAAE,MAAMA,EAAG,KAAK;AAAA,IACjC,MAAAD;AAAA,IACA,GAAAK;AAAA,IACA,GAAAC;AAAA,IACA,aAAa7B,MAAa,2BAA2B,MAAM;AAAA;AAAA,IAE3D,wBAAwBH,EAAY,YAAY;AAAA,MAC9C,OAAcmB,EAAW;AAAA,IAAA;AAAA,IAE3B,MAAMnB,EAAY;AAAA,IAClB,cACEG,MAAa,4BAA4BA,MAAa,QAClD,SACA;AAAA,IACN,eACEA,MAAa,QACT,+DACA;AAAA,IACN,UAAU;AAAA,IACV,MAAMA,MAAa,QAAQ,QAAQ;AAAA,IACnC,MACEA,MAAa,QACTH,EAAY,YAAY;AAAA,MAAI,CAAAmB,MAC1BA,EAAW,aAAa,MAAM;AAAA,IAAA,IAEhC;AAAA,IACN,QAAQ;AAAA,MACN,QAAQhB,MAAa,QAAQyB,IAA6B;AAAA,MAC1D,OAAOzB,MAAa,QAAQ,SAAYyB;AAAA,IAAA;AAAA,EAC1C;AAUF,SARe;AAAA,IACb,MAAM,CAACK,CAAe;AAAA,IACtB,QAAAR;AAAA,IACA,QACEtB,MAAa,QACP8B,EAAwB,QAAQ,SAChCA,EAAwB,QAAQ;AAAA,EAAA;AAG5C;AAEA,MAAMC,KAAmB,CACvBC,GACAC,GACAC,MACG;AACH,MAAIF,EAAM,UAAUA,EAAM,OAAO,CAAC,GAAG;AACnC,UAAMG,IAAqBH,EAAM,OAAO,CAAC,GACnCI,IACJD,EAAc,KAAK,uBAAuBA,EAAc,WAAW,GAC/DE,IAAoBJ,EAAe,YAAY;AAAA,MACnD,CAAAN,MAASA,EAAM,UAAUS;AAAA,IAAA;AAE3B,IAAAF;AAAA,MACED;AAAA,MACAI;AAAA,MACA,CAACA,EAAmB;AAAA,IAAA;AAAA,EAExB;AACF;AAEO,SAASC,GACdC,GACAvC,GACAwC,GACmC;AACnC,MAAID,KAAe,MAAW;AAC5B,QAAIE,IAAW;AACf,YAAQzC,GAAA;AAAA,MACN,KAAK;AACH,QAAAyC,IAAW;AACX;AAAA,MACF,KAAK;AACH,QAAAA,IAAW;AACX;AAAA,MACF,KAAK;AACH,QAAAA,IAAW;AACX;AAAA,IAAA;AAEJ,UAAMC,IAAQH,IAAcA,IAAcE,IAAW;AACrD,QAAIE,IAAS3C,MAAa,QAAQ0C,IAAQA,IAAQ;AAElD,WAAIC,IAASH,MACXG,IAASH,IAEJ;AAAA,MACL,OAAO,GAAGE,CAAK;AAAA,MACf,QAAQ,GAAGC,CAAM;AAAA,IAAA;AAAA,EAErB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ,GAAGH,CAAS;AAAA,EAAA;AAExB;AAEA,SAASI,GAAcC,GAA2B;AAChD,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,OAAAjD;AAAA,IACA,aAAAF;AAAA,IACA,UAAAG;AAAA,IACA,eAAAiD;AAAA,EAAA,IACEJ,GACE,EAAE,aAAA5C,EAAA,IAAgBiD,EAAA,GAClB,EAAE,MAAMC,GAAe,WAAWC,EAAA,IACtCC,EAAA,GAEI,CAACC,GAA2BC,CAAgB,IAChDC,GAAA,GACI,EAAE,sBAAAC,EAAA,IAAyBC,EAAA,GAE3B,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAYL;AAAA,IAChB5D,EAAY;AAAA,IACZA,EAAY;AAAA,EAAA,GAGRkE,IAAcC;AAAA,IAClB,MACEC;AAAA,MACEpE;AAAA,MACAsD,GAAe,gBAAgB,CAAA;AAAA,IAAC;AAAA,IAEpC,CAACA,GAAe,cAActD,CAAW;AAAA,EAAA,GAErCC,IAAaiE,GAAa,YAE1B,EAAE,MAAMG,EAAA,IAAaC,EAAS;AAAA,IAClC,UAAU;AAAA,MACR;AAAA,MACAtE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,IAGF,SAAS,MACPL;AAAA,MACEC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,IAGJ,SAAS,CAAC,CAACJ;AAAA,EAAA,CACZ,GAGKuE,IACJ,gBAAAC,EAACC,GAAA,EAAkB,WAAS,IAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAW,UAAA,aAAA,CAAU;AAAA,IACtB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAOzE;AAAA,QACP,UAAU,CAAA0E,MAAK;AACb,UAAAzB,EAAcyB,EAAE,OAAO,KAAiB;AAAA,QAC1C;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAS,OAAO,OAAO,UAAA,aAAS;AAAA,UACjC,gBAAAJ,EAACI,GAAA,EAAS,OAAO,OAAO,UAAA,YAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GACF;AAGF,SACG,CAACxB,KAAiBC,KACnB,CAACvD,KACD,CAACkE,IAGC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,gDACZ,UAAAK,GACH,IAIA,gBAAAP,EAAAQ,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,MAAMnB;AAAA,QACN,UAAU,MAAMC,EAAa,EAAK;AAAA,QAClC,OAAOE,KAAa;AAAA,QACpB,SAAS,gBAAAS,EAAC3B,IAAA,EAAe,GAAGC,GAAO,aAAa,IAAM;AAAA,QACtD,iBAAiB;AAAA,QACjB,oBAAoB,EAAE,UAAU,gBAAA;AAAA,QAChC,WAAW,MAAMe,EAAa,EAAK;AAAA,QACnC,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,gBAAgBtB,IAAc,eAAe,EAAE;AAAA,QAEzD,UAAA;AAAA,UAAA,CAACA,KACA,gBAAAwB;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAM5B;AAAA,cACN,WAAWC;AAAA,cACX,OAAOU;AAAA,cACP,aAAAjE;AAAA,cACA,QAAAiD;AAAA,cACA,cAAAc;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHb,KACC,gBAAAsB;AAAA,YAACW;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,KAAK;AAAA,cAAA;AAAA,cAGP,UAAA;AAAA,gBAAA,gBAAAX,EAACC,GAAA,EACC,UAAA;AAAA,kBAAA,gBAAAD;AAAA,oBAACG;AAAA,oBAAA;AAAA,sBACC,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,IAAA;AAAA,sBAElD,UAAA;AAAA,wBAAA,gBAAAD,EAAC,UAAK,UAAA,qBAAA,CAAkB;AAAA,wBACxB,gBAAAA,EAACU,KAAQ,OAAM,gFACb,4BAACC,GAAA,EAAa,WAAU,4CAA2C,EAAA,CACrE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEF,gBAAAX;AAAA,oBAACY;AAAA,oBAAA;AAAA,sBACC,OAAOtF;AAAA,sBACP,aAAY;AAAA,sBACZ,cAAa;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACf,GACF;AAAA,gBACCuE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGL,gBAAAC;AAAA,YAACe;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,qBAAqB;AAAA,gBACrB,YAAY;AAAA,cAAA;AAAA,cAEd,MAAK;AAAA,cACL,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,gBAAAb,EAAC,OAAA,EAAI,KAAKhB,GACR,UAAA,gBAAAgB;AAAA,kBAACc;AAAA,kBAAA;AAAA,oBAEC,QAAA1F;AAAA,oBACA,MAAMuE,GAAU,QAAQ,CAAA;AAAA,oBACxB,OAAO5B;AAAA,sBACLgB,GAA2B;AAAA,sBAC3BtD;AAAA,sBACA+C,IAAc,MAAM;AAAA,oBAAA;AAAA,oBAEtB,QAAQ,EAAE,gBAAgB,GAAA;AAAA,oBAC1B,SAAS,CAAAuC,MACPvD,GAAiBuD,GAAKzF,GAAamD,CAAwB;AAAA,kBAAA;AAAA,kBAVxD,GAAGnD,EAAY,UAAU,IAAIA,EAAY,QAAQ,IAAIG,CAAQ,IAAIsD,GAA2B,KAAK;AAAA,gBAAA,GAa1G;AAAA,gBACA,gBAAAiB;AAAA,kBAACgB;AAAA,kBAAA;AAAA,oBACC,QAAQrB,GAAU;AAAA,oBAClB,QAAQA,GAAU;AAAA,oBAClB,YAAYnB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAGN;"}
+{"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