@gen-epix/ui-client-casedb 4.0.0

package/dist/pages/DataCollectionVisualizationPage/index.js

@@ -0,0 +1,494 @@
+import { EffectiveRightsUtil as e } from "../../utils/EffectiveRightsUtil/index.js";
+import { f as t, h as n, l as r, m as i, n as a, p as o, r as s, t as c } from "../../_chunks/esm.js";
+import { useDataCollectionsMapQuery as l } from "../../dataHooks/useDataCollectionsQuery/index.js";
+import { useOrganizationAccessCasePoliciesQuery as u } from "../../dataHooks/useOrganizationAccessCasePoliciesQuery/index.js";
+import { useOrganizationShareCasePoliciesQuery as d } from "../../dataHooks/useOrganizationShareCasePoliciesQuery/index.js";
+import { StringUtil as f } from "@gen-epix/ui-core/utils/StringUtil";
+import { Autocomplete as p, Box as m, TextField as h, ToggleButton as g, ToggleButtonGroup as _, Typography as v, useTheme as y } from "@mui/material";
+import { useCallback as b, useMemo as x, useState as S } from "react";
+import { useTranslation as C } from "react-i18next";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { ResponseHandler as E } from "@gen-epix/ui/components/ui/ResponseHandler";
+import { useArray as D } from "@gen-epix/ui-core/hooks/useArray";
+import { TestIdUtil as O } from "@gen-epix/ui-core/utils/TestIdUtil";
+import { LoadableUtil as k } from "@gen-epix/ui/utils/LoadableUtil";
+import { PageContainer as A } from "@gen-epix/ui/components/ui/PageContainer";
+import { useOrganizationMapQuery as j } from "@gen-epix/ui/dataHooks/useOrganizationsQuery";
+//#region src/pages/DataCollectionVisualizationPage/DataCollectionVisualizationPage.tsx
+var M = {
+	dispose: o,
+	getInstanceByDom: i,
+	init: n
+};
+t([
+	r,
+	a,
+	s
+]);
+var N = {
+	categories: [],
+	links: [],
+	nodes: [],
+	totalAccessLinks: 0,
+	totalDataCollections: 0,
+	totalOrganizations: 0,
+	totalShareLinks: 0,
+	zoom: 1
+}, P = {
+	bottomPadding: 72,
+	fitZoomSafetyFactor: .94,
+	labelPadding: 12,
+	nodeLabelWidth: 220,
+	organizationX: 120,
+	rowGap: 68,
+	singleRowVerticalOffset: 96,
+	sourceDataCollectionX: 1060,
+	targetAndSourceDataCollectionX: 820,
+	targetDataCollectionX: 620,
+	topPadding: 72,
+	viewportHorizontalPadding: 24,
+	viewportVerticalPadding: 24
+}, F = () => {
+	let { t } = C(), n = y(), [r, i] = S("organization"), [a, o] = S(null), s = l(), F = j(), I = u((e) => e.filter((e) => e.is_active)), L = d((e) => e.filter((e) => e.is_active)), R = D([
+		s,
+		F,
+		I,
+		L
+	]), z = x(() => Array.from(F.map.values()).map((e) => ({
+		label: e.name,
+		value: e.id
+	})).sort((e, t) => f.advancedSortComperator(e.label, t.label)), [F.map]), B = x(() => Array.from(s.map.values()).map((e) => ({
+		label: e.name,
+		value: e.id
+	})).sort((e, t) => f.advancedSortComperator(e.label, t.label)), [s.map]), V = x(() => r === "organization" ? z : B, [
+		B,
+		z,
+		r
+	]), H = x(() => V.find((e) => e.value === a) ?? null, [a, V]), U = r === "organization" ? t`Organization` : t`Data collection`, W = !!a, G = b((e, t) => {
+		!t || t === r || (i(t), o(null));
+	}, [r]), K = b((e) => e.label, []), q = b((e, t) => e.value === t.value, []), J = b((e, t) => {
+		o(t?.value ?? null);
+	}, []), Y = b((e) => /* @__PURE__ */ w(h, {
+		...e,
+		label: U,
+		required: !0,
+		size: "small"
+	}), [U]), X = x(() => {
+		if (k.isSomeLoading(R) || !a) return N;
+		let i = [{ name: t`Organization` }, { name: t`Data collection` }], o = n.palette.primary.main, c = n.palette.primary.dark, l = n.palette.secondary.main, u = n.palette.secondary.dark, d = n.palette.primary.light, f = n.palette.warning.main, p = e.getOrganizationPolicyGroups({
+			organizationAccessCasePolicies: I.data,
+			organizationShareCasePolicies: L.data
+		}).filter((e) => r === "organization" ? e.organization_id === a : e.data_collection_id === a || e.share_case_policies.some((e) => e.from_data_collection_id === a)), m = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), g = [], _ = /* @__PURE__ */ new Map(), v = (e) => ({
+			color: n.palette.text.primary,
+			distance: 8,
+			fontSize: 12,
+			formatter: "{b}",
+			overflow: "truncate",
+			position: e,
+			show: !0,
+			width: P.nodeLabelWidth
+		}), y = (e) => {
+			m.has(e.id) || m.set(e.id, {
+				category: e.category,
+				id: e.id,
+				itemStyle: {
+					borderColor: e.borderColor,
+					borderWidth: 1.5,
+					color: e.color
+				},
+				name: e.name,
+				nodeType: e.nodeType,
+				symbol: e.symbol
+			});
+		}, b = (e, t) => {
+			let n = h.get(e) ?? {
+				accessLinkCount: 0,
+				shareInCount: 0,
+				shareOutCount: 0
+			};
+			n[t] += 1, h.set(e, n);
+		};
+		p.forEach((e) => {
+			let t = `organization:${e.organization_id}`, n = `dataCollection:${e.data_collection_id}`, r = F.map.get(e.organization_id)?.name ?? e.organization_id, i = s.map.get(e.data_collection_id)?.name ?? e.data_collection_id, a = Array.from(new Set(e.share_case_policies.map((e) => s.map.get(e.from_data_collection_id)?.name ?? e.from_data_collection_id))).sort(), f = e.access_case_policies.reduce((e, t) => ({
+				add_case: e.add_case || t.add_case,
+				add_case_set: e.add_case_set || t.add_case_set,
+				is_private: e.is_private || t.is_private,
+				read_case_set: e.read_case_set || t.read_case_set,
+				remove_case: e.remove_case || t.remove_case,
+				remove_case_set: e.remove_case_set || t.remove_case_set,
+				write_case_set: e.write_case_set || t.write_case_set
+			}), {
+				add_case: !1,
+				add_case_set: !1,
+				is_private: !1,
+				read_case_set: !1,
+				remove_case: !1,
+				remove_case_set: !1,
+				write_case_set: !1
+			});
+			y({
+				borderColor: c,
+				category: 0,
+				color: o,
+				id: t,
+				name: r,
+				nodeType: "organization",
+				symbol: "roundRect"
+			}), y({
+				borderColor: u,
+				category: 1,
+				color: l,
+				id: n,
+				name: i,
+				nodeType: "dataCollection",
+				symbol: "circle"
+			}), g.push({
+				accessPolicyCount: e.access_case_policies.length,
+				accessRights: f,
+				dataCollectionName: i,
+				lineStyle: {
+					color: d,
+					curveness: .08,
+					opacity: .5,
+					width: 1.5 + Math.min(e.access_case_policies.length * .35, 1.5)
+				},
+				linkType: "access",
+				organizationName: r,
+				sharePolicyCount: e.share_case_policies.length,
+				source: t,
+				sourceDataCollectionNames: a,
+				target: n,
+				value: Math.max(e.access_case_policies.length, 1)
+			}), b(t, "accessLinkCount"), b(n, "accessLinkCount"), e.share_case_policies.forEach((e) => {
+				let t = `dataCollection:${e.from_data_collection_id}`, a = s.map.get(e.from_data_collection_id)?.name ?? e.from_data_collection_id, o = `${t}::${n}`, c = _.get(o);
+				if (y({
+					borderColor: u,
+					category: 1,
+					color: l,
+					id: t,
+					name: a,
+					nodeType: "dataCollection",
+					symbol: "circle"
+				}), c) {
+					c.organizationNames.add(r), c.sharePolicyCount += 1;
+					return;
+				}
+				_.set(o, {
+					organizationNames: /* @__PURE__ */ new Set([r]),
+					sharePolicyCount: 1,
+					source: t,
+					sourceDataCollectionName: a,
+					target: n,
+					targetDataCollectionName: i
+				});
+			});
+		});
+		let x = Array.from(_.values()).map((e) => (b(e.source, "shareOutCount"), b(e.target, "shareInCount"), {
+			lineStyle: {
+				color: f,
+				curveness: .28,
+				opacity: .45,
+				type: "dashed",
+				width: 1.25 + Math.min(e.sharePolicyCount * .3, 1.25)
+			},
+			linkType: "share",
+			organizationNames: Array.from(e.organizationNames).sort(),
+			sharePolicyCount: e.sharePolicyCount,
+			source: e.source,
+			sourceDataCollectionName: e.sourceDataCollectionName,
+			target: e.target,
+			targetDataCollectionName: e.targetDataCollectionName,
+			value: Math.max(e.sharePolicyCount, 1)
+		})), S = Array.from(m.values()).map((e) => {
+			let t = h.get(e.id) ?? {
+				accessLinkCount: 0,
+				shareInCount: 0,
+				shareOutCount: 0
+			}, n = t.accessLinkCount + t.shareInCount + t.shareOutCount;
+			return {
+				...e,
+				accessLinkCount: t.accessLinkCount,
+				label: v("right"),
+				shareInCount: t.shareInCount,
+				shareOutCount: t.shareOutCount,
+				symbolSize: e.nodeType === "organization" ? Math.min(22 + t.accessLinkCount * 2, 34) : Math.min(18 + n * 1.5, 30),
+				value: n,
+				x: 0,
+				y: 0
+			};
+		}), C = (e) => e.accessLinkCount > 0 && e.shareOutCount > 0 ? 1 : e.accessLinkCount > 0 ? 0 : 2, w = (e) => e.accessLinkCount > 0 && e.shareOutCount > 0 ? P.targetAndSourceDataCollectionX : e.accessLinkCount > 0 ? P.targetDataCollectionX : P.sourceDataCollectionX, T = (e) => e.accessLinkCount > 0 && e.shareOutCount === 0 ? "left" : "right", E = S.filter((e) => e.nodeType === "organization").length === 1 && S.filter((e) => e.nodeType === "dataCollection").length === 1, D = S.filter((e) => e.nodeType === "organization").sort((e, t) => e.name.localeCompare(t.name)).map((e, t) => ({
+			...e,
+			label: v("right"),
+			x: P.organizationX,
+			y: P.topPadding + t * P.rowGap
+		})), O = S.filter((e) => e.nodeType === "dataCollection").sort((e, t) => {
+			let n = C(e) - C(t);
+			return n === 0 ? e.name.localeCompare(t.name) : n;
+		}).map((e, t) => ({
+			...e,
+			label: v(T(e)),
+			x: w(e),
+			y: P.topPadding + t * P.rowGap + (E ? P.singleRowVerticalOffset : 0)
+		})), A = [...D, ...O], j = A.reduce((e, t) => ({
+			maxX: Math.max(e.maxX, t.x),
+			maxY: Math.max(e.maxY, t.y),
+			minX: Math.min(e.minX, t.x),
+			minY: Math.min(e.minY, t.y)
+		}), {
+			maxX: -Infinity,
+			maxY: -Infinity,
+			minX: Infinity,
+			minY: Infinity
+		}), M = A.reduce((e, t) => {
+			let n = t.symbolSize / 2, r = P.nodeLabelWidth + P.labelPadding, i = t.label.position === "left" ? "left" : "right";
+			return {
+				maxX: Math.max(e.maxX, t.x + n + (i === "right" ? r : 0)),
+				maxY: Math.max(e.maxY, t.y + n + P.viewportVerticalPadding),
+				minX: Math.min(e.minX, t.x - n - (i === "left" ? r : 0)),
+				minY: Math.min(e.minY, t.y - n - P.viewportVerticalPadding)
+			};
+		}, {
+			maxX: -Infinity,
+			maxY: -Infinity,
+			minX: Infinity,
+			minY: Infinity
+		}), z = Math.max(j.maxX - j.minX, 1), B = Math.max(j.maxY - j.minY, 1), V = Math.max(M.maxX - M.minX, 1), H = Math.max(M.maxY - M.minY, 1), U = Math.max(Math.min(z / V, B / H, 1) * P.fitZoomSafetyFactor, .1);
+		return {
+			categories: i,
+			links: [...g, ...x],
+			nodes: A,
+			totalAccessLinks: g.length,
+			totalDataCollections: O.length,
+			totalOrganizations: D.length,
+			totalShareLinks: x.length,
+			zoom: U
+		};
+	}, [
+		s.map,
+		R,
+		I.data,
+		F.map,
+		L.data,
+		a,
+		r,
+		t,
+		n.palette.primary.dark,
+		n.palette.primary.light,
+		n.palette.primary.main,
+		n.palette.secondary.dark,
+		n.palette.secondary.main,
+		n.palette.text.primary,
+		n.palette.warning.main
+	]), Z = b((e) => {
+		let n = [
+			e.add_case ? t`Add case` : null,
+			e.remove_case ? t`Remove case` : null,
+			e.add_case_set ? t`Add case set` : null,
+			e.remove_case_set ? t`Remove case set` : null,
+			e.read_case_set ? t`Read case set` : null,
+			e.write_case_set ? t`Write case set` : null,
+			e.is_private ? t`Private` : null
+		].filter((e) => !!e);
+		return n.length > 0 ? n.join(", ") : t`None`;
+	}, [t]), Q = b((e) => e.length > 0 ? e.join(", ") : t`None`, [t]), $ = b(() => ({
+		animation: !1,
+		series: [{
+			bottom: P.viewportVerticalPadding,
+			categories: X.categories,
+			center: ["50%", "50%"],
+			data: X.nodes,
+			edgeSymbol: ["none", "arrow"],
+			edgeSymbolSize: 8,
+			emphasis: {
+				focus: "adjacency",
+				lineStyle: { width: 3 }
+			},
+			layout: "none",
+			left: P.viewportHorizontalPadding,
+			lineStyle: { opacity: .45 },
+			links: X.links,
+			right: P.viewportHorizontalPadding,
+			roam: !0,
+			roamTrigger: "global",
+			scaleLimit: {
+				max: 4,
+				min: .1
+			},
+			top: P.viewportVerticalPadding,
+			type: "graph",
+			zoom: X.zoom
+		}],
+		tooltip: { formatter: (e) => {
+			let n = e;
+			if (n.dataType === "node") {
+				let e = n.data;
+				return e.nodeType === "organization" ? [
+					`<strong>${e.name}</strong>`,
+					`${t("Accessible data collections")}: ${e.accessLinkCount}`,
+					`${t("Connected share routes")}: ${e.shareInCount + e.shareOutCount}`
+				].join("<br/>") : [
+					`<strong>${e.name}</strong>`,
+					`${t("Organization access links")}: ${e.accessLinkCount}`,
+					`${t("Incoming share routes")}: ${e.shareInCount}`,
+					`${t("Outgoing share routes")}: ${e.shareOutCount}`
+				].join("<br/>");
+			}
+			let r = n.data;
+			return r.linkType === "access" ? [
+				`<strong>${r.organizationName} -> ${r.dataCollectionName}</strong>`,
+				`${t("Type")}: ${t`Organization access`}`,
+				`${t("Active access policies")}: ${r.accessPolicyCount}`,
+				`${t("Enabled access rights")}: ${Z(r.accessRights)}`,
+				`${t("Share source collections")}: ${Q(r.sourceDataCollectionNames)}`
+			].join("<br/>") : [
+				`<strong>${r.sourceDataCollectionName} -> ${r.targetDataCollectionName}</strong>`,
+				`${t("Type")}: ${t`Organization share`}`,
+				`${t("Active share policies")}: ${r.sharePolicyCount}`,
+				`${t("Organizations")}: ${Q(r.organizationNames)}`
+			].join("<br/>");
+		} }
+	}), [
+		Z,
+		Q,
+		X.categories,
+		X.links,
+		X.nodes,
+		X.zoom,
+		t
+	]);
+	return /* @__PURE__ */ w(A, {
+		fullHeight: !0,
+		fullWidth: !0,
+		showBreadcrumbs: !0,
+		testIdAttributes: O.createAttributes("DataCollectionVisualizationPage"),
+		title: t`Data collection visualization`,
+		children: /* @__PURE__ */ w(m, {
+			sx: {
+				display: "grid",
+				gap: 2,
+				gridTemplateRows: "auto minmax(0, 1fr)",
+				height: "100%",
+				minHeight: 0,
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ T(E, {
+				loadables: R,
+				children: [/* @__PURE__ */ T(m, {
+					sx: {
+						borderRadius: 2,
+						display: "grid",
+						gap: 2,
+						px: 2,
+						py: 2
+					},
+					children: [/* @__PURE__ */ T(m, {
+						sx: {
+							alignItems: "end",
+							display: "grid",
+							gap: 2,
+							gridTemplateColumns: {
+								md: "max-content minmax(320px, 520px)",
+								xs: "1fr"
+							}
+						},
+						children: [/* @__PURE__ */ T(m, {
+							sx: {
+								display: "grid",
+								gap: .75
+							},
+							children: [/* @__PURE__ */ w(v, {
+								color: "text.secondary",
+								variant: "overline",
+								children: t`Type`
+							}), /* @__PURE__ */ T(_, {
+								exclusive: !0,
+								onChange: G,
+								size: "small",
+								value: r,
+								children: [/* @__PURE__ */ w(g, {
+									value: "organization",
+									children: t`Organization`
+								}), /* @__PURE__ */ w(g, {
+									value: "dataCollection",
+									children: t`Data collection`
+								})]
+							})]
+						}), /* @__PURE__ */ w(p, {
+							disablePortal: !0,
+							getOptionLabel: K,
+							isOptionEqualToValue: q,
+							noOptionsText: t`No results`,
+							onChange: J,
+							options: V,
+							renderInput: Y,
+							value: H
+						})]
+					}), W ? /* @__PURE__ */ T(m, {
+						sx: {
+							color: "text.secondary",
+							display: "flex",
+							flexWrap: "wrap",
+							gap: 2
+						},
+						children: [
+							/* @__PURE__ */ w(m, {
+								component: "span",
+								children: t("Organizations: {{count}}", { count: X.totalOrganizations })
+							}),
+							/* @__PURE__ */ w(m, {
+								component: "span",
+								children: t("Data collections: {{count}}", { count: X.totalDataCollections })
+							}),
+							/* @__PURE__ */ w(m, {
+								component: "span",
+								children: t("Access links: {{count}}", { count: X.totalAccessLinks })
+							}),
+							/* @__PURE__ */ w(m, {
+								component: "span",
+								children: t("Share routes: {{count}}", { count: X.totalShareLinks })
+							}),
+							/* @__PURE__ */ w(m, {
+								component: "span",
+								children: t`Solid links show organization access policies. Dashed links show sharing routes between data collections.`
+							})
+						]
+					}) : /* @__PURE__ */ w(v, {
+						color: "text.secondary",
+						children: t`Select an organization or data collection to show the visualization.`
+					})]
+				}), /* @__PURE__ */ w(m, {
+					sx: {
+						borderRadius: 2,
+						height: "100%",
+						minHeight: 0,
+						minWidth: 0,
+						overflow: "hidden"
+					},
+					children: W && X.nodes.length > 0 ? /* @__PURE__ */ w(c, {
+						echarts: M,
+						notMerge: !0,
+						option: $(),
+						style: {
+							height: "100%",
+							width: "100%"
+						}
+					}) : /* @__PURE__ */ w(m, {
+						sx: {
+							color: "text.secondary",
+							display: "grid",
+							height: "100%",
+							placeItems: "center",
+							px: 3,
+							textAlign: "center"
+						},
+						children: W ? t`No active organization access or share policies are available to visualize.` : t`Select an organization or data collection to show the visualization.`
+					})
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { F as DataCollectionVisualizationPage };
+
+//# sourceMappingURL=index.js.map

package/dist/pages/DataCollectionVisualizationPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/pages/DataCollectionVisualizationPage/DataCollectionVisualizationPage.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\nimport {\n  Autocomplete,\n  Box,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport EChartsReact from 'echarts-for-react';\nimport {\n  dispose,\n  getInstanceByDom,\n  init,\n  use as registerECharts,\n} from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TooltipComponent } from 'echarts/components';\nimport { GraphChart } from 'echarts/charts';\nimport {\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport type {\n  MouseEvent as ReactMouseEvent,\n  SyntheticEvent,\n} from 'react';\nimport type {\n  EChartsOption,\n  GraphSeriesOption,\n} from 'echarts';\nimport type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';\nimport type { CaseDbOrganizationAccessCasePolicy } from '@gen-epix/api-casedb';\nimport { LoadableUtil } from '@gen-epix/ui/utils/LoadableUtil';\nimport { PageContainer } from '@gen-epix/ui/components/ui/PageContainer';\nimport { ResponseHandler } from '@gen-epix/ui/components/ui/ResponseHandler';\nimport { useOrganizationMapQuery } from '@gen-epix/ui/dataHooks/useOrganizationsQuery';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport { StringUtil } from '@gen-epix/ui-core/utils/StringUtil';\nimport { useArray } from '@gen-epix/ui-core/hooks/useArray';\n\nimport { useDataCollectionsMapQuery } from '../../dataHooks/useDataCollectionsQuery';\nimport { useOrganizationAccessCasePoliciesQuery } from '../../dataHooks/useOrganizationAccessCasePoliciesQuery';\nimport { useOrganizationShareCasePoliciesQuery } from '../../dataHooks/useOrganizationShareCasePoliciesQuery';\nimport { EffectiveRightsUtil } from '../../utils/EffectiveRightsUtil';\n\nconst echartsCore = {\n  dispose,\n  getInstanceByDom,\n  init,\n};\n\nregisterECharts([TooltipComponent, CanvasRenderer, GraphChart]);\n\ntype AccessLink = {\n  accessPolicyCount: number;\n  accessRights: AccessRightsSummary;\n  dataCollectionName: string;\n  lineStyle: NonNullable<GraphSeriesOption['lineStyle']>;\n  linkType: 'access';\n  organizationName: string;\n  sharePolicyCount: number;\n  source: string;\n  sourceDataCollectionNames: string[];\n  target: string;\n  value: number;\n};\n\ntype AccessRightsSummary = Pick<CaseDbOrganizationAccessCasePolicy, 'add_case_set' | 'add_case' | 'is_private' | 'read_case_set' | 'remove_case_set' | 'remove_case' | 'write_case_set'>;\n\ntype Category = {\n  name: string;\n};\n\ntype Graph = {\n  categories: Category[];\n  links: Link[];\n  nodes: Node[];\n  totalAccessLinks: number;\n  totalDataCollections: number;\n  totalOrganizations: number;\n  totalShareLinks: number;\n  zoom: number;\n};\n\ntype GraphTooltipParams = {\n  data: Link | Node;\n  dataType?: 'edge' | 'node';\n};\n\ntype Link = AccessLink | ShareLink;\n\ntype Node = {\n  accessLinkCount: number;\n  category: number;\n  id: string;\n  itemStyle: {\n    borderColor: string;\n    borderWidth: number;\n    color: string;\n  };\n  label: NonNullable<GraphSeriesOption['label']>;\n  name: string;\n  nodeType: 'dataCollection' | 'organization';\n  shareInCount: number;\n  shareOutCount: number;\n  symbol: 'circle' | 'roundRect';\n  symbolSize: number;\n  value: number;\n  x: number;\n  y: number;\n};\n\ntype SelectionOption = {\n  label: string;\n  value: string;\n};\n\ntype SelectionType = 'dataCollection' | 'organization';\n\ntype ShareLink = {\n  lineStyle: NonNullable<GraphSeriesOption['lineStyle']>;\n  linkType: 'share';\n  organizationNames: string[];\n  sharePolicyCount: number;\n  source: string;\n  sourceDataCollectionName: string;\n  target: string;\n  targetDataCollectionName: string;\n  value: number;\n};\n\nconst EMPTY_GRAPH: Graph = {\n  categories: [],\n  links: [],\n  nodes: [],\n  totalAccessLinks: 0,\n  totalDataCollections: 0,\n  totalOrganizations: 0,\n  totalShareLinks: 0,\n  zoom: 1,\n};\n\nconst GRAPH_LAYOUT = {\n  bottomPadding: 72,\n  fitZoomSafetyFactor: 0.94,\n  labelPadding: 12,\n  nodeLabelWidth: 220,\n  organizationX: 120,\n  rowGap: 68,\n  singleRowVerticalOffset: 96,\n  sourceDataCollectionX: 1060,\n  targetAndSourceDataCollectionX: 820,\n  targetDataCollectionX: 620,\n  topPadding: 72,\n  viewportHorizontalPadding: 24,\n  viewportVerticalPadding: 24,\n} as const;\n\nexport const DataCollectionVisualizationPage = () => {\n  const { t } = useTranslation();\n  const theme = useTheme();\n  const [selectionType, setSelectionType] = useState<SelectionType>('organization');\n  const [selectedEntityId, setSelectedEntityId] = useState<string>(null);\n  const dataCollectionMapQuery = useDataCollectionsMapQuery();\n  const organizationMapQuery = useOrganizationMapQuery();\n  const organizationAccessCasePoliciesQuery = useOrganizationAccessCasePoliciesQuery(policies => policies.filter(policy => policy.is_active));\n  const organizationShareCasePoliciesQuery = useOrganizationShareCasePoliciesQuery(policies => policies.filter(policy => policy.is_active));\n\n  const loadables = useArray([\n    dataCollectionMapQuery,\n    organizationMapQuery,\n    organizationAccessCasePoliciesQuery,\n    organizationShareCasePoliciesQuery,\n  ]);\n\n  const organizationOptions = useMemo<SelectionOption[]>(() => {\n    return Array.from(organizationMapQuery.map.values())\n      .map(organization => ({\n        label: organization.name,\n        value: organization.id,\n      }))\n      .sort((a, b) => StringUtil.advancedSortComperator(a.label, b.label));\n  }, [organizationMapQuery.map]);\n\n  const dataCollectionOptions = useMemo<SelectionOption[]>(() => {\n    return Array.from(dataCollectionMapQuery.map.values())\n      .map(dataCollection => ({\n        label: dataCollection.name,\n        value: dataCollection.id,\n      }))\n      .sort((a, b) => StringUtil.advancedSortComperator(a.label, b.label));\n  }, [dataCollectionMapQuery.map]);\n\n  const selectionOptions = useMemo(() => {\n    return selectionType === 'organization' ? organizationOptions : dataCollectionOptions;\n  }, [dataCollectionOptions, organizationOptions, selectionType]);\n\n  const selectedOption = useMemo(() => {\n    return selectionOptions.find(option => option.value === selectedEntityId) ?? null;\n  }, [selectedEntityId, selectionOptions]);\n\n  const selectionLabel = selectionType === 'organization' ? t`Organization` : t`Data collection`;\n  const hasSelection = !!selectedEntityId;\n\n  const onSelectionTypeChange = useCallback((_event: ReactMouseEvent<HTMLElement>, nextSelectionType: null | SelectionType) => {\n    if (!nextSelectionType || nextSelectionType === selectionType) {\n      return;\n    }\n\n    setSelectionType(nextSelectionType);\n    setSelectedEntityId(null);\n  }, [selectionType]);\n\n  const getSelectionOptionLabel = useCallback((option: SelectionOption) => {\n    return option.label;\n  }, []);\n\n  const isSelectionOptionEqualToValue = useCallback((option: SelectionOption, value: SelectionOption) => {\n    return option.value === value.value;\n  }, []);\n\n  const onSelectionChange = useCallback((_event: SyntheticEvent, nextOption: null | SelectionOption) => {\n    setSelectedEntityId(nextOption?.value ?? null);\n  }, []);\n\n  const renderSelectionInput = useCallback((params: AutocompleteRenderInputParams) => {\n    return (\n      <TextField\n        {...params}\n        label={selectionLabel}\n        required\n        size={'small'}\n      />\n    );\n  }, [selectionLabel]);\n\n  const graph = useMemo<Graph>(() => {\n    if (LoadableUtil.isSomeLoading(loadables)) {\n      return EMPTY_GRAPH;\n    }\n\n    if (!selectedEntityId) {\n      return EMPTY_GRAPH;\n    }\n\n    const categories: Category[] = [\n      {\n        name: t`Organization`,\n      },\n      {\n        name: t`Data collection`,\n      },\n    ];\n\n    const organizationNodeColor = theme.palette.primary.main;\n    const organizationNodeBorderColor = theme.palette.primary.dark;\n    const dataCollectionNodeColor = theme.palette.secondary.main;\n    const dataCollectionNodeBorderColor = theme.palette.secondary.dark;\n    const accessLinkColor = theme.palette.primary.light;\n    const shareLinkColor = theme.palette.warning.main;\n\n    const policyGroups = EffectiveRightsUtil.getOrganizationPolicyGroups({\n      organizationAccessCasePolicies: organizationAccessCasePoliciesQuery.data,\n      organizationShareCasePolicies: organizationShareCasePoliciesQuery.data,\n    });\n\n    const filteredPolicyGroups = policyGroups.filter(policyGroup => {\n      if (selectionType === 'organization') {\n        return policyGroup.organization_id === selectedEntityId;\n      }\n\n      return policyGroup.data_collection_id === selectedEntityId\n        || policyGroup.share_case_policies.some(policy => policy.from_data_collection_id === selectedEntityId);\n    });\n\n    const nodesById = new Map<string, Omit<Node, 'accessLinkCount' | 'label' | 'shareInCount' | 'shareOutCount' | 'symbolSize' | 'value' | 'x' | 'y'>>();\n    const nodeStats = new Map<string, Pick<Node, 'accessLinkCount' | 'shareInCount' | 'shareOutCount'>>();\n    const accessLinks: AccessLink[] = [];\n    const shareLinksByKey = new Map<string, {\n      organizationNames: Set<string>;\n      sharePolicyCount: number;\n      source: string;\n      sourceDataCollectionName: string;\n      target: string;\n      targetDataCollectionName: string;\n    }>();\n\n    const buildNodeLabel = (position: 'left' | 'right'): Node['label'] => {\n      return {\n        color: theme.palette.text.primary,\n        distance: 8,\n        fontSize: 12,\n        formatter: '{b}',\n        overflow: 'truncate',\n        position,\n        show: true,\n        width: GRAPH_LAYOUT.nodeLabelWidth,\n      };\n    };\n\n    const ensureNode = (params: {\n      borderColor: string;\n      category: number;\n      color: string;\n      id: string;\n      name: string;\n      nodeType: Node['nodeType'];\n      symbol: Node['symbol'];\n    }) => {\n      if (nodesById.has(params.id)) {\n        return;\n      }\n\n      nodesById.set(params.id, {\n        category: params.category,\n        id: params.id,\n        itemStyle: {\n          borderColor: params.borderColor,\n          borderWidth: 1.5,\n          color: params.color,\n        },\n        name: params.name,\n        nodeType: params.nodeType,\n        symbol: params.symbol,\n      });\n    };\n\n    const incrementNodeStat = (nodeId: string, key: keyof Pick<Node, 'accessLinkCount' | 'shareInCount' | 'shareOutCount'>) => {\n      const currentStats = nodeStats.get(nodeId) ?? {\n        accessLinkCount: 0,\n        shareInCount: 0,\n        shareOutCount: 0,\n      };\n\n      currentStats[key] += 1;\n      nodeStats.set(nodeId, currentStats);\n    };\n\n    filteredPolicyGroups.forEach(policyGroup => {\n      const organizationNodeId = `organization:${policyGroup.organization_id}`;\n      const targetDataCollectionNodeId = `dataCollection:${policyGroup.data_collection_id}`;\n      const organizationName = organizationMapQuery.map.get(policyGroup.organization_id)?.name ?? policyGroup.organization_id;\n      const targetDataCollectionName = dataCollectionMapQuery.map.get(policyGroup.data_collection_id)?.name ?? policyGroup.data_collection_id;\n      const sourceDataCollectionNames = Array.from(new Set(policyGroup.share_case_policies.map(policy => dataCollectionMapQuery.map.get(policy.from_data_collection_id)?.name ?? policy.from_data_collection_id))).sort();\n\n      const accessRights = policyGroup.access_case_policies.reduce<AccessRightsSummary>((summary, policy) => {\n        return {\n          add_case: summary.add_case || policy.add_case,\n          add_case_set: summary.add_case_set || policy.add_case_set,\n          is_private: summary.is_private || policy.is_private,\n          read_case_set: summary.read_case_set || policy.read_case_set,\n          remove_case: summary.remove_case || policy.remove_case,\n          remove_case_set: summary.remove_case_set || policy.remove_case_set,\n          write_case_set: summary.write_case_set || policy.write_case_set,\n        };\n      }, {\n        add_case: false,\n        add_case_set: false,\n        is_private: false,\n        read_case_set: false,\n        remove_case: false,\n        remove_case_set: false,\n        write_case_set: false,\n      });\n\n      ensureNode({\n        borderColor: organizationNodeBorderColor,\n        category: 0,\n        color: organizationNodeColor,\n        id: organizationNodeId,\n        name: organizationName,\n        nodeType: 'organization',\n        symbol: 'roundRect',\n      });\n      ensureNode({\n        borderColor: dataCollectionNodeBorderColor,\n        category: 1,\n        color: dataCollectionNodeColor,\n        id: targetDataCollectionNodeId,\n        name: targetDataCollectionName,\n        nodeType: 'dataCollection',\n        symbol: 'circle',\n      });\n\n      accessLinks.push({\n        accessPolicyCount: policyGroup.access_case_policies.length,\n        accessRights,\n        dataCollectionName: targetDataCollectionName,\n        lineStyle: {\n          color: accessLinkColor,\n          curveness: 0.08,\n          opacity: 0.5,\n          width: 1.5 + Math.min(policyGroup.access_case_policies.length * 0.35, 1.5),\n        },\n        linkType: 'access',\n        organizationName,\n        sharePolicyCount: policyGroup.share_case_policies.length,\n        source: organizationNodeId,\n        sourceDataCollectionNames,\n        target: targetDataCollectionNodeId,\n        value: Math.max(policyGroup.access_case_policies.length, 1),\n      });\n\n      incrementNodeStat(organizationNodeId, 'accessLinkCount');\n      incrementNodeStat(targetDataCollectionNodeId, 'accessLinkCount');\n\n      policyGroup.share_case_policies.forEach(sharePolicy => {\n        const sourceDataCollectionNodeId = `dataCollection:${sharePolicy.from_data_collection_id}`;\n        const sourceDataCollectionName = dataCollectionMapQuery.map.get(sharePolicy.from_data_collection_id)?.name ?? sharePolicy.from_data_collection_id;\n        const shareLinkKey = `${sourceDataCollectionNodeId}::${targetDataCollectionNodeId}`;\n        const existingShareLink = shareLinksByKey.get(shareLinkKey);\n\n        ensureNode({\n          borderColor: dataCollectionNodeBorderColor,\n          category: 1,\n          color: dataCollectionNodeColor,\n          id: sourceDataCollectionNodeId,\n          name: sourceDataCollectionName,\n          nodeType: 'dataCollection',\n          symbol: 'circle',\n        });\n\n        if (existingShareLink) {\n          existingShareLink.organizationNames.add(organizationName);\n          existingShareLink.sharePolicyCount += 1;\n          return;\n        }\n\n        shareLinksByKey.set(shareLinkKey, {\n          organizationNames: new Set([organizationName]),\n          sharePolicyCount: 1,\n          source: sourceDataCollectionNodeId,\n          sourceDataCollectionName,\n          target: targetDataCollectionNodeId,\n          targetDataCollectionName,\n        });\n      });\n    });\n\n    const shareLinks = Array.from(shareLinksByKey.values()).map(shareLink => {\n      incrementNodeStat(shareLink.source, 'shareOutCount');\n      incrementNodeStat(shareLink.target, 'shareInCount');\n\n      return {\n        lineStyle: {\n          color: shareLinkColor,\n          curveness: 0.28,\n          opacity: 0.45,\n          type: 'dashed',\n          width: 1.25 + Math.min(shareLink.sharePolicyCount * 0.3, 1.25),\n        },\n        linkType: 'share',\n        organizationNames: Array.from(shareLink.organizationNames).sort(),\n        sharePolicyCount: shareLink.sharePolicyCount,\n        source: shareLink.source,\n        sourceDataCollectionName: shareLink.sourceDataCollectionName,\n        target: shareLink.target,\n        targetDataCollectionName: shareLink.targetDataCollectionName,\n        value: Math.max(shareLink.sharePolicyCount, 1),\n      } satisfies ShareLink;\n    });\n\n    const rawNodes = Array.from(nodesById.values())\n      .map(node => {\n        const stats = nodeStats.get(node.id) ?? {\n          accessLinkCount: 0,\n          shareInCount: 0,\n          shareOutCount: 0,\n        };\n        const totalConnections = stats.accessLinkCount + stats.shareInCount + stats.shareOutCount;\n\n        return {\n          ...node,\n          accessLinkCount: stats.accessLinkCount,\n          label: buildNodeLabel('right'),\n          shareInCount: stats.shareInCount,\n          shareOutCount: stats.shareOutCount,\n          symbolSize: node.nodeType === 'organization'\n            ? Math.min(22 + (stats.accessLinkCount * 2), 34)\n            : Math.min(18 + (totalConnections * 1.5), 30),\n          value: totalConnections,\n          x: 0,\n          y: 0,\n        } satisfies Node;\n      });\n\n    const getDataCollectionLayoutRank = (node: Node) => {\n      if (node.accessLinkCount > 0 && node.shareOutCount > 0) {\n        return 1;\n      }\n      if (node.accessLinkCount > 0) {\n        return 0;\n      }\n      return 2;\n    };\n\n    const getDataCollectionX = (node: Node) => {\n      if (node.accessLinkCount > 0 && node.shareOutCount > 0) {\n        return GRAPH_LAYOUT.targetAndSourceDataCollectionX;\n      }\n      if (node.accessLinkCount > 0) {\n        return GRAPH_LAYOUT.targetDataCollectionX;\n      }\n      return GRAPH_LAYOUT.sourceDataCollectionX;\n    };\n\n    const getDataCollectionLabelPosition = (node: Node): 'left' | 'right' => {\n      return node.accessLinkCount > 0 && node.shareOutCount === 0 ? 'left' : 'right';\n    };\n\n    const isSingleNodePair = rawNodes.filter(node => node.nodeType === 'organization').length === 1\n      && rawNodes.filter(node => node.nodeType === 'dataCollection').length === 1;\n\n    const organizationNodes = rawNodes\n      .filter(node => node.nodeType === 'organization')\n      .sort((a, b) => a.name.localeCompare(b.name))\n      .map((node, index) => {\n        return {\n          ...node,\n          label: buildNodeLabel('right'),\n          x: GRAPH_LAYOUT.organizationX,\n          y: GRAPH_LAYOUT.topPadding + (index * GRAPH_LAYOUT.rowGap),\n        } satisfies Node;\n      });\n\n    const dataCollectionNodes = rawNodes\n      .filter(node => node.nodeType === 'dataCollection')\n      .sort((a, b) => {\n        const rankDifference = getDataCollectionLayoutRank(a) - getDataCollectionLayoutRank(b);\n        if (rankDifference !== 0) {\n          return rankDifference;\n        }\n        return a.name.localeCompare(b.name);\n      })\n      .map((node, index) => {\n        return {\n          ...node,\n          label: buildNodeLabel(getDataCollectionLabelPosition(node)),\n          x: getDataCollectionX(node),\n          y: GRAPH_LAYOUT.topPadding + (index * GRAPH_LAYOUT.rowGap) + (isSingleNodePair ? GRAPH_LAYOUT.singleRowVerticalOffset : 0),\n        } satisfies Node;\n      });\n\n    const nodes = [...organizationNodes, ...dataCollectionNodes];\n    const nodeBounds = nodes.reduce((bounds, node) => {\n      return {\n        maxX: Math.max(bounds.maxX, node.x),\n        maxY: Math.max(bounds.maxY, node.y),\n        minX: Math.min(bounds.minX, node.x),\n        minY: Math.min(bounds.minY, node.y),\n      };\n    }, {\n      maxX: Number.NEGATIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n      minX: Number.POSITIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n    });\n\n    const contentBounds = nodes.reduce((bounds, node) => {\n      const halfSymbolSize = node.symbolSize / 2;\n      const labelPadding = GRAPH_LAYOUT.nodeLabelWidth + GRAPH_LAYOUT.labelPadding;\n      const labelPosition = node.label.position === 'left' ? 'left' : 'right';\n\n      return {\n        maxX: Math.max(bounds.maxX, node.x + halfSymbolSize + (labelPosition === 'right' ? labelPadding : 0)),\n        maxY: Math.max(bounds.maxY, node.y + halfSymbolSize + GRAPH_LAYOUT.viewportVerticalPadding),\n        minX: Math.min(bounds.minX, node.x - halfSymbolSize - (labelPosition === 'left' ? labelPadding : 0)),\n        minY: Math.min(bounds.minY, node.y - halfSymbolSize - GRAPH_LAYOUT.viewportVerticalPadding),\n      };\n    }, {\n      maxX: Number.NEGATIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n      minX: Number.POSITIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n    });\n\n    const nodeWidth = Math.max(nodeBounds.maxX - nodeBounds.minX, 1);\n    const nodeHeight = Math.max(nodeBounds.maxY - nodeBounds.minY, 1);\n    const contentWidth = Math.max(contentBounds.maxX - contentBounds.minX, 1);\n    const contentHeight = Math.max(contentBounds.maxY - contentBounds.minY, 1);\n    const zoom = Math.max(\n      Math.min(\n        (nodeWidth / contentWidth),\n        (nodeHeight / contentHeight),\n        1,\n      ) * GRAPH_LAYOUT.fitZoomSafetyFactor,\n      0.1,\n    );\n\n    return {\n      categories,\n      links: [...accessLinks, ...shareLinks],\n      nodes,\n      totalAccessLinks: accessLinks.length,\n      totalDataCollections: dataCollectionNodes.length,\n      totalOrganizations: organizationNodes.length,\n      totalShareLinks: shareLinks.length,\n      zoom,\n    } satisfies Graph;\n  }, [dataCollectionMapQuery.map, loadables, organizationAccessCasePoliciesQuery.data, organizationMapQuery.map, organizationShareCasePoliciesQuery.data, selectedEntityId, selectionType, t, theme.palette.primary.dark, theme.palette.primary.light, theme.palette.primary.main, theme.palette.secondary.dark, theme.palette.secondary.main, theme.palette.text.primary, theme.palette.warning.main]);\n\n  const formatAccessRights = useCallback((accessRights: AccessRightsSummary) => {\n    const enabledRights = [\n      accessRights.add_case ? t`Add case` : null,\n      accessRights.remove_case ? t`Remove case` : null,\n      accessRights.add_case_set ? t`Add case set` : null,\n      accessRights.remove_case_set ? t`Remove case set` : null,\n      accessRights.read_case_set ? t`Read case set` : null,\n      accessRights.write_case_set ? t`Write case set` : null,\n      accessRights.is_private ? t`Private` : null,\n    ].filter((value): value is string => !!value);\n\n    return enabledRights.length > 0 ? enabledRights.join(', ') : t`None`;\n  }, [t]);\n\n  const formatList = useCallback((items: string[]) => {\n    return items.length > 0 ? items.join(', ') : t`None`;\n  }, [t]);\n\n  const getOptions = useCallback(() => {\n    return {\n      animation: false,\n      series: [\n        {\n          bottom: GRAPH_LAYOUT.viewportVerticalPadding,\n          categories: graph.categories,\n          center: ['50%', '50%'],\n          data: graph.nodes,\n          edgeSymbol: ['none', 'arrow'],\n          edgeSymbolSize: 8,\n          emphasis: {\n            focus: 'adjacency',\n            lineStyle: {\n              width: 3,\n            },\n          },\n          layout: 'none',\n          left: GRAPH_LAYOUT.viewportHorizontalPadding,\n          lineStyle: {\n            opacity: 0.45,\n          },\n          links: graph.links,\n          right: GRAPH_LAYOUT.viewportHorizontalPadding,\n          roam: true,\n          roamTrigger: 'global',\n          scaleLimit: {\n            max: 4,\n            min: 0.1,\n          },\n          top: GRAPH_LAYOUT.viewportVerticalPadding,\n          type: 'graph',\n          zoom: graph.zoom,\n        } satisfies GraphSeriesOption,\n      ],\n      tooltip: {\n        formatter: (params: unknown) => {\n          const typedParams = params as GraphTooltipParams;\n\n          if (typedParams.dataType === 'node') {\n            const node = typedParams.data as Node;\n\n            if (node.nodeType === 'organization') {\n              return [\n                `<strong>${node.name}</strong>`,\n                `${t('Accessible data collections')}: ${node.accessLinkCount}`,\n                `${t('Connected share routes')}: ${node.shareInCount + node.shareOutCount}`,\n              ].join('<br/>');\n            }\n\n            return [\n              `<strong>${node.name}</strong>`,\n              `${t('Organization access links')}: ${node.accessLinkCount}`,\n              `${t('Incoming share routes')}: ${node.shareInCount}`,\n              `${t('Outgoing share routes')}: ${node.shareOutCount}`,\n            ].join('<br/>');\n          }\n\n          const link = typedParams.data as Link;\n\n          if (link.linkType === 'access') {\n            return [\n              `<strong>${link.organizationName} -> ${link.dataCollectionName}</strong>`,\n              `${t('Type')}: ${t`Organization access`}`,\n              `${t('Active access policies')}: ${link.accessPolicyCount}`,\n              `${t('Enabled access rights')}: ${formatAccessRights(link.accessRights)}`,\n              `${t('Share source collections')}: ${formatList(link.sourceDataCollectionNames)}`,\n            ].join('<br/>');\n          }\n\n          return [\n            `<strong>${link.sourceDataCollectionName} -> ${link.targetDataCollectionName}</strong>`,\n            `${t('Type')}: ${t`Organization share`}`,\n            `${t('Active share policies')}: ${link.sharePolicyCount}`,\n            `${t('Organizations')}: ${formatList(link.organizationNames)}`,\n          ].join('<br/>');\n        },\n      },\n    } satisfies EChartsOption;\n  }, [formatAccessRights, formatList, graph.categories, graph.links, graph.nodes, graph.zoom, t]);\n\n  return (\n    <PageContainer\n      fullHeight\n      fullWidth\n      showBreadcrumbs\n      testIdAttributes={TestIdUtil.createAttributes('DataCollectionVisualizationPage')}\n      title={t`Data collection visualization`}\n    >\n      <Box\n        sx={{\n          display: 'grid',\n          gap: 2,\n          gridTemplateRows: 'auto minmax(0, 1fr)',\n          height: '100%',\n          minHeight: 0,\n          overflow: 'hidden',\n        }}\n      >\n        <ResponseHandler\n          loadables={loadables}\n        >\n          <Box\n            sx={{\n              borderRadius: 2,\n              display: 'grid',\n              gap: 2,\n              px: 2,\n              py: 2,\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'end',\n                display: 'grid',\n                gap: 2,\n                gridTemplateColumns: {\n                  md: 'max-content minmax(320px, 520px)',\n                  xs: '1fr',\n                },\n              }}\n            >\n              <Box\n                sx={{\n                  display: 'grid',\n                  gap: 0.75,\n                }}\n              >\n                <Typography\n                  color={'text.secondary'}\n                  variant={'overline'}\n                >\n                  {t`Type`}\n                </Typography>\n                <ToggleButtonGroup\n                  exclusive\n                  onChange={onSelectionTypeChange}\n                  size={'small'}\n                  value={selectionType}\n                >\n                  <ToggleButton value={'organization'}>\n                    {t`Organization`}\n                  </ToggleButton>\n                  <ToggleButton value={'dataCollection'}>\n                    {t`Data collection`}\n                  </ToggleButton>\n                </ToggleButtonGroup>\n              </Box>\n              <Autocomplete\n                disablePortal\n                getOptionLabel={getSelectionOptionLabel}\n                isOptionEqualToValue={isSelectionOptionEqualToValue}\n                noOptionsText={t`No results`}\n                onChange={onSelectionChange}\n                options={selectionOptions}\n                renderInput={renderSelectionInput}\n                value={selectedOption}\n              />\n            </Box>\n            {hasSelection ? (\n              <Box\n                sx={{\n                  color: 'text.secondary',\n                  display: 'flex',\n                  flexWrap: 'wrap',\n                  gap: 2,\n                }}\n              >\n                <Box component={'span'}>\n                  {t('Organizations: {{count}}', { count: graph.totalOrganizations })}\n                </Box>\n                <Box component={'span'}>\n                  {t('Data collections: {{count}}', { count: graph.totalDataCollections })}\n                </Box>\n                <Box component={'span'}>\n                  {t('Access links: {{count}}', { count: graph.totalAccessLinks })}\n                </Box>\n                <Box component={'span'}>\n                  {t('Share routes: {{count}}', { count: graph.totalShareLinks })}\n                </Box>\n                <Box component={'span'}>\n                  {t`Solid links show organization access policies. Dashed links show sharing routes between data collections.`}\n                </Box>\n              </Box>\n            ) : (\n              <Typography color={'text.secondary'}>\n                {t`Select an organization or data collection to show the visualization.`}\n              </Typography>\n            )}\n          </Box>\n          <Box\n            sx={{\n              borderRadius: 2,\n              height: '100%',\n              minHeight: 0,\n              minWidth: 0,\n              overflow: 'hidden',\n            }}\n          >\n            {hasSelection && graph.nodes.length > 0 ? (\n              <EChartsReact\n                echarts={echartsCore}\n                notMerge\n                option={getOptions()}\n                style={{\n                  height: '100%',\n                  width: '100%',\n                }}\n              />\n            ) : (\n              <Box\n                sx={{\n                  color: 'text.secondary',\n                  display: 'grid',\n                  height: '100%',\n                  placeItems: 'center',\n                  px: 3,\n                  textAlign: 'center',\n                }}\n              >\n                {hasSelection\n                  ? t`No active organization access or share policies are available to visualize.`\n                  : t`Select an organization or data collection to show the visualization.`}\n              </Box>\n            )}\n          </Box>\n        </ResponseHandler>\n      </Box>\n    </PageContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/DataCollectionsAdminPage/DataCollectionsAdminPage.d.ts

@@ -0,0 +1 @@
+export declare const DataCollectionsAdminPage: () => import("react").JSX.Element;

package/dist/pages/DataCollectionsAdminPage/index.d.ts

@@ -0,0 +1 @@
+export * from './DataCollectionsAdminPage';

package/dist/pages/DataCollectionsAdminPage/index.js

@@ -0,0 +1,54 @@
+import { CASEDB_QUERY_KEY as e } from "../../constants/query.js";
+import { object as t } from "yup";
+import { CaseDbCommandName as n, CaseDbOrganizationApi as r } from "@gen-epix/api-casedb";
+import { FORM_FIELD_DEFINITION_TYPE as i } from "@gen-epix/ui-form/models/form";
+import { useCallback as a, useMemo as o } from "react";
+import { useTranslation as s } from "react-i18next";
+import { jsx as c } from "react/jsx-runtime";
+import { TableUtil as l } from "@gen-epix/ui/utils/TableUtil";
+import { TestIdUtil as u } from "@gen-epix/ui-core/utils/TestIdUtil";
+import { SchemaUtil as d } from "@gen-epix/ui-form/utils/SchemaUtil";
+import { CrudPage as f } from "@gen-epix/ui/pages/CrudPage";
+//#region src/pages/DataCollectionsAdminPage/DataCollectionsAdminPage.tsx
+var p = () => {
+	let { t: p } = s(), m = a(async (e) => (await r.getInstance().dataCollectionsGetAll(null, null, { signal: e }))?.data, []), h = a(async (e) => await r.getInstance().dataCollectionsDeleteOne(e.id), []), g = a(async (e, t) => (await r.getInstance().dataCollectionsPutOne(t.id, {
+		id: t.id,
+		...e
+	})).data, []), _ = a(async (e) => (await r.getInstance().dataCollectionsPostOne(e)).data, []), v = a((e) => e.name, []), y = o(() => t().shape({
+		description: d.description,
+		name: d.name
+	}), []), b = o(() => [{
+		definition: i.TEXTFIELD,
+		label: p`Name`,
+		name: "name"
+	}, {
+		definition: i.RICH_TEXT,
+		label: p`Description`,
+		name: "description"
+	}], [p]), x = o(() => [l.createTextColumn({
+		id: "name",
+		name: p`Name`
+	})], [p]);
+	return /* @__PURE__ */ c(f, {
+		createItemDialogTitle: p`Create new data collection`,
+		createOne: _,
+		crudCommandType: n.DataCollectionCrudCommand,
+		defaultSortByField: "name",
+		defaultSortDirection: "asc",
+		deleteOne: h,
+		fetchAll: m,
+		formFieldDefinitions: b,
+		getName: v,
+		itemName: p`Data collection`,
+		resourceQueryKeyBase: e.DATA_COLLECTIONS,
+		schema: y,
+		tableColumns: x,
+		testIdAttributes: u.createAttributes("DataCollectionsAdminPage"),
+		title: p`Data collections`,
+		updateOne: g
+	});
+};
+//#endregion
+export { p as DataCollectionsAdminPage };
+
+//# sourceMappingURL=index.js.map

package/dist/pages/DataCollectionsAdminPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/pages/DataCollectionsAdminPage/DataCollectionsAdminPage.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { object } from 'yup';\nimport type {\n  CaseDbApiPermission,\n  CaseDbDataCollection,\n} from '@gen-epix/api-casedb';\nimport {\n  CaseDbCommandName,\n  CaseDbOrganizationApi,\n} from '@gen-epix/api-casedb';\nimport type { OmitWithMetaData } from '@gen-epix/ui/models/data';\nimport type { TableColumn } from '@gen-epix/ui/models/table';\nimport { CrudPage } from '@gen-epix/ui/pages/CrudPage';\nimport { TableUtil } from '@gen-epix/ui/utils/TableUtil';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport type { FormFieldDefinition } from '@gen-epix/ui-form/models/form';\nimport { FORM_FIELD_DEFINITION_TYPE } from '@gen-epix/ui-form/models/form';\nimport { SchemaUtil } from '@gen-epix/ui-form/utils/SchemaUtil';\n\nimport { CASEDB_QUERY_KEY } from '../../constants/query';\n\n\ntype FormFields = OmitWithMetaData<CaseDbDataCollection>;\n\nexport const DataCollectionsAdminPage = () => {\n  const { t } = useTranslation();\n\n  const fetchAll = useCallback(async (signal: AbortSignal) => {\n    return (await CaseDbOrganizationApi.getInstance().dataCollectionsGetAll(null, null, { signal }))?.data;\n  }, []);\n\n  const deleteOne = useCallback(async (item: CaseDbDataCollection) => {\n    return await CaseDbOrganizationApi.getInstance().dataCollectionsDeleteOne(item.id);\n  }, []);\n\n  const updateOne = useCallback(async (variables: FormFields, item: CaseDbDataCollection) => {\n    return (await CaseDbOrganizationApi.getInstance().dataCollectionsPutOne(item.id, { id: item.id, ...variables })).data;\n  }, []);\n\n  const createOne = useCallback(async (variables: FormFields) => {\n    return (await CaseDbOrganizationApi.getInstance().dataCollectionsPostOne(variables)).data;\n  }, []);\n\n  const getName = useCallback((item: FormFields) => {\n    return item.name;\n  }, []);\n\n  const schema = useMemo(() => {\n    return object<FormFields>().shape({\n      description: SchemaUtil.description,\n      name: SchemaUtil.name,\n    });\n  }, []);\n\n  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {\n    return [\n      {\n        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,\n        label: t`Name`,\n        name: 'name',\n      } as const satisfies FormFieldDefinition<FormFields>,\n      {\n        definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT,\n        label: t`Description`,\n        name: 'description',\n      } as const satisfies FormFieldDefinition<FormFields>,\n    ] as const;\n  }, [t]);\n\n  const tableColumns = useMemo((): TableColumn<CaseDbDataCollection>[] => {\n    return [\n      TableUtil.createTextColumn<CaseDbDataCollection>({ id: 'name', name: t`Name` }),\n    ];\n  }, [t]);\n\n  return (\n    <CrudPage<FormFields, CaseDbDataCollection, CaseDbDataCollection, CASEDB_QUERY_KEY, CaseDbApiPermission>\n      createItemDialogTitle={t`Create new data collection`}\n      createOne={createOne}\n      crudCommandType={CaseDbCommandName.DataCollectionCrudCommand}\n      defaultSortByField={'name'}\n      defaultSortDirection={'asc'}\n      deleteOne={deleteOne}\n      fetchAll={fetchAll}\n      formFieldDefinitions={formFieldDefinitions}\n      getName={getName}\n      itemName={t`Data collection`}\n      resourceQueryKeyBase={CASEDB_QUERY_KEY.DATA_COLLECTIONS}\n      schema={schema}\n      tableColumns={tableColumns}\n      testIdAttributes={TestIdUtil.createAttributes('DataCollectionsAdminPage')}\n      title={t`Data collections`}\n      updateOne={updateOne}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,IAAa,UAAiC;CAC5C,IAAM,EAAE,SAAM,EAAe,GAEvB,IAAW,EAAY,OAAO,OAC1B,MAAM,EAAsB,YAAY,CAAC,CAAC,sBAAsB,MAAM,MAAM,EAAE,UAAO,CAAC,EAAA,EAAI,MACjG,CAAC,CAAC,GAEC,IAAY,EAAY,OAAO,MAC5B,MAAM,EAAsB,YAAY,CAAC,CAAC,yBAAyB,EAAK,EAAE,GAChF,CAAC,CAAC,GAEC,IAAY,EAAY,OAAO,GAAuB,OAClD,MAAM,EAAsB,YAAY,CAAC,CAAC,sBAAsB,EAAK,IAAI;EAAE,IAAI,EAAK;EAAI,GAAG;CAAU,CAAC,EAAA,CAAG,MAChH,CAAC,CAAC,GAEC,IAAY,EAAY,OAAO,OAC3B,MAAM,EAAsB,YAAY,CAAC,CAAC,uBAAuB,CAAS,EAAA,CAAG,MACpF,CAAC,CAAC,GAEC,IAAU,GAAa,MACpB,EAAK,MACX,CAAC,CAAC,GAEC,IAAS,QACN,EAAmB,CAAC,CAAC,MAAM;EAChC,aAAa,EAAW;EACxB,MAAM,EAAW;CACnB,CAAC,GACA,CAAC,CAAC,GAEC,IAAuB,QACpB,CACL;EACE,YAAY,EAA2B;EACvC,OAAO,CAAC;EACR,MAAM;CACR,GACA;EACE,YAAY,EAA2B;EACvC,OAAO,CAAC;EACR,MAAM;CACR,CACF,GACC,CAAC,CAAC,CAAC,GAEA,IAAe,QACZ,CACL,EAAU,iBAAuC;EAAE,IAAI;EAAQ,MAAM,CAAC;CAAO,CAAC,CAChF,GACC,CAAC,CAAC,CAAC;CAEN,OACE,kBAAC,GAAD;EACE,uBAAuB,CAAC;EACb;EACX,iBAAiB,EAAkB;EACnC,oBAAoB;EACpB,sBAAsB;EACX;EACD;EACY;EACb;EACT,UAAU,CAAC;EACX,sBAAsB,EAAiB;EAC/B;EACM;EACd,kBAAkB,EAAW,iBAAiB,0BAA0B;EACxE,OAAO,CAAC;EACG;CACZ,CAAA;AAEL"}

package/dist/pages/DimsAdminPage/DimsAdminPage.d.ts

@@ -0,0 +1 @@
+export declare const DimsAdminPage: () => import("react").JSX.Element;

package/dist/pages/DimsAdminPage/index.d.ts

@@ -0,0 +1 @@
+export * from './DimsAdminPage';