synapse-react-client 4.0.5 → 4.0.7

package/dist/components/DataGrid/SynapseGrid.js

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as m, Fragment as z } from "react/jsx-runtime";
-import ot from "./components/GridMenuButton/GridMenuButton.js";
-import rt from "./components/UploadCsvToGridButton.js";
-import it from "./components/ExportCsvFromGridButton.js";
-import et from "./hooks/useGetSchemaForGrid.js";
-import mt from "./MergeGridWithSourceTableButton.js";
-import pt from "./utils/computeReplicaSelectionModel.js";
-import nt from "./utils/modelRowsToGrid.js";
+import { jsx as t, jsxs as n, Fragment as w } from "react/jsx-runtime";
+import nt from "./components/GridMenuButton/GridMenuButton.js";
+import mt from "./components/UploadCsvToGridButton.js";
+import pt from "./components/ExportCsvFromGridButton.js";
+import st from "./hooks/useGetSchemaForGrid.js";
+import ct from "./MergeGridWithSourceTableButton.js";
+import lt from "./utils/computeReplicaSelectionModel.js";
+import dt from "./utils/modelRowsToGrid.js";
 import "../../assets/icons/error_page/maintenance.svg.js";
 import "../../assets/icons/error_page/no-access.svg.js";
 import "../../assets/icons/error_page/unavailable.svg.js";
 import "../../utils/PermissionLevelToAccessType.js";
 import "../../utils/SynapseConstants.js";
-import { forwardRef as st, useState as g, useRef as I, useImperativeHandle as ct, useEffect as E, useMemo as L, useCallback as d } from "react";
+import { forwardRef as at, useState as S, useRef as I, useCallback as d, useImperativeHandle as ut, useEffect as R, useMemo as P } from "react";
 import "../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
@@ -27,11 +27,11 @@ import "@tanstack/query-core";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "lodash-es/xorWith";
-import { Stack as lt } from "@mui/material";
+import { Tooltip as ht, Stack as ft } from "@mui/material";
 import "@sage-bionetworks/synapse-client";
-import { useGetEntity as dt } from "../../synapse-queries/entity/useEntity.js";
+import { useGetEntity as gt } from "../../synapse-queries/entity/useEntity.js";
 import "../../utils/types/IsType.js";
-import { useGetCurrentUserBundle as at } from "../../synapse-queries/user/useUserBundle.js";
+import { useGetCurrentUserBundle as St } from "../../synapse-queries/user/useUserBundle.js";
 import "../../utils/hooks/useCookiePreferences.js";
 import "../../utils/hooks/useSourceAppConfigs.js";
 import "universal-cookie";
@@ -43,7 +43,7 @@ import "react-router";
 import "@mui/icons-material/Close";
 import "../styled/StyledPopover.js";
 import "../Markdown/MarkdownSynapse.js";
-import { SmartToyTwoTone as ut } from "@mui/icons-material";
+import { SmartToyTwoTone as It } from "@mui/icons-material";
 import "react-hot-toast";
 import "react-transition-group";
 /* empty css                                    */
@@ -58,7 +58,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";
@@ -115,7 +114,7 @@ import "../QueryContext/QueryContext.js";
 import "../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "react-share";
 import "../GenericCard/GenericCard.js";
-import { SkeletonTable as ht } from "../Skeleton/SkeletonTable.js";
+import { SkeletonTable as Ct } from "../Skeleton/SkeletonTable.js";
 import "@mui/system";
 import "../GenericCard/Linkify.js";
 import "jotai";
@@ -223,234 +222,281 @@ import s from "@mui/material/Grid";
 import "@mui/icons-material/ArrowForwardIos";
 import "../PortalAclEditor/PortalAclEditor.js";
 import "../SynapseHomepageV2/HomepageStyles.js";
