synapse-react-client 4.0.31 → 4.0.33

package/dist/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.d.ts

@@ -0,0 +1,35 @@
+import { JsonSchemaInfo, JsonSchemaVersionInfo } from '@sage-bionetworks/synapse-client';
+import { OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+import { VersionSelectionType } from './VersionSelectionType';
+export type JsonSchemaSelection = {
+    $id?: string;
+    versionInfo?: JsonSchemaVersionInfo;
+};
+export declare function getSchemaId(schema: JsonSchemaInfo): string;
+export type UseJsonSchemaSelectionParams = {
+    schemas: JsonSchemaInfo[];
+    versionSelectionType: VersionSelectionType;
+    onSelectionChange: (selection: JsonSchemaSelection | undefined) => void;
+    /**
+     * The initially-selected schema/version, e.g. when editing an existing selection. Only
+     * consulted on mount (via useState's lazy initializer) -- to react to a changed
+     * `initialSelected`, remount this hook's consumer with a new `key`, rather than updating this
+     * prop in place.
+     */
+    initialSelected?: JsonSchemaSelection;
+};
+/**
+ * Manages which JsonSchema (and, depending on `versionSelectionType`, which version of that
+ * schema) is currently selected, and reports the resolved selection to `onSelectionChange`.
+ *
+ * Under {@link VersionSelectionType.REQUIRED}, selecting a schema with no version yet chosen
+ * kicks off a fetch of every version, and auto-selects the latest one once it resolves.
+ */
+export declare function useJsonSchemaSelection(params: UseJsonSchemaSelectionParams): {
+    rowSelection: RowSelectionState;
+    selectedVersionInfo: JsonSchemaVersionInfo | undefined;
+    selectedSchema: JsonSchemaInfo | undefined;
+    handleRowSelectionChange: OnChangeFn<RowSelectionState>;
+    handleVersionChange: (versionInfo: JsonSchemaVersionInfo | undefined) => void;
+};
+//# sourceMappingURL=useJsonSchemaSelection.d.ts.map

package/dist/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useJsonSchemaSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,qBAAqB,EACtB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAEL,UAAU,EACV,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAE1D;AA4BD,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,oBAAoB,EAAE,oBAAoB,CAAA;IAC1C,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,GAAG,SAAS,KAAK,IAAI,CAAA;IACvE;;;;;OAKG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;CACtC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,4BAA4B;;;;;uCA4C1D,qBAAqB,GAAG,SAAS;EAgEjD"}

package/dist/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.js

@@ -0,0 +1,60 @@
+import { useSynapseContext as e } from "../../../utils/context/SynapseContext.js";
+import { getJsonSchemaVersionsQuery as t } from "../../../synapse-queries/jsonschema/useListJsonSchemaVersions.js";
+import "../../../synapse-queries/index.js";
+import { VersionSelectionType as n } from "./VersionSelectionType.js";
+import { useMemo as r, useRef as i, useState as a } from "react";
+import { useQueryClient as o } from "@tanstack/react-query";
+import { functionalUpdate as s } from "@tanstack/react-table";
+//#region src/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.ts
+function c(e) {
+	return e.schemaId ?? e.schemaName ?? "";
+}
+function l(e) {
+	return `${e.organizationName}-${e.schemaName}`;
+}
+function u(e, t, r) {
+	if (e && !(r === n.REQUIRED && !t)) return t ? {
+		$id: t.$id,
+		versionInfo: t
+	} : {
+		$id: l(e),
+		versionInfo: void 0
+	};
+}
+function d(l) {
+	let { schemas: d, versionSelectionType: f, onSelectionChange: p, initialSelected: m } = l, { synapseClient: h, keyFactory: g } = e(), _ = o(), [v, y] = a(() => {
+		let e = m?.versionInfo ? c(m.versionInfo) : void 0;
+		return e ? { [e]: !0 } : {};
+	}), [b, x] = a(m?.versionInfo), S = i(v);
+	S.current = v;
+	let C = i(0), w = r(() => {
+		let e = Object.keys(v).find((e) => v[e]);
+		return d.find((t) => c(t) === e);
+	}, [v, d]), T = (e, t) => {
+		x(t), p(u(e, t, f));
+	};
+	return {
+		rowSelection: v,
+		selectedVersionInfo: b,
+		selectedSchema: w,
+		handleRowSelectionChange: (e) => {
+			let r = s(e, S.current), i = Object.keys(r).find((e) => r[e]), a = d.find((e) => c(e) === i);
+			y(r), x(void 0), p(u(a, void 0, f));
+			let o = ++C.current;
+			a && f === n.REQUIRED && _.fetchQuery(t(a.organizationName ?? "", a.schemaName ?? "", {
+				synapseClient: h,
+				keyFactory: g
+			})).then((e) => {
+				let t = e.at(-1);
+				C.current === o && t && T(a, t);
+			}).catch(() => {});
+		},
+		handleVersionChange: (e) => {
+			C.current++, T(w, e);
+		}
+	};
+}
+//#endregion
+export { c as getSchemaId, d as useJsonSchemaSelection };
+
+//# sourceMappingURL=useJsonSchemaSelection.js.map

package/dist/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useJsonSchemaSelection.js","names":[],"sources":["../../../../src/components/JsonSchema/JsonSchemaPicker/useJsonSchemaSelection.ts"],"sourcesContent":["import { getJsonSchemaVersionsQuery } from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  JsonSchemaInfo,\n  JsonSchemaVersionInfo,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  functionalUpdate,\n  OnChangeFn,\n  RowSelectionState,\n} from '@tanstack/react-table'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { useMemo, useRef, useState } from 'react'\nimport { VersionSelectionType } from './VersionSelectionType'\n\nexport type JsonSchemaSelection = {\n  $id?: string\n  versionInfo?: JsonSchemaVersionInfo\n}\n\nexport function getSchemaId(schema: JsonSchemaInfo): string {\n  return schema.schemaId ?? schema.schemaName ?? ''\n}\n\nfunction buildUnversionedSchemaId(schema: JsonSchemaInfo): string {\n  return `${schema.organizationName}-${schema.schemaName}`\n}\n\n/**\n * Computes the `JsonSchemaSelection` to report to the consumer for a given schema/version/\n * VersionSelectionType combination.\n */\nfunction resolveSelection(\n  schema: JsonSchemaInfo | undefined,\n  versionInfo: JsonSchemaVersionInfo | undefined,\n  versionSelectionType: VersionSelectionType,\n): JsonSchemaSelection | undefined {\n  if (!schema) {\n    return undefined\n  }\n  if (versionSelectionType === VersionSelectionType.REQUIRED && !versionInfo) {\n    // Waiting for a numbered version to be resolved before reporting a selection.\n    return undefined\n  }\n  if (versionInfo) {\n    return { $id: versionInfo.$id, versionInfo }\n  }\n  return { $id: buildUnversionedSchemaId(schema), versionInfo: undefined }\n}\n\nexport type UseJsonSchemaSelectionParams = {\n  schemas: JsonSchemaInfo[]\n  versionSelectionType: VersionSelectionType\n  onSelectionChange: (selection: JsonSchemaSelection | undefined) => void\n  /**\n   * The initially-selected schema/version, e.g. when editing an existing selection. Only\n   * consulted on mount (via useState's lazy initializer) -- to react to a changed\n   * `initialSelected`, remount this hook's consumer with a new `key`, rather than updating this\n   * prop in place.\n   */\n  initialSelected?: JsonSchemaSelection\n}\n\n/**\n * Manages which JsonSchema (and, depending on `versionSelectionType`, which version of that\n * schema) is currently selected, and reports the resolved selection to `onSelectionChange`.\n *\n * Under {@link VersionSelectionType.REQUIRED}, selecting a schema with no version yet chosen\n * kicks off a fetch of every version, and auto-selects the latest one once it resolves.\n */\nexport function useJsonSchemaSelection(params: UseJsonSchemaSelectionParams) {\n  const { schemas, versionSelectionType, onSelectionChange, initialSelected } =\n    params\n  const { synapseClient, keyFactory } = useSynapseContext()\n  const queryClient = useQueryClient()\n\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() => {\n    const initialSchemaId = initialSelected?.versionInfo\n      ? getSchemaId(initialSelected.versionInfo)\n      : undefined\n    return initialSchemaId ? { [initialSchemaId]: true } : {}\n  })\n  const [selectedVersionInfo, setSelectedVersionInfo] = useState<\n    JsonSchemaVersionInfo | undefined\n  >(initialSelected?.versionInfo)\n\n  // Mirror rowSelection so handleRowSelectionChange (below) can apply a functional updater\n  // against the *current* selection, rather than the (possibly stale) value closed over at\n  // render time.\n  const rowSelectionRef = useRef(rowSelection)\n  rowSelectionRef.current = rowSelection\n\n  // Identifies the most recent row-selection or manual-version-pick request, which ensures\n  // that only the latest invocation applies a state change. This is necessary because the\n  // \"auto-select latest version\" depends on a network request, and the user may have manually\n  // invoked a different selection before the request resolves.\n  const requestIdRef = useRef(0)\n\n  const selectedSchema = useMemo(() => {\n    const id = Object.keys(rowSelection).find(key => rowSelection[key])\n    return schemas.find(schema => getSchemaId(schema) === id)\n  }, [rowSelection, schemas])\n\n  const applyVersionSelection = (\n    schema: JsonSchemaInfo | undefined,\n    versionInfo: JsonSchemaVersionInfo | undefined,\n  ) => {\n    setSelectedVersionInfo(versionInfo)\n    onSelectionChange(\n      resolveSelection(schema, versionInfo, versionSelectionType),\n    )\n  }\n\n  const handleVersionChange = (\n    versionInfo: JsonSchemaVersionInfo | undefined,\n  ) => {\n    // Invalidate any in-flight \"auto-select latest version\" fetch -- this manual pick wins.\n    requestIdRef.current++\n    applyVersionSelection(selectedSchema, versionInfo)\n  }\n\n  const handleRowSelectionChange: OnChangeFn<\n    RowSelectionState\n  > = updaterOrValue => {\n    const newRowSelection = functionalUpdate(\n      updaterOrValue,\n      rowSelectionRef.current,\n    )\n    const newSelectedId = Object.keys(newRowSelection).find(\n      key => newRowSelection[key],\n    )\n    const newSelectedSchema = schemas.find(\n      schema => getSchemaId(schema) === newSelectedId,\n    )\n\n    setRowSelection(newRowSelection)\n    setSelectedVersionInfo(undefined)\n    onSelectionChange(\n      resolveSelection(newSelectedSchema, undefined, versionSelectionType),\n    )\n\n    const requestId = ++requestIdRef.current\n\n    if (\n      newSelectedSchema &&\n      versionSelectionType === VersionSelectionType.REQUIRED\n    ) {\n      void queryClient\n        .fetchQuery(\n          getJsonSchemaVersionsQuery(\n            newSelectedSchema.organizationName ?? '',\n            newSelectedSchema.schemaName ?? '',\n            { synapseClient, keyFactory },\n          ),\n        )\n        .then(versions => {\n          // The API returns versions lowest-to-highest, so the latest is the last element.\n          const latest = versions.at(-1)\n          if (requestIdRef.current === requestId && latest) {\n            // Apply against the schema this fetch was for -- not `selectedSchema`, whose\n            // closure here is fixed to this render and may be stale by the time this resolves.\n            applyVersionSelection(newSelectedSchema, latest)\n          }\n        })\n        .catch(() => {\n          // Swallow -- JsonSchemaVersionCell's own query for the same key surfaces the error\n          // in the UI; this fetch only exists to opportunistically auto-select \"latest.\"\n        })\n    }\n  }\n\n  return {\n    rowSelection,\n    selectedVersionInfo,\n    selectedSchema,\n    handleRowSelectionChange,\n    handleVersionChange,\n  }\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAY,GAAgC;CAC1D,OAAO,EAAO,YAAY,EAAO,cAAc;AACjD;AAEA,SAAS,EAAyB,GAAgC;CAChE,OAAO,GAAG,EAAO,iBAAiB,GAAG,EAAO;AAC9C;AAMA,SAAS,EACP,GACA,GACA,GACiC;CAC5B,SAGD,QAAyB,EAAqB,YAAY,CAAC,IAO/D,OAHI,IACK;EAAE,KAAK,EAAY;EAAK;CAAY,IAEtC;EAAE,KAAK,EAAyB,CAAM;EAAG,aAAa,KAAA;CAAU;AACzE;AAsBA,SAAgB,EAAuB,GAAsC;CAC3E,IAAM,EAAE,YAAS,yBAAsB,sBAAmB,uBACxD,GACI,EAAE,kBAAe,kBAAe,EAAkB,GAClD,IAAc,EAAe,GAE7B,CAAC,GAAc,KAAmB,QAAkC;EACxE,IAAM,IAAkB,GAAiB,cACrC,EAAY,EAAgB,WAAW,IACvC,KAAA;EACJ,OAAO,IAAkB,GAAG,IAAkB,GAAK,IAAI,CAAC;CAC1D,CAAC,GACK,CAAC,GAAqB,KAA0B,EAEpD,GAAiB,WAAW,GAKxB,IAAkB,EAAO,CAAY;CAC3C,EAAgB,UAAU;CAM1B,IAAM,IAAe,EAAO,CAAC,GAEvB,IAAiB,QAAc;EACnC,IAAM,IAAK,OAAO,KAAK,CAAY,EAAE,MAAK,MAAO,EAAa,EAAI;EAClE,OAAO,EAAQ,MAAK,MAAU,EAAY,CAAM,MAAM,CAAE;CAC1D,GAAG,CAAC,GAAc,CAAO,CAAC,GAEpB,KACJ,GACA,MACG;EAEH,AADA,EAAuB,CAAW,GAClC,EACE,EAAiB,GAAQ,GAAa,CAAoB,CAC5D;CACF;CA4DA,OAAO;EACL;EACA;EACA;EACA,2BApDE,MAAkB;GACpB,IAAM,IAAkB,EACtB,GACA,EAAgB,OAClB,GACM,IAAgB,OAAO,KAAK,CAAe,EAAE,MACjD,MAAO,EAAgB,EACzB,GACM,IAAoB,EAAQ,MAChC,MAAU,EAAY,CAAM,MAAM,CACpC;GAIA,AAFA,EAAgB,CAAe,GAC/B,EAAuB,KAAA,CAAS,GAChC,EACE,EAAiB,GAAmB,KAAA,GAAW,CAAoB,CACrE;GAEA,IAAM,IAAY,EAAE,EAAa;GAEjC,AACE,KACA,MAAyB,EAAqB,YAE9C,EACG,WACC,EACE,EAAkB,oBAAoB,IACtC,EAAkB,cAAc,IAChC;IAAE;IAAe;GAAW,CAC9B,CACF,EACC,MAAK,MAAY;IAEhB,IAAM,IAAS,EAAS,GAAG,EAAE;IAC7B,AAAI,EAAa,YAAY,KAAa,KAGxC,EAAsB,GAAmB,CAAM;GAEnD,CAAC,EACA,YAAY,CAGb,CAAC;EAEP;EAOE,sBA9DA,MACG;GAGH,AADA,EAAa,WACb,EAAsB,GAAgB,CAAW;EACnD;CA0DA;AACF"}

package/dist/components/ProjectInfo/ProjectInfo.css

@@ -1 +1 @@
-._propertyTitle_a17mw_1.MuiTypography-root{color:#747d88;letter-spacing:-.06px;font-size:12px;font-weight:400;line-height:14px}._propertyValue_a17mw_9.MuiTypography-root{color:#4d535a;letter-spacing:-.07px;font-size:14px;font-weight:500;line-height:20px}._propertyRow_a17mw_17{gap:4px}._propertyContainerTitle_a17mw_21{color:#16181e;letter-spacing:-.16px;font-size:16px;font-weight:540;line-height:24px}._propertiesContainer_a17mw_29{gap:12px}
+._propertyTitle_c36xp_1.MuiTypography-root{color:var(--synapse-v2-gray-600);letter-spacing:-.06px;font-size:12px;font-weight:400;line-height:14px}._propertyValue_c36xp_9.MuiTypography-root{color:var(--synapse-v2-gray-800);letter-spacing:-.07px;font-size:14px;font-weight:500;line-height:20px}._propertyRow_c36xp_17{gap:4px}._propertyContainerTitle_c36xp_21{color:#16181e;letter-spacing:-.16px;font-size:16px;font-weight:540;line-height:24px}._propertiesContainer_c36xp_29{gap:12px}

package/dist/components/ProjectInfo/ProjectInfo.module.js

@@ -1,9 +1,9 @@
 import './ProjectInfo.css';var e = {
-	propertyTitle: "_propertyTitle_a17mw_1",
-	propertyValue: "_propertyValue_a17mw_9",
-	propertyRow: "_propertyRow_a17mw_17",
-	propertyContainerTitle: "_propertyContainerTitle_a17mw_21",
-	propertiesContainer: "_propertiesContainer_a17mw_29"
+	propertyTitle: "_propertyTitle_c36xp_1",
+	propertyValue: "_propertyValue_c36xp_9",
+	propertyRow: "_propertyRow_c36xp_17",
+	propertyContainerTitle: "_propertyContainerTitle_c36xp_21",
+	propertiesContainer: "_propertiesContainer_c36xp_29"
 };
 //#endregion
 export { e as default };

package/dist/components/ProjectInfo/ProjectInfo.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectInfo.module.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfo.module.scss"],"sourcesContent":["$project-info-property-title-color: #747d88;\n$project-info-property-value-color: #4d535a;\n$project-info-property-container-title: #16181e;\n\n.propertyTitle:global(.MuiTypography-root) {\n  color: $project-info-property-title-color;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px; /* 100% */\n  letter-spacing: -0.06px;\n}\n\n.propertyValue:global(.MuiTypography-root) {\n  color: $project-info-property-value-color;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n  letter-spacing: -0.07px;\n}\n\n.propertyRow {\n  gap: 4px;\n}\n\n.propertyContainerTitle {\n  color: $project-info-property-container-title;\n  font-size: 16px;\n  font-weight: 540;\n  line-height: 24px; /* 150% */\n  letter-spacing: -0.16px;\n}\n\n.propertiesContainer {\n  gap: 12px;\n}\n"],"mappings":""}
+{"version":3,"file":"ProjectInfo.module.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfo.module.scss"],"sourcesContent":["$project-info-property-container-title: #16181e;\n\n.propertyTitle:global(.MuiTypography-root) {\n  color: var(--synapse-v2-gray-600);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 14px; /* 100% */\n  letter-spacing: -0.06px;\n}\n\n.propertyValue:global(.MuiTypography-root) {\n  color: var(--synapse-v2-gray-800);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n  letter-spacing: -0.07px;\n}\n\n.propertyRow {\n  gap: 4px;\n}\n\n.propertyContainerTitle {\n  color: $project-info-property-container-title;\n  font-size: 16px;\n  font-weight: 540;\n  line-height: 24px; /* 150% */\n  letter-spacing: -0.16px;\n}\n\n.propertiesContainer {\n  gap: 12px;\n}\n"],"mappings":""}

package/dist/components/ProjectInfo/ProjectInfo.module.scss

@@ -1,9 +1,7 @@
-$project-info-property-title-color: #747d88;
-$project-info-property-value-color: #4d535a;
 $project-info-property-container-title: #16181e;
 
 .propertyTitle:global(.MuiTypography-root) {
-  color: $project-info-property-title-color;
+  color: var(--synapse-v2-gray-600);
   font-size: 12px;
   font-weight: 400;
   line-height: 14px; /* 100% */
@@ -11,7 +9,7 @@ $project-info-property-container-title: #16181e;
 }
 
 .propertyValue:global(.MuiTypography-root) {
-  color: $project-info-property-value-color;
+  color: var(--synapse-v2-gray-800);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px; /* 142.857% */

package/dist/components/ProjectInfo/ProjectInfoPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectInfoPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectInfo/ProjectInfoPopover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AASpD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAOD,MAAM,MAAM,gBAAgB,GAAG,uBAAuB,GACpD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;AAiB5D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAwFjE"}
+{"version":3,"file":"ProjectInfoPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectInfo/ProjectInfoPopover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAOpD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAOD,MAAM,MAAM,gBAAgB,GAAG,uBAAuB,GACpD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;AAiB5D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAyFjE"}

package/dist/components/ProjectInfo/ProjectInfoPopover.js

@@ -5,7 +5,7 @@ import r from "./ProjectInfo.module.js";
 import { Link as i, Popover as a, Skeleton as o, Stack as s, Typography as c } from "@mui/material";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/ProjectInfo/ProjectInfoPopover.tsx
-var f = "#B7BFC9", p = ({ title: e, value: t }, n) => /* @__PURE__ */ u(l, { children: t && /* @__PURE__ */ d(s, {
+var f = ({ title: e, value: t }, n) => /* @__PURE__ */ u(l, { children: t && /* @__PURE__ */ d(s, {
 	className: r.propertyRow,
 	children: [/* @__PURE__ */ u(c, {
 		className: r.propertyTitle,
@@ -18,36 +18,36 @@ var f = "#B7BFC9", p = ({ title: e, value: t }, n) => /* @__PURE__ */ u(l, { chi
 		children: t
 	})]
 }) });
-function m(o) {
-	let { anchorEl: l, open: m, id: h, onClose: g, doi: _, projectStorageLocation: v, projectId: y, isLoading: b } = o, x = e(_ ?? ""), S = [
+function p(o) {
+	let { anchorEl: l, open: p, id: m, onClose: h, doi: g, projectStorageLocation: _, projectId: v, isLoading: y } = o, b = e(g ?? ""), x = [
 		{
 			title: "DOI",
-			value: _ ? /* @__PURE__ */ u(i, {
-				href: x,
-				children: _
+			value: g ? /* @__PURE__ */ u(i, {
+				href: b,
+				children: g
 			}) : void 0
 		},
 		{
 			title: "SynId",
 			value: /* @__PURE__ */ u(n, {
-				value: y,
+				value: v,
 				icon: "fileCopy",
 				sx: { svg: { aspectRatio: "1/1" } }
 			})
 		},
 		{
 			title: "Project Storage Location",
-			value: v
+			value: _
 		}
-	].filter((e) => b || e.value !== void 0 && e.value !== "");
+	].filter((e) => y || e.value !== void 0 && e.value !== "");
 	return /* @__PURE__ */ u(a, {
 		"aria-label": "Project information",
 		role: "dialog",
-		id: h,
+		id: m,
 		elevation: 3,
-		open: m,
+		open: p,
 		anchorEl: l,
-		onClose: g,
+		onClose: h,
 		anchorOrigin: {
 			vertical: "bottom",
 			horizontal: "left"
@@ -63,7 +63,8 @@ function m(o) {
 				position: "relative",
 				mt: "6px",
 				borderRadius: "3px",
-				border: `1px solid ${f}`
+				border: "1px solid",
+				borderColor: "greyV2.300"
 			}
 		} },
 		children: /* @__PURE__ */ d(s, {
@@ -77,18 +78,18 @@ function m(o) {
 					children: "Project Information"
 				}),
 				/* @__PURE__ */ u(t, {
-					projectId: y,
+					projectId: v,
 					showBottomDivider: !0
 				}),
 				/* @__PURE__ */ u(s, {
 					className: r.propertiesContainer,
-					children: S.map((e) => p(e, b))
+					children: x.map((e) => f(e, y))
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { m as default };
+export { p as default };
 
 //# sourceMappingURL=ProjectInfoPopover.js.map

package/dist/components/ProjectInfo/ProjectInfoPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectInfoPopover.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfoPopover.tsx"],"sourcesContent":["import { Popover, Typography, Stack, Link, Skeleton } from '@mui/material'\nimport { PopoverProps } from '@mui/material/Popover'\nimport { convertDoiToLink } from '@/utils/functions/RegularExpressions'\nimport { ReactElement, ReactNode } from 'react'\nimport styles from './ProjectInfo.module.scss'\nimport CopyToClipboardString from '../CopyToClipboardString/CopyToClipboardString'\nimport ProjectDataAvailability from '../ProjectStorage'\n\nconst POPOVER_BORDER_COLOR = '#B7BFC9'\n\nexport type ProjectInfoPopoverProps = {\n  doi?: string\n  projectStorageLocation?: string\n  projectId: string\n  isLoading?: boolean\n}\n\ntype Property = {\n  title: string\n  value?: ReactElement | ReactNode\n}\n\nexport type ProjectInfoProps = ProjectInfoPopoverProps &\n  Pick<PopoverProps, 'anchorEl' | 'open' | 'id' | 'onClose'>\n\nconst propertyRow = ({ title, value }: Property, isLoading?: boolean) => (\n  <>\n    {value && (\n      <Stack className={styles.propertyRow}>\n        <Typography className={styles.propertyTitle}>{title}</Typography>\n        {isLoading ? (\n          <Skeleton variant=\"text\" width={'100%'} />\n        ) : (\n          <Typography className={styles.propertyValue}>{value}</Typography>\n        )}\n      </Stack>\n    )}\n  </>\n)\n\nexport default function ProjectInfoPopover(props: ProjectInfoProps) {\n  const {\n    anchorEl,\n    open,\n    id,\n    onClose,\n    doi,\n    projectStorageLocation,\n    projectId,\n    isLoading,\n  } = props\n\n  const doiLink = convertDoiToLink(doi ?? '')\n\n  const properties = [\n    {\n      title: 'DOI',\n      value: doi ? <Link href={doiLink}>{doi}</Link> : undefined,\n    },\n    {\n      title: 'SynId',\n      value: (\n        <CopyToClipboardString\n          value={projectId}\n          icon=\"fileCopy\"\n          sx={{ svg: { aspectRatio: '1/1' } }}\n        />\n      ),\n    },\n    {\n      title: 'Project Storage Location',\n      value: projectStorageLocation,\n    },\n  ]\n\n  const visibleProperties = properties.filter(\n    p => isLoading || (p.value !== undefined && p.value !== ''),\n  )\n\n  return (\n    <Popover\n      aria-label=\"Project information\"\n      role=\"dialog\"\n      id={id}\n      elevation={3}\n      open={open}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'left',\n      }}\n      transformOrigin={{\n        vertical: 'top',\n        horizontal: 'left',\n      }}\n      slotProps={{\n        paper: {\n          square: true,\n          sx: {\n            width: '240px',\n            position: 'relative',\n            mt: '6px',\n            borderRadius: '3px',\n            border: `1px solid ${POPOVER_BORDER_COLOR}`,\n          },\n        },\n      }}\n    >\n      <Stack\n        sx={{\n          gap: '16px',\n          padding: '20px',\n        }}\n      >\n        <Typography className={styles.propertyContainerTitle}>\n          Project Information\n        </Typography>\n        <ProjectDataAvailability\n          projectId={projectId}\n          showBottomDivider={true}\n        />\n        <Stack className={styles.propertiesContainer}>\n          {visibleProperties.map(property => propertyRow(property, isLoading))}\n        </Stack>\n      </Stack>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,IAAuB,WAiBvB,KAAe,EAAE,UAAO,YAAmB,MAC/C,kBAAA,GAAA,EAAA,UACG,KACC,kBAAC,GAAD;CAAO,WAAW,EAAO;WAAzB,CACE,kBAAC,GAAD;EAAY,WAAW,EAAO;YAAgB;CAAkB,CAAA,GAC/D,IACC,kBAAC,GAAD;EAAU,SAAQ;EAAO,OAAO;CAAS,CAAA,IAEzC,kBAAC,GAAD;EAAY,WAAW,EAAO;YAAgB;CAAkB,CAAA,CAE7D;GAET,CAAA;AAGJ,SAAwB,EAAmB,GAAyB;CAClE,IAAM,EACJ,aACA,SACA,OACA,YACA,QACA,2BACA,cACA,iBACE,GAEE,IAAU,EAAiB,KAAO,EAAE,GAuBpC,IAAoB;EApBxB;GACE,OAAO;GACP,OAAO,IAAM,kBAAC,GAAD;IAAM,MAAM;cAAU;GAAU,CAAA,IAAI,KAAA;EACnD;EACA;GACE,OAAO;GACP,OACE,kBAAC,GAAD;IACE,OAAO;IACP,MAAK;IACL,IAAI,EAAE,KAAK,EAAE,aAAa,MAAM,EAAE;GACnC,CAAA;EAEL;EACA;GACE,OAAO;GACP,OAAO;EACT;CAGwB,EAAW,QACnC,MAAK,KAAc,EAAE,UAAU,KAAA,KAAa,EAAE,UAAU,EAC1D;CAEA,OACE,kBAAC,GAAD;EACE,cAAW;EACX,MAAK;EACD;EACJ,WAAW;EACL;EACI;EACD;EACT,cAAc;GACZ,UAAU;GACV,YAAY;EACd;EACA,iBAAiB;GACf,UAAU;GACV,YAAY;EACd;EACA,WAAW,EACT,OAAO;GACL,QAAQ;GACR,IAAI;IACF,OAAO;IACP,UAAU;IACV,IAAI;IACJ,cAAc;IACd,QAAQ,aAAa;GACvB;EACF,EACF;YAEA,kBAAC,GAAD;GACE,IAAI;IACF,KAAK;IACL,SAAS;GACX;aAJF;IAME,kBAAC,GAAD;KAAY,WAAW,EAAO;eAAwB;IAE1C,CAAA;IACZ,kBAAC,GAAD;KACa;KACX,mBAAmB;IACpB,CAAA;IACD,kBAAC,GAAD;KAAO,WAAW,EAAO;eACtB,EAAkB,KAAI,MAAY,EAAY,GAAU,CAAS,CAAC;IAC9D,CAAA;GACF;;CACA,CAAA;AAEb"}
+{"version":3,"file":"ProjectInfoPopover.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfoPopover.tsx"],"sourcesContent":["import { Popover, Typography, Stack, Link, Skeleton } from '@mui/material'\nimport { PopoverProps } from '@mui/material/Popover'\nimport { convertDoiToLink } from '@/utils/functions/RegularExpressions'\nimport { ReactElement, ReactNode } from 'react'\nimport styles from './ProjectInfo.module.scss'\nimport CopyToClipboardString from '../CopyToClipboardString/CopyToClipboardString'\nimport ProjectDataAvailability from '../ProjectStorage'\n\nexport type ProjectInfoPopoverProps = {\n  doi?: string\n  projectStorageLocation?: string\n  projectId: string\n  isLoading?: boolean\n}\n\ntype Property = {\n  title: string\n  value?: ReactElement | ReactNode\n}\n\nexport type ProjectInfoProps = ProjectInfoPopoverProps &\n  Pick<PopoverProps, 'anchorEl' | 'open' | 'id' | 'onClose'>\n\nconst propertyRow = ({ title, value }: Property, isLoading?: boolean) => (\n  <>\n    {value && (\n      <Stack className={styles.propertyRow}>\n        <Typography className={styles.propertyTitle}>{title}</Typography>\n        {isLoading ? (\n          <Skeleton variant=\"text\" width={'100%'} />\n        ) : (\n          <Typography className={styles.propertyValue}>{value}</Typography>\n        )}\n      </Stack>\n    )}\n  </>\n)\n\nexport default function ProjectInfoPopover(props: ProjectInfoProps) {\n  const {\n    anchorEl,\n    open,\n    id,\n    onClose,\n    doi,\n    projectStorageLocation,\n    projectId,\n    isLoading,\n  } = props\n\n  const doiLink = convertDoiToLink(doi ?? '')\n\n  const properties = [\n    {\n      title: 'DOI',\n      value: doi ? <Link href={doiLink}>{doi}</Link> : undefined,\n    },\n    {\n      title: 'SynId',\n      value: (\n        <CopyToClipboardString\n          value={projectId}\n          icon=\"fileCopy\"\n          sx={{ svg: { aspectRatio: '1/1' } }}\n        />\n      ),\n    },\n    {\n      title: 'Project Storage Location',\n      value: projectStorageLocation,\n    },\n  ]\n\n  const visibleProperties = properties.filter(\n    p => isLoading || (p.value !== undefined && p.value !== ''),\n  )\n\n  return (\n    <Popover\n      aria-label=\"Project information\"\n      role=\"dialog\"\n      id={id}\n      elevation={3}\n      open={open}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'left',\n      }}\n      transformOrigin={{\n        vertical: 'top',\n        horizontal: 'left',\n      }}\n      slotProps={{\n        paper: {\n          square: true,\n          sx: {\n            width: '240px',\n            position: 'relative',\n            mt: '6px',\n            borderRadius: '3px',\n            border: '1px solid',\n            borderColor: 'greyV2.300',\n          },\n        },\n      }}\n    >\n      <Stack\n        sx={{\n          gap: '16px',\n          padding: '20px',\n        }}\n      >\n        <Typography className={styles.propertyContainerTitle}>\n          Project Information\n        </Typography>\n        <ProjectDataAvailability\n          projectId={projectId}\n          showBottomDivider={true}\n        />\n        <Stack className={styles.propertiesContainer}>\n          {visibleProperties.map(property => propertyRow(property, isLoading))}\n        </Stack>\n      </Stack>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;AAuBA,IAAM,KAAe,EAAE,UAAO,YAAmB,MAC/C,kBAAA,GAAA,EAAA,UACG,KACC,kBAAC,GAAD;CAAO,WAAW,EAAO;WAAzB,CACE,kBAAC,GAAD;EAAY,WAAW,EAAO;YAAgB;CAAkB,CAAA,GAC/D,IACC,kBAAC,GAAD;EAAU,SAAQ;EAAO,OAAO;CAAS,CAAA,IAEzC,kBAAC,GAAD;EAAY,WAAW,EAAO;YAAgB;CAAkB,CAAA,CAE7D;GAET,CAAA;AAGJ,SAAwB,EAAmB,GAAyB;CAClE,IAAM,EACJ,aACA,SACA,OACA,YACA,QACA,2BACA,cACA,iBACE,GAEE,IAAU,EAAiB,KAAO,EAAE,GAuBpC,IAAoB;EApBxB;GACE,OAAO;GACP,OAAO,IAAM,kBAAC,GAAD;IAAM,MAAM;cAAU;GAAU,CAAA,IAAI,KAAA;EACnD;EACA;GACE,OAAO;GACP,OACE,kBAAC,GAAD;IACE,OAAO;IACP,MAAK;IACL,IAAI,EAAE,KAAK,EAAE,aAAa,MAAM,EAAE;GACnC,CAAA;EAEL;EACA;GACE,OAAO;GACP,OAAO;EACT;CAGwB,EAAW,QACnC,MAAK,KAAc,EAAE,UAAU,KAAA,KAAa,EAAE,UAAU,EAC1D;CAEA,OACE,kBAAC,GAAD;EACE,cAAW;EACX,MAAK;EACD;EACJ,WAAW;EACL;EACI;EACD;EACT,cAAc;GACZ,UAAU;GACV,YAAY;EACd;EACA,iBAAiB;GACf,UAAU;GACV,YAAY;EACd;EACA,WAAW,EACT,OAAO;GACL,QAAQ;GACR,IAAI;IACF,OAAO;IACP,UAAU;IACV,IAAI;IACJ,cAAc;IACd,QAAQ;IACR,aAAa;GACf;EACF,EACF;YAEA,kBAAC,GAAD;GACE,IAAI;IACF,KAAK;IACL,SAAS;GACX;aAJF;IAME,kBAAC,GAAD;KAAY,WAAW,EAAO;eAAwB;IAE1C,CAAA;IACZ,kBAAC,GAAD;KACa;KACX,mBAAmB;IACpB,CAAA;IACD,kBAAC,GAAD;KAAO,WAAW,EAAO;eACtB,EAAkB,KAAI,MAAY,EAAY,GAAU,CAAS,CAAC;IAC9D,CAAA;GACF;;CACA,CAAA;AAEb"}

package/dist/components/ProjectStorage/ProjectDataAvailability.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDataAvailability.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectStorage/ProjectDataAvailability.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAO,OAAO,EAAgC,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAMD,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,EAAE,EACF,iBAAyB,GAC1B,EAAE,4BAA4B,GAAG,KAAK,CAAC,SAAS,CA8HhD;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"ProjectDataAvailability.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectStorage/ProjectDataAvailability.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAO,OAAO,EAAgC,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,EAAE,EACF,iBAAyB,GAC1B,EAAE,4BAA4B,GAAG,KAAK,CAAC,SAAS,CA8HhD;AAED,eAAe,uBAAuB,CAAA"}

package/dist/components/ProjectStorage/ProjectDataAvailability.js

@@ -10,13 +10,13 @@ import "react";
 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 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/, " ");
+var d = "#576077", f = "#38756A", p = .5;
+function m({ projectId: m, sx: h, showBottomDivider: g = !1 }) {
+	let { isAuthenticated: _ } = n(), { data: v } = r(m, { enabled: !!m && _ }), y = v?.locations.filter((e) => e.storageLocationId == 1), b = y?.length == 1 ? y[0] : void 0;
+	if (!b) return /* @__PURE__ */ l(c, {});
+	let { sumFileBytes: x = 0, maxAllowedFileBytes: S = 0 } = b;
+	if (S == 0) return /* @__PURE__ */ l(c, {});
+	let C = x / S * 100, w = Math.min(C, 100), T = x === 0 ? "0%" : C < 1 ? "<1%" : `${Math.round(C)}%`, E = x === 0 ? 0 : Math.max(w, p), D = t(x, 1), O = t(S, 1).replace(/\.0\s/, " ");
 	return /* @__PURE__ */ u(i, {
 		sx: e({
 			display: "flex",
@@ -24,7 +24,7 @@ function h({ projectId: h, sx: g, showBottomDivider: _ = !1 }) {
 			width: "100%",
 			fontFamily: "DM Sans",
 			color: d
-		}, g),
+		}, h),
 		children: [
 			/* @__PURE__ */ l(i, {
 				sx: {
@@ -41,8 +41,8 @@ function h({ projectId: h, sx: g, showBottomDivider: _ = !1 }) {
 					children: ["Data Availability", " "]
 				})
 			}),
-			x.maxAllowedFileBytes && /* @__PURE__ */ l(o, {
-				title: `Using ${O} out of ${k}`,
+			b.maxAllowedFileBytes && /* @__PURE__ */ l(o, {
+				title: `Using ${D} out of ${O}`,
 				children: /* @__PURE__ */ u(i, {
 					sx: {
 						display: "flex",
@@ -59,24 +59,24 @@ function h({ projectId: h, sx: g, showBottomDivider: _ = !1 }) {
 							sx: {
 								width: "100%",
 								height: "6px",
-								backgroundColor: f,
+								backgroundColor: "greyV2.200",
 								borderRadius: "50px"
 							},
 							children: /* @__PURE__ */ l(i, { sx: {
-								width: `${D}%`,
+								width: `${E}%`,
 								height: "6px",
-								backgroundColor: p,
+								backgroundColor: f,
 								borderRadius: "50px"
 							} })
 						})
 					}), /* @__PURE__ */ l(s, {
 						variant: "body2",
 						sx: { color: d },
-						children: `${E} of ${k}`
+						children: `${T} of ${O}`
 					})]
 				})
 			}),
-			_ && /* @__PURE__ */ l(a, { sx: {
+			g && /* @__PURE__ */ l(a, { sx: {
 				mt: "16px",
 				borderColor: "rgba(226, 228, 234, 0.50)"
 			} })
@@ -84,6 +84,6 @@ function h({ projectId: h, sx: g, showBottomDivider: _ = !1 }) {
 	});
 }
 //#endregion
-export { h as ProjectDataAvailability, h as default };
+export { m as ProjectDataAvailability, m 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 { 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"}
+{"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 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: 'greyV2.200',\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,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.map

@@ -1 +1 @@
-{"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;AAmcvD,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;AAgcvD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}