synapse-react-client 4.0.19 → 4.0.20

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export type SynapseSankeyPlotProps = {
+    /** SQL query whose first column provides node labels and second column provides link values */
+    sql: string;
+    /** Label for the root node that links to every row returned by the query */
+    rootLabel: string;
+    /** Optional plot title */
+    title?: string;
+};
+export declare const SynapseSankeyPlot: (props: SynapseSankeyPlotProps) => React.ReactNode;
+export default SynapseSankeyPlot;
+//# sourceMappingURL=SynapseSankeyPlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseSankeyPlot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,sBAAsB,GAAG;IACnC,+FAA+F;IAC/F,GAAG,EAAE,MAAM,CAAA;IACX,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAA;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,KAC5B,KAAK,CAAC,SA4ER,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/Plot/SynapseSankeyPlot.js

@@ -0,0 +1,54 @@
+import "../../utils/SynapseConstants.js";
+import { parseEntityIdFromSqlStatement as e } from "../../utils/functions/SqlFunctions.js";
+import "../../utils/index.js";
+import { useGetFullTableQueryResults as t } from "../../synapse-queries/entity/useGetQueryResultBundle.js";
+import "../../synapse-queries/index.js";
+import { PlotFullBundle as n } from "./Plot.js";
+import "react";
+import { Skeleton as r } from "@mui/material";
+import { Fragment as i, jsx as a } from "react/jsx-runtime";
+//#region src/components/Plot/SynapseSankeyPlot.tsx
+var o = (o) => {
+	let { sql: s, rootLabel: c, title: l } = o, { data: u, isLoading: d } = t({
+		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
+		partMask: 1,
+		entityId: e(s),
+		query: { sql: s }
+	});
+	if (d) return /* @__PURE__ */ a(r, {
+		width: "100%",
+		height: "500px"
+	});
+	if (!u) return /* @__PURE__ */ a(i, {});
+	let f = u.queryResult?.queryResults.rows ?? [];
+	if (f.length === 0) return /* @__PURE__ */ a(i, {});
+	let p = [], m = [], h = [];
+	f.forEach((e, t) => {
+		h.push(Number(e.values[1] ?? 0)), p.push(0), m.push(t + 1);
+	});
+	let g = [`${c}<br>n=${h.reduce((e, t) => e + t, 0)}`];
+	return f.forEach((e) => {
+		let t = e.values[0] ?? "", n = Number(e.values[1] ?? 0);
+		g.push(`${t}<br>n=${n}`);
+	}), /* @__PURE__ */ a(n, {
+		style: {
+			width: "100%",
+			height: "450px"
+		},
+		layout: { title: l },
+		data: [{
+			type: "sankey",
+			node: { label: g },
+			link: {
+				source: p,
+				target: m,
+				value: h
+			}
+		}],
+		config: { displayModeBar: !1 }
+	});
+};
+//#endregion
+export { o as SynapseSankeyPlot, o as default };
+
+//# sourceMappingURL=SynapseSankeyPlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseSankeyPlot.js","names":[],"sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport type { Data, Layout, SankeyData } from 'plotly.js'\nimport { PlotFullBundle } from './Plot'\n\nexport type SynapseSankeyPlotProps = {\n  /** SQL query whose first column provides node labels and second column provides link values */\n  sql: string\n  /** Label for the root node that links to every row returned by the query */\n  rootLabel: string\n  /** Optional plot title */\n  title?: string\n}\n\nexport const SynapseSankeyPlot = (\n  props: SynapseSankeyPlotProps,\n): React.ReactNode => {\n  const { sql, rootLabel, title } = props\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(sql),\n    query: {\n      sql,\n    },\n  }\n\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'500px'} />\n  }\n  if (!queryData) {\n    return <></>\n  }\n\n  const rows = queryData.queryResult?.queryResults.rows ?? []\n  if (rows.length === 0) {\n    return <></>\n  }\n\n  // Build Sankey nodes and links.\n  // Node 0: rootLabel (the shared source node)\n  // Nodes 1..N: the label from column 0 of each query row (target nodes)\n  const sources: number[] = []\n  const targets: number[] = []\n  const values: number[] = []\n\n  rows.forEach((row, index) => {\n    values.push(Number(row.values[1] ?? 0))\n    sources.push(0)\n    targets.push(index + 1)\n  })\n\n  const total = values.reduce((sum, v) => sum + v, 0)\n\n  // Plotly Sankey processes <br> via convertToTspans(), rendering the count on a second line.\n  const nodeLabels: string[] = [`${rootLabel}<br>n=${total}`]\n  rows.forEach(row => {\n    const label = row.values[0] ?? ''\n    const value = Number(row.values[1] ?? 0)\n    nodeLabels.push(`${label}<br>n=${value}`)\n  })\n\n  const sankeyData: Partial<SankeyData>[] = [\n    {\n      type: 'sankey',\n      node: {\n        label: nodeLabels,\n      },\n      link: {\n        source: sources,\n        target: targets,\n        value: values,\n      },\n    },\n  ]\n\n  const layout: Partial<Layout> = {\n    title,\n  }\n\n  return (\n    <PlotFullBundle\n      style={{ width: '100%', height: '450px' }}\n      layout={layout}\n      data={sankeyData as Data[]}\n      config={{ displayModeBar: false }}\n    />\n  )\n}\n\nexport default SynapseSankeyPlot\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,KACX,MACoB;CACpB,IAAM,EAAE,QAAK,cAAW,aAAU,GAW5B,EAAE,MAAM,GAAW,iBACvB,EAA4B;EAT5B,cAAc;EACd,UAAU;EACV,UAAU,EAA8B,CAAG;EAC3C,OAAO,EACL,OACF;CAI4B,CAAY;CAE1C,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAU,CAAA;CAEpD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,IAAM,IAAO,EAAU,aAAa,aAAa,QAAQ,CAAC;CAC1D,IAAI,EAAK,WAAW,GAClB,OAAO,kBAAA,GAAA,CAAI,CAAA;CAMb,IAAM,IAAoB,CAAC,GACrB,IAAoB,CAAC,GACrB,IAAmB,CAAC;CAE1B,EAAK,SAAS,GAAK,MAAU;EAG3B,AAFA,EAAO,KAAK,OAAO,EAAI,OAAO,MAAM,CAAC,CAAC,GACtC,EAAQ,KAAK,CAAC,GACd,EAAQ,KAAK,IAAQ,CAAC;CACxB,CAAC;CAKD,IAAM,IAAuB,CAAC,GAAG,EAAU,QAH7B,EAAO,QAAQ,GAAK,MAAM,IAAM,GAAG,CAGE,GAAO;CAyB1D,OAxBA,EAAK,SAAQ,MAAO;EAClB,IAAM,IAAQ,EAAI,OAAO,MAAM,IACzB,IAAQ,OAAO,EAAI,OAAO,MAAM,CAAC;EACvC,EAAW,KAAK,GAAG,EAAM,QAAQ,GAAO;CAC1C,CAAC,GAqBC,kBAAC,GAAD;EACE,OAAO;GAAE,OAAO;GAAQ,QAAQ;EAAQ;EAChC,QAAA,EANV,SAMU;EACR,MAAM,CArBR;GACE,MAAM;GACN,MAAM,EACJ,OAAO,EACT;GACA,MAAM;IACJ,QAAQ;IACR,QAAQ;IACR,OAAO;GACT;EACF,CAWQ;EACN,QAAQ,EAAE,gBAAgB,GAAM;CACjC,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemesPlot.js","names":[],"sources":["../../../src/components/Plot/ThemesPlot.tsx"],"sourcesContent":["import { getFullQueryTableResults } from '@/synapse-client'\nimport { SynapseConstants, useSynapseContext } from '@/utils'\nimport { resultToJson } from '@/utils/functions'\nimport { unCamelCase } from '@/utils/functions/unCamelCase'\nimport { Tooltip } from '@mui/material'\nimport {\n  QueryBundleRequest,\n  QueryResultBundle,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly from 'plotly.js-basic-dist'\nimport { useEffect, useState } from 'react'\nimport { RequiredKeysOf } from 'type-fest'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport BarPlot from './BarPlot'\nimport DotPlot from './DotPlot'\nimport {\n  BarPlotColors,\n  ClickCallbackParams,\n  GraphItem,\n  PlotProps,\n} from './types'\nimport first from 'lodash-es/first'\nimport orderBy from 'lodash-es/orderBy'\nimport cloneDeep from 'lodash-es/cloneDeep'\n\nexport type ThemesPlotProps = {\n  onPointClick: ({ facetValue, type, event }: ClickCallbackParams) => void\n  onIndividualThemeBarPlotPointClick?: ({\n    facetValue,\n    type,\n    event,\n  }: ClickCallbackParams) => void\n  dotPlot: PlotProps\n  topBarPlot: PlotProps\n  sideBarPlot: PlotProps\n  dotPlotYAxisLabel?: string\n}\n\ntype TotalsGroupByY = { y: string; count: number }\ntype TotalsGroupByGroup = { group: string; count: number }\n\nconst optionsConfig: Partial<Plotly.Config> = {\n  displayModeBar: false,\n  responsive: true,\n  scrollZoom: false,\n  editable: false,\n  autosizable: true,\n}\n\nconst dotPlotLayoutConfig: Partial<Plotly.Layout> = {\n  showlegend: true,\n  dragmode: false,\n  legend: {\n    font: {\n      size: 11,\n    },\n\n    y: 1.1,\n    xanchor: 'right',\n    x: 1,\n\n    orientation: 'h',\n  },\n  xaxis: {\n    visible: true,\n    fixedrange: true,\n    zeroline: false,\n    showgrid: false,\n    showline: true,\n    linecolor: '#ddd', //bottom line\n    autotick: true,\n    ticks: 'outside',\n    tickcolor: '#ddd',\n    type: 'log',\n  },\n\n  yaxis: {\n    fixedrange: true,\n    zeroline: false,\n    gridcolor: '#ddd', //horizontal lines\n    automargin: true,\n  },\n\n  margin: {\n    pad: 20,\n  },\n  hovermode: 'closest',\n}\n\nconst barLayoutConfig: Partial<Plotly.Layout> = {\n  barmode: 'stack',\n  showlegend: false,\n  dragmode: false,\n  hovermode: 'closest',\n  yaxis: { visible: false, fixedrange: true },\n  margin: {\n    l: 0,\n    r: 0,\n    b: 0,\n    t: 0,\n    pad: 0,\n  },\n}\n\nfunction fetchData(\n  token: string,\n  { xField, yField, groupField, entityId, whereClause, infoField }: PlotProps,\n): Promise<RowSet> {\n  const sql = `SELECT ${xField} as \"x\", ${yField} as \"y\", ${\n    infoField ? infoField + ' as \"info\", ' : ''\n  } ${groupField} as \"group\"\n                 FROM ${entityId} ${whereClause ? ' WHERE ' + whereClause : ''}`\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: entityId,\n    query: {\n      sql: sql,\n    },\n  }\n\n  return getFullQueryTableResults(queryRequest, token).then(\n    (data: QueryResultBundle) => {\n      return data.queryResult!.queryResults\n    },\n  )\n}\n\nfunction getTotalsByProp<T>(\n  data: GraphItem[],\n  prop: RequiredKeysOf<GraphItem>,\n): T[] {\n  const resultObject = data.reduce((res: Record<string, number>, obj) => {\n    res[obj[prop]] =\n      (obj[prop] in res ? Number(res[obj[prop]]) : 0) + Number(obj.x)\n    return res\n  }, {})\n  const result: T[] = []\n  for (const property in resultObject) {\n    result.push({\n      [prop]: property,\n      count: resultObject[property],\n    } as unknown as T)\n  }\n  return result\n}\n\nconst getClickTargetData = (\n  e: Plotly.PlotMouseEvent,\n  swap: boolean,\n): ClickCallbackParams => {\n  const pointData = e.points[0].data\n\n  let facetValue = pointData.y[0] as string\n  let type = pointData.name\n\n  if (swap) {\n    ;[facetValue, type] = [type, facetValue]\n  }\n  return { facetValue, type, event: e.event }\n}\n\nconst renderTopBarLegend = (\n  colors: BarPlotColors | undefined,\n  xLabels: string[],\n) => (\n  <div className=\"ThemesPlot__barPlotLegend\">\n    {xLabels.map((item, i) => (\n      <div style={{ float: 'left' }} key={`topBar_${i}`}>\n        <div\n          className=\"ThemesPlot__barPlotLegend__label\"\n          key=\"topBar_label\"\n          style={{\n            backgroundColor: `${colors ? colors[item] : 'transparent'}`,\n          }}\n        ></div>\n        <div className=\"ThemesPlot__barPlotLegend__graph\" key=\"topBar_graph\">\n          {item}\n        </div>{' '}\n      </div>\n    ))}\n  </div>\n)\n\nconst fadeColors = (colors: { [key: string]: string }, opacity: string) => {\n  for (const key in colors) {\n    colors[key] = colors[key]\n      .replace(',1)', `, ${opacity})`)\n      .replace(',1.0)', `, ${opacity})`)\n  }\n  return colors\n}\n\nconst getTooltip = (data: GraphItem[], filter: string) => {\n  return first(data.filter(item => item.y === filter).map(item => item.info))\n}\n\nexport function ThemesPlot({\n  dotPlot,\n  topBarPlot,\n  sideBarPlot,\n  onPointClick,\n  onIndividualThemeBarPlotPointClick,\n  dotPlotYAxisLabel = 'Research Themes',\n}: ThemesPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [dotPlotQueryData, setDotPlotQueryData] = useState<GraphItem[]>([])\n  const [topBarPlotData, setTopBarQueryData] = useState<GraphItem[]>([])\n  const [sideBarPlotData, setSideBarQueryData] = useState<GraphItem[]>([])\n\n  useEffect(() => {\n    const dotPlotData = fetchData(accessToken!, dotPlot)\n    const topBarPlotData = fetchData(accessToken!, topBarPlot)\n    const sideBarPlotData = fetchData(accessToken!, sideBarPlot)\n    Promise.all([dotPlotData, topBarPlotData, sideBarPlotData])\n      .then(result => {\n        setDotPlotQueryData(\n          resultToJson(\n            result[0].headers,\n            result[0].rows,\n          ) as unknown as GraphItem[],\n        )\n        setTopBarQueryData(\n          resultToJson(\n            result[1].headers,\n            result[1].rows,\n          ) as unknown as GraphItem[],\n        )\n        setSideBarQueryData(\n          resultToJson(\n            result[2].headers,\n            result[2].rows,\n          ) as unknown as GraphItem[],\n        )\n        setIsLoaded(true)\n      })\n      .catch(err => {\n        throw err\n      })\n    return () => {}\n  }, [accessToken, dotPlot, topBarPlot, sideBarPlot])\n  let yLabelsForDotPlot: string[] = []\n  let xLabelsForTopBarPlot: string[] = []\n  let xMaxForDotPlot = 0\n  let topBarPlotDataSorted: TotalsGroupByY[] = []\n  let totalsByDotPlotY: TotalsGroupByY[] = []\n  if (isLoaded) {\n    totalsByDotPlotY = getTotalsByProp(sideBarPlotData, 'y')\n    yLabelsForDotPlot = totalsByDotPlotY\n      .sort((a, b) => b.count - a.count)\n      .map(item => item.y)\n    xMaxForDotPlot = Math.max(...dotPlotQueryData.map(item => Number(item.x)))\n    topBarPlotDataSorted = orderBy(getTotalsByProp(topBarPlotData, 'y'), ['y'])\n    xLabelsForTopBarPlot = orderBy(\n      getTotalsByProp<TotalsGroupByGroup>(topBarPlotData, 'group'),\n      ['group'],\n    ).map(item => item.group)\n  }\n\n  return (\n    <>\n      {!isLoaded && loadingScreen}\n\n      {isLoaded && (\n        <div className=\"ThemesPlot\">\n          <div className=\"ThemesPlot__dotPlotLegend\">\n            <DotPlot\n              id=\"head\"\n              plotData={dotPlotQueryData}\n              isLegend={true}\n              markerSymbols={dotPlot.markerSymbols}\n              style={{ width: '100%', height: '100%' }}\n              layoutConfig={dotPlotLayoutConfig}\n              optionsConfig={{\n                ...optionsConfig,\n                responsive: true,\n                staticPlot: true,\n              }}\n              plotStyle={{\n                ...dotPlot.plotStyle!,\n                backgroundColor: 'transparent',\n              }}\n            ></DotPlot>\n          </div>\n          {topBarPlot.colors &&\n            renderTopBarLegend(topBarPlot.colors, xLabelsForTopBarPlot)}\n          {topBarPlotDataSorted.map((item, i) => (\n            <div className=\"ThemesPlot__topBarPlot\" key={`topBarDiv_${i}`}>\n              <div className=\"ThemesPlot__topBarPlot__label\">\n                {item.count}&nbsp;{unCamelCase(item.y)}\n              </div>\n              <div className=\"ThemesPlot__topBarPlot__plot\">\n                <BarPlot\n                  style={{ width: '100%', height: '100%' }}\n                  layoutConfig={cloneDeep(barLayoutConfig)}\n                  optionsConfig={{ ...optionsConfig }}\n                  plotData={topBarPlotData}\n                  isTop={true}\n                  label={item.y}\n                  xMax={item.count}\n                  onClick={(e: any) =>\n                    onPointClick(getClickTargetData(e, true))\n                  }\n                  colors={\n                    // we are not actually fading colors for now. But keeping implemenation in case it changes\n                    i % 2 === 0\n                      ? topBarPlot.colors\n                      : fadeColors({ ...topBarPlot.colors }, '1')\n                  }\n                />\n              </div>\n            </div>\n          ))}\n          <div style={{ display: 'flex', position: 'relative' }}>\n            <div className=\"ThemesPlot__dotPlotYLabel\">{dotPlotYAxisLabel}</div>\n            <div className=\"ThemesPlot__dotPlot\">\n              {yLabelsForDotPlot.map((label, i) => (\n                <div\n                  key={`plotDiv_${+i}`}\n                  className=\"ThemesPlot__dotPlot__row\"\n                  style={{\n                    backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                  }}\n                >\n                  <div className=\"ThemesPlot__dotPlot__barColumn\">\n                    <Tooltip\n                      title={`${getTooltip(dotPlotQueryData, label)} `}\n                      placement={'right'}\n                    >\n                      <div>\n                        <span className=\"ThemesPlot__dotPlot__themeLabel\">\n                          {label}\n                        </span>\n                        <br />\n                        <span className=\"ThemesPlot__dotPlot__countLabel\">\n                          {totalsByDotPlotY[i].count} {sideBarPlot.countLabel}\n                        </span>\n                        <br />\n                        <BarPlot\n                          style={{ width: '100%' }}\n                          layoutConfig={barLayoutConfig}\n                          optionsConfig={optionsConfig}\n                          plotData={sideBarPlotData}\n                          isTop={false}\n                          // PORTALS-3061: No longer use a global x max for the side bar (where the bar size of 1 grant is consistent),\n                          //    Instead, each bar chart is independent (the size of 1 grant differs across bar charts).\n                          xMax={totalsByDotPlotY[i].count}\n                          label={label}\n                          colors={fadeColors({ ...topBarPlot.colors }, '1')}\n                          onClick={(e: any) => {\n                            if (onIndividualThemeBarPlotPointClick) {\n                              onIndividualThemeBarPlotPointClick(\n                                getClickTargetData(e, false),\n                              )\n                            }\n                          }}\n                        />\n                      </div>\n                    </Tooltip>\n                  </div>\n                  <div className=\"ThemesPlot__dotPlot__dotPlotColumn\">\n                    <div\n                      style={{\n                        width: '100%',\n                        backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                      }}\n                    >\n                      <DotPlot\n                        id={`${i}`}\n                        onClick={(e: any) => {\n                          const { type, event } = getClickTargetData(e, false)\n                          onPointClick({ facetValue: label, type, event })\n                        }}\n                        plotData={dotPlotQueryData}\n                        plotStyle={dotPlot.plotStyle}\n                        markerSymbols={dotPlot.markerSymbols}\n                        xMax={xMaxForDotPlot}\n                        label={label}\n                        layoutConfig={dotPlotLayoutConfig}\n                        optionsConfig={{\n                          ...optionsConfig,\n                          responsive: false,\n                        }}\n                      ></DotPlot>\n                    </div>\n                  </div>\n                </div>\n              ))}\n              <div className=\"ThemesPlot__dotPlot__row\">\n                <div\n                  className=\"ThemesPlot__dotPlot__barColumn\"\n                  style={{ textAlign: 'right' }}\n                >\n                  VOLUME:\n                </div>\n                <div\n                  className=\"ThemesPlot__dotPlot__dotPlotColumn\"\n                  style={{ marginTop: '0px' }}\n                >\n                  <DotPlot\n                    id={'footer'}\n                    plotData={dotPlotQueryData}\n                    isXAxis={true}\n                    xMax={xMaxForDotPlot}\n                    layoutConfig={dotPlotLayoutConfig}\n                    optionsConfig={{ ...optionsConfig, responsive: false }}\n                  ></DotPlot>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div></div>\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default ThemesPlot\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,IAAM,IAAwC;CAC5C,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,UAAU;CACV,aAAa;CACd,EAEK,IAA8C;CAClD,YAAY;CACZ,UAAU;CACV,QAAQ;EACN,MAAM,EACJ,MAAM,IACP;EAED,GAAG;EACH,SAAS;EACT,GAAG;EAEH,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,YAAY;EACZ,UAAU;EACV,UAAU;EACV,UAAU;EACV,WAAW;EACX,UAAU;EACV,OAAO;EACP,WAAW;EACX,MAAM;EACP;CAED,OAAO;EACL,YAAY;EACZ,UAAU;EACV,WAAW;EACX,YAAY;EACb;CAED,QAAQ,EACN,KAAK,IACN;CACD,WAAW;CACZ,EAEK,IAA0C;CAC9C,SAAS;CACT,YAAY;CACZ,UAAU;CACV,WAAW;CACX,OAAO;EAAE,SAAS;EAAO,YAAY;EAAM;CAC3C,QAAQ;EACN,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK;EACN;CACF;AAED,SAAS,EACP,GACA,EAAE,WAAQ,WAAQ,eAAY,aAAU,gBAAa,gBACpC;AAejB,QAAO,EAAyB;EAR9B,cAAc;EACd,UAAU;EACA;EACV,OAAO,EACA,eAVa,EAAO,WAAW,EAAO,WAC7C,IAAY,IAAY,mBAAiB,GAC1C,GAAG,EAAW;wBACO,EAAS,GAAG,IAAc,YAAY,IAAc,MAQvE;EAG6B,EAAc,EAAM,CAAC,MAClD,MACQ,EAAK,YAAa,aAE5B;;AAGH,SAAS,EACP,GACA,GACK;CACL,IAAM,IAAe,EAAK,QAAQ,GAA6B,OAC7D,EAAI,EAAI,OACL,EAAI,MAAS,IAAM,OAAO,EAAI,EAAI,IAAO,GAAG,KAAK,OAAO,EAAI,EAAE,EAC1D,IACN,EAAE,CAAC,EACA,IAAc,EAAE;AACtB,MAAK,IAAM,KAAY,EACrB,GAAO,KAAK;GACT,IAAO;EACR,OAAO,EAAa;EACrB,CAAiB;AAEpB,QAAO;;AAGT,IAAM,KACJ,GACA,MACwB;CACxB,IAAM,IAAY,EAAE,OAAO,GAAG,MAE1B,IAAa,EAAU,EAAE,IACzB,IAAO,EAAU;AAKrB,QAHI,MACD,CAAC,GAAY,KAAQ,CAAC,GAAM,EAAW,GAEnC;EAAE;EAAY;EAAM,OAAO,EAAE;EAAO;GAGvC,KACJ,GACA,MAEA,kBAAC,OAAD;CAAK,WAAU;WACZ,EAAQ,KAAK,GAAM,MAClB,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,QAAQ;YAA7B;GACE,kBAAC,OAAD;IACE,WAAU;IAEV,OAAO,EACL,iBAAiB,GAAG,IAAS,EAAO,KAAQ,iBAC7C;IACI,EAJD,eAIC;GACP,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,EAFgD,eAEhD;GAAC;GACH;IAX8B,UAAU,IAWxC,CACN;CACE,CAAA,EAGF,KAAc,GAAmC,MAAoB;AACzE,MAAK,IAAM,KAAO,EAChB,GAAO,KAAO,EAAO,GAClB,QAAQ,OAAO,KAAK,EAAQ,GAAG,CAC/B,QAAQ,SAAS,KAAK,EAAQ,GAAG;AAEtC,QAAO;GAGH,KAAc,GAAmB,MAC9B,EAAM,EAAK,QAAO,MAAQ,EAAK,MAAM,EAAO,CAAC,KAAI,MAAQ,EAAK,KAAK,CAAC;AAG7E,SAAgB,EAAW,EACzB,YACA,eACA,gBACA,iBACA,uCACA,uBAAoB,qBACF;CAClB,IAAM,EAAE,mBAAgB,GAAmB,EACrC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAkB,KAAuB,EAAsB,EAAE,CAAC,EACnE,CAAC,GAAgB,KAAsB,EAAsB,EAAE,CAAC,EAChE,CAAC,GAAiB,KAAuB,EAAsB,EAAE,CAAC;AAExE,SAAgB;EACd,IAAM,IAAc,EAAU,GAAc,EAAQ,EAC9C,IAAiB,EAAU,GAAc,EAAW,EACpD,IAAkB,EAAU,GAAc,EAAY;AA0B5D,SAzBA,QAAQ,IAAI;GAAC;GAAa;GAAgB;GAAgB,CAAC,CACxD,MAAK,MAAU;AAmBd,GAlBA,EACE,EACE,EAAO,GAAG,SACV,EAAO,GAAG,KACX,CACF,EACD,EACE,EACE,EAAO,GAAG,SACV,EAAO,GAAG,KACX,CACF,EACD,EACE,EACE,EAAO,GAAG,SACV,EAAO,GAAG,KACX,CACF,EACD,EAAY,GAAK;IACjB,CACD,OAAM,MAAO;AACZ,SAAM;IACN,QACS;IACZ;EAAC;EAAa;EAAS;EAAY;EAAY,CAAC;CACnD,IAAI,IAA8B,EAAE,EAChC,IAAiC,EAAE,EACnC,IAAiB,GACjB,IAAyC,EAAE,EAC3C,IAAqC,EAAE;AAc3C,QAbI,MACF,IAAmB,EAAgB,GAAiB,IAAI,EACxD,IAAoB,EACjB,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CACjC,KAAI,MAAQ,EAAK,EAAE,EACtB,IAAiB,KAAK,IAAI,GAAG,EAAiB,KAAI,MAAQ,OAAO,EAAK,EAAE,CAAC,CAAC,EAC1E,IAAuB,EAAQ,EAAgB,GAAgB,IAAI,EAAE,CAAC,IAAI,CAAC,EAC3E,IAAuB,EACrB,EAAoC,GAAgB,QAAQ,EAC5D,CAAC,QAAQ,CACV,CAAC,KAAI,MAAQ,EAAK,MAAM,GAIzB,kBAAA,GAAA,EAAA,UAAA,CACG,CAAC,KAAY,GAEb,KACC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,IAAG;KACH,UAAU;KACV,UAAU;KACV,eAAe,EAAQ;KACvB,OAAO;MAAE,OAAO;MAAQ,QAAQ;MAAQ;KACxC,cAAc;KACd,eAAe;MACb,GAAG;MACH,YAAY;MACZ,YAAY;MACb;KACD,WAAW;MACT,GAAG,EAAQ;MACX,iBAAiB;MAClB;KACQ,CAAA;IACP,CAAA;GACL,EAAW,UACV,EAAmB,EAAW,QAAQ,EAAqB;GAC5D,EAAqB,KAAK,GAAM,MAC/B,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAK;MAAM;MAAO,EAAY,EAAK,EAAE;MAClC;QACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;OAAE,OAAO;OAAQ,QAAQ;OAAQ;MACxC,cAAc,EAAU,EAAgB;MACxC,eAAe,EAAE,GAAG,GAAe;MACnC,UAAU;MACV,OAAO;MACP,OAAO,EAAK;MACZ,MAAM,EAAK;MACX,UAAU,MACR,EAAa,EAAmB,GAAG,GAAK,CAAC;MAE3C,QAEE,IAAI,KAAM,IACN,EAAW,SACX,EAAW,EAAE,GAAG,EAAW,QAAQ,EAAE,IAAI;MAE/C,CAAA;KACE,CAAA,CACF;MAxBuC,aAAa,IAwBpD,CACN;GACF,kBAAC,OAAD;IAAK,OAAO;KAAE,SAAS;KAAQ,UAAU;KAAY;cAArD,CACE,kBAAC,OAAD;KAAK,WAAU;eAA6B;KAAwB,CAAA,EACpE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAkB,KAAK,GAAO,MAC7B,kBAAC,OAAD;MAEE,WAAU;MACV,OAAO,EACL,iBAAiB,EAAQ,WAAW,iBACrC;gBALH,CAOE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QACE,OAAO,GAAG,EAAW,GAAkB,EAAM,CAAC;QAC9C,WAAW;kBAEX,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,QAAD;UAAM,WAAU;oBACb;UACI,CAAA;SACP,kBAAC,MAAD,EAAM,CAAA;SACN,kBAAC,QAAD;UAAM,WAAU;oBAAhB;WACG,EAAiB,GAAG;WAAM;WAAE,EAAY;WACpC;;SACP,kBAAC,MAAD,EAAM,CAAA;SACN,kBAAC,GAAD;UACE,OAAO,EAAE,OAAO,QAAQ;UACxB,cAAc;UACC;UACf,UAAU;UACV,OAAO;UAGP,MAAM,EAAiB,GAAG;UACnB;UACP,QAAQ,EAAW,EAAE,GAAG,EAAW,QAAQ,EAAE,IAAI;UACjD,UAAU,MAAW;AACnB,WAAI,KACF,EACE,EAAmB,GAAG,GAAM,CAC7B;;UAGL,CAAA;SACE,EAAA,CAAA;QACE,CAAA;OACN,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QACE,OAAO;SACL,OAAO;SACP,iBAAiB,EAAQ,WAAW;SACrC;kBAED,kBAAC,GAAD;SACE,IAAI,GAAG;SACP,UAAU,MAAW;UACnB,IAAM,EAAE,SAAM,aAAU,EAAmB,GAAG,GAAM;AACpD,YAAa;WAAE,YAAY;WAAO;WAAM;WAAO,CAAC;;SAElD,UAAU;SACV,WAAW,EAAQ;SACnB,eAAe,EAAQ;SACvB,MAAM;SACC;SACP,cAAc;SACd,eAAe;UACb,GAAG;UACH,YAAY;UACb;SACQ,CAAA;QACP,CAAA;OACF,CAAA,CACF;QApEC,WAAW,CAAC,IAoEb,CACN,EACF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,WAAW,SAAS;iBAC9B;OAEK,CAAA,EACN,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,WAAW,OAAO;iBAE3B,kBAAC,GAAD;QACE,IAAI;QACJ,UAAU;QACV,SAAS;QACT,MAAM;QACN,cAAc;QACd,eAAe;SAAE,GAAG;SAAe,YAAY;SAAO;QAC7C,CAAA;OACP,CAAA,CACF;QACF;OACF;;GACN,kBAAC,OAAD,EAAW,CAAA;GACP;IAEP,EAAA,CAAA"}
+{"version":3,"file":"ThemesPlot.js","names":[],"sources":["../../../src/components/Plot/ThemesPlot.tsx"],"sourcesContent":["import { getFullQueryTableResults } from '@/synapse-client'\nimport { SynapseConstants, useSynapseContext } from '@/utils'\nimport { resultToJson } from '@/utils/functions'\nimport { unCamelCase } from '@/utils/functions/unCamelCase'\nimport { Tooltip } from '@mui/material'\nimport {\n  QueryBundleRequest,\n  QueryResultBundle,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly from 'plotly.js-basic-dist'\nimport { useEffect, useState } from 'react'\nimport { RequiredKeysOf } from 'type-fest'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport BarPlot from './BarPlot'\nimport DotPlot from './DotPlot'\nimport {\n  BarPlotColors,\n  ClickCallbackParams,\n  GraphItem,\n  PlotProps,\n} from './types'\nimport first from 'lodash-es/first'\nimport orderBy from 'lodash-es/orderBy'\nimport cloneDeep from 'lodash-es/cloneDeep'\n\nexport type ThemesPlotProps = {\n  onPointClick: ({ facetValue, type, event }: ClickCallbackParams) => void\n  onIndividualThemeBarPlotPointClick?: ({\n    facetValue,\n    type,\n    event,\n  }: ClickCallbackParams) => void\n  dotPlot: PlotProps\n  topBarPlot: PlotProps\n  sideBarPlot: PlotProps\n  dotPlotYAxisLabel?: string\n}\n\ntype TotalsGroupByY = { y: string; count: number }\ntype TotalsGroupByGroup = { group: string; count: number }\n\nconst optionsConfig: Partial<Plotly.Config> = {\n  displayModeBar: false,\n  responsive: true,\n  scrollZoom: false,\n  editable: false,\n  autosizable: true,\n}\n\nconst dotPlotLayoutConfig: Partial<Plotly.Layout> = {\n  showlegend: true,\n  dragmode: false,\n  legend: {\n    font: {\n      size: 11,\n    },\n\n    y: 1.1,\n    xanchor: 'right',\n    x: 1,\n\n    orientation: 'h',\n  },\n  xaxis: {\n    visible: true,\n    fixedrange: true,\n    zeroline: false,\n    showgrid: false,\n    showline: true,\n    linecolor: '#ddd', //bottom line\n    autotick: true,\n    ticks: 'outside',\n    tickcolor: '#ddd',\n    type: 'log',\n  },\n\n  yaxis: {\n    fixedrange: true,\n    zeroline: false,\n    gridcolor: '#ddd', //horizontal lines\n    automargin: true,\n  },\n\n  margin: {\n    pad: 20,\n  },\n  hovermode: 'closest',\n}\n\nconst barLayoutConfig: Partial<Plotly.Layout> = {\n  barmode: 'stack',\n  showlegend: false,\n  dragmode: false,\n  hovermode: 'closest',\n  yaxis: { visible: false, fixedrange: true },\n  margin: {\n    l: 0,\n    r: 0,\n    b: 0,\n    t: 0,\n    pad: 0,\n  },\n}\n\nfunction fetchData(\n  token: string,\n  { xField, yField, groupField, entityId, whereClause, infoField }: PlotProps,\n): Promise<RowSet> {\n  const sql = `SELECT ${xField} as \"x\", ${yField} as \"y\", ${\n    infoField ? infoField + ' as \"info\", ' : ''\n  } ${groupField} as \"group\"\n                 FROM ${entityId} ${whereClause ? ' WHERE ' + whereClause : ''}`\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: entityId,\n    query: {\n      sql: sql,\n    },\n  }\n\n  return getFullQueryTableResults(queryRequest, token).then(\n    (data: QueryResultBundle) => {\n      return data.queryResult!.queryResults\n    },\n  )\n}\n\nfunction getTotalsByProp<T>(\n  data: GraphItem[],\n  prop: RequiredKeysOf<GraphItem>,\n): T[] {\n  const resultObject = data.reduce((res: Record<string, number>, obj) => {\n    res[obj[prop]] =\n      (obj[prop] in res ? Number(res[obj[prop]]) : 0) + Number(obj.x)\n    return res\n  }, {})\n  const result: T[] = []\n  for (const property in resultObject) {\n    result.push({\n      [prop]: property,\n      count: resultObject[property],\n    } as unknown as T)\n  }\n  return result\n}\n\nconst getClickTargetData = (\n  e: Plotly.PlotMouseEvent,\n  swap: boolean,\n): ClickCallbackParams => {\n  const pointData = e.points[0].data\n\n  let facetValue = pointData.y[0] as string\n  let type = pointData.name\n\n  if (swap) {\n    ;[facetValue, type] = [type, facetValue]\n  }\n  return { facetValue, type, event: e.event }\n}\n\nconst renderTopBarLegend = (\n  colors: BarPlotColors | undefined,\n  xLabels: string[],\n) => (\n  <div className=\"ThemesPlot__barPlotLegend\">\n    {xLabels.map((item, i) => (\n      <div style={{ float: 'left' }} key={`topBar_${i}`}>\n        <div\n          className=\"ThemesPlot__barPlotLegend__label\"\n          key=\"topBar_label\"\n          style={{\n            backgroundColor: `${colors ? colors[item] : 'transparent'}`,\n          }}\n        ></div>\n        <div className=\"ThemesPlot__barPlotLegend__graph\" key=\"topBar_graph\">\n          {item}\n        </div>{' '}\n      </div>\n    ))}\n  </div>\n)\n\nconst fadeColors = (colors: { [key: string]: string }, opacity: string) => {\n  for (const key in colors) {\n    colors[key] = colors[key]\n      .replace(',1)', `, ${opacity})`)\n      .replace(',1.0)', `, ${opacity})`)\n  }\n  return colors\n}\n\nconst getTooltip = (data: GraphItem[], filter: string) => {\n  return first(data.filter(item => item.y === filter).map(item => item.info))\n}\n\nexport function ThemesPlot({\n  dotPlot,\n  topBarPlot,\n  sideBarPlot,\n  onPointClick,\n  onIndividualThemeBarPlotPointClick,\n  dotPlotYAxisLabel = 'Research Themes',\n}: ThemesPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [dotPlotQueryData, setDotPlotQueryData] = useState<GraphItem[]>([])\n  const [topBarPlotData, setTopBarQueryData] = useState<GraphItem[]>([])\n  const [sideBarPlotData, setSideBarQueryData] = useState<GraphItem[]>([])\n\n  useEffect(() => {\n    const dotPlotData = fetchData(accessToken!, dotPlot)\n    const topBarPlotData = fetchData(accessToken!, topBarPlot)\n    const sideBarPlotData = fetchData(accessToken!, sideBarPlot)\n    Promise.all([dotPlotData, topBarPlotData, sideBarPlotData])\n      .then(result => {\n        setDotPlotQueryData(\n          resultToJson(\n            result[0].headers,\n            result[0].rows,\n          ) as unknown as GraphItem[],\n        )\n        setTopBarQueryData(\n          resultToJson(\n            result[1].headers,\n            result[1].rows,\n          ) as unknown as GraphItem[],\n        )\n        setSideBarQueryData(\n          resultToJson(\n            result[2].headers,\n            result[2].rows,\n          ) as unknown as GraphItem[],\n        )\n        setIsLoaded(true)\n      })\n      .catch(err => {\n        throw err\n      })\n    return () => {}\n  }, [accessToken, dotPlot, topBarPlot, sideBarPlot])\n  let yLabelsForDotPlot: string[] = []\n  let xLabelsForTopBarPlot: string[] = []\n  let xMaxForDotPlot = 0\n  let topBarPlotDataSorted: TotalsGroupByY[] = []\n  let totalsByDotPlotY: TotalsGroupByY[] = []\n  if (isLoaded) {\n    totalsByDotPlotY = getTotalsByProp(sideBarPlotData, 'y')\n    yLabelsForDotPlot = totalsByDotPlotY\n      .sort((a, b) => b.count - a.count)\n      .map(item => item.y)\n    xMaxForDotPlot = Math.max(...dotPlotQueryData.map(item => Number(item.x)))\n    topBarPlotDataSorted = orderBy(getTotalsByProp(topBarPlotData, 'y'), ['y'])\n    xLabelsForTopBarPlot = orderBy(\n      getTotalsByProp<TotalsGroupByGroup>(topBarPlotData, 'group'),\n      ['group'],\n    ).map(item => item.group)\n  }\n\n  return (\n    <>\n      {!isLoaded && loadingScreen}\n\n      {isLoaded && (\n        <div className=\"ThemesPlot\">\n          <div className=\"ThemesPlot__dotPlotLegend\">\n            <DotPlot\n              id=\"head\"\n              plotData={dotPlotQueryData}\n              isLegend={true}\n              markerSymbols={dotPlot.markerSymbols}\n              style={{ width: '100%', height: '100%' }}\n              layoutConfig={dotPlotLayoutConfig}\n              optionsConfig={{\n                ...optionsConfig,\n                responsive: true,\n                staticPlot: true,\n              }}\n              plotStyle={{\n                ...dotPlot.plotStyle!,\n                backgroundColor: 'transparent',\n              }}\n            ></DotPlot>\n          </div>\n          {topBarPlot.colors &&\n            renderTopBarLegend(topBarPlot.colors, xLabelsForTopBarPlot)}\n          {topBarPlotDataSorted.map((item, i) => (\n            <div className=\"ThemesPlot__topBarPlot\" key={`topBarDiv_${i}`}>\n              <div className=\"ThemesPlot__topBarPlot__label\">\n                {item.count}&nbsp;{unCamelCase(item.y)}\n              </div>\n              <div className=\"ThemesPlot__topBarPlot__plot\">\n                <BarPlot\n                  style={{ width: '100%', height: '100%' }}\n                  layoutConfig={cloneDeep(barLayoutConfig)}\n                  optionsConfig={{ ...optionsConfig }}\n                  plotData={topBarPlotData}\n                  isTop={true}\n                  label={item.y}\n                  xMax={item.count}\n                  onClick={(e: any) =>\n                    onPointClick(getClickTargetData(e, true))\n                  }\n                  colors={\n                    // we are not actually fading colors for now. But keeping implemenation in case it changes\n                    i % 2 === 0\n                      ? topBarPlot.colors\n                      : fadeColors({ ...topBarPlot.colors }, '1')\n                  }\n                />\n              </div>\n            </div>\n          ))}\n          <div style={{ display: 'flex', position: 'relative' }}>\n            <div className=\"ThemesPlot__dotPlotYLabel\">{dotPlotYAxisLabel}</div>\n            <div className=\"ThemesPlot__dotPlot\">\n              {yLabelsForDotPlot.map((label, i) => (\n                <div\n                  key={`plotDiv_${+i}`}\n                  className=\"ThemesPlot__dotPlot__row\"\n                  style={{\n                    backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                  }}\n                >\n                  <div className=\"ThemesPlot__dotPlot__barColumn\">\n                    <Tooltip\n                      title={`${getTooltip(dotPlotQueryData, label)} `}\n                      placement={'right'}\n                    >\n                      <div>\n                        <span className=\"ThemesPlot__dotPlot__themeLabel\">\n                          {label}\n                        </span>\n                        <br />\n                        <span className=\"ThemesPlot__dotPlot__countLabel\">\n                          {totalsByDotPlotY[i].count} {sideBarPlot.countLabel}\n                        </span>\n                        <br />\n                        <BarPlot\n                          style={{ width: '100%' }}\n                          layoutConfig={barLayoutConfig}\n                          optionsConfig={optionsConfig}\n                          plotData={sideBarPlotData}\n                          isTop={false}\n                          // PORTALS-3061: No longer use a global x max for the side bar (where the bar size of 1 grant is consistent),\n                          //    Instead, each bar chart is independent (the size of 1 grant differs across bar charts).\n                          xMax={totalsByDotPlotY[i].count}\n                          label={label}\n                          colors={fadeColors({ ...topBarPlot.colors }, '1')}\n                          onClick={(e: any) => {\n                            if (onIndividualThemeBarPlotPointClick) {\n                              onIndividualThemeBarPlotPointClick(\n                                getClickTargetData(e, false),\n                              )\n                            }\n                          }}\n                        />\n                      </div>\n                    </Tooltip>\n                  </div>\n                  <div className=\"ThemesPlot__dotPlot__dotPlotColumn\">\n                    <div\n                      style={{\n                        width: '100%',\n                        backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                      }}\n                    >\n                      <DotPlot\n                        id={`${i}`}\n                        onClick={(e: any) => {\n                          const { type, event } = getClickTargetData(e, false)\n                          onPointClick({ facetValue: label, type, event })\n                        }}\n                        plotData={dotPlotQueryData}\n                        plotStyle={dotPlot.plotStyle}\n                        markerSymbols={dotPlot.markerSymbols}\n                        xMax={xMaxForDotPlot}\n                        label={label}\n                        layoutConfig={dotPlotLayoutConfig}\n                        optionsConfig={{\n                          ...optionsConfig,\n                          responsive: false,\n                        }}\n                      ></DotPlot>\n                    </div>\n                  </div>\n                </div>\n              ))}\n              <div className=\"ThemesPlot__dotPlot__row\">\n                <div\n                  className=\"ThemesPlot__dotPlot__barColumn\"\n                  style={{ textAlign: 'right' }}\n                >\n                  VOLUME:\n                </div>\n                <div\n                  className=\"ThemesPlot__dotPlot__dotPlotColumn\"\n                  style={{ marginTop: '0px' }}\n                >\n                  <DotPlot\n                    id={'footer'}\n                    plotData={dotPlotQueryData}\n                    isXAxis={true}\n                    xMax={xMaxForDotPlot}\n                    layoutConfig={dotPlotLayoutConfig}\n                    optionsConfig={{ ...optionsConfig, responsive: false }}\n                  ></DotPlot>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div></div>\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default ThemesPlot\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"UpsetPlot.js","names":[],"sources":["../../../src/components/Plot/UpsetPlot.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport LargeButton from '@/components/styled/LargeButton'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { ReactComponent as DiagonalLinePattern } from '@/assets/illustrations/diagonalLinePattern.svg'\n\nimport UpSetJS, {\n  extractSets,\n  generateCombinations,\n  ISet,\n  ISetCombinations,\n  ISetLike,\n  ISets,\n  UpSetFontSizes,\n  UpSetSelectionProps,\n} from '@upsetjs/react'\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { useEffect, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport { Box, SxProps, useTheme } from '@mui/material'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type UpsetPlotProps = {\n  sql: string // first column should contain values, second column should contain a single set value.  ie. SELECT distinct individualID, assay FROM syn20821313\n  rgbIndex?: number // color plot based on portal\n  customPlotColor?: string\n  selectionOpacity?: number\n  variant?: 'ampals'\n  maxBarCount?: number // will show all if not set\n  setName?: string // instead of \"Set Size\"\n  combinationName?: string // instead of \"Intersection Size\"\n  height?: number\n  summaryLinkText?: string // text for home page link below chart\n  summaryLink?: string // url for home page link below chart\n} & Pick<UpSetSelectionProps, 'onClick'>\n\nexport type UpsetPlotData = {\n  sets: ISets<any>\n  combinations: ISetCombinations<any>\n}\n/**\n * Upset plot.  See https://medium.com/@sgratzl/upset-js-javascript-tutorial-1b84bfd6896d\n * Currently this is driven by a Synapse Table/View, but we may want to alter it to read in the data from a flat file instead.\n */\nexport function UpsetPlot({\n  sql,\n  variant,\n  rgbIndex,\n  maxBarCount,\n  setName,\n  combinationName,\n  height = 700,\n  summaryLinkText,\n  summaryLink,\n  onClick,\n  customPlotColor,\n  selectionOpacity,\n}: UpsetPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoading, setIsLoading] = useState<boolean>()\n  const [data, setData] = useState<UpsetPlotData>()\n  const [error, setError] = useState<string>()\n  const [selection, setSelection] = useState(null as ISetLike<any> | null)\n  const theme = useTheme()\n\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const variantStyles: Record<string, SxProps> = {\n    default: {\n      'text[class^=\"sChartTextStyle-upset-\"], text[class^= \"cChartTextStyle-upset-\"]':\n        {\n          textTransform: 'uppercase',\n        },\n    },\n    ampals: {\n      width: '100%',\n      '& .selectionHint-upset-': {\n        stroke: 'transparent !important',\n      },\n      '& [class^=\"selectionHint-upset-\"]': {\n        stroke: 'transparent !important',\n      },\n      '& g[class^=\"interactive-upset-\"]:hover line[class^=\"upsetLine-\"]': {\n        stroke: theme.palette.primary.main,\n        strokeWidth: '4px',\n        strokeOpacity: 1,\n      },\n      '& g[class^=\"interactive-upset-\"]:hover circle[class^=\"fillNotMember-upset-\"]':\n        {\n          opacity: 0.2,\n        },\n      '& line[class^=\"upsetLine-\"]': {\n        strokeOpacity: 0,\n      },\n      '& rect[class^=\"fillPrimary-upset-\"]': {\n        fill: 'url(#diagonalLinePattern)',\n        stroke: theme.palette.grey[700],\n        strokeWidth: 2,\n      },\n      '& circle[class^=\"fillNotMember-upset-\"]': {\n        stroke: theme.palette.grey[600],\n        strokeWidth: 2,\n      },\n      '& text[class^=\"sChartTextStyle-upset-\"], & text[class^=\"cChartTextStyle-upset-\"]':\n        {\n          fontWeight: 700,\n          fill: theme.palette.grey[800],\n          lineHeight: '150%',\n        },\n      '& text[class^=\"cChartTextStyle-upset-\"]': {\n        transform: 'translate(-60px, 190px) rotate(-90deg)',\n      },\n      '& text[class^=\"sChartTextStyle-upset-\"]': {\n        transform: 'translate(-10px, 100px) rotate(-90deg)',\n      },\n    },\n  }\n\n  let plotColor: string, selectionColor: string\n  if (rgbIndex != null) {\n    const { colorPalette } = getColorPalette(rgbIndex, 2)\n    plotColor = colorPalette[0]\n    selectionColor = colorPalette[0]\n  } else {\n    plotColor = theme.palette.grey[700]\n    selectionColor = customPlotColor || theme.palette.primary.main\n  }\n\n  const updateFontSizes: UpSetFontSizes = {\n    setLabel: '14px',\n  }\n\n  useEffect(() => {\n    let isCancelled: boolean = false\n    const getPlotData = async () => {\n      setIsLoading(true)\n      try {\n        const entityId = parseEntityIdFromSqlStatement(sql)\n        const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS\n        const queryRequest: QueryBundleRequest = {\n          partMask,\n          concreteType:\n            'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n          entityId,\n          query: {\n            sql,\n          },\n        }\n        const { queryResult } = await SynapseClient.getFullQueryTableResults(\n          queryRequest,\n          accessToken,\n        )\n        // transform query data into plot data, and store.\n        // collect all values for each key\n        const keyValuesMap: Record<string, { name: string; sets: string[] }> =\n          {}\n        // keyValuesMap looks like { 'A': {name: 'A', sets: ['S1', 'S2'] }, 'B': { name: 'B', sets: ['S1'] }, ... }\n        // It's a little redundant, but makes the next step much easier.\n\n        const caseInsensitiveSetNames: Record<string, string> = {}\n        // caseInsensitiveSetNames looks like { 'RNASEQ': 'rnaSeq', 'NOMe-SEQ': 'NOMe-seq'}.\n\n        for (const row of queryResult?.queryResults.rows ?? []) {\n          for (let j = 1; j < row.values.length; j += 1) {\n            const rowValues: string[] = row.values as string[]\n            if (rowValues.some(value => value === null)) {\n              console.warn('Row has null value(s) when no nulls expected')\n            }\n\n            const key = rowValues[0]\n            let newValue = rowValues[j]\n            keyValuesMap[key] = keyValuesMap[key] || {}\n            keyValuesMap[key].name = key\n\n            keyValuesMap[key].sets = keyValuesMap[key].sets || []\n            const found = keyValuesMap[key].sets.find((v: any) => v == newValue)\n            if (!found && newValue) {\n              if (caseInsensitiveSetNames[newValue.toUpperCase()]) {\n                newValue = caseInsensitiveSetNames[newValue.toUpperCase()]\n              } else {\n                caseInsensitiveSetNames[newValue.toUpperCase()] = newValue\n              }\n              keyValuesMap[key].sets.push(newValue)\n            }\n          }\n        }\n        // now create the expected elems set\n        const elems = Object.values(keyValuesMap)\n        // elems looks like [{ name: 'A', sets: ['S1', 'S2'] }, { name: 'B', sets: ['S1'] }, ...]\n        const sets = extractSets(elems)\n        // PORTALS-1673: sort by assay name\n        const sortedSets = (sets as ISet[]).sort((a, b) => {\n          return ('' + b.name).localeCompare(a.name)\n        })\n\n        const combinations = generateCombinations(sortedSets, {\n          type: 'intersection',\n          min: 1,\n          limit: maxBarCount,\n          order: 'cardinality:desc',\n        })\n        if (!isCancelled) {\n          setData({ sets, combinations })\n          setIsLoading(false)\n        }\n      } catch (err) {\n        if (!isCancelled) {\n          setIsLoading(false)\n          let errorMessage = err['reason']\n          if (!errorMessage) {\n            console.error(err)\n            errorMessage = 'Error retrieving data'\n          }\n          setError(errorMessage)\n        }\n      }\n    }\n    getPlotData()\n    return () => {\n      isCancelled = true\n    }\n  }, [sql, accessToken])\n\n  return (\n    <>\n      {isLoading && loadingScreen}\n      {!isLoading && data && (\n        <>\n          {variantStyles['ampals'] && (\n            // Render DiagonalLinePattern so UpsetPlot can use `fill: url(#diagonalLinePattern)`.\n            // The SVG element must be added to the DOM so we can reference its ID (which is set in the SVG file) in the `fill` style\n            // Ideally, we would reference the asset URL imported by Vite, but this isn't working.\n            <Box\n              sx={{\n                '& path': {\n                  stroke: '#D9D9D9 !important',\n                },\n                width: 0,\n                height: 0,\n                position: 'absolute',\n              }}\n            >\n              <DiagonalLinePattern />\n            </Box>\n          )}\n          <Box\n            className=\"UpsetPlot\"\n            sx={variant ? variantStyles[variant] : variantStyles['default']}\n            ref={plotContainerRef}\n          >\n            <UpSetJS\n              sets={data.sets}\n              combinations={data.combinations}\n              width={plotContainerMeasurements?.width || 800}\n              height={height}\n              onHover={setSelection}\n              onClick={onClick}\n              selection={selection}\n              color={plotColor}\n              selectionColor={selectionColor}\n              hoverHintColor={'orange'}\n              hasSelectionOpacity={selectionOpacity ? selectionOpacity : 0.3}\n              // alternatingBackgroundColor={false}\n              setName={setName}\n              combinationName={combinationName}\n              fontFamily=\"'DM Sans', sans-serif\"\n              fontSizes={updateFontSizes}\n              exportButtons={false}\n              notMemberColor=\"transparent\"\n            />\n            {summaryLink && summaryLinkText && (\n              <div className=\"UpsetPlot__summary\">\n                <LargeButton\n                  color=\"secondary\"\n                  variant=\"contained\"\n                  href={summaryLink}\n                >\n                  {summaryLinkText}\n                </LargeButton>\n              </div>\n            )}\n          </Box>\n        </>\n      )}\n      <ErrorBanner error={error} />\n    </>\n  )\n}\n\nexport default UpsetPlot\n"],"mappings":"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"}
+{"version":3,"file":"UpsetPlot.js","names":[],"sources":["../../../src/components/Plot/UpsetPlot.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport LargeButton from '@/components/styled/LargeButton'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { ReactComponent as DiagonalLinePattern } from '@/assets/illustrations/diagonalLinePattern.svg'\n\nimport UpSetJS, {\n  extractSets,\n  generateCombinations,\n  ISet,\n  ISetCombinations,\n  ISetLike,\n  ISets,\n  UpSetFontSizes,\n  UpSetSelectionProps,\n} from '@upsetjs/react'\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { useEffect, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport { Box, SxProps, useTheme } from '@mui/material'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type UpsetPlotProps = {\n  sql: string // first column should contain values, second column should contain a single set value.  ie. SELECT distinct individualID, assay FROM syn20821313\n  rgbIndex?: number // color plot based on portal\n  customPlotColor?: string\n  selectionOpacity?: number\n  variant?: 'ampals'\n  maxBarCount?: number // will show all if not set\n  setName?: string // instead of \"Set Size\"\n  combinationName?: string // instead of \"Intersection Size\"\n  height?: number\n  summaryLinkText?: string // text for home page link below chart\n  summaryLink?: string // url for home page link below chart\n} & Pick<UpSetSelectionProps, 'onClick'>\n\nexport type UpsetPlotData = {\n  sets: ISets<any>\n  combinations: ISetCombinations<any>\n}\n/**\n * Upset plot.  See https://medium.com/@sgratzl/upset-js-javascript-tutorial-1b84bfd6896d\n * Currently this is driven by a Synapse Table/View, but we may want to alter it to read in the data from a flat file instead.\n */\nexport function UpsetPlot({\n  sql,\n  variant,\n  rgbIndex,\n  maxBarCount,\n  setName,\n  combinationName,\n  height = 700,\n  summaryLinkText,\n  summaryLink,\n  onClick,\n  customPlotColor,\n  selectionOpacity,\n}: UpsetPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoading, setIsLoading] = useState<boolean>()\n  const [data, setData] = useState<UpsetPlotData>()\n  const [error, setError] = useState<string>()\n  const [selection, setSelection] = useState(null as ISetLike<any> | null)\n  const theme = useTheme()\n\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const variantStyles: Record<string, SxProps> = {\n    default: {\n      'text[class^=\"sChartTextStyle-upset-\"], text[class^= \"cChartTextStyle-upset-\"]':\n        {\n          textTransform: 'uppercase',\n        },\n    },\n    ampals: {\n      width: '100%',\n      '& .selectionHint-upset-': {\n        stroke: 'transparent !important',\n      },\n      '& [class^=\"selectionHint-upset-\"]': {\n        stroke: 'transparent !important',\n      },\n      '& g[class^=\"interactive-upset-\"]:hover line[class^=\"upsetLine-\"]': {\n        stroke: theme.palette.primary.main,\n        strokeWidth: '4px',\n        strokeOpacity: 1,\n      },\n      '& g[class^=\"interactive-upset-\"]:hover circle[class^=\"fillNotMember-upset-\"]':\n        {\n          opacity: 0.2,\n        },\n      '& line[class^=\"upsetLine-\"]': {\n        strokeOpacity: 0,\n      },\n      '& rect[class^=\"fillPrimary-upset-\"]': {\n        fill: 'url(#diagonalLinePattern)',\n        stroke: theme.palette.grey[700],\n        strokeWidth: 2,\n      },\n      '& circle[class^=\"fillNotMember-upset-\"]': {\n        stroke: theme.palette.grey[600],\n        strokeWidth: 2,\n      },\n      '& text[class^=\"sChartTextStyle-upset-\"], & text[class^=\"cChartTextStyle-upset-\"]':\n        {\n          fontWeight: 700,\n          fill: theme.palette.grey[800],\n          lineHeight: '150%',\n        },\n      '& text[class^=\"cChartTextStyle-upset-\"]': {\n        transform: 'translate(-60px, 190px) rotate(-90deg)',\n      },\n      '& text[class^=\"sChartTextStyle-upset-\"]': {\n        transform: 'translate(-10px, 100px) rotate(-90deg)',\n      },\n    },\n  }\n\n  let plotColor: string, selectionColor: string\n  if (rgbIndex != null) {\n    const { colorPalette } = getColorPalette(rgbIndex, 2)\n    plotColor = colorPalette[0]\n    selectionColor = colorPalette[0]\n  } else {\n    plotColor = theme.palette.grey[700]\n    selectionColor = customPlotColor || theme.palette.primary.main\n  }\n\n  const updateFontSizes: UpSetFontSizes = {\n    setLabel: '14px',\n  }\n\n  useEffect(() => {\n    let isCancelled: boolean = false\n    const getPlotData = async () => {\n      setIsLoading(true)\n      try {\n        const entityId = parseEntityIdFromSqlStatement(sql)\n        const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS\n        const queryRequest: QueryBundleRequest = {\n          partMask,\n          concreteType:\n            'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n          entityId,\n          query: {\n            sql,\n          },\n        }\n        const { queryResult } = await SynapseClient.getFullQueryTableResults(\n          queryRequest,\n          accessToken,\n        )\n        // transform query data into plot data, and store.\n        // collect all values for each key\n        const keyValuesMap: Record<string, { name: string; sets: string[] }> =\n          {}\n        // keyValuesMap looks like { 'A': {name: 'A', sets: ['S1', 'S2'] }, 'B': { name: 'B', sets: ['S1'] }, ... }\n        // It's a little redundant, but makes the next step much easier.\n\n        const caseInsensitiveSetNames: Record<string, string> = {}\n        // caseInsensitiveSetNames looks like { 'RNASEQ': 'rnaSeq', 'NOMe-SEQ': 'NOMe-seq'}.\n\n        for (const row of queryResult?.queryResults.rows ?? []) {\n          for (let j = 1; j < row.values.length; j += 1) {\n            const rowValues: string[] = row.values as string[]\n            if (rowValues.some(value => value === null)) {\n              console.warn('Row has null value(s) when no nulls expected')\n            }\n\n            const key = rowValues[0]\n            let newValue = rowValues[j]\n            keyValuesMap[key] = keyValuesMap[key] || {}\n            keyValuesMap[key].name = key\n\n            keyValuesMap[key].sets = keyValuesMap[key].sets || []\n            const found = keyValuesMap[key].sets.find((v: any) => v == newValue)\n            if (!found && newValue) {\n              if (caseInsensitiveSetNames[newValue.toUpperCase()]) {\n                newValue = caseInsensitiveSetNames[newValue.toUpperCase()]\n              } else {\n                caseInsensitiveSetNames[newValue.toUpperCase()] = newValue\n              }\n              keyValuesMap[key].sets.push(newValue)\n            }\n          }\n        }\n        // now create the expected elems set\n        const elems = Object.values(keyValuesMap)\n        // elems looks like [{ name: 'A', sets: ['S1', 'S2'] }, { name: 'B', sets: ['S1'] }, ...]\n        const sets = extractSets(elems)\n        // PORTALS-1673: sort by assay name\n        const sortedSets = (sets as ISet[]).sort((a, b) => {\n          return ('' + b.name).localeCompare(a.name)\n        })\n\n        const combinations = generateCombinations(sortedSets, {\n          type: 'intersection',\n          min: 1,\n          limit: maxBarCount,\n          order: 'cardinality:desc',\n        })\n        if (!isCancelled) {\n          setData({ sets, combinations })\n          setIsLoading(false)\n        }\n      } catch (err) {\n        if (!isCancelled) {\n          setIsLoading(false)\n          let errorMessage = err['reason']\n          if (!errorMessage) {\n            console.error(err)\n            errorMessage = 'Error retrieving data'\n          }\n          setError(errorMessage)\n        }\n      }\n    }\n    getPlotData()\n    return () => {\n      isCancelled = true\n    }\n  }, [sql, accessToken])\n\n  return (\n    <>\n      {isLoading && loadingScreen}\n      {!isLoading && data && (\n        <>\n          {variantStyles['ampals'] && (\n            // Render DiagonalLinePattern so UpsetPlot can use `fill: url(#diagonalLinePattern)`.\n            // The SVG element must be added to the DOM so we can reference its ID (which is set in the SVG file) in the `fill` style\n            // Ideally, we would reference the asset URL imported by Vite, but this isn't working.\n            <Box\n              sx={{\n                '& path': {\n                  stroke: '#D9D9D9 !important',\n                },\n                width: 0,\n                height: 0,\n                position: 'absolute',\n              }}\n            >\n              <DiagonalLinePattern />\n            </Box>\n          )}\n          <Box\n            className=\"UpsetPlot\"\n            sx={variant ? variantStyles[variant] : variantStyles['default']}\n            ref={plotContainerRef}\n          >\n            <UpSetJS\n              sets={data.sets}\n              combinations={data.combinations}\n              width={plotContainerMeasurements?.width || 800}\n              height={height}\n              onHover={setSelection}\n              onClick={onClick}\n              selection={selection}\n              color={plotColor}\n              selectionColor={selectionColor}\n              hoverHintColor={'orange'}\n              hasSelectionOpacity={selectionOpacity ? selectionOpacity : 0.3}\n              // alternatingBackgroundColor={false}\n              setName={setName}\n              combinationName={combinationName}\n              fontFamily=\"'DM Sans', sans-serif\"\n              fontSizes={updateFontSizes}\n              exportButtons={false}\n              notMemberColor=\"transparent\"\n            />\n            {summaryLink && summaryLinkText && (\n              <div className=\"UpsetPlot__summary\">\n                <LargeButton\n                  color=\"secondary\"\n                  variant=\"contained\"\n                  href={summaryLink}\n                >\n                  {summaryLinkText}\n                </LargeButton>\n              </div>\n            )}\n          </Box>\n        </>\n      )}\n      <ErrorBanner error={error} />\n    </>\n  )\n}\n\nexport default UpsetPlot\n"],"mappings":"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"}

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

@@ -4,7 +4,9 @@ import { UpsetPlot } from './UpsetPlot';
 import type { UpsetPlotProps } from './UpsetPlot';
 import { SynapsePlot } from './SynapsePlot';
 import type { SynapsePlotProps } from './SynapsePlot';
+import { SynapseSankeyPlot } from './SynapseSankeyPlot';
+import type { SynapseSankeyPlotProps } from './SynapseSankeyPlot';
 import type { ClickCallbackParams } from './types';
 import type { GraphItem } from './types';
-export { ThemesPlot, ThemesPlotProps, UpsetPlot, UpsetPlotProps, SynapsePlot, SynapsePlotProps, ClickCallbackParams, GraphItem, };
+export { ThemesPlot, ThemesPlotProps, UpsetPlot, UpsetPlotProps, SynapsePlot, SynapsePlotProps, SynapseSankeyPlot, SynapseSankeyPlotProps, ClickCallbackParams, GraphItem, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EACL,UAAU,EACV,eAAe,EACf,SAAS,EACT,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,GACV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EACL,UAAU,EACV,eAAe,EACf,SAAS,EACT,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,SAAS,GACV,CAAA"}

package/dist/components/Plot/index.js

@@ -1,4 +1,5 @@
 import { ThemesPlot as e } from "./ThemesPlot.js";
 import { UpsetPlot as t } from "./UpsetPlot.js";
 import { SynapsePlot as n } from "./SynapsePlot.js";
-export { n as SynapsePlot, e as ThemesPlot, t as UpsetPlot };
+import { SynapseSankeyPlot as r } from "./SynapseSankeyPlot.js";
+export { n as SynapsePlot, r as SynapseSankeyPlot, e as ThemesPlot, t as UpsetPlot };

package/dist/components/Plot/safe-react-plotly-factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"safe-react-plotly-factory.js","names":[],"sources":["../../../src/components/Plot/safe-react-plotly-factory.ts"],"sourcesContent":["import _createPlotlyComponent from 'react-plotly.js/factory'\n\n// We want to bundle browser-compatible code, but use ESM (`\"type\": \"module\"` in package.json) when we use Node (e.g. tests).\n// esbuild (used by Vite in development mode) has a quirk where this will cause packages react-plotly.js/factory to be\n// imported in 'node mode', which breaks imports in the browser.\n// For further explanation and source of workaround, see: https://github.com/evanw/esbuild/issues/2480#issuecomment-1970337003\n\nconst safeESModule = <T>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\nconst createPlotlyComponent = safeESModule(_createPlotlyComponent)\n\nexport default createPlotlyComponent\n"],"mappings":";AAYA,IAAM,MALmB,MAA6B;CACpD,IAAM,IAAI;AACV,QAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;GAG/B,EAAuB"}
+{"version":3,"file":"safe-react-plotly-factory.js","names":[],"sources":["../../../src/components/Plot/safe-react-plotly-factory.ts"],"sourcesContent":["import _createPlotlyComponent from 'react-plotly.js/factory'\n\n// We want to bundle browser-compatible code, but use ESM (`\"type\": \"module\"` in package.json) when we use Node (e.g. tests).\n// esbuild (used by Vite in development mode) has a quirk where this will cause packages react-plotly.js/factory to be\n// imported in 'node mode', which breaks imports in the browser.\n// For further explanation and source of workaround, see: https://github.com/evanw/esbuild/issues/2480#issuecomment-1970337003\n\nconst safeESModule = <T>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\nconst createPlotlyComponent = safeESModule(_createPlotlyComponent)\n\nexport default createPlotlyComponent\n"],"mappings":";AAYA,IAAM,MALmB,MAA6B;CACpD,IAAM,IAAI;CACV,OAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;AAC1E,GAE2C,CAAsB"}

package/dist/components/PortalAclEditor/PortalAclEditor.js.map

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

package/dist/components/PortalAclEditor/PortalAclEditorModal.js.map

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

package/dist/components/PortalFeatureHighlights/PortalFeatureHighlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalFeatureHighlights.js","names":[],"sources":["../../../src/components/PortalFeatureHighlights/PortalFeatureHighlights.tsx"],"sourcesContent":["import { Box, CardMedia, Fade, Slide } from '@mui/material'\nimport React from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nexport type PortalFeatureHighlightsProps = {\n  reverseOrder?: boolean\n  title: string\n  image?: string\n  buttonText?: string\n  summaryText?: React.ReactNode\n  link?: string\n}\n\nconst transitionTimeoutMs = 400\n\nconst PortalFeatureHighlights = (\n  props: PortalFeatureHighlightsProps,\n): React.ReactNode => {\n  const { reverseOrder, image, title, buttonText, summaryText, link } = props\n  const [ref, inView] = useInView({ threshold: 0.3, triggerOnce: true })\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'grid',\n        padding: { xs: '40px', lg: '80px' },\n        gap: { xs: '38px', md: '80px' },\n        gridTemplateColumns: {\n          xs: 'minmax(100px, 1fr)',\n          md: '1fr 1fr',\n          lg: reverseOrder\n            ? 'minmax(150px, 1fr) minmax(300px, 2fr)'\n            : 'minmax(300px, 2fr) minmax(150px, 1fr)',\n        },\n        gridTemplateAreas: {\n          xs: `'image' 'content'`,\n          md: reverseOrder ? `'content image'` : `'image content'`,\n        },\n      }}\n    >\n      <Fade in={inView} timeout={transitionTimeoutMs}>\n        <div>\n          <Slide\n            direction={reverseOrder ? 'left' : 'right'}\n            timeout={transitionTimeoutMs}\n            in={inView}\n          >\n            <div>\n              <CardMedia\n                component=\"img\"\n                image={image}\n                sx={{\n                  gridArea: 'image',\n                  borderRadius: '12px',\n                  height: '100%',\n                  width: '100%',\n                  objectFit: 'cover',\n                }}\n              />\n            </div>\n          </Slide>\n        </div>\n      </Fade>\n      <PortalSectionHeader\n        title={title}\n        buttonText={buttonText}\n        link={link}\n        summaryText={summaryText}\n        sx={{ gridArea: 'content', h2: { width: '100%' } }}\n      />\n    </Box>\n  )\n}\n\nexport default PortalFeatureHighlights\n"],"mappings":";;;;;;AAcA,IAAM,IAAsB,KAEtB,KACJ,MACoB;CACpB,IAAM,EAAE,iBAAc,UAAO,UAAO,eAAY,gBAAa,YAAS,GAChE,CAAC,GAAK,KAAU,EAAU;EAAE,WAAW;EAAK,aAAa;EAAM,CAAC;AACtE,QACE,kBAAC,GAAD;EACO;EACL,IAAI;GACF,SAAS;GACT,SAAS;IAAE,IAAI;IAAQ,IAAI;IAAQ;GACnC,KAAK;IAAE,IAAI;IAAQ,IAAI;IAAQ;GAC/B,qBAAqB;IACnB,IAAI;IACJ,IAAI;IACJ,IAAI,IACA,0CACA;IACL;GACD,mBAAmB;IACjB,IAAI;IACJ,IAAI,IAAe,oBAAoB;IACxC;GACF;YAjBH,CAmBE,kBAAC,GAAD;GAAM,IAAI;GAAQ,SAAS;aACzB,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;IACE,WAAW,IAAe,SAAS;IACnC,SAAS;IACT,IAAI;cAEJ,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;KACE,WAAU;KACH;KACP,IAAI;MACF,UAAU;MACV,cAAc;MACd,QAAQ;MACR,OAAO;MACP,WAAW;MACZ;KACD,CAAA,EACE,CAAA;IACA,CAAA,EACJ,CAAA;GACD,CAAA,EACP,kBAAC,GAAD;GACS;GACK;GACN;GACO;GACb,IAAI;IAAE,UAAU;IAAW,IAAI,EAAE,OAAO,QAAQ;IAAE;GAClD,CAAA,CACE"}
+{"version":3,"file":"PortalFeatureHighlights.js","names":[],"sources":["../../../src/components/PortalFeatureHighlights/PortalFeatureHighlights.tsx"],"sourcesContent":["import { Box, CardMedia, Fade, Slide } from '@mui/material'\nimport React from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nexport type PortalFeatureHighlightsProps = {\n  reverseOrder?: boolean\n  title: string\n  image?: string\n  buttonText?: string\n  summaryText?: React.ReactNode\n  link?: string\n}\n\nconst transitionTimeoutMs = 400\n\nconst PortalFeatureHighlights = (\n  props: PortalFeatureHighlightsProps,\n): React.ReactNode => {\n  const { reverseOrder, image, title, buttonText, summaryText, link } = props\n  const [ref, inView] = useInView({ threshold: 0.3, triggerOnce: true })\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'grid',\n        padding: { xs: '40px', lg: '80px' },\n        gap: { xs: '38px', md: '80px' },\n        gridTemplateColumns: {\n          xs: 'minmax(100px, 1fr)',\n          md: '1fr 1fr',\n          lg: reverseOrder\n            ? 'minmax(150px, 1fr) minmax(300px, 2fr)'\n            : 'minmax(300px, 2fr) minmax(150px, 1fr)',\n        },\n        gridTemplateAreas: {\n          xs: `'image' 'content'`,\n          md: reverseOrder ? `'content image'` : `'image content'`,\n        },\n      }}\n    >\n      <Fade in={inView} timeout={transitionTimeoutMs}>\n        <div>\n          <Slide\n            direction={reverseOrder ? 'left' : 'right'}\n            timeout={transitionTimeoutMs}\n            in={inView}\n          >\n            <div>\n              <CardMedia\n                component=\"img\"\n                image={image}\n                sx={{\n                  gridArea: 'image',\n                  borderRadius: '12px',\n                  height: '100%',\n                  width: '100%',\n                  objectFit: 'cover',\n                }}\n              />\n            </div>\n          </Slide>\n        </div>\n      </Fade>\n      <PortalSectionHeader\n        title={title}\n        buttonText={buttonText}\n        link={link}\n        summaryText={summaryText}\n        sx={{ gridArea: 'content', h2: { width: '100%' } }}\n      />\n    </Box>\n  )\n}\n\nexport default PortalFeatureHighlights\n"],"mappings":";;;;;;AAcA,IAAM,IAAsB,KAEtB,KACJ,MACoB;CACpB,IAAM,EAAE,iBAAc,UAAO,UAAO,eAAY,gBAAa,YAAS,GAChE,CAAC,GAAK,KAAU,EAAU;EAAE,WAAW;EAAK,aAAa;CAAK,CAAC;CACrE,OACE,kBAAC,GAAD;EACO;EACL,IAAI;GACF,SAAS;GACT,SAAS;IAAE,IAAI;IAAQ,IAAI;GAAO;GAClC,KAAK;IAAE,IAAI;IAAQ,IAAI;GAAO;GAC9B,qBAAqB;IACnB,IAAI;IACJ,IAAI;IACJ,IAAI,IACA,0CACA;GACN;GACA,mBAAmB;IACjB,IAAI;IACJ,IAAI,IAAe,oBAAoB;GACzC;EACF;YAjBF,CAmBE,kBAAC,GAAD;GAAM,IAAI;GAAQ,SAAS;aACzB,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;IACE,WAAW,IAAe,SAAS;IACnC,SAAS;IACT,IAAI;cAEJ,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;KACE,WAAU;KACH;KACP,IAAI;MACF,UAAU;MACV,cAAc;MACd,QAAQ;MACR,OAAO;MACP,WAAW;KACb;IACD,CAAA,EACE,CAAA;GACA,CAAA,EACJ,CAAA;EACD,CAAA,GACN,kBAAC,GAAD;GACS;GACK;GACN;GACO;GACb,IAAI;IAAE,UAAU;IAAW,IAAI,EAAE,OAAO,OAAO;GAAE;EAClD,CAAA,CACE;;AAET"}

package/dist/components/PortalFeaturedPartners/PortalFeaturedPartners.js

@@ -87,9 +87,7 @@ var f = 101, p = 156, m = ({ website: e, children: t }) => {
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
 		entityId: f,
 		query: { sql: i }
-	}), g = p?.queryResult.queryResults.rows ?? [], _ = /* @__PURE__ */ function(e) {
-		return e.CARDLOGO = "cardLogo", e.ORGANIZATION_NAME = "organizationName", e.WEBSITE = "website", e;
-	}({}), v = t(_.CARDLOGO, p), y = t(_.ORGANIZATION_NAME, p), b = t(_.WEBSITE, p);
+	}), g = p?.queryResult.queryResults.rows ?? [], _ = t("cardLogo", p), v = t("organizationName", p), y = t("website", p);
 	return /* @__PURE__ */ d(a, {
 		sx: {
 			display: "grid",
@@ -130,9 +128,9 @@ var f = 101, p = 156, m = ({ website: e, children: t }) => {
 			}),
 			children: g?.map((e, t) => /* @__PURE__ */ u(h, {
 				partner: e,
-				imageColIndex: v,
-				organizationNameColIndex: y,
-				websiteColIndex: b,
+				imageColIndex: _,
+				organizationNameColIndex: v,
+				websiteColIndex: y,
 				entityId: f,
 				isLoading: m
 			}, `partner-${t}`))

package/dist/components/PortalFeaturedPartners/PortalFeaturedPartners.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalFeaturedPartners.js","names":[],"sources":["../../../src/components/PortalFeaturedPartners/PortalFeaturedPartners.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport {\n  Box,\n  CardMedia,\n  Link,\n  Skeleton,\n  SxProps,\n  Typography,\n} from '@mui/material'\nimport { QueryBundleRequest, Row } from '@sage-bionetworks/synapse-types'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nconst partnerIconHeight = 101\nconst partnerIconWidth = 156\n\nexport type PortalFeaturedPartnersProps = {\n  variation?: 'default' | 'centered'\n  sql: string\n  titleText?: string\n  sx?: SxProps\n}\n\ntype PartnerIcons = {\n  partner: Row\n  imageColIndex: number\n  organizationNameColIndex: number\n  websiteColIndex: number\n  entityId: string\n  isLoading?: boolean\n}\n\ntype PartnerWrapperProps = {\n  website?: string | null\n  children: React.ReactNode\n}\n\nconst PartnerWrapper = ({\n  website,\n  children,\n}: PartnerWrapperProps): React.ReactNode => {\n  const commonSx = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  }\n\n  return website ? (\n    <Link\n      href={website}\n      target=\"_blank\"\n      sx={{\n        ...commonSx,\n        textDecoration: 'none !important',\n      }}\n    >\n      {children}\n    </Link>\n  ) : (\n    <Box sx={commonSx}>{children}</Box>\n  )\n}\n\nconst PartnerIcon = ({\n  partner,\n  imageColIndex,\n  organizationNameColIndex,\n  websiteColIndex,\n  entityId,\n  isLoading,\n}: PartnerIcons): React.ReactNode => {\n  const fileId = partner.values[imageColIndex] ?? ''\n  const organizationName = partner.values[organizationNameColIndex]\n  const website = partner.values[websiteColIndex]\n  const imageUrl = useImageUrl(fileId, entityId)\n\n  if (!imageUrl && !organizationName) return null\n\n  if (isLoading)\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={partnerIconHeight}\n        width={partnerIconWidth}\n      />\n    )\n\n  const PartnerContent = imageUrl ? (\n    <CardMedia\n      component=\"img\"\n      image={imageUrl}\n      aria-hidden=\"true\"\n      sx={{\n        width: `${partnerIconWidth}px`,\n        height: `${partnerIconHeight}px`,\n        objectFit: 'contain',\n        borderRadius: '10px',\n      }}\n    />\n  ) : (\n    <Box\n      sx={{\n        display: 'flex',\n        width: '165px',\n        padding: '3px',\n        flexDirection: 'column',\n        gap: '10px',\n        border: '2px solid',\n        borderColor: 'grey.900',\n        backgroundColor: '#FFF',\n        textAlign: 'center',\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          padding: '10px',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: '10px',\n          border: '1px solid',\n          borderColor: 'grey.900',\n        }}\n      >\n        <Typography\n          variant=\"headline3\"\n          sx={{\n            fontSize: '14px',\n            fontWeight: 400,\n            lineHeight: '130%',\n            color: 'grey.900',\n          }}\n        >\n          {organizationName}\n        </Typography>\n      </Box>\n    </Box>\n  )\n\n  return <PartnerWrapper website={website}>{PartnerContent}</PartnerWrapper>\n}\n\nconst PortalFeaturedPartners = ({\n  sql,\n  titleText = 'Our Partners',\n  variation = 'default',\n  sx,\n}: PortalFeaturedPartnersProps): React.ReactNode => {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n\n  const queryBundleRequest: QueryBundleRequest = {\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    query: {\n      sql,\n    },\n  }\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult!.queryResults.rows ?? []\n\n  enum ExpectedColumns {\n    CARDLOGO = 'cardLogo',\n    ORGANIZATION_NAME = 'organizationName',\n    WEBSITE = 'website',\n  }\n\n  const imageColIndex = getFieldIndex(\n    ExpectedColumns.CARDLOGO,\n    queryResultBundle,\n  )\n\n  const organizationNameColIndex = getFieldIndex(\n    ExpectedColumns.ORGANIZATION_NAME,\n    queryResultBundle,\n  )\n\n  const websiteColIndex = getFieldIndex(\n    ExpectedColumns.WEBSITE,\n    queryResultBundle,\n  )\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        padding: { xs: '40px', lg: '20px 80px' },\n        gridTemplateColumns:\n          variation === 'centered'\n            ? { xs: '1fr' }\n            : { xs: '1fr', md: '1fr 3fr' },\n        gap: '50px',\n        textAlign: variation === 'centered' ? 'center' : 'left',\n        ...sx,\n      }}\n    >\n      {variation === 'default' ? (\n        <PortalSectionHeader\n          title={titleText}\n          sx={{ h2: { fontSize: '24px', paddingTop: '26px', width: '100%' } }}\n        />\n      ) : (\n        <Typography\n          variant=\"headline1\"\n          sx={{ fontSize: '48px', color: 'grey.900' }}\n        >\n          {titleText}\n        </Typography>\n      )}\n      <Box\n        sx={theme => ({\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '64px',\n          flex: '1 1 0',\n          justifyContent: variation === 'centered' ? 'center' : 'flex-start',\n          [theme.breakpoints.down('sm')]: {\n            justifyContent: 'center',\n          },\n        })}\n      >\n        {dataRows?.map((partner, index) => (\n          <PartnerIcon\n            key={`partner-${index}`}\n            partner={partner}\n            imageColIndex={imageColIndex}\n            organizationNameColIndex={organizationNameColIndex}\n            websiteColIndex={websiteColIndex}\n            entityId={entityId}\n            isLoading={isLoading}\n          />\n        ))}\n      </Box>\n    </Box>\n  )\n}\n\nexport default PortalFeaturedPartners\n"],"mappings":"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"}
+{"version":3,"file":"PortalFeaturedPartners.js","names":[],"sources":["../../../src/components/PortalFeaturedPartners/PortalFeaturedPartners.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport {\n  Box,\n  CardMedia,\n  Link,\n  Skeleton,\n  SxProps,\n  Typography,\n} from '@mui/material'\nimport { QueryBundleRequest, Row } from '@sage-bionetworks/synapse-types'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nconst partnerIconHeight = 101\nconst partnerIconWidth = 156\n\nexport type PortalFeaturedPartnersProps = {\n  variation?: 'default' | 'centered'\n  sql: string\n  titleText?: string\n  sx?: SxProps\n}\n\ntype PartnerIcons = {\n  partner: Row\n  imageColIndex: number\n  organizationNameColIndex: number\n  websiteColIndex: number\n  entityId: string\n  isLoading?: boolean\n}\n\ntype PartnerWrapperProps = {\n  website?: string | null\n  children: React.ReactNode\n}\n\nconst PartnerWrapper = ({\n  website,\n  children,\n}: PartnerWrapperProps): React.ReactNode => {\n  const commonSx = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  }\n\n  return website ? (\n    <Link\n      href={website}\n      target=\"_blank\"\n      sx={{\n        ...commonSx,\n        textDecoration: 'none !important',\n      }}\n    >\n      {children}\n    </Link>\n  ) : (\n    <Box sx={commonSx}>{children}</Box>\n  )\n}\n\nconst PartnerIcon = ({\n  partner,\n  imageColIndex,\n  organizationNameColIndex,\n  websiteColIndex,\n  entityId,\n  isLoading,\n}: PartnerIcons): React.ReactNode => {\n  const fileId = partner.values[imageColIndex] ?? ''\n  const organizationName = partner.values[organizationNameColIndex]\n  const website = partner.values[websiteColIndex]\n  const imageUrl = useImageUrl(fileId, entityId)\n\n  if (!imageUrl && !organizationName) return null\n\n  if (isLoading)\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={partnerIconHeight}\n        width={partnerIconWidth}\n      />\n    )\n\n  const PartnerContent = imageUrl ? (\n    <CardMedia\n      component=\"img\"\n      image={imageUrl}\n      aria-hidden=\"true\"\n      sx={{\n        width: `${partnerIconWidth}px`,\n        height: `${partnerIconHeight}px`,\n        objectFit: 'contain',\n        borderRadius: '10px',\n      }}\n    />\n  ) : (\n    <Box\n      sx={{\n        display: 'flex',\n        width: '165px',\n        padding: '3px',\n        flexDirection: 'column',\n        gap: '10px',\n        border: '2px solid',\n        borderColor: 'grey.900',\n        backgroundColor: '#FFF',\n        textAlign: 'center',\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          padding: '10px',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: '10px',\n          border: '1px solid',\n          borderColor: 'grey.900',\n        }}\n      >\n        <Typography\n          variant=\"headline3\"\n          sx={{\n            fontSize: '14px',\n            fontWeight: 400,\n            lineHeight: '130%',\n            color: 'grey.900',\n          }}\n        >\n          {organizationName}\n        </Typography>\n      </Box>\n    </Box>\n  )\n\n  return <PartnerWrapper website={website}>{PartnerContent}</PartnerWrapper>\n}\n\nconst PortalFeaturedPartners = ({\n  sql,\n  titleText = 'Our Partners',\n  variation = 'default',\n  sx,\n}: PortalFeaturedPartnersProps): React.ReactNode => {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n\n  const queryBundleRequest: QueryBundleRequest = {\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    query: {\n      sql,\n    },\n  }\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult!.queryResults.rows ?? []\n\n  enum ExpectedColumns {\n    CARDLOGO = 'cardLogo',\n    ORGANIZATION_NAME = 'organizationName',\n    WEBSITE = 'website',\n  }\n\n  const imageColIndex = getFieldIndex(\n    ExpectedColumns.CARDLOGO,\n    queryResultBundle,\n  )\n\n  const organizationNameColIndex = getFieldIndex(\n    ExpectedColumns.ORGANIZATION_NAME,\n    queryResultBundle,\n  )\n\n  const websiteColIndex = getFieldIndex(\n    ExpectedColumns.WEBSITE,\n    queryResultBundle,\n  )\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        padding: { xs: '40px', lg: '20px 80px' },\n        gridTemplateColumns:\n          variation === 'centered'\n            ? { xs: '1fr' }\n            : { xs: '1fr', md: '1fr 3fr' },\n        gap: '50px',\n        textAlign: variation === 'centered' ? 'center' : 'left',\n        ...sx,\n      }}\n    >\n      {variation === 'default' ? (\n        <PortalSectionHeader\n          title={titleText}\n          sx={{ h2: { fontSize: '24px', paddingTop: '26px', width: '100%' } }}\n        />\n      ) : (\n        <Typography\n          variant=\"headline1\"\n          sx={{ fontSize: '48px', color: 'grey.900' }}\n        >\n          {titleText}\n        </Typography>\n      )}\n      <Box\n        sx={theme => ({\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '64px',\n          flex: '1 1 0',\n          justifyContent: variation === 'centered' ? 'center' : 'flex-start',\n          [theme.breakpoints.down('sm')]: {\n            justifyContent: 'center',\n          },\n        })}\n      >\n        {dataRows?.map((partner, index) => (\n          <PartnerIcon\n            key={`partner-${index}`}\n            partner={partner}\n            imageColIndex={imageColIndex}\n            organizationNameColIndex={organizationNameColIndex}\n            websiteColIndex={websiteColIndex}\n            entityId={entityId}\n            isLoading={isLoading}\n          />\n        ))}\n      </Box>\n    </Box>\n  )\n}\n\nexport default PortalFeaturedPartners\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAoB,KACpB,IAAmB,KAuBnB,KAAkB,EACtB,YACA,kBAC0C;CAC1C,IAAM,IAAW;EACf,SAAS;EACT,YAAY;EACZ,gBAAgB;CAClB;CAEA,OAAO,IACL,kBAAC,GAAD;EACE,MAAM;EACN,QAAO;EACP,IAAI;GACF,GAAG;GACH,gBAAgB;EAClB;EAEC;CACG,CAAA,IAEN,kBAAC,GAAD;EAAK,IAAI;EAAW;CAAc,CAAA;AAEtC,GAEM,KAAe,EACnB,YACA,kBACA,6BACA,oBACA,aACA,mBACmC;CACnC,IAAM,IAAS,EAAQ,OAAO,MAAkB,IAC1C,IAAmB,EAAQ,OAAO,IAClC,IAAU,EAAQ,OAAO,IACzB,IAAW,EAAY,GAAQ,CAAQ;CAiE7C,OA/DI,CAAC,KAAY,CAAC,IAAyB,OAEvC,IAEA,kBAAC,GAAD;EACE,SAAQ;EACR,QAAQ;EACR,OAAO;CACR,CAAA,IAuDE,kBAAC,GAAD;EAAyB;YApDT,IACrB,kBAAC,GAAD;GACE,WAAU;GACV,OAAO;GACP,eAAY;GACZ,IAAI;IACF,OAAO,GAAG,EAAiB;IAC3B,QAAQ,GAAG,EAAkB;IAC7B,WAAW;IACX,cAAc;GAChB;EACD,CAAA,IAED,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,OAAO;IACP,SAAS;IACT,eAAe;IACf,KAAK;IACL,QAAQ;IACR,aAAa;IACb,iBAAiB;IACjB,WAAW;GACb;aAEA,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,KAAK;KACL,QAAQ;KACR,aAAa;IACf;cAEA,kBAAC,GAAD;KACE,SAAQ;KACR,IAAI;MACF,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO;KACT;eAEC;IACS,CAAA;GACT,CAAA;EACF,CAAA;CAGkE,CAAA;AAC3E,GAEM,KAA0B,EAC9B,QACA,eAAY,gBACZ,eAAY,WACZ,YACkD;CAClD,IAAM,IAAW,EAA8B,CAAG,GAY5C,EAAE,MAAM,GAAmB,iBAC/B,EAAwB;EAVxB,UACE;EAEF,cAAc;EACd;EACA,OAAO,EACL,OACF;CAGwB,CAAkB,GAEtC,IAAW,GAAmB,YAAa,aAAa,QAAQ,CAAC,GAQjE,IAAgB,EAAA,YAEpB,CACF,GAEM,IAA2B,EAAA,oBAE/B,CACF,GAEM,IAAkB,EAAA,WAEtB,CACF;CAEA,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,SAAS;IAAE,IAAI;IAAQ,IAAI;GAAY;GACvC,qBACE,MAAc,aACV,EAAE,IAAI,MAAM,IACZ;IAAE,IAAI;IAAO,IAAI;GAAU;GACjC,KAAK;GACL,WAAW,MAAc,aAAa,WAAW;GACjD,GAAG;EACL;YAXF,CAaG,MAAc,YACb,kBAAC,GAAD;GACE,OAAO;GACP,IAAI,EAAE,IAAI;IAAE,UAAU;IAAQ,YAAY;IAAQ,OAAO;GAAO,EAAE;EACnE,CAAA,IAED,kBAAC,GAAD;GACE,SAAQ;GACR,IAAI;IAAE,UAAU;IAAQ,OAAO;GAAW;aAEzC;EACS,CAAA,GAEd,kBAAC,GAAD;GACE,KAAI,OAAU;IACZ,SAAS;IACT,UAAU;IACV,KAAK;IACL,MAAM;IACN,gBAAgB,MAAc,aAAa,WAAW;KACrD,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,gBAAgB,SAClB;GACF;aAEC,GAAU,KAAK,GAAS,MACvB,kBAAC,GAAD;IAEW;IACM;IACW;IACT;IACP;IACC;GACZ,GAPM,WAAW,GAOjB,CACF;EACE,CAAA,CACF;;AAET"}

package/dist/components/PortalHomePageHeader/PortalHomePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalHomePageHeader.js","names":[],"sources":["../../../src/components/PortalHomePageHeader/PortalHomePageHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Typography, Button } from '@mui/material'\n\nexport type PortalHomePageHeaderProps = {\n  backgroundCss: string // background of entire header\n  buttonLink?: string\n  title: React.ReactNode\n  subTitle?: React.ReactNode\n  description: React.ReactNode\n  backgroundMp4?: string\n  backgroundMp4Css?: string // while video is loading, what should the background color be?\n  textAreaWidth?: string // default is 746px.  used for md and up screen sizes\n}\n\nconst PortalHomePageHeader = ({\n  backgroundCss,\n  buttonLink,\n  title,\n  subTitle,\n  description,\n  backgroundMp4,\n  backgroundMp4Css,\n  textAreaWidth = '746px',\n}: PortalHomePageHeaderProps): React.ReactNode => {\n  return (\n    <Box\n      data-testid=\"HeaderContainer\"\n      sx={{\n        background: backgroundCss,\n        padding: { xs: 0, md: '50px 80px' },\n        position: 'relative',\n      }}\n    >\n      {backgroundMp4 && (\n        <Box\n          component=\"video\"\n          autoPlay\n          loop\n          muted\n          playsInline\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            objectFit: 'fill',\n            zIndex: -1,\n            background: backgroundMp4Css,\n          }}\n        >\n          <source src={backgroundMp4} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </Box>\n      )}\n      <Stack\n        sx={{\n          alignItems: 'flex-start',\n          padding: { xs: '40px', md: '40px 0' },\n          gap: '24px',\n          width: { sm: '100%', md: textAreaWidth },\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{\n            fontWeight: 300,\n            lineHeight: '130%',\n            fontSize: { xs: '36px', md: '42px' },\n            color: 'grey.1000',\n          }}\n        >\n          {title}\n        </Typography>\n        {subTitle && (\n          <Typography\n            variant=\"headline3\"\n            sx={{\n              fontSize: '24px',\n              fontWeight: '400',\n              lineHeight: '160%',\n              color: 'grey.1000',\n            }}\n          >\n            {subTitle}\n          </Typography>\n        )}\n        <Typography\n          sx={{ fontSize: '18px', lineHeight: '140%', color: 'grey.900' }}\n        >\n          {description}\n        </Typography>\n        {buttonLink && (\n          <Button\n            href={buttonLink}\n            target=\"_blank\"\n            variant=\"contained\"\n            role=\"button\"\n            sx={theme => ({\n              whiteSpace: 'nowrap',\n              alignSelf: 'flex-start',\n              padding: '6px 24px',\n              fontWeight: 600,\n              boxShadow:\n                '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              '&:hover': {\n                boxShadow:\n                  '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              },\n              [theme.breakpoints.down('sm')]: {\n                width: '100%',\n              },\n            })}\n          >\n            Learn more\n          </Button>\n        )}\n      </Stack>\n    </Box>\n  )\n}\n\nexport default PortalHomePageHeader\n"],"mappings":";;;;AAcA,IAAM,KAAwB,EAC5B,kBACA,eACA,UACA,aACA,gBACA,kBACA,qBACA,mBAAgB,cAGd,kBAAC,GAAD;CACE,eAAY;CACZ,IAAI;EACF,YAAY;EACZ,SAAS;GAAE,IAAI;GAAG,IAAI;GAAa;EACnC,UAAU;EACX;WANH,CAQG,KACC,kBAAC,GAAD;EACE,WAAU;EACV,UAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,YAAY;GACb;YAfH,CAiBE,kBAAC,UAAD;GAAQ,KAAK;GAAe,MAAK;GAAc,CAAA,EAAA,+CAE3C;KAER,kBAAC,GAAD;EACE,IAAI;GACF,YAAY;GACZ,SAAS;IAAE,IAAI;IAAQ,IAAI;IAAU;GACrC,KAAK;GACL,OAAO;IAAE,IAAI;IAAQ,IAAI;IAAe;GACzC;YANH;GAQE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,YAAY;KACZ,YAAY;KACZ,UAAU;MAAE,IAAI;MAAQ,IAAI;MAAQ;KACpC,OAAO;KACR;cAEA;IACU,CAAA;GACZ,KACC,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,YAAY;KACZ,YAAY;KACZ,OAAO;KACR;cAEA;IACU,CAAA;GAEf,kBAAC,GAAD;IACE,IAAI;KAAE,UAAU;KAAQ,YAAY;KAAQ,OAAO;KAAY;cAE9D;IACU,CAAA;GACZ,KACC,kBAAC,GAAD;IACE,MAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,KAAI,OAAU;KACZ,YAAY;KACZ,WAAW;KACX,SAAS;KACT,YAAY;KACZ,WACE;KACF,WAAW,EACT,WACE,mHACH;MACA,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,OAAO,QACR;KACF;cACF;IAEQ,CAAA;GAEL;IACJ"}
+{"version":3,"file":"PortalHomePageHeader.js","names":[],"sources":["../../../src/components/PortalHomePageHeader/PortalHomePageHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Typography, Button } from '@mui/material'\n\nexport type PortalHomePageHeaderProps = {\n  backgroundCss: string // background of entire header\n  buttonLink?: string\n  title: React.ReactNode\n  subTitle?: React.ReactNode\n  description: React.ReactNode\n  backgroundMp4?: string\n  backgroundMp4Css?: string // while video is loading, what should the background color be?\n  textAreaWidth?: string // default is 746px.  used for md and up screen sizes\n}\n\nconst PortalHomePageHeader = ({\n  backgroundCss,\n  buttonLink,\n  title,\n  subTitle,\n  description,\n  backgroundMp4,\n  backgroundMp4Css,\n  textAreaWidth = '746px',\n}: PortalHomePageHeaderProps): React.ReactNode => {\n  return (\n    <Box\n      data-testid=\"HeaderContainer\"\n      sx={{\n        background: backgroundCss,\n        padding: { xs: 0, md: '50px 80px' },\n        position: 'relative',\n      }}\n    >\n      {backgroundMp4 && (\n        <Box\n          component=\"video\"\n          autoPlay\n          loop\n          muted\n          playsInline\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            objectFit: 'fill',\n            zIndex: -1,\n            background: backgroundMp4Css,\n          }}\n        >\n          <source src={backgroundMp4} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </Box>\n      )}\n      <Stack\n        sx={{\n          alignItems: 'flex-start',\n          padding: { xs: '40px', md: '40px 0' },\n          gap: '24px',\n          width: { sm: '100%', md: textAreaWidth },\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{\n            fontWeight: 300,\n            lineHeight: '130%',\n            fontSize: { xs: '36px', md: '42px' },\n            color: 'grey.1000',\n          }}\n        >\n          {title}\n        </Typography>\n        {subTitle && (\n          <Typography\n            variant=\"headline3\"\n            sx={{\n              fontSize: '24px',\n              fontWeight: '400',\n              lineHeight: '160%',\n              color: 'grey.1000',\n            }}\n          >\n            {subTitle}\n          </Typography>\n        )}\n        <Typography\n          sx={{ fontSize: '18px', lineHeight: '140%', color: 'grey.900' }}\n        >\n          {description}\n        </Typography>\n        {buttonLink && (\n          <Button\n            href={buttonLink}\n            target=\"_blank\"\n            variant=\"contained\"\n            role=\"button\"\n            sx={theme => ({\n              whiteSpace: 'nowrap',\n              alignSelf: 'flex-start',\n              padding: '6px 24px',\n              fontWeight: 600,\n              boxShadow:\n                '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              '&:hover': {\n                boxShadow:\n                  '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              },\n              [theme.breakpoints.down('sm')]: {\n                width: '100%',\n              },\n            })}\n          >\n            Learn more\n          </Button>\n        )}\n      </Stack>\n    </Box>\n  )\n}\n\nexport default PortalHomePageHeader\n"],"mappings":";;;;AAcA,IAAM,KAAwB,EAC5B,kBACA,eACA,UACA,aACA,gBACA,kBACA,qBACA,mBAAgB,cAGd,kBAAC,GAAD;CACE,eAAY;CACZ,IAAI;EACF,YAAY;EACZ,SAAS;GAAE,IAAI;GAAG,IAAI;EAAY;EAClC,UAAU;CACZ;WANF,CAQG,KACC,kBAAC,GAAD;EACE,WAAU;EACV,UAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,YAAY;EACd;YAfF,CAiBE,kBAAC,UAAD;GAAQ,KAAK;GAAe,MAAK;EAAa,CAAA,GAAC,8CAE5C;KAEP,kBAAC,GAAD;EACE,IAAI;GACF,YAAY;GACZ,SAAS;IAAE,IAAI;IAAQ,IAAI;GAAS;GACpC,KAAK;GACL,OAAO;IAAE,IAAI;IAAQ,IAAI;GAAc;EACzC;YANF;GAQE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,YAAY;KACZ,YAAY;KACZ,UAAU;MAAE,IAAI;MAAQ,IAAI;KAAO;KACnC,OAAO;IACT;cAEC;GACS,CAAA;GACX,KACC,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,YAAY;KACZ,YAAY;KACZ,OAAO;IACT;cAEC;GACS,CAAA;GAEd,kBAAC,GAAD;IACE,IAAI;KAAE,UAAU;KAAQ,YAAY;KAAQ,OAAO;IAAW;cAE7D;GACS,CAAA;GACX,KACC,kBAAC,GAAD;IACE,MAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,KAAI,OAAU;KACZ,YAAY;KACZ,WAAW;KACX,SAAS;KACT,YAAY;KACZ,WACE;KACF,WAAW,EACT,WACE,kHACJ;MACC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,OAAO,OACT;IACF;cACD;GAEO,CAAA;EAEL;GACJ"}

package/dist/components/PortalList/CreatePortalModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePortalModal.js","names":[],"sources":["../../../src/components/PortalList/CreatePortalModal.tsx"],"sourcesContent":["import { useCreatePortal } from '@/synapse-queries/portal/usePortal'\nimport { Alert, Stack } from '@mui/material'\nimport { Portal } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { KeyboardEvent, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { displayToast } from '../ToastMessage'\nimport TextField from '../TextField/TextField'\n\nexport type CreatePortalModalProps = {\n  open: boolean\n  onClose: () => void\n  onSuccess?: (portal: Portal) => void\n}\n\nexport function CreatePortalModal({\n  open,\n  onClose,\n  onSuccess,\n}: CreatePortalModalProps): React.ReactNode {\n  const [portalName, setPortalName] = useState<string>('')\n  const [portalUrl, setPortalUrl] = useState<string>('')\n  const [errorMessage, setErrorMessage] = useState<string>()\n\n  const { mutate: createPortal, isPending } = useCreatePortal({\n    onSuccess: portal => {\n      displayToast('Portal created successfully', 'success')\n      handleClose()\n      onSuccess?.(portal)\n    },\n    onError: (error: SynapseClientError) => {\n      setErrorMessage(error.reason || error.message)\n    },\n  })\n\n  const handleClose = () => {\n    setPortalName('')\n    setPortalUrl('')\n    setErrorMessage(undefined)\n    onClose()\n  }\n\n  const handleCreate = () => {\n    if (!portalName.trim()) {\n      setErrorMessage('Portal name is required')\n      return\n    }\n    if (!portalUrl.trim()) {\n      setErrorMessage('Portal URL is required')\n      return\n    }\n\n    const newPortal: Portal = {\n      name: portalName.trim(),\n      url: portalUrl.trim(),\n    }\n\n    createPortal(newPortal)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter' && portalName.trim() && portalUrl.trim()) {\n      handleCreate()\n    }\n  }\n\n  const dialogContent = (\n    <Stack gap={2}>\n      <TextField\n        id=\"portalNameInput\"\n        label=\"Portal Name\"\n        value={portalName}\n        fullWidth\n        required\n        onChange={event => {\n          setPortalName(event.target.value)\n          setErrorMessage(undefined)\n        }}\n        inputProps={{\n          onKeyDown: handleKeyDown,\n        }}\n      />\n      <TextField\n        id=\"portalUrlInput\"\n        label=\"Portal URL\"\n        value={portalUrl}\n        fullWidth\n        required\n        placeholder=\"https://example.synapse.org\"\n        onChange={event => {\n          setPortalUrl(event.target.value)\n          setErrorMessage(undefined)\n        }}\n        inputProps={{\n          onKeyDown: handleKeyDown,\n        }}\n      />\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n    </Stack>\n  )\n\n  return (\n    <ConfirmationDialog\n      open={open}\n      title=\"Create a New Portal\"\n      content={dialogContent}\n      confirmButtonProps={{\n        children: 'Create',\n        disabled: isPending || !portalName.trim() || !portalUrl.trim(),\n      }}\n      onConfirm={handleCreate}\n      onCancel={handleClose}\n      maxWidth=\"sm\"\n    />\n  )\n}\n\nexport default CreatePortalModal\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAkB,EAChC,SACA,YACA,gBAC0C;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAiB,GAAG,EAClD,CAAC,GAAW,KAAgB,EAAiB,GAAG,EAChD,CAAC,GAAc,KAAmB,GAAkB,EAEpD,EAAE,QAAQ,GAAc,iBAAc,EAAgB;EAC1D,YAAW,MAAU;AAGnB,GAFA,EAAa,+BAA+B,UAAU,EACtD,GAAa,EACb,IAAY,EAAO;;EAErB,UAAU,MAA8B;AACtC,KAAgB,EAAM,UAAU,EAAM,QAAQ;;EAEjD,CAAC,EAEI,UAAoB;AAIxB,EAHA,EAAc,GAAG,EACjB,EAAa,GAAG,EAChB,EAAgB,KAAA,EAAU,EAC1B,GAAS;IAGL,UAAqB;AACzB,MAAI,CAAC,EAAW,MAAM,EAAE;AACtB,KAAgB,0BAA0B;AAC1C;;AAEF,MAAI,CAAC,EAAU,MAAM,EAAE;AACrB,KAAgB,yBAAyB;AACzC;;AAQF,IAAa;GAJX,MAAM,EAAW,MAAM;GACvB,KAAK,EAAU,MAAM;GAGV,CAAU;IAGnB,KAAiB,MAA2C;AAChE,EAAI,EAAM,QAAQ,WAAW,EAAW,MAAM,IAAI,EAAU,MAAM,IAChE,GAAc;;AAuClB,QACE,kBAAC,GAAD;EACQ;EACN,OAAM;EACN,SAtCF,kBAAC,GAAD;GAAO,KAAK;aAAZ;IACE,kBAAC,GAAD;KACE,IAAG;KACH,OAAM;KACN,OAAO;KACP,WAAA;KACA,UAAA;KACA,WAAU,MAAS;AAEjB,MADA,EAAc,EAAM,OAAO,MAAM,EACjC,EAAgB,KAAA,EAAU;;KAE5B,YAAY,EACV,WAAW,GACZ;KACD,CAAA;IACF,kBAAC,GAAD;KACE,IAAG;KACH,OAAM;KACN,OAAO;KACP,WAAA;KACA,UAAA;KACA,aAAY;KACZ,WAAU,MAAS;AAEjB,MADA,EAAa,EAAM,OAAO,MAAM,EAChC,EAAgB,KAAA,EAAU;;KAE5B,YAAY,EACV,WAAW,GACZ;KACD,CAAA;IACD,KAAgB,kBAAC,GAAD;KAAO,UAAS;eAAS;KAAqB,CAAA;IACzD;IAOG;EACT,oBAAoB;GAClB,UAAU;GACV,UAAU,KAAa,CAAC,EAAW,MAAM,IAAI,CAAC,EAAU,MAAM;GAC/D;EACD,WAAW;EACX,UAAU;EACV,UAAS;EACT,CAAA"}
+{"version":3,"file":"CreatePortalModal.js","names":[],"sources":["../../../src/components/PortalList/CreatePortalModal.tsx"],"sourcesContent":["import { useCreatePortal } from '@/synapse-queries/portal/usePortal'\nimport { Alert, Stack } from '@mui/material'\nimport { Portal } from '@sage-bionetworks/synapse-client'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { KeyboardEvent, useState } from 'react'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { displayToast } from '../ToastMessage'\nimport TextField from '../TextField/TextField'\n\nexport type CreatePortalModalProps = {\n  open: boolean\n  onClose: () => void\n  onSuccess?: (portal: Portal) => void\n}\n\nexport function CreatePortalModal({\n  open,\n  onClose,\n  onSuccess,\n}: CreatePortalModalProps): React.ReactNode {\n  const [portalName, setPortalName] = useState<string>('')\n  const [portalUrl, setPortalUrl] = useState<string>('')\n  const [errorMessage, setErrorMessage] = useState<string>()\n\n  const { mutate: createPortal, isPending } = useCreatePortal({\n    onSuccess: portal => {\n      displayToast('Portal created successfully', 'success')\n      handleClose()\n      onSuccess?.(portal)\n    },\n    onError: (error: SynapseClientError) => {\n      setErrorMessage(error.reason || error.message)\n    },\n  })\n\n  const handleClose = () => {\n    setPortalName('')\n    setPortalUrl('')\n    setErrorMessage(undefined)\n    onClose()\n  }\n\n  const handleCreate = () => {\n    if (!portalName.trim()) {\n      setErrorMessage('Portal name is required')\n      return\n    }\n    if (!portalUrl.trim()) {\n      setErrorMessage('Portal URL is required')\n      return\n    }\n\n    const newPortal: Portal = {\n      name: portalName.trim(),\n      url: portalUrl.trim(),\n    }\n\n    createPortal(newPortal)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter' && portalName.trim() && portalUrl.trim()) {\n      handleCreate()\n    }\n  }\n\n  const dialogContent = (\n    <Stack gap={2}>\n      <TextField\n        id=\"portalNameInput\"\n        label=\"Portal Name\"\n        value={portalName}\n        fullWidth\n        required\n        onChange={event => {\n          setPortalName(event.target.value)\n          setErrorMessage(undefined)\n        }}\n        inputProps={{\n          onKeyDown: handleKeyDown,\n        }}\n      />\n      <TextField\n        id=\"portalUrlInput\"\n        label=\"Portal URL\"\n        value={portalUrl}\n        fullWidth\n        required\n        placeholder=\"https://example.synapse.org\"\n        onChange={event => {\n          setPortalUrl(event.target.value)\n          setErrorMessage(undefined)\n        }}\n        inputProps={{\n          onKeyDown: handleKeyDown,\n        }}\n      />\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n    </Stack>\n  )\n\n  return (\n    <ConfirmationDialog\n      open={open}\n      title=\"Create a New Portal\"\n      content={dialogContent}\n      confirmButtonProps={{\n        children: 'Create',\n        disabled: isPending || !portalName.trim() || !portalUrl.trim(),\n      }}\n      onConfirm={handleCreate}\n      onCancel={handleClose}\n      maxWidth=\"sm\"\n    />\n  )\n}\n\nexport default CreatePortalModal\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAkB,EAChC,SACA,YACA,gBAC0C;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAiB,EAAE,GACjD,CAAC,GAAW,KAAgB,EAAiB,EAAE,GAC/C,CAAC,GAAc,KAAmB,EAAiB,GAEnD,EAAE,QAAQ,GAAc,iBAAc,EAAgB;EAC1D,YAAW,MAAU;GAGnB,AAFA,EAAa,+BAA+B,SAAS,GACrD,EAAY,GACZ,IAAY,CAAM;EACpB;EACA,UAAU,MAA8B;GACtC,EAAgB,EAAM,UAAU,EAAM,OAAO;EAC/C;CACF,CAAC,GAEK,UAAoB;EAIxB,AAHA,EAAc,EAAE,GAChB,EAAa,EAAE,GACf,EAAgB,KAAA,CAAS,GACzB,EAAQ;CACV,GAEM,UAAqB;EACzB,IAAI,CAAC,EAAW,KAAK,GAAG;GACtB,EAAgB,yBAAyB;GACzC;EACF;EACA,IAAI,CAAC,EAAU,KAAK,GAAG;GACrB,EAAgB,wBAAwB;GACxC;EACF;EAOA,EAAa;GAJX,MAAM,EAAW,KAAK;GACtB,KAAK,EAAU,KAAK;EAGT,CAAS;CACxB,GAEM,KAAiB,MAA2C;EAChE,AAAI,EAAM,QAAQ,WAAW,EAAW,KAAK,KAAK,EAAU,KAAK,KAC/D,EAAa;CAEjB;CAqCA,OACE,kBAAC,GAAD;EACQ;EACN,OAAM;EACN,SAtCF,kBAAC,GAAD;GAAO,KAAK;aAAZ;IACE,kBAAC,GAAD;KACE,IAAG;KACH,OAAM;KACN,OAAO;KACP,WAAA;KACA,UAAA;KACA,WAAU,MAAS;MAEjB,AADA,EAAc,EAAM,OAAO,KAAK,GAChC,EAAgB,KAAA,CAAS;KAC3B;KACA,YAAY,EACV,WAAW,EACb;IACD,CAAA;IACD,kBAAC,GAAD;KACE,IAAG;KACH,OAAM;KACN,OAAO;KACP,WAAA;KACA,UAAA;KACA,aAAY;KACZ,WAAU,MAAS;MAEjB,AADA,EAAa,EAAM,OAAO,KAAK,GAC/B,EAAgB,KAAA,CAAS;KAC3B;KACA,YAAY,EACV,WAAW,EACb;IACD,CAAA;IACA,KAAgB,kBAAC,GAAD;KAAO,UAAS;eAAS;IAAoB,CAAA;GACzD;GAOI;EACT,oBAAoB;GAClB,UAAU;GACV,UAAU,KAAa,CAAC,EAAW,KAAK,KAAK,CAAC,EAAU,KAAK;EAC/D;EACA,WAAW;EACX,UAAU;EACV,UAAS;CACV,CAAA;AAEL"}

package/dist/components/PortalList/PortalCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalCard.js","names":[],"sources":["../../../src/components/PortalList/PortalCard.tsx"],"sourcesContent":["import { Portal } from '@sage-bionetworks/synapse-client'\nimport {\n  Card,\n  CardContent,\n  Typography,\n  Box,\n  Link as MuiLink,\n  IconButton,\n} from '@mui/material'\nimport styles from './PortalCard.module.scss'\nimport UserCard from '../UserCard/UserCard'\nimport dayjs from 'dayjs'\nimport { useState } from 'react'\nimport PortalAclEditorModal from '../PortalAclEditor/PortalAclEditorModal'\nimport { Settings, Delete } from '@mui/icons-material'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { useDeletePortal } from '@/synapse-queries/portal/usePortal'\nimport { displayToast } from '../ToastMessage'\n\n// Synapse itself is portal ID 1 and should not have ACL management\nconst SYNAPSE_PORTAL_ID = '1'\n\nexport type PortalCardProps = {\n  portal: Portal\n}\n\nexport function PortalCard({ portal }: PortalCardProps): React.ReactNode {\n  const { id, name, url, createdBy, createdOn, modifiedBy, modifiedOn } = portal\n  const [isAclEditorOpen, setIsAclEditorOpen] = useState(false)\n  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)\n  const showAclEditor = id && id !== SYNAPSE_PORTAL_ID\n  const showDeleteButton = id && id !== SYNAPSE_PORTAL_ID\n\n  const { mutate: deletePortal } = useDeletePortal({\n    onSuccess: () => {\n      displayToast(`Portal \"${name}\" was successfully deleted`, 'success')\n      setIsDeleteDialogOpen(false)\n    },\n    onError: error => {\n      displayToast(`Failed to delete portal: ${error.reason}`, 'danger')\n    },\n  })\n\n  return (\n    <>\n      <Card className={styles.portalCard}>\n        <CardContent>\n          <Box className={styles.header}>\n            <Box className={styles.titleRow}>\n              <Typography variant=\"h6\" component=\"h3\">\n                {name}\n              </Typography>\n              <Box className={styles.actions}>\n                {showAclEditor && (\n                  <IconButton\n                    size=\"small\"\n                    onClick={() => setIsAclEditorOpen(true)}\n                    aria-label=\"Manage portal permissions\"\n                    title=\"Manage portal permissions\"\n                  >\n                    <Settings fontSize=\"small\" />\n                  </IconButton>\n                )}\n                {showDeleteButton && (\n                  <IconButton\n                    size=\"small\"\n                    onClick={() => setIsDeleteDialogOpen(true)}\n                    aria-label=\"Delete portal\"\n                    title=\"Delete portal\"\n                    color=\"error\"\n                  >\n                    <Delete fontSize=\"small\" />\n                  </IconButton>\n                )}\n              </Box>\n            </Box>\n            {url && (\n              <MuiLink\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={styles.url}\n              >\n                {url}\n              </MuiLink>\n            )}\n          </Box>\n\n          <Box className={styles.metadata}>\n            {id && (\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                <strong>ID:</strong> {id}\n              </Typography>\n            )}\n\n            {createdBy && (\n              <Box className={styles.userInfo}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                  <strong>Created by:</strong>\n                </Typography>\n                <UserCard\n                  ownerId={createdBy}\n                  size=\"SMALL USER CARD\"\n                  hideEmail\n                  disableLink={false}\n                />\n                {createdOn && (\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    on {dayjs(createdOn).format('MMMM D, YYYY')}\n                  </Typography>\n                )}\n              </Box>\n            )}\n\n            {modifiedBy && (\n              <Box className={styles.userInfo}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                  <strong>Last modified by:</strong>\n                </Typography>\n                <UserCard\n                  ownerId={modifiedBy}\n                  size=\"SMALL USER CARD\"\n                  hideEmail\n                  disableLink={false}\n                />\n                {modifiedOn && (\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    on {dayjs(modifiedOn).format('MMMM D, YYYY')}\n                  </Typography>\n                )}\n              </Box>\n            )}\n          </Box>\n        </CardContent>\n      </Card>\n\n      {showAclEditor && id && (\n        <PortalAclEditorModal\n          portalId={id}\n          open={isAclEditorOpen}\n          onClose={() => setIsAclEditorOpen(false)}\n        />\n      )}\n\n      {id && (\n        <ConfirmationDialog\n          open={isDeleteDialogOpen}\n          title=\"Delete Portal\"\n          content={\n            <Box>\n              <Typography variant=\"body1\" sx={{ mb: 2 }}>\n                Are you sure you want to delete this portal?\n              </Typography>\n              <Typography variant=\"body2\" sx={{ mb: 1 }}>\n                <strong>Name:</strong> {name}\n              </Typography>\n              {url && (\n                <Typography variant=\"body2\">\n                  <strong>URL:</strong> {url}\n                </Typography>\n              )}\n            </Box>\n          }\n          confirmButtonProps={{\n            children: 'Delete',\n            color: 'error',\n            variant: 'contained',\n          }}\n          onConfirm={() => {\n            if (id) {\n              deletePortal(id)\n            }\n          }}\n          onCancel={() => setIsDeleteDialogOpen(false)}\n          maxWidth=\"sm\"\n        />\n      )}\n    </>\n  )\n}\n\nexport default PortalCard\n"],"mappings":"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"}
+{"version":3,"file":"PortalCard.js","names":[],"sources":["../../../src/components/PortalList/PortalCard.tsx"],"sourcesContent":["import { Portal } from '@sage-bionetworks/synapse-client'\nimport {\n  Card,\n  CardContent,\n  Typography,\n  Box,\n  Link as MuiLink,\n  IconButton,\n} from '@mui/material'\nimport styles from './PortalCard.module.scss'\nimport UserCard from '../UserCard/UserCard'\nimport dayjs from 'dayjs'\nimport { useState } from 'react'\nimport PortalAclEditorModal from '../PortalAclEditor/PortalAclEditorModal'\nimport { Settings, Delete } from '@mui/icons-material'\nimport { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog'\nimport { useDeletePortal } from '@/synapse-queries/portal/usePortal'\nimport { displayToast } from '../ToastMessage'\n\n// Synapse itself is portal ID 1 and should not have ACL management\nconst SYNAPSE_PORTAL_ID = '1'\n\nexport type PortalCardProps = {\n  portal: Portal\n}\n\nexport function PortalCard({ portal }: PortalCardProps): React.ReactNode {\n  const { id, name, url, createdBy, createdOn, modifiedBy, modifiedOn } = portal\n  const [isAclEditorOpen, setIsAclEditorOpen] = useState(false)\n  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)\n  const showAclEditor = id && id !== SYNAPSE_PORTAL_ID\n  const showDeleteButton = id && id !== SYNAPSE_PORTAL_ID\n\n  const { mutate: deletePortal } = useDeletePortal({\n    onSuccess: () => {\n      displayToast(`Portal \"${name}\" was successfully deleted`, 'success')\n      setIsDeleteDialogOpen(false)\n    },\n    onError: error => {\n      displayToast(`Failed to delete portal: ${error.reason}`, 'danger')\n    },\n  })\n\n  return (\n    <>\n      <Card className={styles.portalCard}>\n        <CardContent>\n          <Box className={styles.header}>\n            <Box className={styles.titleRow}>\n              <Typography variant=\"h6\" component=\"h3\">\n                {name}\n              </Typography>\n              <Box className={styles.actions}>\n                {showAclEditor && (\n                  <IconButton\n                    size=\"small\"\n                    onClick={() => setIsAclEditorOpen(true)}\n                    aria-label=\"Manage portal permissions\"\n                    title=\"Manage portal permissions\"\n                  >\n                    <Settings fontSize=\"small\" />\n                  </IconButton>\n                )}\n                {showDeleteButton && (\n                  <IconButton\n                    size=\"small\"\n                    onClick={() => setIsDeleteDialogOpen(true)}\n                    aria-label=\"Delete portal\"\n                    title=\"Delete portal\"\n                    color=\"error\"\n                  >\n                    <Delete fontSize=\"small\" />\n                  </IconButton>\n                )}\n              </Box>\n            </Box>\n            {url && (\n              <MuiLink\n                href={url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={styles.url}\n              >\n                {url}\n              </MuiLink>\n            )}\n          </Box>\n\n          <Box className={styles.metadata}>\n            {id && (\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                <strong>ID:</strong> {id}\n              </Typography>\n            )}\n\n            {createdBy && (\n              <Box className={styles.userInfo}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                  <strong>Created by:</strong>\n                </Typography>\n                <UserCard\n                  ownerId={createdBy}\n                  size=\"SMALL USER CARD\"\n                  hideEmail\n                  disableLink={false}\n                />\n                {createdOn && (\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    on {dayjs(createdOn).format('MMMM D, YYYY')}\n                  </Typography>\n                )}\n              </Box>\n            )}\n\n            {modifiedBy && (\n              <Box className={styles.userInfo}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                  <strong>Last modified by:</strong>\n                </Typography>\n                <UserCard\n                  ownerId={modifiedBy}\n                  size=\"SMALL USER CARD\"\n                  hideEmail\n                  disableLink={false}\n                />\n                {modifiedOn && (\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    on {dayjs(modifiedOn).format('MMMM D, YYYY')}\n                  </Typography>\n                )}\n              </Box>\n            )}\n          </Box>\n        </CardContent>\n      </Card>\n\n      {showAclEditor && id && (\n        <PortalAclEditorModal\n          portalId={id}\n          open={isAclEditorOpen}\n          onClose={() => setIsAclEditorOpen(false)}\n        />\n      )}\n\n      {id && (\n        <ConfirmationDialog\n          open={isDeleteDialogOpen}\n          title=\"Delete Portal\"\n          content={\n            <Box>\n              <Typography variant=\"body1\" sx={{ mb: 2 }}>\n                Are you sure you want to delete this portal?\n              </Typography>\n              <Typography variant=\"body2\" sx={{ mb: 1 }}>\n                <strong>Name:</strong> {name}\n              </Typography>\n              {url && (\n                <Typography variant=\"body2\">\n                  <strong>URL:</strong> {url}\n                </Typography>\n              )}\n            </Box>\n          }\n          confirmButtonProps={{\n            children: 'Delete',\n            color: 'error',\n            variant: 'contained',\n          }}\n          onConfirm={() => {\n            if (id) {\n              deletePortal(id)\n            }\n          }}\n          onCancel={() => setIsDeleteDialogOpen(false)}\n          maxWidth=\"sm\"\n        />\n      )}\n    </>\n  )\n}\n\nexport default PortalCard\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,IAAoB;AAM1B,SAAgB,EAAW,EAAE,aAA4C;CACvE,IAAM,EAAE,OAAI,SAAM,QAAK,cAAW,cAAW,eAAY,kBAAe,GAClE,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,CAAC,GAAoB,KAAyB,EAAS,EAAK,GAC5D,IAAgB,KAAM,MAAO,GAC7B,IAAmB,KAAM,MAAO,GAEhC,EAAE,QAAQ,MAAiB,EAAgB;EAC/C,iBAAiB;GAEf,AADA,EAAa,WAAW,EAAK,6BAA6B,SAAS,GACnE,EAAsB,EAAK;EAC7B;EACA,UAAS,MAAS;GAChB,EAAa,4BAA4B,EAAM,UAAU,QAAQ;EACnE;CACF,CAAC;CAED,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,GAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD;MAAY,SAAQ;MAAK,WAAU;gBAChC;KACS,CAAA,GACZ,kBAAC,GAAD;MAAK,WAAW,EAAO;gBAAvB,CACG,KACC,kBAAC,GAAD;OACE,MAAK;OACL,eAAe,EAAmB,EAAI;OACtC,cAAW;OACX,OAAM;iBAEN,kBAAC,GAAD,EAAU,UAAS,QAAS,CAAA;MAClB,CAAA,GAEb,KACC,kBAAC,GAAD;OACE,MAAK;OACL,eAAe,EAAsB,EAAI;OACzC,cAAW;OACX,OAAM;OACN,OAAM;iBAEN,kBAAC,GAAD,EAAQ,UAAS,QAAS,CAAA;MAChB,CAAA,CAEX;OACF;QACJ,KACC,kBAAC,GAAD;KACE,MAAM;KACN,QAAO;KACP,KAAI;KACJ,WAAW,EAAO;eAEjB;IACM,CAAA,CAER;OAEL,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB;KACG,KACC,kBAAC,GAAD;MAAY,SAAQ;MAAQ,OAAM;gBAAlC;OACE,kBAAC,UAAD,EAAA,UAAQ,MAAW,CAAA;OAAC;OAAE;MACZ;;KAGb,KACC,kBAAC,GAAD;MAAK,WAAW,EAAO;gBAAvB;OACE,kBAAC,GAAD;QAAY,SAAQ;QAAQ,OAAM;kBAChC,kBAAC,UAAD,EAAA,UAAQ,cAAmB,CAAA;OACjB,CAAA;OACZ,kBAAC,GAAD;QACE,SAAS;QACT,MAAK;QACL,WAAA;QACA,aAAa;OACd,CAAA;OACA,KACC,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAApC,CAAqD,OAC/C,EAAM,CAAS,EAAE,OAAO,cAAc,CAChC;;MAEX;;KAGN,KACC,kBAAC,GAAD;MAAK,WAAW,EAAO;gBAAvB;OACE,kBAAC,GAAD;QAAY,SAAQ;QAAQ,OAAM;kBAChC,kBAAC,UAAD,EAAA,UAAQ,oBAAyB,CAAA;OACvB,CAAA;OACZ,kBAAC,GAAD;QACE,SAAS;QACT,MAAK;QACL,WAAA;QACA,aAAa;OACd,CAAA;OACA,KACC,kBAAC,GAAD;QAAY,SAAQ;QAAU,OAAM;kBAApC,CAAqD,OAC/C,EAAM,CAAU,EAAE,OAAO,cAAc,CACjC;;MAEX;;IAEJ;KACM,EAAA,CAAA;EACT,CAAA;EAEL,KAAiB,KAChB,kBAAC,GAAD;GACE,UAAU;GACV,MAAM;GACN,eAAe,EAAmB,EAAK;EACxC,CAAA;EAGF,KACC,kBAAC,GAAD;GACE,MAAM;GACN,OAAM;GACN,SACE,kBAAC,GAAD,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,IAAI,EAAE;eAAG;IAE/B,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,IAAI,EAAE;eAAxC;MACE,kBAAC,UAAD,EAAA,UAAQ,QAAa,CAAA;MAAC;MAAE;KACd;;IACX,KACC,kBAAC,GAAD;KAAY,SAAQ;eAApB;MACE,kBAAC,UAAD,EAAA,UAAQ,OAAY,CAAA;MAAC;MAAE;KACb;;GAEX,EAAA,CAAA;GAEP,oBAAoB;IAClB,UAAU;IACV,OAAO;IACP,SAAS;GACX;GACA,iBAAiB;IACf,AAAI,KACF,EAAa,CAAE;GAEnB;GACA,gBAAgB,EAAsB,EAAK;GAC3C,UAAS;EACV,CAAA;CAEH,EAAA,CAAA;AAEN"}

package/dist/components/PortalList/PortalList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalList.js","names":[],"sources":["../../../src/components/PortalList/PortalList.tsx"],"sourcesContent":["import { useListPortalsInfinite } from '@/synapse-queries/portal/useListPortals'\nimport { Box, Typography, CircularProgress, Alert, Button } from '@mui/material'\nimport { Fragment, useEffect, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport PortalCard from './PortalCard'\nimport CreatePortalModal from './CreatePortalModal'\nimport styles from './PortalList.module.scss'\nimport { Add } from '@mui/icons-material'\n\nexport function PortalList(): React.ReactNode {\n  const { ref, inView } = useInView()\n  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)\n\n  const {\n    data,\n    status,\n    error,\n    isLoading,\n    hasNextPage,\n    isFetchingNextPage,\n    fetchNextPage,\n  } = useListPortalsInfinite({\n    throwOnError: false,\n  })\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetchingNextPage &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, hasNextPage, isFetchingNextPage, fetchNextPage, inView])\n\n  const allPortals = data?.pages.flatMap(page => page.page ?? []) ?? []\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" className={styles.errorAlert}>\n        Error loading portals: {error.message}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box className={styles.portalListContainer}>\n      <Box className={styles.header}>\n        <Typography variant=\"h4\" component=\"h2\" className={styles.title}>\n          Portals\n        </Typography>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          startIcon={<Add />}\n          onClick={() => setIsCreateModalOpen(true)}\n        >\n          Create New Portal\n        </Button>\n      </Box>\n\n      {isLoading && (\n        <Box className={styles.loadingContainer}>\n          <CircularProgress />\n        </Box>\n      )}\n\n      {!isLoading && allPortals.length === 0 && (\n        <Typography variant=\"body1\" color=\"text.secondary\">\n          No portals found.\n        </Typography>\n      )}\n\n      {allPortals.length > 0 && (\n        <Box className={styles.portalGrid}>\n          {allPortals.map(portal => (\n            <Fragment key={portal.id ?? JSON.stringify(portal)}>\n              <PortalCard portal={portal} />\n            </Fragment>\n          ))}\n        </Box>\n      )}\n\n      {/* Trigger for loading next page */}\n      {hasNextPage && <div ref={ref} className={styles.loadMoreTrigger} />}\n\n      {isFetchingNextPage && (\n        <Box className={styles.loadingMoreContainer}>\n          <CircularProgress size={32} />\n        </Box>\n      )}\n\n      <CreatePortalModal\n        open={isCreateModalOpen}\n        onClose={() => setIsCreateModalOpen(false)}\n      />\n    </Box>\n  )\n}\n\nexport default PortalList\n"],"mappings":";;;;;;;;;;AASA,SAAgB,IAA8B;CAC5C,IAAM,EAAE,QAAK,cAAW,GAAW,EAC7B,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAE3D,EACJ,SACA,WACA,UACA,cACA,gBACA,uBACA,qBACE,EAAuB,EACzB,cAAc,IACf,CAAC;AAEF,SAAgB;AACd,EACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,GAAe;IAEhB;EAAC;EAAQ;EAAa;EAAoB;EAAe;EAAO,CAAC;CAEpE,IAAM,IAAa,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,EAAE,CAAC,IAAI,EAAE;AAUrE,QARI,IAEA,kBAAC,GAAD;EAAO,UAAS;EAAQ,WAAW,EAAO;YAA1C,CAAsD,2BAC5B,EAAM,QACxB;MAKV,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,GAAD;KAAY,SAAQ;KAAK,WAAU;KAAK,WAAW,EAAO;eAAO;KAEpD,CAAA,EACb,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAW,kBAAC,GAAD,EAAO,CAAA;KAClB,eAAe,EAAqB,GAAK;eAC1C;KAEQ,CAAA,CACL;;GAEL,KACC,kBAAC,GAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,GAAD,EAAoB,CAAA;IAChB,CAAA;GAGP,CAAC,KAAa,EAAW,WAAW,KACnC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;cAAiB;IAEtC,CAAA;GAGd,EAAW,SAAS,KACnB,kBAAC,GAAD;IAAK,WAAW,EAAO;cACpB,EAAW,KAAI,MACd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,WAAU,CAAA,EACrB,EAFI,EAAO,MAAM,KAAK,UAAU,EAAO,CAEvC,CACX;IACE,CAAA;GAIP,KAAe,kBAAC,OAAD;IAAU;IAAK,WAAW,EAAO;IAAmB,CAAA;GAEnE,KACC,kBAAC,GAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,GAAD,EAAkB,MAAM,IAAM,CAAA;IAC1B,CAAA;GAGR,kBAAC,GAAD;IACE,MAAM;IACN,eAAe,EAAqB,GAAM;IAC1C,CAAA;GACE"}
+{"version":3,"file":"PortalList.js","names":[],"sources":["../../../src/components/PortalList/PortalList.tsx"],"sourcesContent":["import { useListPortalsInfinite } from '@/synapse-queries/portal/useListPortals'\nimport { Box, Typography, CircularProgress, Alert, Button } from '@mui/material'\nimport { Fragment, useEffect, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport PortalCard from './PortalCard'\nimport CreatePortalModal from './CreatePortalModal'\nimport styles from './PortalList.module.scss'\nimport { Add } from '@mui/icons-material'\n\nexport function PortalList(): React.ReactNode {\n  const { ref, inView } = useInView()\n  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)\n\n  const {\n    data,\n    status,\n    error,\n    isLoading,\n    hasNextPage,\n    isFetchingNextPage,\n    fetchNextPage,\n  } = useListPortalsInfinite({\n    throwOnError: false,\n  })\n\n  useEffect(() => {\n    if (\n      status === 'success' &&\n      !isFetchingNextPage &&\n      hasNextPage &&\n      fetchNextPage &&\n      inView\n    ) {\n      fetchNextPage()\n    }\n  }, [status, hasNextPage, isFetchingNextPage, fetchNextPage, inView])\n\n  const allPortals = data?.pages.flatMap(page => page.page ?? []) ?? []\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" className={styles.errorAlert}>\n        Error loading portals: {error.message}\n      </Alert>\n    )\n  }\n\n  return (\n    <Box className={styles.portalListContainer}>\n      <Box className={styles.header}>\n        <Typography variant=\"h4\" component=\"h2\" className={styles.title}>\n          Portals\n        </Typography>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          startIcon={<Add />}\n          onClick={() => setIsCreateModalOpen(true)}\n        >\n          Create New Portal\n        </Button>\n      </Box>\n\n      {isLoading && (\n        <Box className={styles.loadingContainer}>\n          <CircularProgress />\n        </Box>\n      )}\n\n      {!isLoading && allPortals.length === 0 && (\n        <Typography variant=\"body1\" color=\"text.secondary\">\n          No portals found.\n        </Typography>\n      )}\n\n      {allPortals.length > 0 && (\n        <Box className={styles.portalGrid}>\n          {allPortals.map(portal => (\n            <Fragment key={portal.id ?? JSON.stringify(portal)}>\n              <PortalCard portal={portal} />\n            </Fragment>\n          ))}\n        </Box>\n      )}\n\n      {/* Trigger for loading next page */}\n      {hasNextPage && <div ref={ref} className={styles.loadMoreTrigger} />}\n\n      {isFetchingNextPage && (\n        <Box className={styles.loadingMoreContainer}>\n          <CircularProgress size={32} />\n        </Box>\n      )}\n\n      <CreatePortalModal\n        open={isCreateModalOpen}\n        onClose={() => setIsCreateModalOpen(false)}\n      />\n    </Box>\n  )\n}\n\nexport default PortalList\n"],"mappings":";;;;;;;;;;AASA,SAAgB,IAA8B;CAC5C,IAAM,EAAE,QAAK,cAAW,EAAU,GAC5B,CAAC,GAAmB,KAAwB,EAAS,EAAK,GAE1D,EACJ,SACA,WACA,UACA,cACA,gBACA,uBACA,qBACE,EAAuB,EACzB,cAAc,GAChB,CAAC;CAED,QAAgB;EACd,AACE,MAAW,aACX,CAAC,KACD,KACA,KACA,KAEA,EAAc;CAElB,GAAG;EAAC;EAAQ;EAAa;EAAoB;EAAe;CAAM,CAAC;CAEnE,IAAM,IAAa,GAAM,MAAM,SAAQ,MAAQ,EAAK,QAAQ,CAAC,CAAC,KAAK,CAAC;CAUpE,OARI,IAEA,kBAAC,GAAD;EAAO,UAAS;EAAQ,WAAW,EAAO;YAA1C,CAAsD,2BAC5B,EAAM,OACzB;MAKT,kBAAC,GAAD;EAAK,WAAW,EAAO;YAAvB;GACE,kBAAC,GAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,GAAD;KAAY,SAAQ;KAAK,WAAU;KAAK,WAAW,EAAO;eAAO;IAErD,CAAA,GACZ,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,WAAW,kBAAC,GAAD,CAAM,CAAA;KACjB,eAAe,EAAqB,EAAI;eACzC;IAEO,CAAA,CACL;;GAEJ,KACC,kBAAC,GAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,GAAD,CAAmB,CAAA;GAChB,CAAA;GAGN,CAAC,KAAa,EAAW,WAAW,KACnC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;cAAiB;GAEvC,CAAA;GAGb,EAAW,SAAS,KACnB,kBAAC,GAAD;IAAK,WAAW,EAAO;cACpB,EAAW,KAAI,MACd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,UAAS,CAAA,EACrB,GAFK,EAAO,MAAM,KAAK,UAAU,CAAM,CAEvC,CACX;GACE,CAAA;GAIN,KAAe,kBAAC,OAAD;IAAU;IAAK,WAAW,EAAO;GAAkB,CAAA;GAElE,KACC,kBAAC,GAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,GAAD,EAAkB,MAAM,GAAK,CAAA;GAC1B,CAAA;GAGP,kBAAC,GAAD;IACE,MAAM;IACN,eAAe,EAAqB,EAAK;GAC1C,CAAA;EACE;;AAET"}