-import { getSchemaPropertiesInfo as ft } from "../../utils/jsonschema/getSchemaPropertyInfo.js";
-import { ClickableJsonCrdt as St } from "clickable-json";
-import { GridAgentChat as gt } from "../SynapseChat/GridAgentChat.js";
-import It from "./DataGrid.js";
-import { useGridUndoRedo as Ct } from "./hooks/useGridUndoRedo.js";
-import { StartGridSession as yt } from "./StartGridSession.js";
-import { useDataGridWebSocket as Et } from "./useDataGridWebsocket.js";
-import { applyModelChange as Rt } from "./utils/applyModelChange.js";
-import { removeNoOpOperations as xt } from "./utils/DataGridUtils.js";
-import { mapOperationsToModelChanges as Gt } from "./utils/mapOperationsToModelChanges.js";
-import bt from "../AccessRequirementList/RequirementItem/CertificationRequirement.js";
-import { ValidationAlert as vt } from "./components/ValidationAlert.js";
-const Ye = st(
-  ({ agentRegistrationId: B, showDebugInfo: R = !1 }, D) => {
-    const [o, P] = g(null), [p, A] = g(null), [j, v] = g(!1), [F, w] = g(
+import { getSchemaPropertiesInfo as yt } from "../../utils/jsonschema/getSchemaPropertyInfo.js";
+import { ClickableJsonCrdt as Rt } from "clickable-json";
+import { GridAgentChat as Et } from "../SynapseChat/GridAgentChat.js";
+import xt from "./DataGrid.js";
+import { useGridUndoRedo as Gt } from "./hooks/useGridUndoRedo.js";
+import { StartGridSession as vt } from "./StartGridSession.js";
+import { useDataGridWebSocket as bt } from "./useDataGridWebsocket.js";
+import { applyModelChange as Tt } from "./utils/applyModelChange.js";
+import { removeNoOpOperations as wt } from "./utils/DataGridUtils.js";
+import { mapOperationsToModelChanges as Nt } from "./utils/mapOperationsToModelChanges.js";
+import { useListGridReplicas as kt } from "../../synapse-queries/grid/useGridSession.js";
+import { useRemoteSelections as Ot } from "./hooks/useRemoteSelections.js";
+import zt from "../AccessRequirementList/RequirementItem/CertificationRequirement.js";
+import { ValidationAlert as Mt } from "./components/ValidationAlert.js";
+const en = at(
+  ({ agentRegistrationId: A, showDebugInfo: E = !1 }, j) => {
+    const [o, F] = S(null), [m, J] = S(null), [W, N] = S(!1), [H, k] = S(
       null
-    ), a = I(null), u = I(null), { data: J, isLoading: W } = at();
-    ct(
-      D,
+    ), h = I(null), f = I(null), { data: V, isLoading: _ } = St(), { data: x = [], refetch: O } = kt(o?.sessionId), G = d(() => {
+      O();
+    }, [O]);
+    ut(
+      j,
       () => ({
-        initializeGrid: (r) => {
-          a.current && a.current.handleStartSession(r);
+        initializeGrid: (i) => {
+          h.current && h.current.handleStartSession(i);
         },
-        loadExistingSession: (r) => {
-          a.current && a.current.handleLoadSession(r);
+        loadExistingSession: (i) => {
+          h.current && h.current.handleLoadSession(i);
         }
       }),
       []
     );
     const {
-      isConnected: n,
-      websocketInstance: T,
-      hasCompletedInitialSync: H,
-      model: i,
-      modelSnapshot: h,
-      connect: k,
+      isConnected: p,
+      websocketInstance: z,
+      hasCompletedInitialSync: $,
+      model: e,
+      modelSnapshot: a,
+      connect: M,
       presignedUrl: c,
-      hasSufficientData: N
-    } = Et(), C = I(null);
-    E(() => {
-      C.current = T;
-    }, [T]);
-    const x = I(null);
-    E(() => {
-      if (p == null || !o?.sessionId) {
-        x.current = null;
+      hasSufficientData: U
+    } = bt({
+      onGridReady: G,
+      onReplicaConnected: G,
+      onReplicaDisconnected: G
+    }), C = I(null);
+    R(() => {
+      C.current = z;
+    }, [z]);
+    const v = I(null);
+    R(() => {
+      if (m == null || !o?.sessionId) {
+        v.current = null;
         return;
       }
-      const r = {
-        replicaId: p,
+      const i = {
+        replicaId: m,
         sessionId: o.sessionId
-      }, e = x.current;
-      e && e.replicaId === r.replicaId && e.sessionId === r.sessionId || (x.current = r, k(p, o.sessionId));
-    }, [p, o?.sessionId, k]), E(() => {
-      i === null && (w(null), u.current && u.current.setActiveCell(null));
-    }, [i]);
-    const G = et(o), { data: V } = dt(
+      }, r = v.current;
+      r && r.replicaId === i.replicaId && r.sessionId === i.sessionId || (v.current = i, M(m, o.sessionId));
+    }, [m, o?.sessionId, M]), R(() => {
+      e === null && (k(null), f.current && f.current.setActiveCell(null));
+    }, [e]);
+    const b = st(o), { data: q } = gt(
       o?.sourceEntityId,
       void 0,
       {
         enabled: !!o?.sourceEntityId
       }
-    ), _ = V?.concreteType === "org.sagebionetworks.repo.model.table.EntityView", b = L(() => ft(G ?? null), [G]), $ = n ? "Connected" : "Disconnected", f = L(
-      () => h ? nt(i, h) : [],
-      [i, h]
+    ), Y = q?.concreteType === "org.sagebionetworks.repo.model.table.EntityView", T = P(() => yt(b ?? null), [b]), K = p ? "Connected" : "Disconnected", Q = Ot(
+      a,
+      e,
+      x,
+      m
+    ), g = P(
+      () => a ? dt(e, a) : [],
+      [e, a]
     ), y = d(() => {
-      !n || !C.current || C.current.sendPatch();
-    }, [n, C]);
-    E(() => {
-      n && y();
-    }, [n, y]);
-    const l = d(
-      (r, e) => {
-        e.forEach((S) => {
-          Rt(r, S, b);
+      !p || !C.current || C.current.sendPatch();
+    }, [p, C]);
+    R(() => {
+      p && y();
+    }, [p, y]);
+    const u = d(
+      (i, r) => {
+        r.forEach((l) => {
+          Tt(i, l, T);
         }), y();
       },
-      [y, b]
-    ), q = d(
-      (r) => {
-        if (!i) {
+      [y, T]
+    ), X = d(
+      (i) => {
+        if (!e) {
           console.error("Model is not initialized");
           return;
         }
-        r.type === "DELETE" && u.current && u.current.setActiveCell(null), l(i, [r]);
+        i.type === "DELETE" && f.current && f.current.setActiveCell(null), u(e, [i]);
       },
-      [i, l]
-    ), { undoUI: Y, redoUI: K, addOperationsToUndoStack: M, clearRedoStack: O } = Ct(q), Q = d(
-      (r, e) => {
-        if (!i) {
+      [e, u]
+    ), { undoUI: Z, redoUI: tt, addOperationsToUndoStack: D, clearRedoStack: L } = Gt(X), ot = d(
+      (i, r) => {
+        if (!e) {
           console.error("Model is not initialized");
           return;
         }
-        if (e = xt(r, f, e), e.length > 0) {
-          O(), M(e, f, r);
-          const S = Gt(e, r);
-          l(i, S);
+        if (r = wt(i, g, r), r.length > 0) {
+          L(), D(r, g, i);
+          const l = Nt(r, i);
+          u(e, l);
         }
       },
       [
-        i,
-        f,
-        O,
-        M,
-        l
+        e,
+        g,
+        L,
+        D,
+        u
       ]
-    ), X = d(
-      (r) => {
-        const { selection: e } = r;
-        if (e != null && (w(e), i != null && p != null)) {
-          const S = pt(
-            e,
-            i
+    ), it = d(
+      (i) => {
+        const { selection: r } = i;
+        if (r != null && (k(r), e != null && m != null)) {
+          const l = lt(
+            r,
+            e
           );
-          l(i, [
+          u(e, [
             {
               type: "SET_SELECTION",
-              replicaId: p.toString(),
-              selection: S
+              replicaId: m.toString(),
+              selection: l
             }
           ]);
         }
       },
-      [l, i, p]
-    ), U = I(null), [, Z] = g({}), tt = d(
-      (r, e) => {
-        r !== null && (U.current = r, Z({}));
+      [u, e, m]
+    ), B = I(null), [, rt] = S({}), et = d(
+      (i, r) => {
+        i !== null && (B.current = i, rt({}));
       },
       []
     );
-    return !W && !J?.isCertified ? /* @__PURE__ */ t(bt, {}) : /* @__PURE__ */ t("div", { children: /* @__PURE__ */ m(s, { container: !0, spacing: 2, children: [
+    return !_ && !V?.isCertified ? /* @__PURE__ */ t(zt, {}) : /* @__PURE__ */ t("div", { children: /* @__PURE__ */ n(s, { container: !0, spacing: 2, children: [
       /* @__PURE__ */ t(s, { size: { xs: 12, xl: 8 }, children: /* @__PURE__ */ t(
-        yt,
+        vt,
         {
-          ref: a,
-          onSessionChange: P,
-          onReplicaChange: A,
-          show: R
+          ref: h,
+          onSessionChange: F,
+          onReplicaChange: J,
+          show: E
         }
       ) }),
-      /* @__PURE__ */ t(s, { size: { xs: 12, xl: 4 }, children: R && /* @__PURE__ */ m("div", { children: [
-        /* @__PURE__ */ m("p", { children: [
+      /* @__PURE__ */ t(s, { size: { xs: 12, xl: 4 }, children: E && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "Session ID: ",
           o?.sessionId || "No session created"
         ] }),
-        /* @__PURE__ */ m("p", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "Replica ID: ",
-          p || "No replica created"
+          m || "No replica created"
         ] }),
-        /* @__PURE__ */ m("p", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "Source Entity ID:",
           " ",
           o?.sourceEntityId || "No source entity"
         ] }),
-        /* @__PURE__ */ m("p", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "JSON Schema $id:",
           " ",
           o?.gridJsonSchema$Id || "No schema attached to session"
         ] }),
-        /* @__PURE__ */ m("p", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "Presigned URL:",
           " ",
           c ? c.substring(0, 30) + (c.length > 30 ? " ... " + c.substring(c.length - 10) : "") : "No URL generated"
         ] }),
-        /* @__PURE__ */ m("p", { children: [
+        /* @__PURE__ */ n("p", { children: [
           "WebSocket Status:",
           " ",
-          /* @__PURE__ */ t("span", { style: { color: n ? "green" : "red" }, children: $ })
-        ] })
+          /* @__PURE__ */ t("span", { style: { color: p ? "green" : "red" }, children: K })
+        ] }),
+        /* @__PURE__ */ t("p", { children: (() => {
+          const i = x.filter(
+            (r) => r.isConnected
+          );
+          return /* @__PURE__ */ n(w, { children: [
+            "Connected Replicas (",
+            i.length,
+            " /",
+            " ",
+            x.length,
+            " total):",
+            " ",
+            i.length === 0 ? "none" : i.map((r, l) => /* @__PURE__ */ t(
+              ht,
+              {
+                title: /* @__PURE__ */ t("pre", { style: { margin: 0, fontSize: "11px" }, children: JSON.stringify(r, null, 2) }),
+                children: /* @__PURE__ */ n(
+                  "span",
+                  {
+                    style: {
+                      cursor: "pointer",
+                      textDecoration: "underline dotted"
+                    },
+                    children: [
+                      r.replicaId,
+                      l < i.length - 1 ? ", " : ""
+                    ]
+                  }
+                )
+              },
+              r.replicaId
+            ))
+          ] });
+        })() })
       ] }) }),
-      o && /* @__PURE__ */ m(z, { children: [
-        !N && /* @__PURE__ */ m(s, { size: 12, children: [
+      o && /* @__PURE__ */ n(w, { children: [
+        !U && /* @__PURE__ */ n(s, { size: 12, children: [
           /* @__PURE__ */ t("h3", { children: "Setting up grid..." }),
-          /* @__PURE__ */ m("div", { style: { marginBottom: "10px" }, children: [
+          /* @__PURE__ */ n("div", { style: { marginBottom: "10px" }, children: [
             !o && /* @__PURE__ */ t("p", { children: "Creating grid session..." }),
-            o && !p && /* @__PURE__ */ t("p", { children: "Setting up real-time sync..." }),
-            o && p && !c && /* @__PURE__ */ t("p", { children: "Establishing secure connection..." }),
-            o && p && c && !n && /* @__PURE__ */ t("p", { children: "Connecting to server..." }),
-            n && !H && /* @__PURE__ */ t("p", { children: "Loading table data..." }),
-            /* @__PURE__ */ t(ht, { numRows: 4, numCols: 1 })
+            o && !m && /* @__PURE__ */ t("p", { children: "Setting up real-time sync..." }),
+            o && m && !c && /* @__PURE__ */ t("p", { children: "Establishing secure connection..." }),
+            o && m && c && !p && /* @__PURE__ */ t("p", { children: "Connecting to server..." }),
+            p && !$ && /* @__PURE__ */ t("p", { children: "Loading table data..." }),
+            /* @__PURE__ */ t(Ct, { numRows: 4, numCols: 1 })
           ] })
         ] }),
-        N && /* @__PURE__ */ m(z, { children: [
-          /* @__PURE__ */ t(s, { size: 12, children: /* @__PURE__ */ m(
-            lt,
+        U && /* @__PURE__ */ n(w, { children: [
+          /* @__PURE__ */ t(s, { size: 12, children: /* @__PURE__ */ n(
+            ft,
             {
               direction: "row",
               spacing: 1,
               sx: { justifyContent: "flex-end" },
               children: [
-                Y,
-                K,
+                Z,
+                tt,
                 /* @__PURE__ */ t(
-                  ot,
+                  nt,
                   {
                     variant: "outlined",
-                    onClick: () => v(!0),
-                    startIcon: /* @__PURE__ */ t(ut, {}),
+                    onClick: () => N(!0),
+                    startIcon: /* @__PURE__ */ t(It, {}),
                     children: "Open chat"
                   }
                 ),
                 /* @__PURE__ */ t(
-                  gt,
+                  Et,
                   {
-                    agentRegistrationId: B,
-                    open: j,
-                    onClose: () => v(!1),
+                    agentRegistrationId: A,
+                    open: W,
+                    onClose: () => N(!1),
                     gridSessionId: o.sessionId,
-                    usersReplicaId: p,
+                    usersReplicaId: m,
                     chatbotName: "Grid Assistant"
                   }
                 ),
                 o.sourceEntityId && /* @__PURE__ */ t(
-                  rt,
+                  mt,
                   {
                     sourceEntityId: o.sourceEntityId,
                     gridSessionId: o.sessionId
                   }
                 ),
                 o.sessionId && /* @__PURE__ */ t(
-                  it,
+                  pt,
                   {
                     gridSessionId: o.sessionId,
                     filename: "grid-" + (o.sourceEntityId || "export")
                   }
                 ),
                 o.sourceEntityId && /* @__PURE__ */ t(
-                  mt,
+                  ct,
                   {
                     sourceEntityId: o.sourceEntityId,
                     gridSessionId: o.sessionId
@@ -460,30 +506,31 @@ const Ye = st(
             }
           ) }),
           /* @__PURE__ */ t(s, { size: 12, children: /* @__PURE__ */ t(
-            It,
+            xt,
             {
-              gridRef: u,
-              rowValues: f,
-              columnNames: h?.columnNames ?? [],
-              columnOrder: h?.columnOrder ?? [],
-              schemaPropertiesInfo: b,
-              entityIsView: _,
-              jsonSchema: G,
-              lastSelection: F,
-              handleChange: Q,
-              handleSelectionChange: X,
-              onSelectedRowChange: tt
+              gridRef: f,
+              rowValues: g,
+              columnNames: a?.columnNames ?? [],
+              columnOrder: a?.columnOrder ?? [],
+              schemaPropertiesInfo: T,
+              entityIsView: Y,
+              jsonSchema: b,
+              lastSelection: H,
+              handleChange: ot,
+              handleSelectionChange: it,
+              onSelectedRowChange: et,
+              remoteSelections: Q
             }
           ) }),
           /* @__PURE__ */ t(s, { size: 12, children: /* @__PURE__ */ t(
-            vt,
+            Mt,
             {
-              selectedRowIndex: U.current,
-              rowValues: f
+              selectedRowIndex: B.current,
+              rowValues: g
             }
           ) })
         ] }),
-        R && /* @__PURE__ */ m(
+        E && /* @__PURE__ */ n(
           s,
           {
             size: 12,
@@ -496,7 +543,7 @@ const Ye = st(
             },
             children: [
               /* @__PURE__ */ t("h3", { children: "Model" }),
-              i ? /* @__PURE__ */ t(St, { model: i }) : "No model available"
+              e ? /* @__PURE__ */ t(Rt, { model: e }) : "No model available"
             ]
           }
         )
@@ -505,6 +552,6 @@ const Ye = st(
   }
 );
 export {
-  Ye as default
+  en as default
 };
 //# sourceMappingURL=SynapseGrid.js.map