synapse-react-client 4.0.6 → 4.0.7

package/dist/components/DataGrid/hooks/useRemoteSelections.d.ts

@@ -0,0 +1,16 @@
+import type { GridModel, GridModelSnapshot } from '../DataGridTypes';
+import type { GridReplicaInfo } from '@sage-bionetworks/synapse-client';
+import { type GridSelectionRange } from '../utils/replicaSelectionToGridSelection';
+export interface RemoteSelection {
+    replicaId: number;
+    range: GridSelectionRange;
+    /** 0-7 color index, derived from replicaId for a stable per-session color. */
+    colorIndex: number;
+}
+/**
+ * Derives remote replica selection ranges from the CRDT model's selection map.
+ * The server mirrors each replica's selection into the model under
+ * `snapshot.selection[replicaId]`, so no extra API calls are needed.
+ */
+export declare function useRemoteSelections(modelSnapshot: GridModelSnapshot | null | undefined, model: GridModel | null | undefined, replicas: GridReplicaInfo[], localReplicaId: number | null): RemoteSelection[];
+//# sourceMappingURL=useRemoteSelections.d.ts.map

package/dist/components/DataGrid/hooks/useRemoteSelections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRemoteSelections.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/hooks/useRemoteSelections.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,iBAAiB,EAElB,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AACvE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,0CAA0C,CAAA;AAEjD,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,kBAAkB,CAAA;IACzB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,EACnD,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EACnC,QAAQ,EAAE,eAAe,EAAE,EAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,GAC5B,eAAe,EAAE,CAqCnB"}

package/dist/components/DataGrid/hooks/useRemoteSelections.js

@@ -0,0 +1,30 @@
+import { useMemo as l } from "react";
+import { replicaSelectionToGridSelection as p } from "../utils/replicaSelectionToGridSelection.js";
+function M(n, t, r, o) {
+  return l(() => {
+    if (!n || !t) return [];
+    const c = n.selection;
+    if (!c) return [];
+    const u = [];
+    for (const i of r) {
+      const e = i.replicaId;
+      if (e == null || e === o || !i.isConnected || i.replicaType === "SERVICE") continue;
+      const s = c[String(e)];
+      if (s)
+        try {
+          const f = p(s, t);
+          f && u.push({
+            replicaId: e,
+            range: f,
+            colorIndex: e % 8
+          });
+        } catch {
+        }
+    }
+    return u;
+  }, [n, t, r, o]);
+}
+export {
+  M as useRemoteSelections
+};
+//# sourceMappingURL=useRemoteSelections.js.map

