synapse-react-client 4.0.25 → 4.0.27

package/dist/components/ProjectStorage/ProjectDataAvailability.js

@@ -1,97 +1,89 @@
 import { spreadSx as e } from "../../theme/spreadSx.js";
-import { SAGE_OFFERINGS_HELP_URL as t } from "../../utils/SynapseConstants.js";
-import { calculateFriendlyFileSize as n } from "../../utils/functions/calculateFriendlyFileSize.js";
+import { calculateFriendlyFileSize as t } from "../../utils/functions/calculateFriendlyFileSize.js";
 import "../../synapse-client/SynapseClient.js";
 import "../../synapse-client/index.js";
-import { useSynapseContext as r } from "../../utils/context/SynapseContext.js";
+import { useSynapseContext as n } from "../../utils/context/SynapseContext.js";
 import "../../utils/index.js";
-import { useProjectStorageUsage as i } from "../../synapse-queries/entity/useProjectStorage.js";
+import { useProjectStorageUsage as r } from "../../synapse-queries/entity/useProjectStorage.js";
 import "../../synapse-queries/index.js";
-import a from "../HelpPopover/index.js";
 import "react";
-import { Box as o, Tooltip as s, Typography as c } from "@mui/material";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as i, Divider as a, Tooltip as o, Typography as s } from "@mui/material";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/ProjectStorage/ProjectDataAvailability.tsx
-var f = 142;
-function p({ projectId: p, sx: m }) {
-	let { isAuthenticated: h } = r(), { data: g } = i(p, { enabled: !!p && h }), _ = g?.locations.filter((e) => e.storageLocationId == 1), v = _?.length == 1 ? _[0] : void 0;
-	if (!v) return /* @__PURE__ */ u(l, {});
-	let { sumFileBytes: y = 0, maxAllowedFileBytes: b = 0 } = v;
-	if (b == 0) return /* @__PURE__ */ u(l, {});
-	let x = Math.min(Math.round(y / b * f), f), S = n(y, 1), C = n(b, 1).replace(/\.0\s/, " ");
-	return /* @__PURE__ */ d(o, {
+var d = "#576077", f = "#DEE0E5", p = "#38756A", m = .5;
+function h({ projectId: h, sx: g, showBottomDivider: _ = !1 }) {
+	let { isAuthenticated: v } = n(), { data: y } = r(h, { enabled: !!h && v }), b = y?.locations.filter((e) => e.storageLocationId == 1), x = b?.length == 1 ? b[0] : void 0;
+	if (!x) return /* @__PURE__ */ l(c, {});
+	let { sumFileBytes: S = 0, maxAllowedFileBytes: C = 0 } = x;
+	if (C == 0) return /* @__PURE__ */ l(c, {});
+	let w = S / C * 100, T = Math.min(w, 100), E = S === 0 ? "0%" : w < 1 ? "<1%" : `${Math.round(w)}%`, D = S === 0 ? 0 : Math.max(T, m), O = t(S, 1), k = t(C, 1).replace(/\.0\s/, " ");
+	return /* @__PURE__ */ u(i, {
 		sx: e({
 			display: "flex",
 			flexDirection: "column",
-			width: "210px",
+			width: "100%",
 			fontFamily: "DM Sans",
-			color: "white",
-			px: "10px"
-		}, m),
-		children: [/* @__PURE__ */ d(o, {
-			sx: {
-				display: "flex",
-				flexDirection: "row",
-				gap: "5px"
-			},
-			children: [
-				/* @__PURE__ */ d(c, {
-					sx: {
-						fontWeight: 700,
-						fontSize: "16px"
-					},
-					children: ["Data Availability", " "]
-				}),
-				" ",
-				/* @__PURE__ */ u(a, {
-					containerSx: { fontSize: "12px" },
-					markdownText: "Hosting Plan Options:\n- Basic Plan: Free, for sharing small datasets (<100GB) with self-service setup. No direct support.\n- Self-Managed Plan: Ideal for data longevity, FAIR principles, and NIH compliance. Includes consultation services and data access management tools.\n- Data Coordination Plan: For large, multi-institutional projects, with personalized consulting, data curation, and a custom data portal.",
-					helpUrl: t
-				})
-			]
-		}), v.maxAllowedFileBytes && /* @__PURE__ */ u(s, {
-			title: `Using ${S} out of ${C}`,
-			children: /* @__PURE__ */ d(o, {
+			color: d
+		}, g),
+		children: [
+			/* @__PURE__ */ l(i, {
 				sx: {
 					display: "flex",
 					flexDirection: "row",
-					gap: "5px",
-					alignItems: "center"
+					marginBottom: "10px"
 				},
-				children: [
-					/* @__PURE__ */ u(c, {
-						variant: "body1",
-						sx: { fontSize: "12px" },
-						children: "0"
-					}),
-					/* @__PURE__ */ u(o, {
-						sx: {
-							width: `${f}px`,
-							height: "4px",
-							backgroundColor: "white",
-							borderRadius: "50px"
-						},
-						children: /* @__PURE__ */ u(o, { sx: {
-							width: `${x}px`,
-							height: "4px",
-							backgroundColor: "#EDC766",
-							borderRadius: "50px"
-						} })
-					}),
-					/* @__PURE__ */ u(c, {
-						variant: "body1",
+				children: /* @__PURE__ */ u(s, {
+					sx: {
+						fontWeight: 500,
+						fontSize: "12px",
+						textTransform: "uppercase"
+					},
+					children: ["Data Availability", " "]
+				})
+			}),
+			x.maxAllowedFileBytes && /* @__PURE__ */ l(o, {
+				title: `Using ${O} out of ${k}`,
+				children: /* @__PURE__ */ u(i, {
+					sx: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "8px"
+					},
+					children: [/* @__PURE__ */ l(i, {
 						sx: {
-							fontSize: "12px",
-							whiteSpace: "nowrap"
+							display: "flex",
+							flexDirection: "row",
+							alignItems: "center"
 						},
-						children: C
-					})
-				]
-			})
-		})]
+						children: /* @__PURE__ */ l(i, {
+							sx: {
+								width: "100%",
+								height: "6px",
+								backgroundColor: f,
+								borderRadius: "50px"
+							},
+							children: /* @__PURE__ */ l(i, { sx: {
+								width: `${D}%`,
+								height: "6px",
+								backgroundColor: p,
+								borderRadius: "50px"
+							} })
+						})
+					}), /* @__PURE__ */ l(s, {
+						variant: "body2",
+						sx: { color: d },
+						children: `${E} of ${k}`
+					})]
+				})
+			}),
+			_ && /* @__PURE__ */ l(a, { sx: {
+				mt: "16px",
+				borderColor: "rgba(226, 228, 234, 0.50)"
+			} })
+		]
 	});
 }
 //#endregion
-export { p as ProjectDataAvailability, p as default };
+export { h as ProjectDataAvailability, h as default };
 
 //# sourceMappingURL=ProjectDataAvailability.js.map

package/dist/components/ProjectStorage/ProjectDataAvailability.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDataAvailability.js","names":[],"sources":["../../../src/components/ProjectStorage/ProjectDataAvailability.tsx"],"sourcesContent":["import { SYNAPSE_STORAGE_LOCATION_ID } from '@/synapse-client'\nimport { useProjectStorageUsage } from '@/synapse-queries'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useSynapseContext } from '@/utils'\nimport { calculateFriendlyFileSize } from '@/utils/functions/calculateFriendlyFileSize'\nimport { SAGE_OFFERINGS_HELP_URL } from '@/utils/SynapseConstants'\nimport { Box, SxProps, Tooltip, Typography } from '@mui/material'\nimport React from 'react'\nimport HelpPopover from '../HelpPopover'\n\nexport type ProjectDataAvailabilityProps = {\n  projectId?: string\n  sx?: SxProps\n}\nconst usageBarWidth = 142 //px\n\nexport function ProjectDataAvailability({\n  projectId,\n  sx,\n}: ProjectDataAvailabilityProps): React.ReactNode {\n  const { isAuthenticated } = useSynapseContext()\n  const { data } = useProjectStorageUsage(projectId!, {\n    enabled: !!projectId && isAuthenticated,\n  })\n  const projectDataUsageArray = data?.locations.filter(\n    v => v.storageLocationId == SYNAPSE_STORAGE_LOCATION_ID,\n  )\n  const synapseStorageUsage =\n    projectDataUsageArray?.length == 1 ? projectDataUsageArray[0] : undefined\n  if (!synapseStorageUsage) {\n    return <></>\n  }\n  const { sumFileBytes = 0, maxAllowedFileBytes = 0 } = synapseStorageUsage\n  if (maxAllowedFileBytes == 0) {\n    return <></>\n  }\n  const usageBarFilledPx = Math.min(\n    Math.round((sumFileBytes / maxAllowedFileBytes) * usageBarWidth),\n    usageBarWidth,\n  )\n  const friendlySumFileBytes = calculateFriendlyFileSize(sumFileBytes, 1)\n  const friendlyMaxAllowedFileBytes = calculateFriendlyFileSize(\n    maxAllowedFileBytes,\n    1,\n  ).replace(/\\.0\\s/, ' ') // SWC-7183: remove '.0 ' from the string if it exists\n  return (\n    <Box\n      sx={spreadSx(\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          width: '210px',\n          fontFamily: 'DM Sans',\n          color: 'white',\n          px: '10px',\n        },\n        sx,\n      )}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          gap: '5px',\n        }}\n      >\n        <Typography\n          sx={{\n            // match current styles in Project metadata\n            fontWeight: 700,\n            fontSize: '16px',\n          }}\n        >\n          Data Availability{' '}\n        </Typography>{' '}\n        <HelpPopover\n          containerSx={{\n            fontSize: '12px',\n          }}\n          markdownText=\"Hosting Plan Options:\n- Basic Plan: Free, for sharing small datasets (<100GB) with self-service setup. No direct support.\n- Self-Managed Plan: Ideal for data longevity, FAIR principles, and NIH compliance. Includes consultation services and data access management tools.\n- Data Coordination Plan: For large, multi-institutional projects, with personalized consulting, data curation, and a custom data portal.\"\n          helpUrl={SAGE_OFFERINGS_HELP_URL}\n        />\n      </Box>\n      {synapseStorageUsage.maxAllowedFileBytes && (\n        <Tooltip\n          title={`Using ${friendlySumFileBytes} out of ${friendlyMaxAllowedFileBytes}`}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              gap: '5px',\n              alignItems: 'center',\n            }}\n          >\n            <Typography\n              variant=\"body1\"\n              sx={{\n                fontSize: '12px',\n              }}\n            >\n              0\n            </Typography>\n            {/* Progress Bar */}\n            <Box\n              sx={{\n                width: `${usageBarWidth}px`,\n                height: '4px',\n                backgroundColor: 'white',\n                borderRadius: '50px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: `${usageBarFilledPx}px`,\n                  height: '4px',\n                  backgroundColor: '#EDC766',\n                  borderRadius: '50px',\n                }}\n              ></Box>\n            </Box>\n            <Typography\n              variant=\"body1\"\n              sx={{\n                fontSize: '12px',\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {friendlyMaxAllowedFileBytes}\n            </Typography>\n          </Box>\n        </Tooltip>\n      )}\n    </Box>\n  )\n}\n\nexport default ProjectDataAvailability\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAM,IAAgB;AAEtB,SAAgB,EAAwB,EACtC,cACA,SACgD;CAChD,IAAM,EAAE,uBAAoB,EAAkB,GACxC,EAAE,YAAS,EAAuB,GAAY,EAClD,SAAS,CAAC,CAAC,KAAa,EAC1B,CAAC,GACK,IAAwB,GAAM,UAAU,QAC5C,MAAK,EAAE,qBAAA,CACT,GACM,IACJ,GAAuB,UAAU,IAAI,EAAsB,KAAK,KAAA;CAClE,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,EAAE,kBAAe,GAAG,yBAAsB,MAAM;CACtD,IAAI,KAAuB,GACzB,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAmB,KAAK,IAC5B,KAAK,MAAO,IAAe,IAAuB,CAAa,GAC/D,CACF,GACM,IAAuB,EAA0B,GAAc,CAAC,GAChE,IAA8B,EAClC,GACA,CACF,EAAE,QAAQ,SAAS,GAAG;CACtB,OACE,kBAAC,GAAD;EACE,IAAI,EACF;GACE,SAAS;GACT,eAAe;GACf,OAAO;GACP,YAAY;GACZ,OAAO;GACP,IAAI;EACN,GACA,CACF;YAXF,CAaE,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,KAAK;GACP;aALF;IAOE,kBAAC,GAAD;KACE,IAAI;MAEF,YAAY;MACZ,UAAU;KACZ;eALF,CAMC,qBACmB,GACR;;IAAE;IACd,kBAAC,GAAD;KACE,aAAa,EACX,UAAU,OACZ;KACA,cAAa;KAIb,SAAS;IACV,CAAA;GACE;MACJ,EAAoB,uBACnB,kBAAC,GAAD;GACE,OAAO,SAAS,EAAqB,UAAU;aAE/C,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,eAAe;KACf,KAAK;KACL,YAAY;IACd;cANF;KAQE,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI,EACF,UAAU,OACZ;gBACD;KAEW,CAAA;KAEZ,kBAAC,GAAD;MACE,IAAI;OACF,OAAO,GAAG,EAAc;OACxB,QAAQ;OACR,iBAAiB;OACjB,cAAc;MAChB;gBAEA,kBAAC,GAAD,EACE,IAAI;OACF,OAAO,GAAG,EAAiB;OAC3B,QAAQ;OACR,iBAAiB;OACjB,cAAc;MAChB,EACI,CAAA;KACH,CAAA;KACL,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,UAAU;OACV,YAAY;MACd;gBAEC;KACS,CAAA;IACT;;EACE,CAAA,CAER;;AAET"}
+{"version":3,"file":"ProjectDataAvailability.js","names":[],"sources":["../../../src/components/ProjectStorage/ProjectDataAvailability.tsx"],"sourcesContent":["import { SYNAPSE_STORAGE_LOCATION_ID } from '@/synapse-client'\nimport { useProjectStorageUsage } from '@/synapse-queries'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useSynapseContext } from '@/utils'\nimport { calculateFriendlyFileSize } from '@/utils/functions/calculateFriendlyFileSize'\nimport { Box, SxProps, Tooltip, Typography, Divider } from '@mui/material'\nimport React from 'react'\n\nexport type ProjectDataAvailabilityProps = {\n  projectId?: string\n  sx?: SxProps\n  showBottomDivider?: boolean\n}\nconst textColor = '#576077'\nconst trackColor = '#DEE0E5'\nconst fillColor = '#38756A'\nconst MIN_VISIBLE_USAGE_PERCENT = 0.5\n\nexport function ProjectDataAvailability({\n  projectId,\n  sx,\n  showBottomDivider = false,\n}: ProjectDataAvailabilityProps): React.ReactNode {\n  const { isAuthenticated } = useSynapseContext()\n  const { data } = useProjectStorageUsage(projectId!, {\n    enabled: !!projectId && isAuthenticated,\n  })\n  const projectDataUsageArray = data?.locations.filter(\n    v => v.storageLocationId == SYNAPSE_STORAGE_LOCATION_ID,\n  )\n  const synapseStorageUsage =\n    projectDataUsageArray?.length == 1 ? projectDataUsageArray[0] : undefined\n  if (!synapseStorageUsage) {\n    return <></>\n  }\n  const { sumFileBytes = 0, maxAllowedFileBytes = 0 } = synapseStorageUsage\n  if (maxAllowedFileBytes == 0) {\n    return <></>\n  }\n  const rawUsagePercent = (sumFileBytes / maxAllowedFileBytes) * 100\n  const boundedUsagePercent = Math.min(rawUsagePercent, 100)\n\n  const usagePercentLabel =\n    sumFileBytes === 0\n      ? '0%'\n      : rawUsagePercent < 1\n        ? '<1%'\n        : `${Math.round(rawUsagePercent)}%`\n\n  const usageBarPercent =\n    sumFileBytes === 0\n      ? 0\n      : Math.max(boundedUsagePercent, MIN_VISIBLE_USAGE_PERCENT)\n\n  const friendlySumFileBytes = calculateFriendlyFileSize(sumFileBytes, 1)\n  const friendlyMaxAllowedFileBytes = calculateFriendlyFileSize(\n    maxAllowedFileBytes,\n    1,\n  ).replace(/\\.0\\s/, ' ') // SWC-7183: remove '.0 ' from the string if it exists\n  return (\n    <Box\n      sx={spreadSx(\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          width: '100%',\n          fontFamily: 'DM Sans',\n          color: textColor,\n        },\n        sx,\n      )}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          marginBottom: '10px',\n        }}\n      >\n        <Typography\n          sx={{\n            // match current styles in Project metadata\n            fontWeight: 500,\n            fontSize: '12px',\n            textTransform: 'uppercase',\n          }}\n        >\n          Data Availability{' '}\n        </Typography>\n      </Box>\n      {synapseStorageUsage.maxAllowedFileBytes && (\n        <Tooltip\n          title={`Using ${friendlySumFileBytes} out of ${friendlyMaxAllowedFileBytes}`}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: '8px',\n            }}\n          >\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n              }}\n            >\n              {/* Progress Bar */}\n              <Box\n                sx={{\n                  width: '100%',\n                  height: '6px',\n                  backgroundColor: trackColor,\n                  borderRadius: '50px',\n                }}\n              >\n                <Box\n                  sx={{\n                    width: `${usageBarPercent}%`,\n                    height: '6px',\n                    backgroundColor: fillColor,\n                    borderRadius: '50px',\n                  }}\n                ></Box>\n              </Box>\n            </Box>\n            <Typography\n              variant=\"body2\"\n              sx={{\n                color: textColor,\n              }}\n            >\n              {`${usagePercentLabel} of ${friendlyMaxAllowedFileBytes}`}\n            </Typography>\n          </Box>\n        </Tooltip>\n      )}\n      {showBottomDivider && (\n        <Divider\n          sx={{\n            mt: '16px',\n            borderColor: 'rgba(226, 228, 234, 0.50)',\n          }}\n        />\n      )}\n    </Box>\n  )\n}\n\nexport default ProjectDataAvailability\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAY,WACZ,IAAa,WACb,IAAY,WACZ,IAA4B;AAElC,SAAgB,EAAwB,EACtC,cACA,OACA,uBAAoB,MAC4B;CAChD,IAAM,EAAE,uBAAoB,EAAkB,GACxC,EAAE,YAAS,EAAuB,GAAY,EAClD,SAAS,CAAC,CAAC,KAAa,EAC1B,CAAC,GACK,IAAwB,GAAM,UAAU,QAC5C,MAAK,EAAE,qBAAA,CACT,GACM,IACJ,GAAuB,UAAU,IAAI,EAAsB,KAAK,KAAA;CAClE,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,EAAE,kBAAe,GAAG,yBAAsB,MAAM;CACtD,IAAI,KAAuB,GACzB,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAmB,IAAe,IAAuB,KACzD,IAAsB,KAAK,IAAI,GAAiB,GAAG,GAEnD,IACJ,MAAiB,IACb,OACA,IAAkB,IAChB,QACA,GAAG,KAAK,MAAM,CAAe,EAAE,IAEjC,IACJ,MAAiB,IACb,IACA,KAAK,IAAI,GAAqB,CAAyB,GAEvD,IAAuB,EAA0B,GAAc,CAAC,GAChE,IAA8B,EAClC,GACA,CACF,EAAE,QAAQ,SAAS,GAAG;CACtB,OACE,kBAAC,GAAD;EACE,IAAI,EACF;GACE,SAAS;GACT,eAAe;GACf,OAAO;GACP,YAAY;GACZ,OAAO;EACT,GACA,CACF;YAVF;GAYE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,eAAe;KACf,cAAc;IAChB;cAEA,kBAAC,GAAD;KACE,IAAI;MAEF,YAAY;MACZ,UAAU;MACV,eAAe;KACjB;eANF,CAOC,qBACmB,GACR;;GACT,CAAA;GACJ,EAAoB,uBACnB,kBAAC,GAAD;IACE,OAAO,SAAS,EAAqB,UAAU;cAE/C,kBAAC,GAAD;KACE,IAAI;MACF,SAAS;MACT,eAAe;MACf,KAAK;KACP;eALF,CAOE,kBAAC,GAAD;MACE,IAAI;OACF,SAAS;OACT,eAAe;OACf,YAAY;MACd;gBAGA,kBAAC,GAAD;OACE,IAAI;QACF,OAAO;QACP,QAAQ;QACR,iBAAiB;QACjB,cAAc;OAChB;iBAEA,kBAAC,GAAD,EACE,IAAI;QACF,OAAO,GAAG,EAAgB;QAC1B,QAAQ;QACR,iBAAiB;QACjB,cAAc;OAChB,EACI,CAAA;MACH,CAAA;KACF,CAAA,GACL,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI,EACF,OAAO,EACT;gBAEC,GAAG,EAAkB,MAAM;KAClB,CAAA,CACT;;GACE,CAAA;GAEV,KACC,kBAAC,GAAD,EACE,IAAI;IACF,IAAI;IACJ,aAAa;GACf,EACD,CAAA;EAEA;;AAET"}

package/dist/components/ProvenanceGraph/ProvenanceGraph.d.ts

@@ -8,7 +8,10 @@ export type ProvenanceProps = {
     initialEdges?: Edge[];
     onNodesChangedListener?: (nodes: Node[]) => void;
     onEdgesChangedListener?: (edges: Edge[]) => void;
+    onEditProvenanceClicked?: () => void;
 };
+export declare const EDIT_PROVENANCE_TEXT = "Edit Provenance";
+export declare const NO_PROVENANCE_TITLE = "No provenance data";
 declare const ProvenanceGraph: (props: ProvenanceProps) => React.ReactNode;
 export default ProvenanceGraph;
 //# sourceMappingURL=ProvenanceGraph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProvenanceGraph.d.ts","sourceRoot":"","sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,aAAa,EAKd,MAAM,iCAAiC,CAAA;AAGxC,OAAkB,EAEhB,IAAI,EAEJ,IAAI,EAKL,MAAM,WAAW,CAAA;AAoBlB,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAE5B,UAAU,EAAE,aAAa,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACjD,CAAA;AAgXD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"ProvenanceGraph.d.ts","sourceRoot":"","sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,aAAa,EAKd,MAAM,iCAAiC,CAAA;AAGxC,OAAkB,EAEhB,IAAI,EAEJ,IAAI,EAKL,MAAM,WAAW,CAAA;AAoBlB,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAE5B,UAAU,EAAE,aAAa,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,oBAAoB,oBAAoB,CAAA;AACrD,eAAO,MAAM,mBAAmB,uBAAuB,CAAA;AAscvD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/ProvenanceGraph/ProvenanceGraph.js

@@ -1,96 +1,102 @@
 import { displayToast as e } from "../ToastMessage/ToastMessage.js";
 import t from "../../synapse-client/index.js";
-import { SynapseErrorBoundary as n } from "../error/ErrorBanner.js";
-import { useSynapseContext as r } from "../../utils/context/SynapseContext.js";
-import { useGetEntityHeaders as i } from "../../synapse-queries/entity/useGetEntityHeaders.js";
+import { entityTypeToFriendlyName as n, getEntityTypeFromHeader as r } from "../../utils/functions/EntityTypeUtils.js";
+import { SynapseErrorBoundary as i } from "../error/ErrorBanner.js";
+import { useSynapseContext as a } from "../../utils/context/SynapseContext.js";
+import { useGetEntityHeaders as o } from "../../synapse-queries/entity/useGetEntityHeaders.js";
 import "../../synapse-queries/index.js";
-import { NodeType as a, getLayoutedElements as o, isArrayEqual as s } from "./ProvenanceUtils.js";
-import { addActivityNode as ee, addEntityNode as te, addEntityPlaceholderNode as c, addExpandNode as l, addExternalNode as u, addUndefinedNode as d, findEntityNode as f, isRootEntity as p } from "./ProvenanceGraphUtils.js";
-import { useCallback as m, useEffect as h, useState as g } from "react";
-import { CircularProgress as ne } from "@mui/material";
-import { jsx as _ } from "react/jsx-runtime";
-import { USED_ENTITY_CONCRETE_TYPE_VALUE as v } from "@sage-bionetworks/synapse-types";
-import { useErrorHandler as y } from "react-error-boundary";
-import b, { Controls as x, ReactFlowProvider as S, getConnectedEdges as C, useEdgesState as w, useNodesState as T, useReactFlow as E } from "reactflow";
+import { NodeType as s, getLayoutedElements as ee, isArrayEqual as c } from "./ProvenanceUtils.js";
+import { addActivityNode as te, addEntityNode as ne, addEntityPlaceholderNode as re, addExpandNode as l, addExternalNode as u, addUndefinedNode as ie, findEntityNode as ae, isRootEntity as d } from "./ProvenanceGraphUtils.js";
+import { useCallback as f, useEffect as p, useState as m } from "react";
+import { Button as h, CircularProgress as g, Stack as _, Typography as v } from "@mui/material";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { USED_ENTITY_CONCRETE_TYPE_VALUE as x } from "@sage-bionetworks/synapse-types";
+import { useErrorHandler as S } from "react-error-boundary";
+import C, { Controls as oe, ReactFlowProvider as w, getConnectedEdges as se, useEdgesState as ce, useNodesState as le, useReactFlow as ue } from "reactflow";
 import "reactflow/dist/style.css";
 //#region src/components/ProvenanceGraph/ProvenanceGraph.tsx
-var D = 400, O = .85, k = (n) => {
-	let { entityRefs: S, containerHeight: k = "200px", initialNodes: A = [], initialEdges: j = [], onNodesChangedListener: M, onEdgesChangedListener: N } = n, { accessToken: P } = r(), [F, I] = g(A), [L, R] = g(j), [z, B] = T([]), [V, H] = w([]), [U, W] = g(), G = y(), { data: K, isSuccess: q } = i(S, { throwOnError: !0 });
-	q && K && K.totalNumberOfResults == 0 && G(`Unable to load provenance for the given Synapse IDs: ${S.map((e) => e.targetId).join(",")}`);
-	let J = K?.results, [Y, X] = g(!1), Z = E(), re = m((e, t) => {
-		W(t);
-	}, []), Q = m(async (e) => {
+var T = 400, E = .85, D = "Edit Provenance", O = "No provenance data", de = (e) => `We don’t have any provenance information for this ${e} yet.`, k = "#3B4046", fe = "#F9F9FA", pe = "#4D535A", me = "#9EAAB7", he = "rgba(255, 255, 255, 0.60)", A = (i) => {
+	let { entityRefs: w, containerHeight: D = "200px", initialNodes: A = [], initialEdges: j = [], onNodesChangedListener: M, onEdgesChangedListener: N, onEditProvenanceClicked: P } = i, { accessToken: F } = a(), [I, L] = m(A), [R, z] = m(j), [B, V] = le([]), [H, U] = ce([]), [W, G] = m(), [ge, _e] = m(!1), K = S(), { data: q, isSuccess: ve } = o(w, { throwOnError: !0 }), J = [
+		s.ENTITY_PLACEHOLDER,
+		s.EXTERNAL,
+		s.ACTIVITY,
+		s.EXPAND
+	], ye = B.some((e) => J.includes(e.data.type)), be = ge && !ye;
+	ve && q && q.totalNumberOfResults == 0 && K(`Unable to load provenance for the given Synapse IDs: ${w.map((e) => e.targetId).join(",")}`);
+	let Y = q?.results, xe = Y?.[0] ? n(r(Y[0])).toLowerCase() : "entity", [X, Se] = m(!1), Z = ue(), Ce = f((e, t) => {
+		G(t);
+	}, []), Q = f(async (e) => {
 		let { entityHeader: n, nodesCopy: r, edgesCopy: i, usedInActivity: a } = e;
-		te({
+		ne({
 			entityHeader: n,
 			activity: a,
 			nodesCopy: r,
 			edgesCopy: i
 		});
 		try {
-			let e = await t.getActivityForEntity(n.id, n.versionNumber, P);
-			(!p({
+			let e = await t.getActivityForEntity(n.id, n.versionNumber, F);
+			(!d({
 				entityHeader: n,
-				rootEntityHeaders: J
-			}) || e.used && e.used.length >= D) && l({
+				rootEntityHeaders: Y
+			}) || e.used && e.used.length >= T) && l({
 				entityHeader: n,
 				itemCount: e.used?.length,
 				nodesCopy: r,
 				edgesCopy: i
 			});
 		} catch (e) {
-			console.error(e), p({
+			console.error(e), d({
 				entityHeader: n,
-				rootEntityHeaders: J
-			}) && d({
+				rootEntityHeaders: Y
+			}) && ie({
 				entityHeader: n,
 				nodesCopy: r,
 				edgesCopy: i
 			});
 		}
-	}, [P, J]);
-	h(() => {
-		!Y && z.length > 0 && setTimeout(() => {
-			if (J) {
-				let e = f(J[0], z);
+	}, [F, Y]);
+	p(() => {
+		!X && B.length > 0 && setTimeout(() => {
+			if (Y) {
+				let e = ae(Y[0], B);
 				if (e) {
-					let t = Z.getZoom(), n = t > O ? O : t;
+					let t = Z.getZoom(), n = t > E ? E : t;
 					Z?.setCenter(e.position.x + 150, e.position.y - 30, {
 						zoom: n,
 						duration: 0
 					});
 				}
-				X(!0);
+				Se(!0);
 			}
 		});
 	}, [
-		Y,
-		z,
+		X,
+		B,
 		Z,
-		J
+		Y
 	]);
-	let $ = m(async (e) => {
+	let $ = f(async (e) => {
 		let { entityHeader: n, nodesCopy: r, edgesCopy: i } = e;
 		try {
-			let e = await t.getActivityForEntity(n.id, n.versionNumber, P);
-			if (ee({
+			let e = await t.getActivityForEntity(n.id, n.versionNumber, F);
+			if (te({
 				activity: e,
 				entityHeader: n,
 				nodesCopy: r,
 				edgesCopy: i
-			}), e.used && e.used.length < D) {
+			}), e.used && e.used.length < T) {
 				let n = [];
 				e.used.forEach((t) => {
-					t.concreteType == v ? n.push(t.reference) : u({
+					t.concreteType == x ? n.push(t.reference) : u({
 						usedURL: t,
 						activity: e,
 						nodesCopy: r,
 						edgesCopy: i
 					});
 				});
-				let { results: a } = await t.getEntityHeaders(n, P);
+				let { results: a } = await t.getEntityHeaders(n, F);
 				n.filter((e) => a.find((t) => t.id == e.targetId) == null).forEach((t) => {
-					c({
+					re({
 						ref: t,
 						activity: e,
 						nodesCopy: r,
@@ -110,11 +116,11 @@ var D = 400, O = .85, k = (n) => {
 		} catch (e) {
 			console.error(e);
 		}
-	}, [P, Q]);
-	h(() => {
-		if (J && F.length == 0) {
-			let e = [...F], t = [...L], n = [];
-			J.forEach((r) => {
+	}, [F, Q]);
+	p(() => {
+		if (Y && I.length == 0) {
+			let e = [...I], t = [...R], n = [];
+			Y.forEach((r) => {
 				let i = Q({
 					entityHeader: r,
 					nodesCopy: e,
@@ -128,86 +134,135 @@ var D = 400, O = .85, k = (n) => {
 				});
 				n.push(a);
 			}), Promise.allSettled(n).finally(() => {
-				I(e), R(t);
+				L(e), z(t), _e(!0);
 			});
 		}
 	}, [
 		Q,
-		G,
+		K,
 		$,
-		J,
-		S,
-		L,
-		F
-	]), h(() => {
-		let t = U?.data;
-		if (U && t?.type == a.EXPAND) {
+		Y,
+		w,
+		R,
+		I
+	]), p(() => {
+		let t = W?.data;
+		if (W && t?.type == s.EXPAND) {
 			let n = t.props;
-			if (n.itemCount > D) {
+			if (n.itemCount > T) {
 				e("Web visualization does not support expanding this many items at this time.", "danger");
 				return;
 			} else {
-				t.label = /* @__PURE__ */ _(ne, { size: 30 });
-				let e = F.filter((e) => e.id != U.id), r = C([U], L)[0], i = L.filter((e) => e != r);
+				t.label = /* @__PURE__ */ y(g, { size: 30 });
+				let e = I.filter((e) => e.id != W.id), r = se([W], R)[0], i = R.filter((e) => e != r);
 				$({
 					entityHeader: n.entityHeader,
 					nodesCopy: e,
 					edgesCopy: i
 				}).finally(() => {
-					I(e), R(i);
+					L(e), z(i);
 				});
 			}
-			W(void 0);
+			G(void 0);
 		}
 	}, [
-		U,
-		F,
-		L,
+		W,
+		I,
+		R,
 		$
-	]), h(() => {
-		let { nodes: e, edges: t } = o(F, L, "TB");
-		s(e, z) || (B(e), M && M(e)), s(t, V) || (H(t), N && N(t));
+	]), p(() => {
+		let { nodes: e, edges: t } = ee(I, R, "TB");
+		c(e, B) || (V(e), M && M(e)), c(t, H) || (U(t), N && N(t));
 	}, [
-		F,
-		L,
-		z,
-		V,
+		I,
+		R,
 		B,
 		H,
-		Y,
+		V,
+		U,
+		X,
 		Z,
-		S,
+		w,
 		M,
 		N
 	]);
-	let ie = m((e) => {
+	let we = f((e) => {
 		e && e.deltaX !== void 0 && e.deltaY !== void 0 && window.scrollTo(window.scrollX + e.deltaX, window.scrollY + e.deltaY);
 	}, []);
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "ProvenanceWidget",
 		role: "graphics-doc",
 		style: {
 			width: "100%",
-			height: k
+			height: D,
+			backgroundColor: fe,
+			padding: "15px"
 		},
-		children: /* @__PURE__ */ _(b, {
+		children: be ? /* @__PURE__ */ b(_, {
+			sx: {
+				display: "flex",
+				height: "100%",
+				alignItems: "center",
+				justifyContent: "center",
+				textAlign: "center"
+			},
+			children: [
+				/* @__PURE__ */ y(v, {
+					sx: {
+						color: k,
+						fontSize: "16px",
+						lineHeight: "24px",
+						fontWeight: 540,
+						marginBottom: "12px"
+					},
+					children: O
+				}),
+				/* @__PURE__ */ y(v, {
+					sx: {
+						color: k,
+						fontSize: "14px",
+						lineHeight: "20px",
+						fontWeight: 440
+					},
+					children: de(xe)
+				}),
+				P && /* @__PURE__ */ y(h, {
+					variant: "outlined",
+					sx: {
+						borderRadius: "6px",
+						border: "1px solid",
+						borderColor: me,
+						background: he,
+						color: pe,
+						fontWeight: 540,
+						lineHeight: "12px",
+						letterSpacing: "-0.24px",
+						marginTop: "20px",
+						height: "28px",
+						padding: "8px"
+					},
+					onClick: P,
+					children: "Edit Provenance"
+				})
+			]
+		}) : /* @__PURE__ */ y(C, {
 			defaultViewport: {
 				x: 0,
 				y: 0,
-				zoom: O
+				zoom: E
 			},
-			nodes: z,
-			edges: V,
-			onNodeClick: re,
+			nodes: B,
+			edges: H,
+			onNodeClick: Ce,
 			attributionPosition: "bottom-right",
 			onConnect: void 0,
 			zoomOnScroll: !1,
-			onPaneScroll: ie,
-			children: /* @__PURE__ */ _(x, {})
+			onPaneScroll: we,
+			children: /* @__PURE__ */ y(oe, {})
 		})
 	});
-}, A = (e) => /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(S, { children: /* @__PURE__ */ _(k, { ...e }) }) });
+}, j = (e) => /* @__PURE__ */ y(i, { children: /* @__PURE__ */ y(w, { children: /* @__PURE__ */ y(A, { ...e }) }) });
 //#endregion
-export { A as default };
+export { D as EDIT_PROVENANCE_TEXT, O as NO_PROVENANCE_TITLE, j as default };
 
 //# sourceMappingURL=ProvenanceGraph.js.map