package/dist/components/DataGrid/hooks/useRemoteSelections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRemoteSelections.js","sources":["../../../../src/components/DataGrid/hooks/useRemoteSelections.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type {\n  GridModel,\n  GridModelSnapshot,\n  ReplicaSelectionModel,\n} from '../DataGridTypes'\nimport type { GridReplicaInfo } from '@sage-bionetworks/synapse-client'\nimport {\n  replicaSelectionToGridSelection,\n  type GridSelectionRange,\n} from '../utils/replicaSelectionToGridSelection'\n\nexport interface RemoteSelection {\n  replicaId: number\n  range: GridSelectionRange\n  /** 0-7 color index, derived from replicaId for a stable per-session color. */\n  colorIndex: number\n}\n\n/**\n * Derives remote replica selection ranges from the CRDT model's selection map.\n * The server mirrors each replica's selection into the model under\n * `snapshot.selection[replicaId]`, so no extra API calls are needed.\n */\nexport function useRemoteSelections(\n  modelSnapshot: GridModelSnapshot | null | undefined,\n  model: GridModel | null | undefined,\n  replicas: GridReplicaInfo[],\n  localReplicaId: number | null,\n): RemoteSelection[] {\n  return useMemo(() => {\n    if (!modelSnapshot || !model) return []\n\n    const selectionMap = modelSnapshot.selection as Record<\n      string,\n      ReplicaSelectionModel\n    >\n    if (!selectionMap) return []\n\n    const results: RemoteSelection[] = []\n\n    for (const replica of replicas) {\n      const rid = replica.replicaId\n      if (rid == null || rid === localReplicaId) continue\n      if (!replica.isConnected) continue\n      if (replica.replicaType === 'SERVICE') continue\n\n      const selectionModel = selectionMap[String(rid)]\n      if (!selectionModel) continue\n\n      try {\n        const range = replicaSelectionToGridSelection(selectionModel, model)\n        if (range) {\n          results.push({\n            replicaId: rid,\n            range,\n            colorIndex: rid % 8,\n          })\n        }\n      } catch {\n        // Ignore stale/malformed selection data for a replica\n      }\n    }\n\n    return results\n  }, [modelSnapshot, model, replicas, localReplicaId])\n}\n"],"names":["useRemoteSelections","modelSnapshot","model","replicas","localReplicaId","useMemo","selectionMap","results","replica","rid","selectionModel","range","replicaSelectionToGridSelection"],"mappings":";;AAwBO,SAASA,EACdC,GACAC,GACAC,GACAC,GACmB;AACnB,SAAOC,EAAQ,MAAM;AACnB,QAAI,CAACJ,KAAiB,CAACC,UAAc,CAAA;AAErC,UAAMI,IAAeL,EAAc;AAInC,QAAI,CAACK,EAAc,QAAO,CAAA;AAE1B,UAAMC,IAA6B,CAAA;AAEnC,eAAWC,KAAWL,GAAU;AAC9B,YAAMM,IAAMD,EAAQ;AAGpB,UAFIC,KAAO,QAAQA,MAAQL,KACvB,CAACI,EAAQ,eACTA,EAAQ,gBAAgB,UAAW;AAEvC,YAAME,IAAiBJ,EAAa,OAAOG,CAAG,CAAC;AAC/C,UAAKC;AAEL,YAAI;AACF,gBAAMC,IAAQC,EAAgCF,GAAgBR,CAAK;AACnE,UAAIS,KACFJ,EAAQ,KAAK;AAAA,YACX,WAAWE;AAAA,YACX,OAAAE;AAAA,YACA,YAAYF,IAAM;AAAA,UAAA,CACnB;AAAA,QAEL,QAAQ;AAAA,QAER;AAAA,IACF;AAEA,WAAOF;AAAA,EACT,GAAG,CAACN,GAAeC,GAAOC,GAAUC,CAAc,CAAC;AACrD;"}

package/dist/components/DataGrid/utils/getCellClassName.d.ts

@@ -1,6 +1,7 @@
 import { DataGridRow } from '../DataGridTypes';
 import { SelectionWithId } from '@sage-bionetworks/react-datasheet-grid';
 import { Column } from '@sage-bionetworks/react-datasheet-grid';
+import type { RemoteSelection } from '../hooks/useRemoteSelections';
 export declare function getCellClassName(params: {
     rowData: DataGridRow;
     rowIndex: number;
@@ -8,5 +9,7 @@ export declare function getCellClassName(params: {
     selectedRowIndex: number | null;
     lastSelection?: SelectionWithId | null;
     colValues?: Column[];
+    /** Remote replica selection ranges to visualise as tinted backgrounds. */
+    remoteSelections?: readonly RemoteSelection[];
 }): string | undefined;
 //# sourceMappingURL=getCellClassName.d.ts.map

package/dist/components/DataGrid/utils/getCellClassName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getCellClassName.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/utils/getCellClassName.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAA;AAE/D,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IACvC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CACrB,GAAG,MAAM,GAAG,SAAS,CAyCrB"}
+{"version":3,"file":"getCellClassName.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/utils/getCellClassName.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAA;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAEnE,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IACvC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;CAC9C,GAAG,MAAM,GAAG,SAAS,CAsDrB"}

package/dist/components/DataGrid/utils/getCellClassName.js

@@ -1,18 +1,27 @@
-import u from "classnames";
-function I(a) {
+import I from "classnames";
+function R(r) {
   const {
-    rowData: d,
-    rowIndex: i,
+    rowData: m,
+    rowIndex: s,
     columnId: e,
-    selectedRowIndex: r,
-    lastSelection: l,
-    colValues: n
-  } = a, f = r === i, o = d.__cellValidationResults, m = o && e && o.has(e), s = [];
-  f && s.push("cell-row-selected");
-  let c = !1;
-  return l && e && n && (c = i >= l.min.row && i <= l.max.row && n.findIndex((t) => t.id === e) >= l.min.col && n.findIndex((t) => t.id === e) <= l.max.col, c && s.push("cell-selected")), m && s.push("cell-invalid"), s.length ? u(s) : void 0;
+    selectedRowIndex: f,
+    lastSelection: n,
+    colValues: t,
+    remoteSelections: c
+  } = r, u = f === s, i = m.__cellValidationResults, x = i && e && i.has(e), l = [];
+  u && l.push("cell-row-selected");
+  let a = !1;
+  if (n && e && t && (a = s >= n.min.row && s <= n.max.row && t.findIndex((o) => o.id === e) >= n.min.col && t.findIndex((o) => o.id === e) <= n.max.col, a && l.push("cell-selected")), x && l.push("cell-invalid"), c && e)
+    for (const o of c) {
+      const { minRow: h, maxRow: w, columnNames: d } = o.range;
+      if (!(s < h || s > w) && !(d !== void 0 && !d.has(e))) {
+        l.push("cell-remote-selected"), l.push(`cell-remote-selected--color-${o.colorIndex}`);
+        break;
+      }
+    }
+  return l.length ? I(l) : void 0;
 }
 export {
-  I as getCellClassName
+  R as getCellClassName
 };
 //# sourceMappingURL=getCellClassName.js.map

package/dist/components/DataGrid/utils/getCellClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCellClassName.js","sources":["../../../../src/components/DataGrid/utils/getCellClassName.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { DataGridRow } from '../DataGridTypes'\nimport { SelectionWithId } from '@sage-bionetworks/react-datasheet-grid'\nimport { Column } from '@sage-bionetworks/react-datasheet-grid'\n\nexport function getCellClassName(params: {\n  rowData: DataGridRow\n  rowIndex: number\n  columnId?: string\n  selectedRowIndex: number | null\n  lastSelection?: SelectionWithId | null\n  colValues?: Column[]\n}): string | undefined {\n  const {\n    rowData,\n    rowIndex,\n    columnId,\n    selectedRowIndex,\n    lastSelection,\n    colValues,\n  } = params\n\n  const isSelected = selectedRowIndex === rowIndex\n  const cellValidationResults = rowData.__cellValidationResults\n  const isInvalid =\n    cellValidationResults && columnId && cellValidationResults.has(columnId)\n\n  const classList: string[] = []\n\n  if (isSelected) {\n    classList.push('cell-row-selected')\n  }\n\n  // Add selection styling based on lastSelection\n  let isInSelection = false\n  if (lastSelection && columnId && colValues) {\n    isInSelection =\n      rowIndex >= lastSelection.min.row &&\n      rowIndex <= lastSelection.max.row &&\n      colValues.findIndex(col => col.id === columnId) >=\n        lastSelection.min.col &&\n      colValues.findIndex(col => col.id === columnId) <= lastSelection.max.col\n\n    if (isInSelection) {\n      classList.push('cell-selected')\n    }\n  }\n\n  if (isInvalid) {\n    classList.push('cell-invalid')\n  }\n\n  return classList.length ? classNames(classList) : undefined\n}\n"],"names":["getCellClassName","params","rowData","rowIndex","columnId","selectedRowIndex","lastSelection","colValues","isSelected","cellValidationResults","isInvalid","classList","isInSelection","col","classNames"],"mappings":";AAKO,SAASA,EAAiBC,GAOV;AACrB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACEN,GAEEO,IAAaH,MAAqBF,GAClCM,IAAwBP,EAAQ,yBAChCQ,IACJD,KAAyBL,KAAYK,EAAsB,IAAIL,CAAQ,GAEnEO,IAAsB,CAAA;AAE5B,EAAIH,KACFG,EAAU,KAAK,mBAAmB;AAIpC,MAAIC,IAAgB;AACpB,SAAIN,KAAiBF,KAAYG,MAC/BK,IACET,KAAYG,EAAc,IAAI,OAC9BH,KAAYG,EAAc,IAAI,OAC9BC,EAAU,UAAU,CAAAM,MAAOA,EAAI,OAAOT,CAAQ,KAC5CE,EAAc,IAAI,OACpBC,EAAU,UAAU,CAAAM,MAAOA,EAAI,OAAOT,CAAQ,KAAKE,EAAc,IAAI,KAEnEM,KACFD,EAAU,KAAK,eAAe,IAI9BD,KACFC,EAAU,KAAK,cAAc,GAGxBA,EAAU,SAASG,EAAWH,CAAS,IAAI;AACpD;"}
+{"version":3,"file":"getCellClassName.js","sources":["../../../../src/components/DataGrid/utils/getCellClassName.ts"],"sourcesContent":["import classNames from 'classnames'\nimport { DataGridRow } from '../DataGridTypes'\nimport { SelectionWithId } from '@sage-bionetworks/react-datasheet-grid'\nimport { Column } from '@sage-bionetworks/react-datasheet-grid'\nimport type { RemoteSelection } from '../hooks/useRemoteSelections'\n\nexport function getCellClassName(params: {\n  rowData: DataGridRow\n  rowIndex: number\n  columnId?: string\n  selectedRowIndex: number | null\n  lastSelection?: SelectionWithId | null\n  colValues?: Column[]\n  /** Remote replica selection ranges to visualise as tinted backgrounds. */\n  remoteSelections?: readonly RemoteSelection[]\n}): string | undefined {\n  const {\n    rowData,\n    rowIndex,\n    columnId,\n    selectedRowIndex,\n    lastSelection,\n    colValues,\n    remoteSelections,\n  } = params\n\n  const isSelected = selectedRowIndex === rowIndex\n  const cellValidationResults = rowData.__cellValidationResults\n  const isInvalid =\n    cellValidationResults && columnId && cellValidationResults.has(columnId)\n\n  const classList: string[] = []\n\n  if (isSelected) {\n    classList.push('cell-row-selected')\n  }\n\n  // Add selection styling based on lastSelection\n  let isInSelection = false\n  if (lastSelection && columnId && colValues) {\n    isInSelection =\n      rowIndex >= lastSelection.min.row &&\n      rowIndex <= lastSelection.max.row &&\n      colValues.findIndex(col => col.id === columnId) >=\n        lastSelection.min.col &&\n      colValues.findIndex(col => col.id === columnId) <= lastSelection.max.col\n\n    if (isInSelection) {\n      classList.push('cell-selected')\n    }\n  }\n\n  if (isInvalid) {\n    classList.push('cell-invalid')\n  }\n\n  // ── Remote selection tint ─────────────────────────────────────────────────\n  if (remoteSelections && columnId) {\n    for (const remote of remoteSelections) {\n      const { minRow, maxRow, columnNames } = remote.range\n      if (rowIndex < minRow || rowIndex > maxRow) continue\n      if (columnNames !== undefined && !columnNames.has(columnId)) continue\n      classList.push('cell-remote-selected')\n      classList.push(`cell-remote-selected--color-${remote.colorIndex}`)\n      break // apply the first matching remote selection only\n    }\n  }\n\n  return classList.length ? classNames(classList) : undefined\n}\n"],"names":["getCellClassName","params","rowData","rowIndex","columnId","selectedRowIndex","lastSelection","colValues","remoteSelections","isSelected","cellValidationResults","isInvalid","classList","isInSelection","col","remote","minRow","maxRow","columnNames","classNames"],"mappings":";AAMO,SAASA,EAAiBC,GASV;AACrB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEP,GAEEQ,IAAaJ,MAAqBF,GAClCO,IAAwBR,EAAQ,yBAChCS,IACJD,KAAyBN,KAAYM,EAAsB,IAAIN,CAAQ,GAEnEQ,IAAsB,CAAA;AAE5B,EAAIH,KACFG,EAAU,KAAK,mBAAmB;AAIpC,MAAIC,IAAgB;AAmBpB,MAlBIP,KAAiBF,KAAYG,MAC/BM,IACEV,KAAYG,EAAc,IAAI,OAC9BH,KAAYG,EAAc,IAAI,OAC9BC,EAAU,UAAU,CAAAO,MAAOA,EAAI,OAAOV,CAAQ,KAC5CE,EAAc,IAAI,OACpBC,EAAU,UAAU,CAAAO,MAAOA,EAAI,OAAOV,CAAQ,KAAKE,EAAc,IAAI,KAEnEO,KACFD,EAAU,KAAK,eAAe,IAI9BD,KACFC,EAAU,KAAK,cAAc,GAI3BJ,KAAoBJ;AACtB,eAAWW,KAAUP,GAAkB;AACrC,YAAM,EAAE,QAAAQ,GAAQ,QAAAC,GAAQ,aAAAC,EAAA,IAAgBH,EAAO;AAC/C,UAAI,EAAAZ,IAAWa,KAAUb,IAAWc,MAChC,EAAAC,MAAgB,UAAa,CAACA,EAAY,IAAId,CAAQ,IAC1D;AAAA,QAAAQ,EAAU,KAAK,sBAAsB,GACrCA,EAAU,KAAK,+BAA+BG,EAAO,UAAU,EAAE;AACjE;AAAA;AAAA,IACF;AAGF,SAAOH,EAAU,SAASO,EAAWP,CAAS,IAAI;AACpD;"}

package/dist/components/DataGrid/utils/replicaSelectionToGridSelection.d.ts

@@ -0,0 +1,15 @@
+import type { GridModel, ReplicaSelectionModel } from '../DataGridTypes';
+export interface GridSelectionRange {
+    minRow: number;
+    maxRow: number;
+    /** undefined means all columns are selected */
+    columnNames: Set<string> | undefined;
+}
+/**
+ * Converts a stored ReplicaSelectionModel (CRDT-stable IDs) back into a
+ * plain grid selection range that can be used for cell class computation.
+ *
+ * This is the inverse of getCrdtIdsForArrayRange in computeReplicaSelectionModel.
+ */
+export declare function replicaSelectionToGridSelection(selection: ReplicaSelectionModel | null | undefined, model: GridModel): GridSelectionRange | null;
+//# sourceMappingURL=replicaSelectionToGridSelection.d.ts.map

package/dist/components/DataGrid/utils/replicaSelectionToGridSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replicaSelectionToGridSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/utils/replicaSelectionToGridSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAU,MAAM,kBAAkB,CAAA;AAEhF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;CACrC;AA4BD;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAC7C,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,EACnD,KAAK,EAAE,SAAS,GACf,kBAAkB,GAAG,IAAI,CAwC3B"}

package/dist/components/DataGrid/utils/replicaSelectionToGridSelection.js

@@ -0,0 +1,43 @@
+function d(t, u) {
+  const e = /* @__PURE__ */ new Set();
+  if (u.length === 0) return e;
+  const i = new Set(u.map((n) => `${n.rep}:${n.seq}`));
+  let s = 0;
+  for (const n of t.node.chunks())
+    if (!n.del) {
+      for (let o = 0; o < n.span; o++) {
+        const a = `${n.id.sid}:${n.id.time + o}`;
+        i.has(a) && e.add(s + o);
+      }
+      s += n.span;
+    }
+  return e;
+}
+function m(t, u) {
+  if (!t) return null;
+  const e = u.api.getSnapshot(), i = e.rows.length, s = e.columnNames.length;
+  if (i < 1 || s < 1) return null;
+  let n = 0, o = i - 1;
+  if (!t.rowSelectAll) {
+    const r = t.rowSelection;
+    if (!r || r.length === 0) return null;
+    const c = d(u.api.arr(["rows"]), r);
+    if (c.size === 0) return null;
+    n = [...c].reduce((l, f) => Math.min(l, f)), o = [...c].reduce((l, f) => Math.max(l, f));
+  }
+  let a;
+  if (!t.columnSelectAll) {
+    const r = t.columnSelection;
+    if (!r || r.length === 0) return null;
+    const c = d(u.api.arr(["columnOrder"]), r);
+    if (c.size === 0) return null;
+    a = new Set(
+      [...c].map((l) => e.columnNames[e.columnOrder[l]]).filter((l) => l !== void 0)
+    );
+  }
+  return { minRow: n, maxRow: o, columnNames: a };
+}
+export {
+  m as replicaSelectionToGridSelection
+};
+//# sourceMappingURL=replicaSelectionToGridSelection.js.map

package/dist/components/DataGrid/utils/replicaSelectionToGridSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replicaSelectionToGridSelection.js","sources":["../../../../src/components/DataGrid/utils/replicaSelectionToGridSelection.ts"],"sourcesContent":["import type { GridModel, ReplicaSelectionModel, CrdtId } from '../DataGridTypes'\n\nexport interface GridSelectionRange {\n  minRow: number\n  maxRow: number\n  /** undefined means all columns are selected */\n  columnNames: Set<string> | undefined\n}\n\n/**\n * Convert a flat array of CrdtIds to a Set of array indices by walking the\n * arr node's chunks.\n */\nfunction crdtIdsToIndices(\n  arrApi: ReturnType<GridModel['api']['arr']>,\n  ids: CrdtId[],\n): Set<number> {\n  const result = new Set<number>()\n  if (ids.length === 0) return result\n\n  // Build a lookup set for O(1) membership test\n  const lookup = new Set(ids.map(id => `${id.rep}:${id.seq}`))\n\n  let idx = 0\n  for (const chunk of arrApi.node.chunks()) {\n    if (chunk.del) continue\n    for (let offset = 0; offset < chunk.span; offset++) {\n      const key = `${chunk.id.sid}:${chunk.id.time + offset}`\n      if (lookup.has(key)) result.add(idx + offset)\n    }\n    idx += chunk.span\n  }\n  return result\n}\n\n/**\n * Converts a stored ReplicaSelectionModel (CRDT-stable IDs) back into a\n * plain grid selection range that can be used for cell class computation.\n *\n * This is the inverse of getCrdtIdsForArrayRange in computeReplicaSelectionModel.\n */\nexport function replicaSelectionToGridSelection(\n  selection: ReplicaSelectionModel | null | undefined,\n  model: GridModel,\n): GridSelectionRange | null {\n  if (!selection) return null\n\n  const snapshot = model.api.getSnapshot()\n  const numRows = snapshot.rows.length\n  const numCols = snapshot.columnNames.length\n\n  if (numRows < 1 || numCols < 1) return null\n\n  // ── Row range ────────────────────────────────────────────────────────────\n  let minRow = 0\n  let maxRow = numRows - 1\n\n  if (!selection.rowSelectAll) {\n    const rowIds = selection.rowSelection\n    if (!rowIds || rowIds.length === 0) return null\n\n    const rowIndexSet = crdtIdsToIndices(model.api.arr(['rows']), rowIds)\n    if (rowIndexSet.size === 0) return null\n    minRow = [...rowIndexSet].reduce((a, b) => Math.min(a, b))\n    maxRow = [...rowIndexSet].reduce((a, b) => Math.max(a, b))\n  }\n\n  // ── Column range ─────────────────────────────────────────────────────────\n  let columnNames: Set<string> | undefined = undefined // undefined = all columns\n\n  if (!selection.columnSelectAll) {\n    const colIds = selection.columnSelection\n    if (!colIds || colIds.length === 0) return null\n\n    const colIndexSet = crdtIdsToIndices(model.api.arr(['columnOrder']), colIds)\n    if (colIndexSet.size === 0) return null\n    columnNames = new Set(\n      [...colIndexSet]\n        .map(colIdx => snapshot.columnNames[snapshot.columnOrder[colIdx]])\n        .filter((name): name is string => name !== undefined),\n    )\n  }\n\n  return { minRow, maxRow, columnNames }\n}\n"],"names":["crdtIdsToIndices","arrApi","ids","result","lookup","id","idx","chunk","offset","key","replicaSelectionToGridSelection","selection","model","snapshot","numRows","numCols","minRow","maxRow","rowIds","rowIndexSet","a","b","columnNames","colIds","colIndexSet","colIdx","name"],"mappings":"AAaA,SAASA,EACPC,GACAC,GACa;AACb,QAAMC,wBAAa,IAAA;AACnB,MAAID,EAAI,WAAW,EAAG,QAAOC;AAG7B,QAAMC,IAAS,IAAI,IAAIF,EAAI,IAAI,CAAAG,MAAM,GAAGA,EAAG,GAAG,IAAIA,EAAG,GAAG,EAAE,CAAC;AAE3D,MAAIC,IAAM;AACV,aAAWC,KAASN,EAAO,KAAK,OAAA;AAC9B,QAAI,CAAAM,EAAM,KACV;AAAA,eAASC,IAAS,GAAGA,IAASD,EAAM,MAAMC,KAAU;AAClD,cAAMC,IAAM,GAAGF,EAAM,GAAG,GAAG,IAAIA,EAAM,GAAG,OAAOC,CAAM;AACrD,QAAIJ,EAAO,IAAIK,CAAG,KAAGN,EAAO,IAAIG,IAAME,CAAM;AAAA,MAC9C;AACA,MAAAF,KAAOC,EAAM;AAAA;AAEf,SAAOJ;AACT;AAQO,SAASO,EACdC,GACAC,GAC2B;AAC3B,MAAI,CAACD,EAAW,QAAO;AAEvB,QAAME,IAAWD,EAAM,IAAI,YAAA,GACrBE,IAAUD,EAAS,KAAK,QACxBE,IAAUF,EAAS,YAAY;AAErC,MAAIC,IAAU,KAAKC,IAAU,EAAG,QAAO;AAGvC,MAAIC,IAAS,GACTC,IAASH,IAAU;AAEvB,MAAI,CAACH,EAAU,cAAc;AAC3B,UAAMO,IAASP,EAAU;AACzB,QAAI,CAACO,KAAUA,EAAO,WAAW,EAAG,QAAO;AAE3C,UAAMC,IAAcnB,EAAiBY,EAAM,IAAI,IAAI,CAAC,MAAM,CAAC,GAAGM,CAAM;AACpE,QAAIC,EAAY,SAAS,EAAG,QAAO;AACnC,IAAAH,IAAS,CAAC,GAAGG,CAAW,EAAE,OAAO,CAACC,GAAGC,MAAM,KAAK,IAAID,GAAGC,CAAC,CAAC,GACzDJ,IAAS,CAAC,GAAGE,CAAW,EAAE,OAAO,CAACC,GAAGC,MAAM,KAAK,IAAID,GAAGC,CAAC,CAAC;AAAA,EAC3D;AAGA,MAAIC;AAEJ,MAAI,CAACX,EAAU,iBAAiB;AAC9B,UAAMY,IAASZ,EAAU;AACzB,QAAI,CAACY,KAAUA,EAAO,WAAW,EAAG,QAAO;AAE3C,UAAMC,IAAcxB,EAAiBY,EAAM,IAAI,IAAI,CAAC,aAAa,CAAC,GAAGW,CAAM;AAC3E,QAAIC,EAAY,SAAS,EAAG,QAAO;AACnC,IAAAF,IAAc,IAAI;AAAA,MAChB,CAAC,GAAGE,CAAW,EACZ,IAAI,CAAAC,MAAUZ,EAAS,YAAYA,EAAS,YAAYY,CAAM,CAAC,CAAC,EAChE,OAAO,CAACC,MAAyBA,MAAS,MAAS;AAAA,IAAA;AAAA,EAE1D;AAEA,SAAO,EAAE,QAAAV,GAAQ,QAAAC,GAAQ,aAAAK,EAAA;AAC3B;"}

package/dist/components/DialogBase.d.ts

@@ -25,9 +25,11 @@ export type DialogBaseProps = DialogBaseTitleProps & {
     sx?: DialogProps['sx'];
     contentProps?: DialogContentProps;
     DialogProps?: Partial<DialogProps>;
+    /** If true, reduces the vertical padding of the title, content, and actions for a more compact layout. */
+    dense?: boolean;
 };
 /**
  * A dialog built using MUI components.
  */
-export declare const DialogBase: ({ open, title, content, actions, className, onCancel, hasCloseButton, titleHelpPopoverProps, maxWidth, fullWidth, sx, contentProps, DialogProps, }: DialogBaseProps) => React.ReactNode;
+export declare const DialogBase: ({ open, title, content, actions, className, onCancel, hasCloseButton, titleHelpPopoverProps, maxWidth, fullWidth, sx, contentProps, DialogProps, dense, }: DialogBaseProps) => React.ReactNode;
 //# sourceMappingURL=DialogBase.d.ts.map

package/dist/components/DialogBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBase.d.ts","sourceRoot":"","sources":["../../src/components/DialogBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,kBAAkB,EAClB,WAAW,EAIX,OAAO,EACR,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAe,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAIzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAU,CAAA;AAGzC,wBAAgB,WAAW,CAAC,EAC1B,EAA2B,EAC3B,OAAO,GACR,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMtC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,SAAS,CAAA;IAChB,qBAAqB,CAAC,EAAE,gBAAgB,CAAA;IACxC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CA8B5E;AAED,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CACnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,oJAcxB,eAAe,KAAG,KAAK,CAAC,SAgC1B,CAAA"}
+{"version":3,"file":"DialogBase.d.ts","sourceRoot":"","sources":["../../src/components/DialogBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,kBAAkB,EAClB,WAAW,EAIX,OAAO,EACR,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAe,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAIzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAU,CAAA;AAGzC,wBAAgB,WAAW,CAAC,EAC1B,EAA2B,EAC3B,OAAO,GACR,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMtC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,SAAS,CAAA;IAChB,qBAAqB,CAAC,EAAE,gBAAgB,CAAA;IACxC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CA8B5E;AAED,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAClC,0GAA0G;IAC1G,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,2JAexB,eAAe,KAAG,KAAK,CAAC,SAoD1B,CAAA"}

package/dist/components/DialogBase.js

@@ -1,24 +1,24 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { spreadSx as B } from "../theme/spreadSx.js";
-import f from "@mui/icons-material/Close";
-import { Dialog as C, DialogContent as D, DialogActions as T, DialogTitle as w, Stack as E, Box as s, IconButton as P } from "@mui/material";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { spreadSx as f } from "../theme/spreadSx.js";
+import B from "@mui/icons-material/Close";
+import { Dialog as C, DialogContent as T, DialogActions as M, DialogTitle as P, Stack as w, Box as a, IconButton as E } from "@mui/material";
 import { HelpPopover as S } from "./HelpPopover/HelpPopover.js";
 const L = {}, O = "close", _ = { color: "grey.700" };
-function k({
-  sx: t = _,
-  onClick: e
+function v({
+  sx: i = _,
+  onClick: t
 }) {
-  return /* @__PURE__ */ o(P, { sx: t, onClick: e, "aria-label": O, children: /* @__PURE__ */ o(f, {}) });
+  return /* @__PURE__ */ o(E, { sx: i, onClick: t, "aria-label": O, children: /* @__PURE__ */ o(B, {}) });
 }
-function v(t) {
+function y(i) {
   const {
-    title: e,
-    titleHelpPopoverProps: r,
-    hasCloseButton: i = !0,
+    title: t,
+    titleHelpPopoverProps: e,
+    hasCloseButton: r = !0,
     onCancel: n
-  } = t;
-  return /* @__PURE__ */ o(w, { children: /* @__PURE__ */ a(
-    E,
+  } = i;
+  return /* @__PURE__ */ o(P, { children: /* @__PURE__ */ p(
+    w,
     {
       direction: "row",
       sx: {
@@ -26,77 +26,96 @@ function v(t) {
         gap: "5px"
       },
       children: [
-        e,
+        t,
         /* @__PURE__ */ o(
-          s,
+          a,
           {
             component: "span",
             sx: {
               fontSize: "14px"
             },
-            children: r && /* @__PURE__ */ o(S, { ...r })
+            children: e && /* @__PURE__ */ o(S, { ...e })
           }
         ),
-        /* @__PURE__ */ o(s, { sx: { flexGrow: 1 } }),
-        i && /* @__PURE__ */ o(k, { onClick: () => n() })
+        /* @__PURE__ */ o(a, { sx: { flexGrow: 1 } }),
+        r && /* @__PURE__ */ o(v, { onClick: () => n() })
       ]
     }
   ) });
 }
-const b = ({
-  open: t,
-  title: e,
-  content: r,
-  actions: i,
+const U = ({
+  open: i,
+  title: t,
+  content: e,
+  actions: r,
   className: n,
   onCancel: l,
-  hasCloseButton: c,
-  titleHelpPopoverProps: p,
-  maxWidth: m = "sm",
-  fullWidth: g = !0,
-  sx: d,
-  contentProps: x = L,
-  DialogProps: h
-}) => /* @__PURE__ */ a(
+  hasCloseButton: s,
+  titleHelpPopoverProps: c,
+  maxWidth: g = "sm",
+  fullWidth: d = !0,
+  sx: u,
+  contentProps: m = L,
+  DialogProps: x,
+  dense: h = !1
+}) => /* @__PURE__ */ p(
   C,
   {
-    fullWidth: g,
-    maxWidth: m,
-    open: t,
+    fullWidth: d,
+    maxWidth: g,
+    open: i,
     className: n,
     onClose: () => l(),
-    sx: B(d, (u) => ({
-      [u.breakpoints.down("sm")]: {
-        width: "100vw",
+    sx: f(
+      u,
+      h ? {
         ".MuiDialog-container > .MuiPaper-root": {
-          padding: "33px",
-          margin: 0,
-          width: "100%",
-          height: "100%",
-          maxHeight: "unset"
+          padding: "10px 30px"
+        },
+        "& .MuiDialogTitle-root": {
+          py: 1.5,
+          typography: "headline3"
+        },
+        "& .MuiDialogContent-root": {
+          pt: 1
+        },
+        "& .MuiDialogActions-root": {
+          pb: 2
         }
-      }
-    })),
-    ...h,
+      } : void 0,
+      (D) => ({
+        [D.breakpoints.down("sm")]: {
+          width: "100vw",
+          ".MuiDialog-container > .MuiPaper-root": {
+            padding: "33px",
+            margin: 0,
+            width: "100%",
+            height: "100%",
+            maxHeight: "unset"
+          }
+        }
+      })
+    ),
+    ...x,
     children: [
       /* @__PURE__ */ o(
-        v,
+        y,
         {
-          title: e,
-          titleHelpPopoverProps: p,
-          hasCloseButton: c,
+          title: t,
+          titleHelpPopoverProps: c,
+          hasCloseButton: s,
           onCancel: l
         }
       ),
-      /* @__PURE__ */ o(D, { ...x, children: r }),
-      i && /* @__PURE__ */ o(T, { children: i })
+      /* @__PURE__ */ o(T, { ...m, children: e }),
+      r && /* @__PURE__ */ o(M, { children: r })
     ]
   }
 );
 export {
   O as CLOSE_BUTTON_LABEL,
-  k as CloseButton,
-  b as DialogBase,
-  v as DialogBaseTitle
+  v as CloseButton,
+  U as DialogBase,
+  y as DialogBaseTitle
 };
 //# sourceMappingURL=DialogBase.js.map

package/dist/components/DialogBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBase.js","sources":["../../src/components/DialogBase.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport CloseIcon from '@mui/icons-material/Close'\nimport {\n  Box,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps,\n  DialogProps,\n  DialogTitle,\n  IconButton,\n  Stack,\n  SxProps,\n} from '@mui/material'\nimport React, { ReactNode } from 'react'\nimport { HelpPopover, HelpPopoverProps } from './HelpPopover/HelpPopover'\n\nconst EMPTY_OBJECT = {}\n\nexport type CloseButtonProps = {\n  sx?: SxProps\n  onClick?: () => void\n}\n\nexport const CLOSE_BUTTON_LABEL = 'close'\nconst DEFAULT_CLOSEBUTTON_SX: SxProps = { color: 'grey.700' }\n\nexport function CloseButton({\n  sx = DEFAULT_CLOSEBUTTON_SX,\n  onClick,\n}: CloseButtonProps): React.JSX.Element {\n  return (\n    <IconButton sx={sx} onClick={onClick} aria-label={CLOSE_BUTTON_LABEL}>\n      <CloseIcon />\n    </IconButton>\n  )\n}\n\nexport type DialogBaseTitleProps = {\n  title: ReactNode\n  titleHelpPopoverProps?: HelpPopoverProps\n  hasCloseButton?: boolean\n  onCancel: () => void\n}\n\nexport function DialogBaseTitle(props: DialogBaseTitleProps): React.ReactNode {\n  const {\n    title,\n    titleHelpPopoverProps,\n    hasCloseButton = true,\n    onCancel,\n  } = props\n  return (\n    <DialogTitle>\n      <Stack\n        direction=\"row\"\n        sx={{\n          alignItems: 'center',\n          gap: '5px',\n        }}\n      >\n        {title}\n        <Box\n          component={'span'}\n          sx={{\n            fontSize: '14px',\n          }}\n        >\n          {titleHelpPopoverProps && <HelpPopover {...titleHelpPopoverProps} />}\n        </Box>\n        <Box sx={{ flexGrow: 1 }} />\n        {hasCloseButton && <CloseButton onClick={() => onCancel()} />}\n      </Stack>\n    </DialogTitle>\n  )\n}\n\nexport type DialogBaseProps = DialogBaseTitleProps & {\n  open: boolean\n  content: ReactNode\n  actions?: ReactNode\n  className?: string\n  onCancel: () => void\n  maxWidth?: DialogProps['maxWidth']\n  fullWidth?: boolean\n  sx?: DialogProps['sx']\n  contentProps?: DialogContentProps\n  DialogProps?: Partial<DialogProps>\n}\n\n/**\n * A dialog built using MUI components.\n */\nexport const DialogBase = ({\n  open,\n  title,\n  content,\n  actions,\n  className,\n  onCancel,\n  hasCloseButton,\n  titleHelpPopoverProps,\n  maxWidth = 'sm',\n  fullWidth = true,\n  sx,\n  contentProps = EMPTY_OBJECT,\n  DialogProps,\n}: DialogBaseProps): React.ReactNode => {\n  return (\n    <Dialog\n      fullWidth={fullWidth}\n      maxWidth={maxWidth}\n      open={open}\n      className={className}\n      onClose={() => onCancel()}\n      sx={spreadSx(sx, theme => ({\n        [theme.breakpoints.down('sm')]: {\n          width: '100vw',\n          '.MuiDialog-container > .MuiPaper-root': {\n            padding: '33px',\n            margin: 0,\n            width: '100%',\n            height: '100%',\n            maxHeight: 'unset',\n          },\n        },\n      }))}\n      {...DialogProps}\n    >\n      <DialogBaseTitle\n        title={title}\n        titleHelpPopoverProps={titleHelpPopoverProps}\n        hasCloseButton={hasCloseButton}\n        onCancel={onCancel}\n      />\n      <DialogContent {...contentProps}>{content}</DialogContent>\n      {actions && <DialogActions>{actions}</DialogActions>}\n    </Dialog>\n  )\n}\n"],"names":["EMPTY_OBJECT","CLOSE_BUTTON_LABEL","DEFAULT_CLOSEBUTTON_SX","CloseButton","sx","onClick","jsx","IconButton","CloseIcon","DialogBaseTitle","props","title","titleHelpPopoverProps","hasCloseButton","onCancel","DialogTitle","jsxs","Stack","Box","HelpPopover","DialogBase","open","content","actions","className","maxWidth","fullWidth","contentProps","DialogProps","Dialog","spreadSx","theme","DialogContent","DialogActions"],"mappings":";;;;;AAiBA,MAAMA,IAAe,CAAA,GAORC,IAAqB,SAC5BC,IAAkC,EAAE,OAAO,WAAA;AAE1C,SAASC,EAAY;AAAA,EAC1B,IAAAC,IAAKF;AAAA,EACL,SAAAG;AACF,GAAwC;AACtC,SACE,gBAAAC,EAACC,KAAW,IAAAH,GAAQ,SAAAC,GAAkB,cAAYJ,GAChD,UAAA,gBAAAK,EAACE,KAAU,EAAA,CACb;AAEJ;AASO,SAASC,EAAgBC,GAA8C;AAC5E,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,EAAA,IACEJ;AACJ,2BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,KAAK;AAAA,MAAA;AAAA,MAGN,UAAA;AAAA,QAAAN;AAAA,QACD,gBAAAL;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YACX,IAAI;AAAA,cACF,UAAU;AAAA,YAAA;AAAA,YAGX,UAAAN,KAAyB,gBAAAN,EAACa,GAAA,EAAa,GAAGP,EAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEnEM,GAAA,EAAI,IAAI,EAAE,UAAU,KAAK;AAAA,QACzBL,KAAkB,gBAAAP,EAACH,GAAA,EAAY,SAAS,MAAMW,IAAS,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE/D;AAEJ;AAkBO,MAAMM,IAAa,CAAC;AAAA,EACzB,MAAAC;AAAA,EACA,OAAAV;AAAA,EACA,SAAAW;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAV;AAAA,EACA,gBAAAD;AAAA,EACA,uBAAAD;AAAA,EACA,UAAAa,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,IAAAtB;AAAA,EACA,cAAAuB,IAAe3B;AAAA,EACf,aAAA4B;AACF,MAEI,gBAAAZ;AAAA,EAACa;AAAA,EAAA;AAAA,IACC,WAAAH;AAAA,IACA,UAAAD;AAAA,IACA,MAAAJ;AAAA,IACA,WAAAG;AAAA,IACA,SAAS,MAAMV,EAAA;AAAA,IACf,IAAIgB,EAAS1B,GAAI,CAAA2B,OAAU;AAAA,MACzB,CAACA,EAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,OAAO;AAAA,QACP,yCAAyC;AAAA,UACvC,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF,EACA;AAAA,IACD,GAAGH;AAAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAtB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,OAAAE;AAAA,UACA,uBAAAC;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAR,EAAC0B,GAAA,EAAe,GAAGL,GAAe,UAAAL,EAAA,CAAQ;AAAA,MACzCC,KAAW,gBAAAjB,EAAC2B,GAAA,EAAe,UAAAV,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"DialogBase.js","sources":["../../src/components/DialogBase.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport CloseIcon from '@mui/icons-material/Close'\nimport {\n  Box,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps,\n  DialogProps,\n  DialogTitle,\n  IconButton,\n  Stack,\n  SxProps,\n} from '@mui/material'\nimport React, { ReactNode } from 'react'\nimport { HelpPopover, HelpPopoverProps } from './HelpPopover/HelpPopover'\n\nconst EMPTY_OBJECT = {}\n\nexport type CloseButtonProps = {\n  sx?: SxProps\n  onClick?: () => void\n}\n\nexport const CLOSE_BUTTON_LABEL = 'close'\nconst DEFAULT_CLOSEBUTTON_SX: SxProps = { color: 'grey.700' }\n\nexport function CloseButton({\n  sx = DEFAULT_CLOSEBUTTON_SX,\n  onClick,\n}: CloseButtonProps): React.JSX.Element {\n  return (\n    <IconButton sx={sx} onClick={onClick} aria-label={CLOSE_BUTTON_LABEL}>\n      <CloseIcon />\n    </IconButton>\n  )\n}\n\nexport type DialogBaseTitleProps = {\n  title: ReactNode\n  titleHelpPopoverProps?: HelpPopoverProps\n  hasCloseButton?: boolean\n  onCancel: () => void\n}\n\nexport function DialogBaseTitle(props: DialogBaseTitleProps): React.ReactNode {\n  const {\n    title,\n    titleHelpPopoverProps,\n    hasCloseButton = true,\n    onCancel,\n  } = props\n  return (\n    <DialogTitle>\n      <Stack\n        direction=\"row\"\n        sx={{\n          alignItems: 'center',\n          gap: '5px',\n        }}\n      >\n        {title}\n        <Box\n          component={'span'}\n          sx={{\n            fontSize: '14px',\n          }}\n        >\n          {titleHelpPopoverProps && <HelpPopover {...titleHelpPopoverProps} />}\n        </Box>\n        <Box sx={{ flexGrow: 1 }} />\n        {hasCloseButton && <CloseButton onClick={() => onCancel()} />}\n      </Stack>\n    </DialogTitle>\n  )\n}\n\nexport type DialogBaseProps = DialogBaseTitleProps & {\n  open: boolean\n  content: ReactNode\n  actions?: ReactNode\n  className?: string\n  onCancel: () => void\n  maxWidth?: DialogProps['maxWidth']\n  fullWidth?: boolean\n  sx?: DialogProps['sx']\n  contentProps?: DialogContentProps\n  DialogProps?: Partial<DialogProps>\n  /** If true, reduces the vertical padding of the title, content, and actions for a more compact layout. */\n  dense?: boolean\n}\n\n/**\n * A dialog built using MUI components.\n */\nexport const DialogBase = ({\n  open,\n  title,\n  content,\n  actions,\n  className,\n  onCancel,\n  hasCloseButton,\n  titleHelpPopoverProps,\n  maxWidth = 'sm',\n  fullWidth = true,\n  sx,\n  contentProps = EMPTY_OBJECT,\n  DialogProps,\n  dense = false,\n}: DialogBaseProps): React.ReactNode => {\n  return (\n    <Dialog\n      fullWidth={fullWidth}\n      maxWidth={maxWidth}\n      open={open}\n      className={className}\n      onClose={() => onCancel()}\n      sx={spreadSx(\n        sx,\n        dense\n          ? {\n              '.MuiDialog-container > .MuiPaper-root': {\n                padding: '10px 30px',\n              },\n              '& .MuiDialogTitle-root': {\n                py: 1.5,\n                typography: 'headline3',\n              },\n              '& .MuiDialogContent-root': {\n                pt: 1,\n              },\n              '& .MuiDialogActions-root': {\n                pb: 2,\n              },\n            }\n          : undefined,\n        theme => ({\n          [theme.breakpoints.down('sm')]: {\n            width: '100vw',\n            '.MuiDialog-container > .MuiPaper-root': {\n              padding: '33px',\n              margin: 0,\n              width: '100%',\n              height: '100%',\n              maxHeight: 'unset',\n            },\n          },\n        }),\n      )}\n      {...DialogProps}\n    >\n      <DialogBaseTitle\n        title={title}\n        titleHelpPopoverProps={titleHelpPopoverProps}\n        hasCloseButton={hasCloseButton}\n        onCancel={onCancel}\n      />\n      <DialogContent {...contentProps}>{content}</DialogContent>\n      {actions && <DialogActions>{actions}</DialogActions>}\n    </Dialog>\n  )\n}\n"],"names":["EMPTY_OBJECT","CLOSE_BUTTON_LABEL","DEFAULT_CLOSEBUTTON_SX","CloseButton","sx","onClick","jsx","IconButton","CloseIcon","DialogBaseTitle","props","title","titleHelpPopoverProps","hasCloseButton","onCancel","DialogTitle","jsxs","Stack","Box","HelpPopover","DialogBase","open","content","actions","className","maxWidth","fullWidth","contentProps","DialogProps","dense","Dialog","spreadSx","theme","DialogContent","DialogActions"],"mappings":"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"}

package/dist/components/Ecosystem/EcosystemSkeleton.js

@@ -50,7 +50,6 @@ import "../../assets/icons/account-validated.svg.js";
 import "../../utils/functions/DateFormatter.js";
 import "@react-hookz/web";
 import "dayjs";
-import "../../assets/ArcusBioIcon.svg.js";
 import "@mui/material/SvgIcon";
 import "../../assets/icons/AccessPending.svg.js";
 import "../../assets/icons/AccessPendingCloud.svg.js";
@@ -215,7 +214,7 @@ import "@mui/material/Grid";
 import "@mui/icons-material/ArrowForwardIos";
 import "../PortalAclEditor/PortalAclEditor.js";
 import "../SynapseHomepageV2/HomepageStyles.js";
-function li() {
+function ci() {
   const o = /* @__PURE__ */ t(n, { width: "80%" }), r = /* @__PURE__ */ m(e, { gap: 2, py: 2, children: [
     /* @__PURE__ */ t(i, {}),
     /* @__PURE__ */ t(i, {}),
@@ -233,6 +232,6 @@ function li() {
   );
 }
 export {
-  li as default
+  ci as default
 };
 //# sourceMappingURL=EcosystemSkeleton.js.map

package/dist/components/Ecosystem/EcosystemSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"EcosystemSkeleton.js","sources":["../../../src/components/Ecosystem/EcosystemSkeleton.tsx"],"sourcesContent":["import EcosystemLayout from '@/components/Ecosystem/EcosystemLayout'\nimport { SkeletonParagraph } from '@/components/index'\nimport { Stack } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\n\nfunction EcosystemSkeleton() {\n  const skeletonTitle = <Skeleton width={'80%'} />\n  const skeletonContent = (\n    <Stack gap={2} py={2}>\n      <SkeletonParagraph />\n      <SkeletonParagraph />\n      <SkeletonParagraph />\n    </Stack>\n  )\n  return (\n    <EcosystemLayout\n      config={[\n        { title: skeletonTitle, content: skeletonContent },\n        { title: skeletonTitle, content: skeletonContent },\n        { title: skeletonTitle, content: skeletonContent },\n      ]}\n    />\n  )\n}\n\nexport default EcosystemSkeleton\n"],"names":["EcosystemSkeleton","skeletonTitle","jsx","Skeleton","skeletonContent","jsxs","Stack","SkeletonParagraph","EcosystemLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAASA,KAAoB;AAC3B,QAAMC,IAAgB,gBAAAC,EAACC,GAAA,EAAS,OAAO,MAAA,CAAO,GACxCC,IACJ,gBAAAC,EAACC,GAAA,EAAM,KAAK,GAAG,IAAI,GACjB,UAAA;AAAA,IAAA,gBAAAJ,EAACK,GAAA,EAAkB;AAAA,sBAClBA,GAAA,EAAkB;AAAA,sBAClBA,GAAA,CAAA,CAAkB;AAAA,EAAA,GACrB;AAEF,SACE,gBAAAL;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,QACN,EAAE,OAAOP,GAAe,SAASG,EAAA;AAAA,QACjC,EAAE,OAAOH,GAAe,SAASG,EAAA;AAAA,QACjC,EAAE,OAAOH,GAAe,SAASG,EAAA;AAAA,MAAgB;AAAA,IACnD;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"EcosystemSkeleton.js","sources":["../../../src/components/Ecosystem/EcosystemSkeleton.tsx"],"sourcesContent":["import EcosystemLayout from '@/components/Ecosystem/EcosystemLayout'\nimport { SkeletonParagraph } from '@/components/index'\nimport { Stack } from '@mui/material'\nimport Skeleton from '@mui/material/Skeleton'\n\nfunction EcosystemSkeleton() {\n  const skeletonTitle = <Skeleton width={'80%'} />\n  const skeletonContent = (\n    <Stack gap={2} py={2}>\n      <SkeletonParagraph />\n      <SkeletonParagraph />\n      <SkeletonParagraph />\n    </Stack>\n  )\n  return (\n    <EcosystemLayout\n      config={[\n        { title: skeletonTitle, content: skeletonContent },\n        { title: skeletonTitle, content: skeletonContent },\n        { title: skeletonTitle, content: skeletonContent },\n      ]}\n    />\n  )\n}\n\nexport default EcosystemSkeleton\n"],"names":["EcosystemSkeleton","skeletonTitle","jsx","Skeleton","skeletonContent","jsxs","Stack","SkeletonParagraph","EcosystemLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAASA,KAAoB;AAC3B,QAAMC,IAAgB,gBAAAC,EAACC,GAAA,EAAS,OAAO,MAAA,CAAO,GACxCC,IACJ,gBAAAC,EAACC,GAAA,EAAM,KAAK,GAAG,IAAI,GACjB,UAAA;AAAA,IAAA,gBAAAJ,EAACK,GAAA,EAAkB;AAAA,sBAClBA,GAAA,EAAkB;AAAA,sBAClBA,GAAA,CAAA,CAAkB;AAAA,EAAA,GACrB;AAEF,SACE,gBAAAL;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,QACN,EAAE,OAAOP,GAAe,SAASG,EAAA;AAAA,QACjC,EAAE,OAAOH,GAAe,SAASG,EAAA;AAAA,QACjC,EAAE,OAAOH,GAAe,SAASG,EAAA;AAAA,MAAgB;AAAA,IACnD;AAAA,EAAA;AAGN;"}

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js

@@ -32,7 +32,6 @@ import "react-router";
 import "../QueryContext/QueryContext.js";
 import { useSuspenseGetQueryMetadata as j } from "../QueryWrapper/useGetQueryMetadata.js";
 import { useQueryVisualizationContext as q } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
-import "../../assets/ArcusBioIcon.svg.js";
 import "@mui/material/SvgIcon";
 import "../../assets/icons/AccessPending.svg.js";
 import "../../assets/icons/AccessPendingCloud.svg.js";
@@ -237,7 +236,7 @@ function rt(a) {
     ) }, r))
   ] });
 }
-function Tr(a) {
+function Pr(a) {
   return /* @__PURE__ */ t(
     H,
     {
@@ -247,6 +246,6 @@ function Tr(a) {
   );
 }
 export {
-  Tr as default
+  Pr as default
 };
 //# sourceMappingURL=FacetPlotsCard.js.map

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotsCard.js","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: FacetColumnResult,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item as FacetColumnResultValues,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet: FacetColumnResultValueCount | undefined = queryMetadata\n      ?.facets!.map(item => {\n        const facetValues: FacetColumnResultValueCount[] = (\n          item as FacetColumnResultValues\n        ).facetValues\n        if (facetValues) {\n          const filteredFacetValues: FacetColumnResultValueCount[] =\n            facetValues.filter(facetValue => {\n              return facetValue.isSelected\n            })\n          return filteredFacetValues.length > 0\n            ? filteredFacetValues[0]\n            : undefined\n        } else {\n          return undefined\n        }\n      })\n      .filter(x => x !== undefined)[0]\n\n    if (selectedFacet && selectedFacet.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"names":["layout","LoadingCard","props","numPlots","jsxs","Paper","FACET_PLOTS_CARD_CLASSNAME","FacetPlotsCardTitleContainer","FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME","jsx","Skeleton","SkeletonParagraph","Button","times","index","FacetPlotsCardPlotContainer","FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME","SkeletonTable","FacetPlotsCard","title","description","facetsToPlot","detailsPagePath","plotType","accessToken","useSynapseContext","queryMetadata","useSuspenseGetQueryMetadata","getColumnDisplayName","useQueryVisualizationContext","plotContainerMeasurements","plotContainerRef","useMeasure","facetDataArray","useMemo","getFacets","currentLayout","maxPlotHeight","facetPlotDataArray","useSuspenseQuery","getColumnType","facetToPlot","columnModel","item","extractPlotDataArray","selectedFacetValue","selectedFacet","facetValues","filteredFacetValues","facetValue","x","isShowingMultiplePlots","cardTitle","Typography","ShowMore","Box","theme","plotData","Fragment","Divider","Plot","getPlotStyle","FacetPlotLegendTable","FacetPlotsCardWithSuspense","Suspense"],"mappings":"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"}
+{"version":3,"file":"FacetPlotsCard.js","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: FacetColumnResult,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item as FacetColumnResultValues,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet: FacetColumnResultValueCount | undefined = queryMetadata\n      ?.facets!.map(item => {\n        const facetValues: FacetColumnResultValueCount[] = (\n          item as FacetColumnResultValues\n        ).facetValues\n        if (facetValues) {\n          const filteredFacetValues: FacetColumnResultValueCount[] =\n            facetValues.filter(facetValue => {\n              return facetValue.isSelected\n            })\n          return filteredFacetValues.length > 0\n            ? filteredFacetValues[0]\n            : undefined\n        } else {\n          return undefined\n        }\n      })\n      .filter(x => x !== undefined)[0]\n\n    if (selectedFacet && selectedFacet.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"names":["layout","LoadingCard","props","numPlots","jsxs","Paper","FACET_PLOTS_CARD_CLASSNAME","FacetPlotsCardTitleContainer","FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME","jsx","Skeleton","SkeletonParagraph","Button","times","index","FacetPlotsCardPlotContainer","FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME","SkeletonTable","FacetPlotsCard","title","description","facetsToPlot","detailsPagePath","plotType","accessToken","useSynapseContext","queryMetadata","useSuspenseGetQueryMetadata","getColumnDisplayName","useQueryVisualizationContext","plotContainerMeasurements","plotContainerRef","useMeasure","facetDataArray","useMemo","getFacets","currentLayout","maxPlotHeight","facetPlotDataArray","useSuspenseQuery","getColumnType","facetToPlot","columnModel","item","extractPlotDataArray","selectedFacetValue","selectedFacet","facetValues","filteredFacetValues","facetValue","x","isShowingMultiplePlots","cardTitle","Typography","ShowMore","Box","theme","plotData","Fragment","Divider","Plot","getPlotStyle","FacetPlotLegendTable","FacetPlotsCardWithSuspense","Suspense"],"mappings":"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"}