@gen-epix/ui-client-casedb 4.0.0 → 4.0.2

package/dist/components/ui/FileSelector/index.js

@@ -10,39 +10,39 @@ import y from "@mui/icons-material/InsertDriveFile";
 import b from "@mui/icons-material/CloudUpload";
 //#region src/components/ui/FileSelector/FileSelector.tsx
 var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTransferChange: w }) => {
-	let { t: T } = m(), E = T(C === 1 ? "Click or drag to upload file ({{accept}})" : "Click or drag to upload files  ({{accept}})", { accept: x.split(",").join(", ") }), D = C === 1 ? T`Drop file here` : T`Drop files here`, O = u(), k = f(null), [A, j] = p(d(() => S ?? new DataTransfer(), [S])), [M, N] = p(E), [P, F] = p(null), [I, L] = p(!1), R = f(!0);
+	let { t: T } = m(), E = T(C === 1 ? "Click or drag to upload file ({{accept}})" : "Click or drag to upload files  ({{accept}})", { accept: x.split(",").join(", ") }), D = C === 1 ? T`Drop file here` : T`Drop files here`, O = u(), k = f(null), A = d(() => S ?? new DataTransfer(), [S]), [j, M] = p(A), [N, P] = p(E), [F, I] = p(null), [L, R] = p(!1), z = f(!0);
 	l(() => {
-		if (R.current) {
-			R.current = !1;
+		if (z.current) {
+			z.current = !1;
 			return;
 		}
-		w(A);
-	}, [A, w]);
-	let z = c((e) => {
+		w(j);
+	}, [j, w]);
+	let B = c((e) => {
 		e.stopPropagation(), e.preventDefault();
-	}, []), B = c((e) => {
-		F(null), z(e), L(!0), N(D);
-	}, [z, D]), V = c((e) => {
-		z(e), L(!1), N(E);
-	}, [z, E]), H = c((e) => {
-		z(e);
-	}, [z]), U = c((e) => {
+	}, []), V = c((e) => {
+		I(null), B(e), R(!0), P(D);
+	}, [B, D]), H = c((e) => {
+		B(e), R(!1), P(E);
+	}, [B, E]), U = c((e) => {
+		B(e);
+	}, [B]), W = c((e) => {
 		for (let t of e) if (!x.split(",").some((e) => {
 			let n = e.trim();
 			return n === t.type || n.startsWith(".") && t.name.endsWith(n);
 		})) return !1;
 		return !0;
-	}, [x]), W = c((e) => {
-		F(null), j((t) => {
+	}, [x]), G = c((e) => {
+		I(null), M((t) => {
 			let n = new DataTransfer();
 			return Array.from(t.files).filter((t) => t.name !== e).forEach((e) => n.items.add(e)), n;
 		});
-	}, []), G = c((e) => {
-		F(null), j((t) => {
+	}, []), K = c((e) => {
+		I(null), M((t) => {
 			if (!e || e.length === 0) return t;
-			if (!U(e)) return F(T("Invalid file type. Accepted types: {{accept}}", { accept: x })), t;
+			if (!W(e)) return I(T("Invalid file type. Accepted types: {{accept}}", { accept: x })), t;
 			let n = Array.from(e).map((e) => e.name), r = new Set(Array.from(t.files).map((e) => e.name)), i = n.filter((e) => r.has(e)).length;
-			if (r.size + (n.length - i) > C) return F(T("Too many files selected. Maximum allowed: {{numFilesAllowed}}", { numFilesAllowed: C })), t;
+			if (r.size + (n.length - i) > C) return I(T("Too many files selected. Maximum allowed: {{numFilesAllowed}}", { numFilesAllowed: C })), t;
 			let a = new DataTransfer();
 			return Array.from(t.files).forEach((e) => {
 				n.includes(e.name) || a.items.add(e);
@@ -52,30 +52,30 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 		});
 	}, [
 		x,
-		U,
+		W,
 		C,
 		T
-	]), K = c((e) => {
-		z(e), N(E), L(!1);
+	]), q = c((e) => {
+		B(e), P(E), R(!1);
 		let t = e.dataTransfer.files;
-		G(t);
+		K(t);
 	}, [
-		z,
+		B,
 		E,
-		G
-	]), q = c((e) => {
+		K
+	]), J = c((e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), k.current?.click());
-	}, []), J = c((e) => {
-		G(e.target.files);
-	}, [G]), Y = c(() => {
-		F(null), j(new DataTransfer());
+	}, []), Y = c((e) => {
+		K(e.target.files);
+	}, [K]), X = c(() => {
+		I(null), M(new DataTransfer());
 	}, []);
 	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(r, {
 		accept: x,
 		component: "input",
 		id: O,
 		multiple: C > 1,
-		onChange: J,
+		onChange: Y,
 		ref: k,
 		sx: { display: "none" },
 		type: "file"
@@ -88,14 +88,14 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 		children: [/* @__PURE__ */ g(r, {
 			component: "label",
 			htmlFor: O,
-			onDragEnter: B,
-			onDragLeave: V,
-			onDragOver: H,
-			onDrop: K,
-			onKeyDown: q,
+			onDragEnter: V,
+			onDragLeave: H,
+			onDragOver: U,
+			onDrop: q,
+			onKeyDown: J,
 			sx: {
 				"&:hover *": { opacity: 1 },
-				"& p, & svg": { opacity: I ? 1 : .4 },
+				"& p, & svg": { opacity: L ? 1 : .4 },
 				cursor: "pointer",
 				display: "flex",
 				height: "100%",
@@ -126,14 +126,14 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 							color: "primary",
 							fontSize: "large"
 						}),
-						P && /* @__PURE__ */ g(s, {
+						F && /* @__PURE__ */ g(s, {
 							sx: {
 								color: "error.main",
 								fontWeight: "bold"
 							},
-							children: P
+							children: F
 						}),
-						/* @__PURE__ */ g(s, { children: M })
+						/* @__PURE__ */ g(s, { children: N })
 					]
 				})
 			})
@@ -142,7 +142,7 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 				overflow: "auto",
 				position: "relative"
 			},
-			children: /* @__PURE__ */ g(r, { children: A.files.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(r, {
+			children: /* @__PURE__ */ g(r, { children: j.files.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(r, {
 				sx: {
 					alignItems: "center",
 					backgroundColor: (e) => e.palette.background.paper,
@@ -155,23 +155,23 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 				},
 				children: [/* @__PURE__ */ g(s, {
 					variant: "h5",
-					children: T("Selected files: {{numFiles}}", { numFiles: A.files.length })
+					children: T("Selected files: {{numFiles}}", { numFiles: j.files.length })
 				}), /* @__PURE__ */ g(a, {
 					"aria-label": T("Clear all selected files"),
-					onClick: Y,
+					onClick: X,
 					size: "small",
 					children: /* @__PURE__ */ g(v, { fontSize: "small" })
 				})]
 			}), /* @__PURE__ */ g(o, {
 				direction: "row",
 				sx: { flexWrap: "wrap" },
-				children: Array.from(A.files).map((a) => /* @__PURE__ */ g(i, {
+				children: Array.from(j.files).map((a) => /* @__PURE__ */ g(i, {
 					deleteIcon: /* @__PURE__ */ g(v, {
 						"aria-hidden": !1,
 						"aria-label": T("Clear {{fileName}}", { fileName: a.name }),
 						focusable: !0,
 						onKeyDown: (e) => {
-							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), W(a.name));
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), G(a.name));
 						},
 						tabIndex: 0
 					}),
@@ -190,7 +190,7 @@ var x = ({ accept: x, initialDataTransfer: S, numFilesAllowed: C = 1, onDataTran
 						]
 					})] }),
 					onDelete: () => {
-						W(a.name);
+						G(a.name);
 					},
 					sx: { margin: .25 },
 					tabIndex: -1,

package/dist/components/ui/FileSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/FileSelector/FileSelector.tsx"],"sourcesContent":["import {\n  Box,\n  Chip,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\nimport type {\n  ChangeEvent,\n  DragEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport CloudUploadIcon from '@mui/icons-material/CloudUpload';\nimport { useTranslation } from 'react-i18next';\nimport { format } from 'date-fns';\nimport { DATE_FORMAT } from '@gen-epix/ui-core/constants/date';\n\nimport { FileUtil } from '../../../utils/FileUtil';\n\n\nexport type FileSelectorProps = {\n  readonly accept: string;\n  readonly initialDataTransfer?: DataTransfer;\n  readonly numFilesAllowed?: number;\n  readonly onDataTransferChange: (dataTransfer: DataTransfer) => void;\n};\n\nexport const FileSelector = ({\n  accept,\n  initialDataTransfer: initialDataTransferProp,\n  numFilesAllowed = 1,\n  onDataTransferChange,\n}: FileSelectorProps) => {\n  const { t } = useTranslation();\n  const hoverLabel = numFilesAllowed === 1\n    ? t('Click or drag to upload file ({{accept}})', { accept: accept.split(',').join(', ') })\n    : t('Click or drag to upload files  ({{accept}})', { accept: accept.split(',').join(', ') });\n  const dropLabel = numFilesAllowed === 1\n    ? t`Drop file here`\n    : t`Drop files here`;\n\n  const inputId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const initialDataTransfer = useMemo(() => {\n    return initialDataTransferProp ?? new DataTransfer();\n  }, [initialDataTransferProp]);\n\n  const [dataTransfer, setDataTransfer] = useState<DataTransfer>(initialDataTransfer);\n  const [labelText, setLabelText] = useState<string>(hoverLabel);\n  const [errorText, setErrorText] = useState<string>(null);\n  const [isDragOver, setIsDragOver] = useState<boolean>(false);\n  const initialDataTransferEffectRef = useRef(true);\n\n  useEffect(() => {\n    if (initialDataTransferEffectRef.current) {\n      initialDataTransferEffectRef.current = false;\n      return;\n    }\n    onDataTransferChange(dataTransfer);\n  }, [dataTransfer, onDataTransferChange]);\n\n  const stopDefaults = useCallback((e: DragEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  }, []);\n\n  const onLabelDragEnter = useCallback((event: DragEvent) => {\n    setErrorText(null);\n    stopDefaults(event);\n    setIsDragOver(true);\n    setLabelText(dropLabel);\n  }, [stopDefaults, dropLabel]);\n\n  const onLabelDragLeave = useCallback((event: DragEvent) => {\n    stopDefaults(event);\n    setIsDragOver(false);\n    setLabelText(hoverLabel);\n  }, [stopDefaults, hoverLabel]);\n\n  const onLabelDragOver = useCallback((event: DragEvent) => {\n    stopDefaults(event);\n  }, [stopDefaults]);\n\n  const areFileTypesValid = useCallback((fileList: FileList) => {\n    for (const file of fileList) {\n      const isValid = accept.split(',').some(type => {\n        const trimmedType = type.trim();\n        return (\n          trimmedType === file.type ||\n          (trimmedType.startsWith('.') && file.name.endsWith(trimmedType))\n        );\n      });\n      if (!isValid) {\n        return false;\n      }\n    }\n    return true;\n  }, [accept]);\n\n  const removeFile = useCallback((fileName: string) => {\n    setErrorText(null);\n    setDataTransfer((oldDataTransfer) => {\n      const newDataTransfer = new DataTransfer();\n      Array.from(oldDataTransfer.files)\n        .filter(f => f.name !== fileName)\n        .forEach(f => newDataTransfer.items.add(f));\n      return newDataTransfer;\n    });\n  }, []);\n\n  const addFileList = useCallback((fileList: FileList) => {\n    setErrorText(null);\n    setDataTransfer((oldDataTransfer) => {\n      if (!fileList || fileList.length === 0) {\n        return oldDataTransfer;\n      }\n      if (!areFileTypesValid(fileList)) {\n        setErrorText(t('Invalid file type. Accepted types: {{accept}}', { accept }));\n        return oldDataTransfer;\n      }\n\n      const fileNamesToAppend = Array.from(fileList).map(f => f.name);\n      const uniqueOldFileNames = new Set(Array.from(oldDataTransfer.files).map(f => f.name));\n      const numDuplicates = fileNamesToAppend.filter(name => uniqueOldFileNames.has(name)).length;\n      const numNewFileNames = uniqueOldFileNames.size + (fileNamesToAppend.length - numDuplicates);\n\n      if (numNewFileNames > numFilesAllowed) {\n        setErrorText(t('Too many files selected. Maximum allowed: {{numFilesAllowed}}', { numFilesAllowed }));\n        return oldDataTransfer;\n      }\n\n      const newDataTransfer = new DataTransfer();\n      Array.from(oldDataTransfer.files).forEach(file => {\n        if (!fileNamesToAppend.includes(file.name)) {\n          newDataTransfer.items.add(file);\n        }\n      });\n      Array.from(fileList).forEach(file => {\n        newDataTransfer.items.add(file);\n      });\n\n      return newDataTransfer;\n\n    });\n  }, [accept, areFileTypesValid, numFilesAllowed, t]);\n\n  const onDrop = useCallback((event: DragEvent<HTMLElement>) => {\n    stopDefaults(event);\n    setLabelText(hoverLabel);\n    setIsDragOver(false);\n\n    const fileList = event.dataTransfer.files;\n    addFileList(fileList);\n\n  }, [stopDefaults, hoverLabel, addFileList]);\n\n  const onLabelKeyDown = useCallback((event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      inputRef.current?.click();\n    }\n  }, []);\n\n  const onFileInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    addFileList(event.target.files);\n  }, [addFileList]);\n\n  const onClearAllButtonClick = useCallback(() => {\n    setErrorText(null);\n    setDataTransfer(new DataTransfer());\n  }, []);\n\n  return (\n    <>\n      <Box\n        accept={accept}\n        component={'input'}\n        id={inputId}\n        multiple={numFilesAllowed > 1}\n        onChange={onFileInputChange}\n        ref={inputRef}\n        sx={{\n          display: 'none',\n        }}\n        type={'file'}\n      />\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateRows: 'auto fit-content(50%)',\n          height: '100%',\n        }}\n      >\n        <Box\n          component={'label'}\n          htmlFor={inputId}\n          onDragEnter={onLabelDragEnter}\n          onDragLeave={onLabelDragLeave}\n          onDragOver={onLabelDragOver}\n          onDrop={onDrop}\n          onKeyDown={onLabelKeyDown}\n          sx={{\n            '&:hover *': {\n              opacity: 1,\n            },\n            '& p, & svg': {\n              opacity: isDragOver ? 1 : 0.4,\n            },\n            cursor: 'pointer',\n            display: 'flex',\n            height: '100%',\n            position: 'relative',\n            textAlign: 'center',\n            width: '100%',\n          }}\n          tabIndex={0}\n        >\n          <Box\n            sx={{\n              height: '100%',\n              pointerEvents: 'none',\n              position: 'relative',\n              width: '100%',\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                justifyContent: 'center',\n                position: 'absolute',\n                width: '100%',\n              }}\n            >\n              <CloudUploadIcon\n                color={'primary'}\n                fontSize={'large'}\n              />\n              {errorText && (\n                <Typography\n                  sx={{\n                    color: 'error.main',\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {errorText}\n                </Typography>\n              )}\n              <Typography>\n                {labelText}\n              </Typography>\n\n            </Box>\n          </Box>\n        </Box>\n        <Box\n          sx={{\n            overflow: 'auto',\n            position: 'relative',\n          }}\n        >\n          <Box>\n            {dataTransfer.files.length > 0 && (\n              <>\n                <Box\n                  sx={{\n                    alignItems: 'center',\n                    backgroundColor: (theme) => theme.palette.background.paper,\n                    display: 'flex',\n                    gap: 1,\n                    paddingY: 1,\n                    position: 'sticky',\n                    top: 0,\n                    zIndex: (theme) => theme.zIndex.tooltip - 1,\n                  }}\n                >\n                  <Typography\n                    variant={'h5'}\n                  >\n                    {t('Selected files: {{numFiles}}', { numFiles: dataTransfer.files.length })}\n                  </Typography>\n                  <IconButton\n                    aria-label={t('Clear all selected files')}\n                    onClick={onClearAllButtonClick}\n                    size={'small'}\n                  >\n                    <DeleteIcon fontSize={'small'} />\n                  </IconButton>\n                </Box>\n                <Stack\n                  direction={'row'}\n                  sx={{\n                    flexWrap: 'wrap',\n                  }}\n                >\n                  {Array.from(dataTransfer.files).map(file => (\n                    <Chip\n                      deleteIcon={(\n                        <DeleteIcon\n                          aria-hidden={false}\n                          aria-label={t('Clear {{fileName}}', { fileName: file.name })}\n                          focusable\n                          // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                          onKeyDown={(event) => {\n                            if (event.key === 'Enter' || event.key === ' ') {\n                              event.preventDefault();\n                              removeFile(file.name);\n                            }\n                          }}\n                          tabIndex={0}\n                        />\n                      )}\n                      icon={<InsertDriveFileIcon />}\n                      key={`${file.name}-${file.size}-${file.lastModified}`}\n                      label={\n                        (\n                          <>\n                            <Box\n                              component={'span'}\n                              sx={{ fontWeight: 'bold' }}\n                            >\n                              {file.name}\n                            </Box>\n                            <Box component={'span'}>\n                              {' '}\n                              {t('(size: {{size}})', { size: FileUtil.getReadableFileSize(file.size) })}\n                              {' '}\n                              {t('(last modified: {{lastModified}})', { lastModified: format(new Date(file.lastModified), DATE_FORMAT.DATE_TIME) })}\n                            </Box>\n                          </>\n                        )\n                      }\n                      // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                      onDelete={() => {\n                        removeFile(file.name);\n                      }}\n                      sx={{\n                        margin: 0.25,\n                      }}\n                      tabIndex={-1}\n                      variant={'outlined'}\n                    />\n                  ))}\n                </Stack>\n              </>\n            )}\n          </Box>\n        </Box>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAqCA,IAAa,KAAgB,EAC3B,WACA,qBAAqB,GACrB,qBAAkB,GAClB,8BACuB;CACvB,IAAM,EAAE,SAAM,EAAe,GACvB,IACF,EADe,MAAoB,IACjC,8CACA,+CAD6C,EAAE,QAAQ,EAAO,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,EAAE,CACG,GACvF,IAAY,MAAoB,IAClC,CAAC,mBACD,CAAC,mBAEC,IAAU,EAAM,GAChB,IAAW,EAAyB,IAAI,GAMxC,CAAC,GAAc,KAAmB,EAJZ,QACnB,KAA2B,IAAI,aAAa,GAClD,CAAC,CAAuB,CAEoC,CAAmB,GAC5E,CAAC,GAAW,KAAgB,EAAiB,CAAU,GACvD,CAAC,GAAW,KAAgB,EAAiB,IAAI,GACjD,CAAC,GAAY,KAAiB,EAAkB,EAAK,GACrD,IAA+B,EAAO,EAAI;CAEhD,QAAgB;EACd,IAAI,EAA6B,SAAS;GACxC,EAA6B,UAAU;GACvC;EACF;EACA,EAAqB,CAAY;CACnC,GAAG,CAAC,GAAc,CAAoB,CAAC;CAEvC,IAAM,IAAe,GAAa,MAAiB;EAEjD,AADA,EAAE,gBAAgB,GAClB,EAAE,eAAe;CACnB,GAAG,CAAC,CAAC,GAEC,IAAmB,GAAa,MAAqB;EAIzD,AAHA,EAAa,IAAI,GACjB,EAAa,CAAK,GAClB,EAAc,EAAI,GAClB,EAAa,CAAS;CACxB,GAAG,CAAC,GAAc,CAAS,CAAC,GAEtB,IAAmB,GAAa,MAAqB;EAGzD,AAFA,EAAa,CAAK,GAClB,EAAc,EAAK,GACnB,EAAa,CAAU;CACzB,GAAG,CAAC,GAAc,CAAU,CAAC,GAEvB,IAAkB,GAAa,MAAqB;EACxD,EAAa,CAAK;CACpB,GAAG,CAAC,CAAY,CAAC,GAEX,IAAoB,GAAa,MAAuB;EAC5D,KAAK,IAAM,KAAQ,GAQjB,IAAI,CAPY,EAAO,MAAM,GAAG,CAAC,CAAC,MAAK,MAAQ;GAC7C,IAAM,IAAc,EAAK,KAAK;GAC9B,OACE,MAAgB,EAAK,QACpB,EAAY,WAAW,GAAG,KAAK,EAAK,KAAK,SAAS,CAAW;EAElE,CACK,GACH,OAAO;EAGX,OAAO;CACT,GAAG,CAAC,CAAM,CAAC,GAEL,IAAa,GAAa,MAAqB;EAEnD,AADA,EAAa,IAAI,GACjB,GAAiB,MAAoB;GACnC,IAAM,IAAkB,IAAI,aAAa;GAIzC,OAHA,MAAM,KAAK,EAAgB,KAAK,CAAC,CAC9B,QAAO,MAAK,EAAE,SAAS,CAAQ,CAAC,CAChC,SAAQ,MAAK,EAAgB,MAAM,IAAI,CAAC,CAAC,GACrC;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAc,GAAa,MAAuB;EAEtD,AADA,EAAa,IAAI,GACjB,GAAiB,MAAoB;GACnC,IAAI,CAAC,KAAY,EAAS,WAAW,GACnC,OAAO;GAET,IAAI,CAAC,EAAkB,CAAQ,GAE7B,OADA,EAAa,EAAE,iDAAiD,EAAE,UAAO,CAAC,CAAC,GACpE;GAGT,IAAM,IAAoB,MAAM,KAAK,CAAQ,CAAC,CAAC,KAAI,MAAK,EAAE,IAAI,GACxD,IAAqB,IAAI,IAAI,MAAM,KAAK,EAAgB,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,IAAI,CAAC,GAC/E,IAAgB,EAAkB,QAAO,MAAQ,EAAmB,IAAI,CAAI,CAAC,CAAC,CAAC;GAGrF,IAFwB,EAAmB,QAAQ,EAAkB,SAAS,KAExD,GAEpB,OADA,EAAa,EAAE,iEAAiE,EAAE,mBAAgB,CAAC,CAAC,GAC7F;GAGT,IAAM,IAAkB,IAAI,aAAa;GAUzC,OATA,MAAM,KAAK,EAAgB,KAAK,CAAC,CAAC,SAAQ,MAAQ;IAChD,AAAK,EAAkB,SAAS,EAAK,IAAI,KACvC,EAAgB,MAAM,IAAI,CAAI;GAElC,CAAC,GACD,MAAM,KAAK,CAAQ,CAAC,CAAC,SAAQ,MAAQ;IACnC,EAAgB,MAAM,IAAI,CAAI;GAChC,CAAC,GAEM;EAET,CAAC;CACH,GAAG;EAAC;EAAQ;EAAmB;EAAiB;CAAC,CAAC,GAE5C,IAAS,GAAa,MAAkC;EAG5D,AAFA,EAAa,CAAK,GAClB,EAAa,CAAU,GACvB,EAAc,EAAK;EAEnB,IAAM,IAAW,EAAM,aAAa;EACpC,EAAY,CAAQ;CAEtB,GAAG;EAAC;EAAc;EAAY;CAAW,CAAC,GAEpC,IAAiB,GAAa,MAA2C;EAC7E,CAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAS,SAAS,MAAM;CAE5B,GAAG,CAAC,CAAC,GAEC,IAAoB,GAAa,MAAyC;EAC9E,EAAY,EAAM,OAAO,KAAK;CAChC,GAAG,CAAC,CAAW,CAAC,GAEV,IAAwB,QAAkB;EAE9C,AADA,EAAa,IAAI,GACjB,EAAgB,IAAI,aAAa,CAAC;CACpC,GAAG,CAAC,CAAC;CAEL,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACU;EACR,WAAW;EACX,IAAI;EACJ,UAAU,IAAkB;EAC5B,UAAU;EACV,KAAK;EACL,IAAI,EACF,SAAS,OACX;EACA,MAAM;CACP,CAAA,GACD,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,kBAAkB;GAClB,QAAQ;EACV;YALF,CAOE,kBAAC,GAAD;GACE,WAAW;GACX,SAAS;GACT,aAAa;GACb,aAAa;GACb,YAAY;GACJ;GACR,WAAW;GACX,IAAI;IACF,aAAa,EACX,SAAS,EACX;IACA,cAAc,EACZ,SAAS,IAAa,IAAI,GAC5B;IACA,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,UAAU;IACV,WAAW;IACX,OAAO;GACT;GACA,UAAU;aAEV,kBAAC,GAAD;IACE,IAAI;KACF,QAAQ;KACR,eAAe;KACf,UAAU;KACV,OAAO;IACT;cAEA,kBAAC,GAAD;KACE,IAAI;MACF,YAAY;MACZ,SAAS;MACT,eAAe;MACf,QAAQ;MACR,gBAAgB;MAChB,UAAU;MACV,OAAO;KACT;eATF;MAWE,kBAAC,GAAD;OACE,OAAO;OACP,UAAU;MACX,CAAA;MACA,KACC,kBAAC,GAAD;OACE,IAAI;QACF,OAAO;QACP,YAAY;OACd;iBAEC;MACS,CAAA;MAEd,kBAAC,GAAD,EAAA,UACG,EACS,CAAA;KAET;;GACF,CAAA;EACF,CAAA,GACL,kBAAC,GAAD;GACE,IAAI;IACF,UAAU;IACV,UAAU;GACZ;aAEA,kBAAC,GAAD,EAAA,UACG,EAAa,MAAM,SAAS,KAC3B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,IAAI;KACF,YAAY;KACZ,kBAAkB,MAAU,EAAM,QAAQ,WAAW;KACrD,SAAS;KACT,KAAK;KACL,UAAU;KACV,UAAU;KACV,KAAK;KACL,SAAS,MAAU,EAAM,OAAO,UAAU;IAC5C;cAVF,CAYE,kBAAC,GAAD;KACE,SAAS;eAER,EAAE,gCAAgC,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;IAChE,CAAA,GACZ,kBAAC,GAAD;KACE,cAAY,EAAE,0BAA0B;KACxC,SAAS;KACT,MAAM;eAEN,kBAAC,GAAD,EAAY,UAAU,QAAU,CAAA;IACtB,CAAA,CACT;OACL,kBAAC,GAAD;IACE,WAAW;IACX,IAAI,EACF,UAAU,OACZ;cAEC,MAAM,KAAK,EAAa,KAAK,CAAC,CAAC,KAAI,MAClC,kBAAC,GAAD;KACE,YACE,kBAAC,GAAD;MACE,eAAa;MACb,cAAY,EAAE,sBAAsB,EAAE,UAAU,EAAK,KAAK,CAAC;MAC3D,WAAA;MAEA,YAAY,MAAU;OACpB,CAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAW,EAAK,IAAI;MAExB;MACA,UAAU;KACX,CAAA;KAEH,MAAM,kBAAC,GAAD,CAAsB,CAAA;KAE5B,OAEI,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,WAAW;MACX,IAAI,EAAE,YAAY,OAAO;gBAExB,EAAK;KACH,CAAA,GACL,kBAAC,GAAD;MAAK,WAAW;gBAAhB;OACG;OACA,EAAE,oBAAoB,EAAE,MAAM,EAAS,oBAAoB,EAAK,IAAI,EAAE,CAAC;OACvE;OACA,EAAE,qCAAqC,EAAE,cAAc,EAAO,IAAI,KAAK,EAAK,YAAY,GAAG,EAAY,SAAS,EAAE,CAAC;MACjH;OACL,EAAA,CAAA;KAIN,gBAAgB;MACd,EAAW,EAAK,IAAI;KACtB;KACA,IAAI,EACF,QAAQ,IACV;KACA,UAAU;KACV,SAAS;IACV,GA5BM,GAAG,EAAK,KAAK,GAAG,EAAK,KAAK,GAAG,EAAK,cA4BxC,CACF;GACI,CAAA,CACP,EAAA,CAAA,EAED,CAAA;EACF,CAAA,CACF;GACL,EAAA,CAAA;AAEN"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/FileSelector/FileSelector.tsx"],"sourcesContent":["import {\n  Box,\n  Chip,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\nimport type {\n  ChangeEvent,\n  DragEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport CloudUploadIcon from '@mui/icons-material/CloudUpload';\nimport { useTranslation } from 'react-i18next';\nimport { format } from 'date-fns';\nimport { DATE_FORMAT } from '@gen-epix/ui-core/constants/date';\n\nimport { FileUtil } from '../../../utils/FileUtil';\n\n\nexport type FileSelectorProps = {\n  readonly accept: string;\n  readonly initialDataTransfer?: DataTransfer;\n  readonly numFilesAllowed?: number;\n  readonly onDataTransferChange: (dataTransfer: DataTransfer) => void;\n};\n\nexport const FileSelector = ({\n  accept,\n  initialDataTransfer: initialDataTransferProp,\n  numFilesAllowed = 1,\n  onDataTransferChange,\n}: FileSelectorProps) => {\n  const { t } = useTranslation();\n  const hoverLabel = numFilesAllowed === 1\n    ? t('Click or drag to upload file ({{accept}})', { accept: accept.split(',').join(', ') })\n    : t('Click or drag to upload files  ({{accept}})', { accept: accept.split(',').join(', ') });\n  const dropLabel = numFilesAllowed === 1\n    ? t`Drop file here`\n    : t`Drop files here`;\n\n  const inputId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const initialDataTransfer = useMemo(() => {\n    return initialDataTransferProp ?? new DataTransfer();\n  }, [initialDataTransferProp]);\n\n  const [dataTransfer, setDataTransfer] = useState<DataTransfer>(initialDataTransfer);\n  const [labelText, setLabelText] = useState<string>(hoverLabel);\n  const [errorText, setErrorText] = useState<string>(null);\n  const [isDragOver, setIsDragOver] = useState<boolean>(false);\n  const initialDataTransferEffectRef = useRef(true);\n\n  useEffect(() => {\n    if (initialDataTransferEffectRef.current) {\n      initialDataTransferEffectRef.current = false;\n      return;\n    }\n    onDataTransferChange(dataTransfer);\n  }, [dataTransfer, onDataTransferChange]);\n\n  const stopDefaults = useCallback((e: DragEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  }, []);\n\n  const onLabelDragEnter = useCallback((event: DragEvent) => {\n    setErrorText(null);\n    stopDefaults(event);\n    setIsDragOver(true);\n    setLabelText(dropLabel);\n  }, [stopDefaults, dropLabel]);\n\n  const onLabelDragLeave = useCallback((event: DragEvent) => {\n    stopDefaults(event);\n    setIsDragOver(false);\n    setLabelText(hoverLabel);\n  }, [stopDefaults, hoverLabel]);\n\n  const onLabelDragOver = useCallback((event: DragEvent) => {\n    stopDefaults(event);\n  }, [stopDefaults]);\n\n  const areFileTypesValid = useCallback((fileList: FileList) => {\n    for (const file of fileList) {\n      const isValid = accept.split(',').some(type => {\n        const trimmedType = type.trim();\n        return (\n          trimmedType === file.type ||\n          (trimmedType.startsWith('.') && file.name.endsWith(trimmedType))\n        );\n      });\n      if (!isValid) {\n        return false;\n      }\n    }\n    return true;\n  }, [accept]);\n\n  const removeFile = useCallback((fileName: string) => {\n    setErrorText(null);\n    setDataTransfer((oldDataTransfer) => {\n      const newDataTransfer = new DataTransfer();\n      Array.from(oldDataTransfer.files)\n        .filter(f => f.name !== fileName)\n        .forEach(f => newDataTransfer.items.add(f));\n      return newDataTransfer;\n    });\n  }, []);\n\n  const addFileList = useCallback((fileList: FileList) => {\n    setErrorText(null);\n    setDataTransfer((oldDataTransfer) => {\n      if (!fileList || fileList.length === 0) {\n        return oldDataTransfer;\n      }\n      if (!areFileTypesValid(fileList)) {\n        setErrorText(t('Invalid file type. Accepted types: {{accept}}', { accept }));\n        return oldDataTransfer;\n      }\n\n      const fileNamesToAppend = Array.from(fileList).map(f => f.name);\n      const uniqueOldFileNames = new Set(Array.from(oldDataTransfer.files).map(f => f.name));\n      const numDuplicates = fileNamesToAppend.filter(name => uniqueOldFileNames.has(name)).length;\n      const numNewFileNames = uniqueOldFileNames.size + (fileNamesToAppend.length - numDuplicates);\n\n      if (numNewFileNames > numFilesAllowed) {\n        setErrorText(t('Too many files selected. Maximum allowed: {{numFilesAllowed}}', { numFilesAllowed }));\n        return oldDataTransfer;\n      }\n\n      const newDataTransfer = new DataTransfer();\n      Array.from(oldDataTransfer.files).forEach(file => {\n        if (!fileNamesToAppend.includes(file.name)) {\n          newDataTransfer.items.add(file);\n        }\n      });\n      Array.from(fileList).forEach(file => {\n        newDataTransfer.items.add(file);\n      });\n\n      return newDataTransfer;\n\n    });\n  }, [accept, areFileTypesValid, numFilesAllowed, t]);\n\n  const onDrop = useCallback((event: DragEvent<HTMLElement>) => {\n    stopDefaults(event);\n    setLabelText(hoverLabel);\n    setIsDragOver(false);\n\n    const fileList = event.dataTransfer.files;\n    addFileList(fileList);\n\n  }, [stopDefaults, hoverLabel, addFileList]);\n\n  const onLabelKeyDown = useCallback((event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      inputRef.current?.click();\n    }\n  }, []);\n\n  const onFileInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    addFileList(event.target.files);\n  }, [addFileList]);\n\n  const onClearAllButtonClick = useCallback(() => {\n    setErrorText(null);\n    setDataTransfer(new DataTransfer());\n  }, []);\n\n  return (\n    <>\n      <Box\n        accept={accept}\n        component={'input'}\n        id={inputId}\n        multiple={numFilesAllowed > 1}\n        onChange={onFileInputChange}\n        ref={inputRef}\n        sx={{\n          display: 'none',\n        }}\n        type={'file'}\n      />\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateRows: 'auto fit-content(50%)',\n          height: '100%',\n        }}\n      >\n        <Box\n          component={'label'}\n          htmlFor={inputId}\n          onDragEnter={onLabelDragEnter}\n          onDragLeave={onLabelDragLeave}\n          onDragOver={onLabelDragOver}\n          onDrop={onDrop}\n          onKeyDown={onLabelKeyDown}\n          sx={{\n            '&:hover *': {\n              opacity: 1,\n            },\n            '& p, & svg': {\n              opacity: isDragOver ? 1 : 0.4,\n            },\n            cursor: 'pointer',\n            display: 'flex',\n            height: '100%',\n            position: 'relative',\n            textAlign: 'center',\n            width: '100%',\n          }}\n          tabIndex={0}\n        >\n          <Box\n            sx={{\n              height: '100%',\n              pointerEvents: 'none',\n              position: 'relative',\n              width: '100%',\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                justifyContent: 'center',\n                position: 'absolute',\n                width: '100%',\n              }}\n            >\n              <CloudUploadIcon\n                color={'primary'}\n                fontSize={'large'}\n              />\n              {errorText && (\n                <Typography\n                  sx={{\n                    color: 'error.main',\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {errorText}\n                </Typography>\n              )}\n              <Typography>\n                {labelText}\n              </Typography>\n\n            </Box>\n          </Box>\n        </Box>\n        <Box\n          sx={{\n            overflow: 'auto',\n            position: 'relative',\n          }}\n        >\n          <Box>\n            {dataTransfer.files.length > 0 && (\n              <>\n                <Box\n                  sx={{\n                    alignItems: 'center',\n                    backgroundColor: (theme) => theme.palette.background.paper,\n                    display: 'flex',\n                    gap: 1,\n                    paddingY: 1,\n                    position: 'sticky',\n                    top: 0,\n                    zIndex: (theme) => theme.zIndex.tooltip - 1,\n                  }}\n                >\n                  <Typography\n                    variant={'h5'}\n                  >\n                    {t('Selected files: {{numFiles}}', { numFiles: dataTransfer.files.length })}\n                  </Typography>\n                  <IconButton\n                    aria-label={t('Clear all selected files')}\n                    onClick={onClearAllButtonClick}\n                    size={'small'}\n                  >\n                    <DeleteIcon fontSize={'small'} />\n                  </IconButton>\n                </Box>\n                <Stack\n                  direction={'row'}\n                  sx={{\n                    flexWrap: 'wrap',\n                  }}\n                >\n                  {Array.from(dataTransfer.files).map(file => (\n                    <Chip\n                      deleteIcon={(\n                        <DeleteIcon\n                          aria-hidden={false}\n                          aria-label={t('Clear {{fileName}}', { fileName: file.name })}\n                          focusable\n                          // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                          onKeyDown={(event) => {\n                            if (event.key === 'Enter' || event.key === ' ') {\n                              event.preventDefault();\n                              removeFile(file.name);\n                            }\n                          }}\n                          tabIndex={0}\n                        />\n                      )}\n                      icon={<InsertDriveFileIcon />}\n                      key={`${file.name}-${file.size}-${file.lastModified}`}\n                      label={\n                        (\n                          <>\n                            <Box\n                              component={'span'}\n                              sx={{ fontWeight: 'bold' }}\n                            >\n                              {file.name}\n                            </Box>\n                            <Box component={'span'}>\n                              {' '}\n                              {t('(size: {{size}})', { size: FileUtil.getReadableFileSize(file.size) })}\n                              {' '}\n                              {t('(last modified: {{lastModified}})', { lastModified: format(new Date(file.lastModified), DATE_FORMAT.DATE_TIME) })}\n                            </Box>\n                          </>\n                        )\n                      }\n                      // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n                      onDelete={() => {\n                        removeFile(file.name);\n                      }}\n                      sx={{\n                        margin: 0.25,\n                      }}\n                      tabIndex={-1}\n                      variant={'outlined'}\n                    />\n                  ))}\n                </Stack>\n              </>\n            )}\n          </Box>\n        </Box>\n      </Box>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ui/FindSimilarCasesDialog/FindSimilarCasesDialog.d.ts

@@ -1,5 +1,5 @@
 import { CaseDbCase, CaseDbCompleteCaseType } from '@gen-epix/api-casedb';
-import { WithDialogRefMethods, WithDialogRenderProps } from '@gen-epix/ui/hoc/withDialog';
+import { WithDialogRefMethods, WithDialogRenderProps } from '@gen-epix/ui-core-components/hoc/withDialog';
 export interface FindSimilarCasesDialogOpenProps {
     allRows: CaseDbCase[];
     completeCaseType: CaseDbCompleteCaseType;
@@ -8,4 +8,4 @@ export interface FindSimilarCasesDialogOpenProps {
 export interface FindSimilarCasesDialogProps extends WithDialogRenderProps<FindSimilarCasesDialogOpenProps> {
 }
 export type FindSimilarCasesDialogRefMethods = WithDialogRefMethods<FindSimilarCasesDialogProps, FindSimilarCasesDialogOpenProps>;
-export declare const FindSimilarCasesDialog: import('react').ComponentClass<FindSimilarCasesDialogProps, import('@gen-epix/ui/hoc/withDialog').WithDialogState<FindSimilarCasesDialogOpenProps>>;
+export declare const FindSimilarCasesDialog: import('react').ComponentClass<FindSimilarCasesDialogProps, import('@gen-epix/ui-core-components/hoc/withDialog').WithDialogState<FindSimilarCasesDialogOpenProps>>;

package/dist/components/ui/Grouping/index.js

@@ -2,12 +2,12 @@ import { STRATIFICATION_MODE as e } from "../../../models/stratification.js";
 import { t } from "../../../_chunks/react.js";
 import { r as n, t as r } from "../../../_chunks/dashboardStore.js";
 import { t as i } from "../../../_chunks/LegendaItem.js";
-import { ConfigService as a } from "@gen-epix/ui/classes/services/ConfigService";
+import { ConfigService as a } from "@gen-epix/ui-client-common/classes/services/ConfigService";
 import { Box as o } from "@mui/material";
 import { use as s, useCallback as c, useMemo as l } from "react";
 import { useTranslation as u } from "react-i18next";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { NestedDropdown as p } from "@gen-epix/ui/components/ui/NestedMenu";
+import { NestedDropdown as p } from "@gen-epix/ui-core-components/components/NestedMenu";
 //#region src/components/ui/Grouping/Grouping.tsx
 var m = () => {
 	let { t: m } = u(), h = s(r), g = t(h, (e) => e.stratification), _ = t(h, (e) => e.stratify), v = t(h, (e) => e.stratifyableColumns), y = c((t) => {
@@ -16,7 +16,53 @@ var m = () => {
 			return;
 		}
 		_(e.FIELD, t);
-	}, [g?.col?.id, _]);
+	}, [g?.col?.id, _]), b = l(() => {
+		let t = m`Grouping`;
+		return g && (t = g.mode === e.SELECTION ? m`Grouped by Selected rows` : g.mode === e.SIMILAR_CASES ? m`Grouped by Similar cases` : m("Grouped by {{fieldName}}", { fieldName: g.col.label })), n({
+			disabled: v.length === 0,
+			items: [
+				{
+					active: !g,
+					callback: () => {
+						_(null);
+					},
+					divider: !0,
+					label: "None"
+				},
+				{
+					active: g?.mode === e.SELECTION,
+					callback: () => {
+						_(g?.mode === e.SELECTION ? null : e.SELECTION);
+					},
+					divider: !0,
+					label: "Selected rows"
+				},
+				{
+					active: g?.mode === e.SIMILAR_CASES,
+					callback: () => {
+						_(g?.mode === e.SIMILAR_CASES ? null : e.SIMILAR_CASES);
+					},
+					divider: !0,
+					label: "Similar cases"
+				}
+			],
+			label: t,
+			tooltip: m("Grouping allows you to group cases by a selected field. Grouping will be disabled when the maximum unique values of the selected field exceeds {{max_stratification_unique_values}}.", { max_stratification_unique_values: a.getInstance().config.epi.STRATIFICATION.MAX_ALLOWED_UNIQUE_VALUES })
+		}, (e) => (v.forEach((t) => {
+			e.items.push({
+				active: g?.col?.id === t.col.id,
+				callback: () => y(t.col),
+				disabled: !t.enabled,
+				label: t.col.label
+			});
+		}), e));
+	}, [
+		g,
+		m,
+		v,
+		_,
+		y
+	]);
 	return /* @__PURE__ */ f(o, {
 		sx: {
 			display: "flex",
@@ -35,53 +81,7 @@ var m = () => {
 				},
 				variant: "text"
 			},
-			menuItemsData: l(() => {
-				let t = m`Grouping`;
-				return g && (t = g.mode === e.SELECTION ? m`Grouped by Selected rows` : g.mode === e.SIMILAR_CASES ? m`Grouped by Similar cases` : m("Grouped by {{fieldName}}", { fieldName: g.col.label })), n({
-					disabled: v.length === 0,
-					items: [
-						{
-							active: !g,
-							callback: () => {
-								_(null);
-							},
-							divider: !0,
-							label: "None"
-						},
-						{
-							active: g?.mode === e.SELECTION,
-							callback: () => {
-								_(g?.mode === e.SELECTION ? null : e.SELECTION);
-							},
-							divider: !0,
-							label: "Selected rows"
-						},
-						{
-							active: g?.mode === e.SIMILAR_CASES,
-							callback: () => {
-								_(g?.mode === e.SIMILAR_CASES ? null : e.SIMILAR_CASES);
-							},
-							divider: !0,
-							label: "Similar cases"
-						}
-					],
-					label: t,
-					tooltip: m("Grouping allows you to group cases by a selected field. Grouping will be disabled when the maximum unique values of the selected field exceeds {{max_stratification_unique_values}}.", { max_stratification_unique_values: a.getInstance().config.epi.STRATIFICATION.MAX_ALLOWED_UNIQUE_VALUES })
-				}, (e) => (v.forEach((t) => {
-					e.items.push({
-						active: g?.col?.id === t.col.id,
-						callback: () => y(t.col),
-						disabled: !t.enabled,
-						label: t.col.label
-					});
-				}), e));
-			}, [
-				g,
-				m,
-				v,
-				_,
-				y
-			]),
+			menuItemsData: b,
 			showTopLevelTooltip: !0
 		}) }), g?.legendaItems.map((e) => /* @__PURE__ */ d(o, {
 			sx: { marginX: 1 },

package/dist/components/ui/Grouping/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/Grouping/Grouping.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport {\n  use,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { useStore } from 'zustand';\nimport { useTranslation } from 'react-i18next';\nimport { produce } from 'immer';\nimport type { CaseDbCol } from '@gen-epix/api-casedb';\nimport type { MenuItemData } from '@gen-epix/ui/models/nestedMenu';\nimport { ConfigService } from '@gen-epix/ui/classes/services/ConfigService';\nimport { NestedDropdown } from '@gen-epix/ui/components/ui/NestedMenu';\n\nimport { LegendaItem } from '../LegendaItem';\nimport { DashboardStoreContext } from '../../../stores/dashboardStore';\nimport { STRATIFICATION_MODE } from '../../../models/stratification';\nimport type { CaseDbConfig } from '../../../models/config';\n\nexport const Grouping = () => {\n  const { t } = useTranslation();\n\n  const dashboardStore = use(DashboardStoreContext);\n  const stratification = useStore(dashboardStore, (state) => state.stratification);\n  const stratify = useStore(dashboardStore, (state) => state.stratify);\n  const stratifyableColumns = useStore(dashboardStore, (state) => state.stratifyableColumns);\n\n  const onStratifyMenuItemClick = useCallback((col: CaseDbCol) => {\n    if (col.id === stratification?.col?.id) {\n      stratify(null);\n      return;\n    }\n    stratify(STRATIFICATION_MODE.FIELD, col);\n  }, [stratification?.col?.id, stratify]);\n\n  const stratificationMenu = useMemo<MenuItemData>(() => {\n    let label = t`Grouping`;\n    if (stratification) {\n      if (stratification.mode === STRATIFICATION_MODE.SELECTION) {\n        label = t`Grouped by Selected rows`;\n      } else if (stratification.mode === STRATIFICATION_MODE.SIMILAR_CASES) {\n        label = t`Grouped by Similar cases`;\n      } else {\n        label = t('Grouped by {{fieldName}}', { fieldName: stratification.col.label });\n      }\n    }\n\n    return produce<MenuItemData>({\n      disabled: stratifyableColumns.length === 0,\n      items: [\n        {\n          active: !stratification,\n          callback: () => {\n            stratify(null);\n          },\n          divider: true,\n          label: 'None',\n        },\n        {\n          active: stratification?.mode === STRATIFICATION_MODE.SELECTION,\n          callback: () => {\n            stratify(stratification?.mode === STRATIFICATION_MODE.SELECTION ? null : STRATIFICATION_MODE.SELECTION);\n          },\n          divider: true,\n          label: 'Selected rows',\n        },\n        {\n          active: stratification?.mode === STRATIFICATION_MODE.SIMILAR_CASES,\n          callback: () => {\n            stratify(stratification?.mode === STRATIFICATION_MODE.SIMILAR_CASES ? null : STRATIFICATION_MODE.SIMILAR_CASES);\n          },\n          divider: true,\n          label: 'Similar cases',\n        },\n      ],\n      label,\n      tooltip: t('Grouping allows you to group cases by a selected field. Grouping will be disabled when the maximum unique values of the selected field exceeds {{max_stratification_unique_values}}.', {\n        max_stratification_unique_values: ConfigService.getInstance<CaseDbConfig>().config.epi.STRATIFICATION.MAX_ALLOWED_UNIQUE_VALUES,\n      }),\n    }, draft => {\n      stratifyableColumns\n        .forEach(stratifyableCol => {\n          draft.items.push({\n            active: stratification?.col?.id === stratifyableCol.col.id,\n            callback: () => onStratifyMenuItemClick(stratifyableCol.col),\n            disabled: !stratifyableCol.enabled,\n            label: stratifyableCol.col.label,\n          });\n        });\n      return draft;\n    });\n  }, [stratification, t, stratifyableColumns, stratify, onStratifyMenuItemClick]);\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n      }}\n    >\n      <Box>\n        <NestedDropdown\n          ButtonProps={{\n            color: 'inherit',\n            size: 'small',\n            sx: {\n              '& span': {\n                margin: 0,\n              },\n              background: 'none !important',\n              margin: 0,\n              padding: 0,\n              textTransform: 'none',\n            },\n            variant: 'text',\n          }}\n          menuItemsData={stratificationMenu}\n          showTopLevelTooltip\n        />\n      </Box>\n      {stratification?.legendaItems.map(legendaItem => (\n        <Box\n          key={legendaItem.rowValue.raw ?? '-'}\n          sx={{\n            marginX: 1,\n          }}\n        >\n          <LegendaItem\n            item={legendaItem}\n            tooltip\n            tooltipProps={{\n              arrow: true,\n              placement: 'top',\n            }}\n          />\n        </Box>\n      ))}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,UAAiB;CAC5B,IAAM,EAAE,SAAM,EAAe,GAEvB,IAAiB,EAAI,CAAqB,GAC1C,IAAiB,EAAS,IAAiB,MAAU,EAAM,cAAc,GACzE,IAAW,EAAS,IAAiB,MAAU,EAAM,QAAQ,GAC7D,IAAsB,EAAS,IAAiB,MAAU,EAAM,mBAAmB,GAEnF,IAA0B,GAAa,MAAmB;EAC9D,IAAI,EAAI,OAAO,GAAgB,KAAK,IAAI;GACtC,EAAS,IAAI;GACb;EACF;EACA,EAAS,EAAoB,OAAO,CAAG;CACzC,GAAG,CAAC,GAAgB,KAAK,IAAI,CAAQ,CAAC;CA4DtC,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,UAAU;EACZ;YAJF,CAME,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACE,aAAa;IACX,OAAO;IACP,MAAM;IACN,IAAI;KACF,UAAU,EACR,QAAQ,EACV;KACA,YAAY;KACZ,QAAQ;KACR,SAAS;KACT,eAAe;IACjB;IACA,SAAS;GACX;GACA,eAjFmB,QAA4B;IACrD,IAAI,IAAQ,CAAC;IAWb,OAVI,MACF,AAKE,IALE,EAAe,SAAS,EAAoB,YACtC,CAAC,6BACA,EAAe,SAAS,EAAoB,gBAC7C,CAAC,6BAED,EAAE,4BAA4B,EAAE,WAAW,EAAe,IAAI,MAAM,CAAC,IAI1E,EAAsB;KAC3B,UAAU,EAAoB,WAAW;KACzC,OAAO;MACL;OACE,QAAQ,CAAC;OACT,gBAAgB;QACd,EAAS,IAAI;OACf;OACA,SAAS;OACT,OAAO;MACT;MACA;OACE,QAAQ,GAAgB,SAAS,EAAoB;OACrD,gBAAgB;QACd,EAAS,GAAgB,SAAS,EAAoB,YAAY,OAAO,EAAoB,SAAS;OACxG;OACA,SAAS;OACT,OAAO;MACT;MACA;OACE,QAAQ,GAAgB,SAAS,EAAoB;OACrD,gBAAgB;QACd,EAAS,GAAgB,SAAS,EAAoB,gBAAgB,OAAO,EAAoB,aAAa;OAChH;OACA,SAAS;OACT,OAAO;MACT;KACF;KACA;KACA,SAAS,EAAE,wLAAwL,EACjM,kCAAkC,EAAc,YAA0B,CAAC,CAAC,OAAO,IAAI,eAAe,0BACxG,CAAC;IACH,IAAG,OACD,EACG,SAAQ,MAAmB;KAC1B,EAAM,MAAM,KAAK;MACf,QAAQ,GAAgB,KAAK,OAAO,EAAgB,IAAI;MACxD,gBAAgB,EAAwB,EAAgB,GAAG;MAC3D,UAAU,CAAC,EAAgB;MAC3B,OAAO,EAAgB,IAAI;KAC7B,CAAC;IACH,CAAC,GACI,EACR;GACH,GAAG;IAAC;IAAgB;IAAG;IAAqB;IAAU;GAAuB,CAyBtD;GACf,qBAAA;EACD,CAAA,EACE,CAAA,GACJ,GAAgB,aAAa,KAAI,MAChC,kBAAC,GAAD;GAEE,IAAI,EACF,SAAS,EACX;aAEA,kBAAC,GAAD;IACE,MAAM;IACN,SAAA;IACA,cAAc;KACZ,OAAO;KACP,WAAW;IACb;GACD,CAAA;EACE,GAbE,EAAY,SAAS,OAAO,GAa9B,CACN,CACE;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/Grouping/Grouping.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport {\n  use,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { useStore } from 'zustand';\nimport { useTranslation } from 'react-i18next';\nimport { produce } from 'immer';\nimport type { CaseDbCol } from '@gen-epix/api-casedb';\nimport type { MenuItemData } from '@gen-epix/ui-core-components/models/nestedMenu';\nimport { ConfigService } from '@gen-epix/ui-client-common/classes/services/ConfigService';\nimport { NestedDropdown } from '@gen-epix/ui-core-components/components/NestedMenu';\n\nimport { LegendaItem } from '../LegendaItem';\nimport { DashboardStoreContext } from '../../../stores/dashboardStore';\nimport { STRATIFICATION_MODE } from '../../../models/stratification';\nimport type { CaseDbConfig } from '../../../models/config';\n\nexport const Grouping = () => {\n  const { t } = useTranslation();\n\n  const dashboardStore = use(DashboardStoreContext);\n  const stratification = useStore(dashboardStore, (state) => state.stratification);\n  const stratify = useStore(dashboardStore, (state) => state.stratify);\n  const stratifyableColumns = useStore(dashboardStore, (state) => state.stratifyableColumns);\n\n  const onStratifyMenuItemClick = useCallback((col: CaseDbCol) => {\n    if (col.id === stratification?.col?.id) {\n      stratify(null);\n      return;\n    }\n    stratify(STRATIFICATION_MODE.FIELD, col);\n  }, [stratification?.col?.id, stratify]);\n\n  const stratificationMenu = useMemo<MenuItemData>(() => {\n    let label = t`Grouping`;\n    if (stratification) {\n      if (stratification.mode === STRATIFICATION_MODE.SELECTION) {\n        label = t`Grouped by Selected rows`;\n      } else if (stratification.mode === STRATIFICATION_MODE.SIMILAR_CASES) {\n        label = t`Grouped by Similar cases`;\n      } else {\n        label = t('Grouped by {{fieldName}}', { fieldName: stratification.col.label });\n      }\n    }\n\n    return produce<MenuItemData>({\n      disabled: stratifyableColumns.length === 0,\n      items: [\n        {\n          active: !stratification,\n          callback: () => {\n            stratify(null);\n          },\n          divider: true,\n          label: 'None',\n        },\n        {\n          active: stratification?.mode === STRATIFICATION_MODE.SELECTION,\n          callback: () => {\n            stratify(stratification?.mode === STRATIFICATION_MODE.SELECTION ? null : STRATIFICATION_MODE.SELECTION);\n          },\n          divider: true,\n          label: 'Selected rows',\n        },\n        {\n          active: stratification?.mode === STRATIFICATION_MODE.SIMILAR_CASES,\n          callback: () => {\n            stratify(stratification?.mode === STRATIFICATION_MODE.SIMILAR_CASES ? null : STRATIFICATION_MODE.SIMILAR_CASES);\n          },\n          divider: true,\n          label: 'Similar cases',\n        },\n      ],\n      label,\n      tooltip: t('Grouping allows you to group cases by a selected field. Grouping will be disabled when the maximum unique values of the selected field exceeds {{max_stratification_unique_values}}.', {\n        max_stratification_unique_values: ConfigService.getInstance<CaseDbConfig>().config.epi.STRATIFICATION.MAX_ALLOWED_UNIQUE_VALUES,\n      }),\n    }, draft => {\n      stratifyableColumns\n        .forEach(stratifyableCol => {\n          draft.items.push({\n            active: stratification?.col?.id === stratifyableCol.col.id,\n            callback: () => onStratifyMenuItemClick(stratifyableCol.col),\n            disabled: !stratifyableCol.enabled,\n            label: stratifyableCol.col.label,\n          });\n        });\n      return draft;\n    });\n  }, [stratification, t, stratifyableColumns, stratify, onStratifyMenuItemClick]);\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n      }}\n    >\n      <Box>\n        <NestedDropdown\n          ButtonProps={{\n            color: 'inherit',\n            size: 'small',\n            sx: {\n              '& span': {\n                margin: 0,\n              },\n              background: 'none !important',\n              margin: 0,\n              padding: 0,\n              textTransform: 'none',\n            },\n            variant: 'text',\n          }}\n          menuItemsData={stratificationMenu}\n          showTopLevelTooltip\n        />\n      </Box>\n      {stratification?.legendaItems.map(legendaItem => (\n        <Box\n          key={legendaItem.rowValue.raw ?? '-'}\n          sx={{\n            marginX: 1,\n          }}\n        >\n          <LegendaItem\n            item={legendaItem}\n            tooltip\n            tooltipProps={{\n              arrow: true,\n              placement: 'top',\n            }}\n          />\n        </Box>\n      ))}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,UAAiB;CAC5B,IAAM,EAAE,SAAM,EAAe,GAEvB,IAAiB,EAAI,CAAqB,GAC1C,IAAiB,EAAS,IAAiB,MAAU,EAAM,cAAc,GACzE,IAAW,EAAS,IAAiB,MAAU,EAAM,QAAQ,GAC7D,IAAsB,EAAS,IAAiB,MAAU,EAAM,mBAAmB,GAEnF,IAA0B,GAAa,MAAmB;EAC9D,IAAI,EAAI,OAAO,GAAgB,KAAK,IAAI;GACtC,EAAS,IAAI;GACb;EACF;EACA,EAAS,EAAoB,OAAO,CAAG;CACzC,GAAG,CAAC,GAAgB,KAAK,IAAI,CAAQ,CAAC,GAEhC,IAAqB,QAA4B;EACrD,IAAI,IAAQ,CAAC;EAWb,OAVI,MACF,AAKE,IALE,EAAe,SAAS,EAAoB,YACtC,CAAC,6BACA,EAAe,SAAS,EAAoB,gBAC7C,CAAC,6BAED,EAAE,4BAA4B,EAAE,WAAW,EAAe,IAAI,MAAM,CAAC,IAI1E,EAAsB;GAC3B,UAAU,EAAoB,WAAW;GACzC,OAAO;IACL;KACE,QAAQ,CAAC;KACT,gBAAgB;MACd,EAAS,IAAI;KACf;KACA,SAAS;KACT,OAAO;IACT;IACA;KACE,QAAQ,GAAgB,SAAS,EAAoB;KACrD,gBAAgB;MACd,EAAS,GAAgB,SAAS,EAAoB,YAAY,OAAO,EAAoB,SAAS;KACxG;KACA,SAAS;KACT,OAAO;IACT;IACA;KACE,QAAQ,GAAgB,SAAS,EAAoB;KACrD,gBAAgB;MACd,EAAS,GAAgB,SAAS,EAAoB,gBAAgB,OAAO,EAAoB,aAAa;KAChH;KACA,SAAS;KACT,OAAO;IACT;GACF;GACA;GACA,SAAS,EAAE,wLAAwL,EACjM,kCAAkC,EAAc,YAA0B,CAAC,CAAC,OAAO,IAAI,eAAe,0BACxG,CAAC;EACH,IAAG,OACD,EACG,SAAQ,MAAmB;GAC1B,EAAM,MAAM,KAAK;IACf,QAAQ,GAAgB,KAAK,OAAO,EAAgB,IAAI;IACxD,gBAAgB,EAAwB,EAAgB,GAAG;IAC3D,UAAU,CAAC,EAAgB;IAC3B,OAAO,EAAgB,IAAI;GAC7B,CAAC;EACH,CAAC,GACI,EACR;CACH,GAAG;EAAC;EAAgB;EAAG;EAAqB;EAAU;CAAuB,CAAC;CAE9E,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,UAAU;EACZ;EAJF,UAAA,CAME,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACE,aAAa;IACX,OAAO;IACP,MAAM;IACN,IAAI;KACF,UAAU,EACR,QAAQ,EACV;KACA,YAAY;KACZ,QAAQ;KACR,SAAS;KACT,eAAe;IACjB;IACA,SAAS;GACX;GACA,eAAe;GACf,qBAAA;EACD,CAAA,EACE,CAAA,GACJ,GAAgB,aAAa,KAAI,MAChC,kBAAC,GAAD;GAEE,IAAI,EACF,SAAS,EACX;GAEA,UAAA,kBAAC,GAAD;IACE,MAAM;IACN,SAAA;IACA,cAAc;KACZ,OAAO;KACP,WAAW;IACb;GACD,CAAA;EACE,GAbE,EAAY,SAAS,OAAO,GAa9B,CACN,CACE;;AAET"}

package/dist/components/ui/HistogramWidget/index.js

@@ -14,7 +14,7 @@ import { EventBusService as y } from "../../../classes/services/EventBusService/
 import { t as b } from "../../../_chunks/CaseDbDownloadUtil.js";
 import { n as ne } from "../../../_chunks/LegendaItem.js";
 import { t as re } from "../../../_chunks/Dashboard.js";
-import { ConfigService as ie } from "@gen-epix/ui/classes/services/ConfigService";
+import { ConfigService as ie } from "@gen-epix/ui-client-common/classes/services/ConfigService";
 import { ListItemIcon as ae, ListItemText as oe, MenuItem as se, useTheme as ce } from "@mui/material";
 import { use as x, useCallback as S, useEffect as C, useMemo as w, useRef as T, useState as E } from "react";
 import { useTranslation as le } from "react-i18next";

package/dist/components/ui/HistogramWidget/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/HistogramWidget/HistogramWidget.tsx"],"sourcesContent":["import { Box } from '@mui/system';\nimport type { ReactElement } from 'react';\nimport {\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { EChartsType } from 'echarts';\nimport {\n  LegendComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport {\n  dispose,\n  getInstanceByDom,\n  init,\n  use as registerECharts,\n} from 'echarts/core';\nimport type { EChartsReactProps } from 'echarts-for-react';\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\nimport EChartsReact from 'echarts-for-react';\nimport type {\n  CaseDbCol,\n  CaseDbColType,\n} from '@gen-epix/api-casedb';\nimport type { MenuItemData } from '@gen-epix/ui/models/nestedMenu';\nimport { ConfigService } from '@gen-epix/ui/classes/services/ConfigService';\nimport { useStore } from 'zustand';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useTranslation } from 'react-i18next';\nimport round from 'lodash/round';\nimport {\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  useTheme,\n} from '@mui/material';\nimport intersection from 'lodash/intersection';\n\nimport { DASHBOARD_COMPONENT_NAME } from '../../../constants/dashboard';\nimport type { ContextMenuConfigWithPosition } from '../ContextMenu';\nimport { ContextMenu } from '../ContextMenu';\nimport { DashboardWidget } from '../Dashboard';\nimport { WidgetUnavailable } from '../WidgetUnavailable';\nimport { DashboardStoreContext } from '../../../stores/dashboardStore';\nimport { DashboardUtil } from '../../../utils/DashboardUtil';\nimport { EventBusService } from '../../../classes/services/EventBusService';\nimport { CaseDbDownloadUtil } from '../../../utils/CaseDbDownloadUtil';\nimport type { HistogramWidgetData } from '../../../models/dashboard';\nimport {\n  HISTOGRAM_ALLOWED_COL_TYPES,\n  HistogramUtil,\n} from '../../../utils/HistogramUtil';\nimport { DashboardContext } from '../Dashboard/context/DashboardContext';\nimport { CaseUtil } from '../../../utils/CaseUtil';\n\nregisterECharts([TooltipComponent, BarChart, LegendComponent, CanvasRenderer]);\n\nconst echartsCore = {\n  dispose,\n  getInstanceByDom,\n  init,\n};\n\nexport const HistogramWidget = () => {\n  const { t } = useTranslation();\n  const theme = useTheme();\n  const chartRef = useRef<EChartsReact>(null);\n  const chartInstanceRef = useRef<EChartsType | null>(null);\n  const echartsOpts = useMemo(() => ({\n    nonce: ConfigService.getInstance().config.nonce,\n  }), []);\n  const dashboardStore = use(DashboardStoreContext);\n  const dashboardContext = use(DashboardContext);\n  const completeCaseType = useStore(dashboardStore, (state) => state.completeCaseType);\n  const sortedData = useStore(dashboardStore, (state) => state.sortedData);\n  const setFilterValues = useStore(dashboardStore, (state) => state.setFilterValues);\n  const updateWidgetData = useStore(dashboardStore, (state) => state.updateWidgetData);\n  const histogramWidgetData = useStore(dashboardStore, (state) => state.getWidgetData<HistogramWidgetData>(DASHBOARD_COMPONENT_NAME.HISTOGRAM));\n  const [focussedColValues, setFocussedColValues] = useState<{ a: string; b: string }>(null);\n\n  const allowedColTypes = useMemo<CaseDbColType[]>(() => {\n    return HISTOGRAM_ALLOWED_COL_TYPES;\n  }, []);\n\n  const allowedCols = useMemo(() => {\n    return HistogramUtil.getAllowedCols(completeCaseType, allowedColTypes);\n  }, [allowedColTypes, completeCaseType]);\n\n  const [aCol, setACol] = useState<CaseDbCol | null>(histogramWidgetData.colAId ? completeCaseType?.cols[histogramWidgetData.colAId] ?? null : null);\n  const [bCol, setBCol] = useState<CaseDbCol | null>(histogramWidgetData.colBId ? completeCaseType?.cols[histogramWidgetData.colBId] ?? null : null);\n\n  const [contextMenuConfig, setContextMenuConfig] = useState<ContextMenuConfigWithPosition | null>(null);\n\n  const onEpiContextMenuClose = useCallback(() => {\n    setContextMenuConfig(null);\n    setFocussedColValues(null);\n  }, []);\n\n  const lineListCaseCount = useMemo(() => {\n    return DashboardUtil.getCaseCount(sortedData);\n  }, [sortedData]);\n\n  const defaultCols = useMemo(() => {\n    return HistogramUtil.getDefaultCols(allowedCols, completeCaseType);\n  }, [allowedCols, completeCaseType]);\n\n\n  const canShowWidget = allowedCols.length > 1 && defaultCols?.newColA && defaultCols?.newColB;\n  const shouldShowGraph = canShowWidget && aCol && bCol && lineListCaseCount > 0;\n\n  const onMenuItemClick = useCallback((x: CaseDbCol, y: CaseDbCol) => {\n    setACol(x);\n    setBCol(y);\n    updateWidgetData(DASHBOARD_COMPONENT_NAME.HISTOGRAM, {\n      colAId: x.id,\n      colBId: y.id,\n    });\n  }, [updateWidgetData]);\n\n\n  useEffect(() => {\n    if (aCol && bCol) {\n      return;\n    }\n    if (!defaultCols) {\n      return;\n    }\n    const { newColA, newColB } = defaultCols;\n\n    setACol(newColA);\n    setBCol(newColB);\n\n    updateWidgetData(DASHBOARD_COMPONENT_NAME.HISTOGRAM, {\n      colAId: newColA.id,\n      colBId: newColB.id,\n    });\n  }, [aCol, allowedCols, bCol, completeCaseType, defaultCols, updateWidgetData]);\n\n  const [conceptsA, conceptsB] = useMemo(() => {\n    return HistogramUtil.getConcepts(aCol, bCol, completeCaseType);\n  }, [aCol, bCol, completeCaseType]);\n\n  const series = useMemo(() => {\n    return HistogramUtil.getSeries(aCol, bCol, completeCaseType, sortedData, conceptsA, conceptsB);\n  }, [aCol, bCol, completeCaseType, sortedData, conceptsA, conceptsB]);\n\n  const histogramCaseCount = useMemo(() => {\n    return HistogramUtil.getCaseCount(series);\n  }, [series]);\n\n  const missingCasesCount = lineListCaseCount - histogramCaseCount;\n  const missingCasesPercentage = missingCasesCount > 0 ? round(missingCasesCount / lineListCaseCount * 100, 1) : 0;\n\n  const widgetUnavailableReason = useMemo<ReactElement | string>(() => {\n    if (shouldShowGraph) {\n      return;\n    }\n    if (!defaultCols || allowedCols.length < 2) {\n      return t`No two compatible columns found to display a histogram.`;\n    }\n    if (!lineListCaseCount) {\n      return t`No cases found.`;\n    }\n    if (!histogramCaseCount) {\n      return t`No cases found with valid values for the selected columns to display a histogram.`;\n    }\n    return null;\n  }, [allowedCols.length, defaultCols, histogramCaseCount, lineListCaseCount, shouldShowGraph, t]);\n\n  const colors = useMemo(() => {\n    return HistogramUtil.getColors(aCol, completeCaseType, sortedData);\n  }, [completeCaseType, aCol, sortedData]);\n\n  const getOptions = useCallback(() => {\n    if (!shouldShowGraph) {\n      return null;\n    }\n\n    return HistogramUtil.getChartOptions({\n      aCol,\n      bCol,\n      colors,\n      conceptsA,\n      conceptsB,\n      series,\n      t,\n      theme,\n    });\n  }, [shouldShowGraph, colors, theme, conceptsB, series, conceptsA, aCol, bCol, t]);\n\n  const titleMenu = useMemo<MenuItemData | string>(() => {\n    let label: string;\n    if (aCol && bCol) {\n      label = t('Histogram: {{aColLabel}} and {{bColLabel}}', { aColLabel: aCol.label, bColLabel: bCol.label });\n    } else {\n      label = t`Histogram`;\n    }\n\n    if (!defaultCols?.newColA || !defaultCols?.newColB) {\n      return label;\n    }\n\n    const mainMenu: MenuItemData = {\n      disabled: !canShowWidget || allowedCols.length < 2,\n      items: [],\n      label,\n    };\n\n\n    allowedCols.forEach(x => {\n      const subMenu: MenuItemData = {\n        active: aCol?.id === x.id || undefined,\n        items: [],\n        label: t('Grouping: {{label}}', { label: x.label }),\n      };\n      allowedCols.forEach(y => {\n        if (x.id === y.id) {\n          return;\n        }\n        subMenu.items.push({\n          active: (aCol?.id === x.id || undefined) && (bCol?.id === y.id || undefined),\n          callback: () => {\n            onMenuItemClick(x, y);\n          },\n          label: t('X-Axis: {{label}}', { label: y.label }),\n        });\n      });\n      mainMenu.items.push(subMenu);\n    });\n\n\n    return mainMenu;\n  }, [aCol, bCol, canShowWidget, allowedCols, defaultCols?.newColA, defaultCols?.newColB, t, onMenuItemClick]);\n\n  const onChartReady = useCallback((chart: EChartsType) => {\n    chartInstanceRef.current = chart;\n    if (!aCol || !bCol) {\n      return;\n    }\n    const dom = chart.getDom();\n    dom?.setAttribute('aria-label', t('Histogram showing the number of cases for {{aColLabel}} and {{bColLabel}}', { aColLabel: aCol?.label, bColLabel: bCol?.label }));\n    dom?.setAttribute('role', 'img');\n  }, [aCol, bCol, t]);\n\n\n  useEffect(() => {\n    const emitDownloadOptions = () => {\n      EventBusService.getInstance().emit('onDownloadOptionsChanged', {\n        disabled: !canShowWidget,\n        items: [\n          {\n            callback: () => CaseDbDownloadUtil.downloadEchartsImage(t`Histogram`, chartRef.current.getEchartsInstance(), 'png', completeCaseType, t),\n            disabled: !shouldShowGraph,\n            label: t`Save as PNG`,\n          },\n          {\n            callback: () => CaseDbDownloadUtil.downloadEchartsImage(t`Histogram`, chartRef.current.getEchartsInstance(), 'jpeg', completeCaseType, t),\n            disabled: !shouldShowGraph,\n            label: t`Save as JPEG`,\n          },\n        ],\n        zone: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n        zoneLabel: t`Histogram`,\n      });\n    };\n    emitDownloadOptions();\n    const eventBusManager = EventBusService.getInstance();\n    eventBusManager.addEventListener('onDownloadOptionsRequested', emitDownloadOptions);\n    return () => {\n      eventBusManager.emit('onDownloadOptionsChanged', {\n        items: null,\n        zone: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n        zoneLabel: t`Histogram`,\n      });\n      eventBusManager.removeEventListener('onDownloadOptionsRequested', emitDownloadOptions);\n    };\n  }, [completeCaseType, shouldShowGraph, canShowWidget, t]);\n\n  const highlight = useCallback((caseIds: string[]) => {\n    dashboardContext.highlight({\n      caseIds,\n      origin: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n    });\n  }, [dashboardContext]);\n\n  const onEvents = useMemo<EChartsReactProps['onEvents']>(() => {\n\n    const getCaseIdsFromPayload = (payload: unknown): string[] => {\n      const colValues = HistogramUtil.getColValuesFromPayload(payload, conceptsA, conceptsB);\n      if (!colValues) {\n        return [];\n      }\n      const caseIds = sortedData.filter(caseDbCase => {\n        const aValue = CaseUtil.getRowValue(caseDbCase.content, aCol, completeCaseType);\n        const bValue = CaseUtil.getRowValue(caseDbCase.content, bCol, completeCaseType);\n        return colValues.a === aValue.raw && colValues.b === bValue.raw;\n      }).map(caseDbCase => caseDbCase.id);\n      return caseIds;\n    };\n\n    return {\n      globalout: () => {\n        highlight([]);\n      },\n      mouseout: () => {\n        highlight([]);\n      },\n      mouseover: (payload: unknown) => {\n        highlight(getCaseIdsFromPayload(payload));\n      },\n      mouseup: (payload: unknown) => {\n        const { event } = payload as { event: { event: MouseEvent } };\n        setFocussedColValues(HistogramUtil.getColValuesFromPayload(payload, conceptsA, conceptsB));\n        setContextMenuConfig({\n          caseIds: getCaseIdsFromPayload(payload),\n          mouseEvent: event.event,\n          position: {\n            left: (event.event).clientX,\n            top: (event.event).clientY,\n          },\n        });\n      },\n    };\n  }, [aCol, bCol, completeCaseType, conceptsA, conceptsB, highlight, sortedData]);\n\n  const onShowOnlyFocussedColValuesMenuItemClick = useCallback(async (onMenuClose: () => void) => {\n    if (!focussedColValues || !aCol || !bCol) {\n      return;\n    }\n    await setFilterValues({\n      [aCol.id]: [focussedColValues.a],\n      [bCol.id]: [focussedColValues.b],\n    });\n\n    onMenuClose();\n  }, [aCol, bCol, focussedColValues, setFilterValues]);\n\n  const getEpiContextMenuExtraItems = useCallback((onMenuClose: () => void): ReactElement => {\n    const conceptALabel = conceptsA.find(concept => concept.id === focussedColValues?.a)?.name;\n    const conceptBLabel = conceptsB.find(concept => concept.id === focussedColValues?.b)?.name;\n    if (!conceptALabel || !conceptBLabel) {\n      return null;\n    }\n    if (!focussedColValues) {\n      return null;\n    }\n    return (\n      <MenuItem\n        divider\n        // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n        onClick={async () => await onShowOnlyFocussedColValuesMenuItemClick(onMenuClose)}\n      >\n        <ListItemIcon>\n          <FilterAltIcon fontSize={'small'} />\n        </ListItemIcon>\n        <ListItemText>\n          {t('Filter (show only {{conceptALabel}} and {{conceptBLabel}})', { conceptALabel, conceptBLabel })}\n        </ListItemText>\n      </MenuItem>\n    );\n  }, [conceptsA, conceptsB, focussedColValues, onShowOnlyFocussedColValuesMenuItemClick, t]);\n\n  useEffect(() => {\n    const unsubscribe = dashboardContext.highlightSubject.subscribe((highlighting) => {\n      if (highlighting.origin === DASHBOARD_COMPONENT_NAME.HISTOGRAM) {\n        return;\n      }\n      const instance = chartInstanceRef.current;\n      if (!instance) {\n        return;\n      }\n\n      if (!highlighting?.caseIds?.length) {\n        instance.dispatchAction({\n          type: 'downplay',\n        });\n        return;\n      }\n\n      const highlightTargetsByDataIndex = new Map<number, Set<number>>();\n      series?.forEach((serie, serieIndex) => {\n        const castedSerie = serie as { data: unknown[]; xCaseIds: string[][] };\n        castedSerie.xCaseIds?.forEach((caseIds: string[], dataIndex: number) => {\n          if (intersection(caseIds, highlighting.caseIds).length) {\n            const seriesIndices = highlightTargetsByDataIndex.get(dataIndex) ?? new Set<number>();\n            seriesIndices.add(serieIndex);\n            highlightTargetsByDataIndex.set(dataIndex, seriesIndices);\n          }\n        });\n      });\n\n      instance.dispatchAction({\n        type: 'downplay',\n      });\n\n      const highlightBatch: Array<{ dataIndex: number; notBlur?: boolean; seriesIndex?: number }> = [];\n      highlightTargetsByDataIndex.forEach((seriesIndices, dataIndex) => {\n        if (seriesIndices.size === series?.length) {\n          highlightBatch.push({\n            dataIndex,\n          });\n          return;\n        }\n\n        seriesIndices.forEach((seriesIndex) => {\n          highlightBatch.push({\n            dataIndex,\n            seriesIndex,\n          });\n        });\n      });\n\n      highlightBatch.forEach((target, index) => {\n        if (index > 0) {\n          target.notBlur = true;\n        }\n      });\n\n      instance.dispatchAction({\n        batch: highlightBatch,\n        type: 'highlight',\n      });\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [dashboardContext, series]);\n\n  return (\n    <DashboardWidget\n      expandDisabled={!canShowWidget}\n      title={titleMenu}\n      warningMessage={canShowWidget && histogramCaseCount > 0 && missingCasesCount > 0 ? t('Missing cases: {{missingCasesCount}} ({{missingCasesPercentage}}%)', { missingCasesCount, missingCasesPercentage }) : undefined}\n      widgetName={DASHBOARD_COMPONENT_NAME.HISTOGRAM}\n    >\n      {!canShowWidget && (\n        <WidgetUnavailable\n          reason={widgetUnavailableReason}\n          widgetLabel={t`histogram`}\n        />\n      )}\n      {canShowWidget && (\n        <Box\n          sx={{\n            height: '100%',\n            position: 'relative',\n          }}\n        >\n          {shouldShowGraph && (\n            <EChartsReact\n              echarts={echartsCore}\n              notMerge\n              onChartReady={onChartReady}\n              onEvents={onEvents}\n              option={getOptions()}\n              opts={echartsOpts as unknown}\n              ref={chartRef}\n              style={{\n                height: '100%',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          )}\n          <ContextMenu\n            config={contextMenuConfig}\n            getExtraItems={getEpiContextMenuExtraItems}\n            onMenuClose={onEpiContextMenuClose}\n          />\n        </Box>\n      )}\n    </DashboardWidget>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/HistogramWidget/HistogramWidget.tsx"],"sourcesContent":["import { Box } from '@mui/system';\nimport type { ReactElement } from 'react';\nimport {\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { EChartsType } from 'echarts';\nimport {\n  LegendComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport {\n  dispose,\n  getInstanceByDom,\n  init,\n  use as registerECharts,\n} from 'echarts/core';\nimport type { EChartsReactProps } from 'echarts-for-react';\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\nimport EChartsReact from 'echarts-for-react';\nimport type {\n  CaseDbCol,\n  CaseDbColType,\n} from '@gen-epix/api-casedb';\nimport type { MenuItemData } from '@gen-epix/ui-core-components/models/nestedMenu';\nimport { ConfigService } from '@gen-epix/ui-client-common/classes/services/ConfigService';\nimport { useStore } from 'zustand';\nimport { BarChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useTranslation } from 'react-i18next';\nimport round from 'lodash/round';\nimport {\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  useTheme,\n} from '@mui/material';\nimport intersection from 'lodash/intersection';\n\nimport { DASHBOARD_COMPONENT_NAME } from '../../../constants/dashboard';\nimport type { ContextMenuConfigWithPosition } from '../ContextMenu';\nimport { ContextMenu } from '../ContextMenu';\nimport { DashboardWidget } from '../Dashboard';\nimport { WidgetUnavailable } from '../WidgetUnavailable';\nimport { DashboardStoreContext } from '../../../stores/dashboardStore';\nimport { DashboardUtil } from '../../../utils/DashboardUtil';\nimport { EventBusService } from '../../../classes/services/EventBusService';\nimport { CaseDbDownloadUtil } from '../../../utils/CaseDbDownloadUtil';\nimport type { HistogramWidgetData } from '../../../models/dashboard';\nimport {\n  HISTOGRAM_ALLOWED_COL_TYPES,\n  HistogramUtil,\n} from '../../../utils/HistogramUtil';\nimport { DashboardContext } from '../Dashboard/context/DashboardContext';\nimport { CaseUtil } from '../../../utils/CaseUtil';\n\nregisterECharts([TooltipComponent, BarChart, LegendComponent, CanvasRenderer]);\n\nconst echartsCore = {\n  dispose,\n  getInstanceByDom,\n  init,\n};\n\nexport const HistogramWidget = () => {\n  const { t } = useTranslation();\n  const theme = useTheme();\n  const chartRef = useRef<EChartsReact>(null);\n  const chartInstanceRef = useRef<EChartsType | null>(null);\n  const echartsOpts = useMemo(() => ({\n    nonce: ConfigService.getInstance().config.nonce,\n  }), []);\n  const dashboardStore = use(DashboardStoreContext);\n  const dashboardContext = use(DashboardContext);\n  const completeCaseType = useStore(dashboardStore, (state) => state.completeCaseType);\n  const sortedData = useStore(dashboardStore, (state) => state.sortedData);\n  const setFilterValues = useStore(dashboardStore, (state) => state.setFilterValues);\n  const updateWidgetData = useStore(dashboardStore, (state) => state.updateWidgetData);\n  const histogramWidgetData = useStore(dashboardStore, (state) => state.getWidgetData<HistogramWidgetData>(DASHBOARD_COMPONENT_NAME.HISTOGRAM));\n  const [focussedColValues, setFocussedColValues] = useState<{ a: string; b: string }>(null);\n\n  const allowedColTypes = useMemo<CaseDbColType[]>(() => {\n    return HISTOGRAM_ALLOWED_COL_TYPES;\n  }, []);\n\n  const allowedCols = useMemo(() => {\n    return HistogramUtil.getAllowedCols(completeCaseType, allowedColTypes);\n  }, [allowedColTypes, completeCaseType]);\n\n  const [aCol, setACol] = useState<CaseDbCol | null>(histogramWidgetData.colAId ? completeCaseType?.cols[histogramWidgetData.colAId] ?? null : null);\n  const [bCol, setBCol] = useState<CaseDbCol | null>(histogramWidgetData.colBId ? completeCaseType?.cols[histogramWidgetData.colBId] ?? null : null);\n\n  const [contextMenuConfig, setContextMenuConfig] = useState<ContextMenuConfigWithPosition | null>(null);\n\n  const onEpiContextMenuClose = useCallback(() => {\n    setContextMenuConfig(null);\n    setFocussedColValues(null);\n  }, []);\n\n  const lineListCaseCount = useMemo(() => {\n    return DashboardUtil.getCaseCount(sortedData);\n  }, [sortedData]);\n\n  const defaultCols = useMemo(() => {\n    return HistogramUtil.getDefaultCols(allowedCols, completeCaseType);\n  }, [allowedCols, completeCaseType]);\n\n\n  const canShowWidget = allowedCols.length > 1 && defaultCols?.newColA && defaultCols?.newColB;\n  const shouldShowGraph = canShowWidget && aCol && bCol && lineListCaseCount > 0;\n\n  const onMenuItemClick = useCallback((x: CaseDbCol, y: CaseDbCol) => {\n    setACol(x);\n    setBCol(y);\n    updateWidgetData(DASHBOARD_COMPONENT_NAME.HISTOGRAM, {\n      colAId: x.id,\n      colBId: y.id,\n    });\n  }, [updateWidgetData]);\n\n\n  useEffect(() => {\n    if (aCol && bCol) {\n      return;\n    }\n    if (!defaultCols) {\n      return;\n    }\n    const { newColA, newColB } = defaultCols;\n\n    setACol(newColA);\n    setBCol(newColB);\n\n    updateWidgetData(DASHBOARD_COMPONENT_NAME.HISTOGRAM, {\n      colAId: newColA.id,\n      colBId: newColB.id,\n    });\n  }, [aCol, allowedCols, bCol, completeCaseType, defaultCols, updateWidgetData]);\n\n  const [conceptsA, conceptsB] = useMemo(() => {\n    return HistogramUtil.getConcepts(aCol, bCol, completeCaseType);\n  }, [aCol, bCol, completeCaseType]);\n\n  const series = useMemo(() => {\n    return HistogramUtil.getSeries(aCol, bCol, completeCaseType, sortedData, conceptsA, conceptsB);\n  }, [aCol, bCol, completeCaseType, sortedData, conceptsA, conceptsB]);\n\n  const histogramCaseCount = useMemo(() => {\n    return HistogramUtil.getCaseCount(series);\n  }, [series]);\n\n  const missingCasesCount = lineListCaseCount - histogramCaseCount;\n  const missingCasesPercentage = missingCasesCount > 0 ? round(missingCasesCount / lineListCaseCount * 100, 1) : 0;\n\n  const widgetUnavailableReason = useMemo<ReactElement | string>(() => {\n    if (shouldShowGraph) {\n      return;\n    }\n    if (!defaultCols || allowedCols.length < 2) {\n      return t`No two compatible columns found to display a histogram.`;\n    }\n    if (!lineListCaseCount) {\n      return t`No cases found.`;\n    }\n    if (!histogramCaseCount) {\n      return t`No cases found with valid values for the selected columns to display a histogram.`;\n    }\n    return null;\n  }, [allowedCols.length, defaultCols, histogramCaseCount, lineListCaseCount, shouldShowGraph, t]);\n\n  const colors = useMemo(() => {\n    return HistogramUtil.getColors(aCol, completeCaseType, sortedData);\n  }, [completeCaseType, aCol, sortedData]);\n\n  const getOptions = useCallback(() => {\n    if (!shouldShowGraph) {\n      return null;\n    }\n\n    return HistogramUtil.getChartOptions({\n      aCol,\n      bCol,\n      colors,\n      conceptsA,\n      conceptsB,\n      series,\n      t,\n      theme,\n    });\n  }, [shouldShowGraph, colors, theme, conceptsB, series, conceptsA, aCol, bCol, t]);\n\n  const titleMenu = useMemo<MenuItemData | string>(() => {\n    let label: string;\n    if (aCol && bCol) {\n      label = t('Histogram: {{aColLabel}} and {{bColLabel}}', { aColLabel: aCol.label, bColLabel: bCol.label });\n    } else {\n      label = t`Histogram`;\n    }\n\n    if (!defaultCols?.newColA || !defaultCols?.newColB) {\n      return label;\n    }\n\n    const mainMenu: MenuItemData = {\n      disabled: !canShowWidget || allowedCols.length < 2,\n      items: [],\n      label,\n    };\n\n\n    allowedCols.forEach(x => {\n      const subMenu: MenuItemData = {\n        active: aCol?.id === x.id || undefined,\n        items: [],\n        label: t('Grouping: {{label}}', { label: x.label }),\n      };\n      allowedCols.forEach(y => {\n        if (x.id === y.id) {\n          return;\n        }\n        subMenu.items.push({\n          active: (aCol?.id === x.id || undefined) && (bCol?.id === y.id || undefined),\n          callback: () => {\n            onMenuItemClick(x, y);\n          },\n          label: t('X-Axis: {{label}}', { label: y.label }),\n        });\n      });\n      mainMenu.items.push(subMenu);\n    });\n\n\n    return mainMenu;\n  }, [aCol, bCol, canShowWidget, allowedCols, defaultCols?.newColA, defaultCols?.newColB, t, onMenuItemClick]);\n\n  const onChartReady = useCallback((chart: EChartsType) => {\n    chartInstanceRef.current = chart;\n    if (!aCol || !bCol) {\n      return;\n    }\n    const dom = chart.getDom();\n    dom?.setAttribute('aria-label', t('Histogram showing the number of cases for {{aColLabel}} and {{bColLabel}}', { aColLabel: aCol?.label, bColLabel: bCol?.label }));\n    dom?.setAttribute('role', 'img');\n  }, [aCol, bCol, t]);\n\n\n  useEffect(() => {\n    const emitDownloadOptions = () => {\n      EventBusService.getInstance().emit('onDownloadOptionsChanged', {\n        disabled: !canShowWidget,\n        items: [\n          {\n            callback: () => CaseDbDownloadUtil.downloadEchartsImage(t`Histogram`, chartRef.current.getEchartsInstance(), 'png', completeCaseType, t),\n            disabled: !shouldShowGraph,\n            label: t`Save as PNG`,\n          },\n          {\n            callback: () => CaseDbDownloadUtil.downloadEchartsImage(t`Histogram`, chartRef.current.getEchartsInstance(), 'jpeg', completeCaseType, t),\n            disabled: !shouldShowGraph,\n            label: t`Save as JPEG`,\n          },\n        ],\n        zone: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n        zoneLabel: t`Histogram`,\n      });\n    };\n    emitDownloadOptions();\n    const eventBusManager = EventBusService.getInstance();\n    eventBusManager.addEventListener('onDownloadOptionsRequested', emitDownloadOptions);\n    return () => {\n      eventBusManager.emit('onDownloadOptionsChanged', {\n        items: null,\n        zone: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n        zoneLabel: t`Histogram`,\n      });\n      eventBusManager.removeEventListener('onDownloadOptionsRequested', emitDownloadOptions);\n    };\n  }, [completeCaseType, shouldShowGraph, canShowWidget, t]);\n\n  const highlight = useCallback((caseIds: string[]) => {\n    dashboardContext.highlight({\n      caseIds,\n      origin: DASHBOARD_COMPONENT_NAME.HISTOGRAM,\n    });\n  }, [dashboardContext]);\n\n  const onEvents = useMemo<EChartsReactProps['onEvents']>(() => {\n\n    const getCaseIdsFromPayload = (payload: unknown): string[] => {\n      const colValues = HistogramUtil.getColValuesFromPayload(payload, conceptsA, conceptsB);\n      if (!colValues) {\n        return [];\n      }\n      const caseIds = sortedData.filter(caseDbCase => {\n        const aValue = CaseUtil.getRowValue(caseDbCase.content, aCol, completeCaseType);\n        const bValue = CaseUtil.getRowValue(caseDbCase.content, bCol, completeCaseType);\n        return colValues.a === aValue.raw && colValues.b === bValue.raw;\n      }).map(caseDbCase => caseDbCase.id);\n      return caseIds;\n    };\n\n    return {\n      globalout: () => {\n        highlight([]);\n      },\n      mouseout: () => {\n        highlight([]);\n      },\n      mouseover: (payload: unknown) => {\n        highlight(getCaseIdsFromPayload(payload));\n      },\n      mouseup: (payload: unknown) => {\n        const { event } = payload as { event: { event: MouseEvent } };\n        setFocussedColValues(HistogramUtil.getColValuesFromPayload(payload, conceptsA, conceptsB));\n        setContextMenuConfig({\n          caseIds: getCaseIdsFromPayload(payload),\n          mouseEvent: event.event,\n          position: {\n            left: (event.event).clientX,\n            top: (event.event).clientY,\n          },\n        });\n      },\n    };\n  }, [aCol, bCol, completeCaseType, conceptsA, conceptsB, highlight, sortedData]);\n\n  const onShowOnlyFocussedColValuesMenuItemClick = useCallback(async (onMenuClose: () => void) => {\n    if (!focussedColValues || !aCol || !bCol) {\n      return;\n    }\n    await setFilterValues({\n      [aCol.id]: [focussedColValues.a],\n      [bCol.id]: [focussedColValues.b],\n    });\n\n    onMenuClose();\n  }, [aCol, bCol, focussedColValues, setFilterValues]);\n\n  const getEpiContextMenuExtraItems = useCallback((onMenuClose: () => void): ReactElement => {\n    const conceptALabel = conceptsA.find(concept => concept.id === focussedColValues?.a)?.name;\n    const conceptBLabel = conceptsB.find(concept => concept.id === focussedColValues?.b)?.name;\n    if (!conceptALabel || !conceptBLabel) {\n      return null;\n    }\n    if (!focussedColValues) {\n      return null;\n    }\n    return (\n      <MenuItem\n        divider\n        // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n        onClick={async () => await onShowOnlyFocussedColValuesMenuItemClick(onMenuClose)}\n      >\n        <ListItemIcon>\n          <FilterAltIcon fontSize={'small'} />\n        </ListItemIcon>\n        <ListItemText>\n          {t('Filter (show only {{conceptALabel}} and {{conceptBLabel}})', { conceptALabel, conceptBLabel })}\n        </ListItemText>\n      </MenuItem>\n    );\n  }, [conceptsA, conceptsB, focussedColValues, onShowOnlyFocussedColValuesMenuItemClick, t]);\n\n  useEffect(() => {\n    const unsubscribe = dashboardContext.highlightSubject.subscribe((highlighting) => {\n      if (highlighting.origin === DASHBOARD_COMPONENT_NAME.HISTOGRAM) {\n        return;\n      }\n      const instance = chartInstanceRef.current;\n      if (!instance) {\n        return;\n      }\n\n      if (!highlighting?.caseIds?.length) {\n        instance.dispatchAction({\n          type: 'downplay',\n        });\n        return;\n      }\n\n      const highlightTargetsByDataIndex = new Map<number, Set<number>>();\n      series?.forEach((serie, serieIndex) => {\n        const castedSerie = serie as { data: unknown[]; xCaseIds: string[][] };\n        castedSerie.xCaseIds?.forEach((caseIds: string[], dataIndex: number) => {\n          if (intersection(caseIds, highlighting.caseIds).length) {\n            const seriesIndices = highlightTargetsByDataIndex.get(dataIndex) ?? new Set<number>();\n            seriesIndices.add(serieIndex);\n            highlightTargetsByDataIndex.set(dataIndex, seriesIndices);\n          }\n        });\n      });\n\n      instance.dispatchAction({\n        type: 'downplay',\n      });\n\n      const highlightBatch: Array<{ dataIndex: number; notBlur?: boolean; seriesIndex?: number }> = [];\n      highlightTargetsByDataIndex.forEach((seriesIndices, dataIndex) => {\n        if (seriesIndices.size === series?.length) {\n          highlightBatch.push({\n            dataIndex,\n          });\n          return;\n        }\n\n        seriesIndices.forEach((seriesIndex) => {\n          highlightBatch.push({\n            dataIndex,\n            seriesIndex,\n          });\n        });\n      });\n\n      highlightBatch.forEach((target, index) => {\n        if (index > 0) {\n          target.notBlur = true;\n        }\n      });\n\n      instance.dispatchAction({\n        batch: highlightBatch,\n        type: 'highlight',\n      });\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [dashboardContext, series]);\n\n  return (\n    <DashboardWidget\n      expandDisabled={!canShowWidget}\n      title={titleMenu}\n      warningMessage={canShowWidget && histogramCaseCount > 0 && missingCasesCount > 0 ? t('Missing cases: {{missingCasesCount}} ({{missingCasesPercentage}}%)', { missingCasesCount, missingCasesPercentage }) : undefined}\n      widgetName={DASHBOARD_COMPONENT_NAME.HISTOGRAM}\n    >\n      {!canShowWidget && (\n        <WidgetUnavailable\n          reason={widgetUnavailableReason}\n          widgetLabel={t`histogram`}\n        />\n      )}\n      {canShowWidget && (\n        <Box\n          sx={{\n            height: '100%',\n            position: 'relative',\n          }}\n        >\n          {shouldShowGraph && (\n            <EChartsReact\n              echarts={echartsCore}\n              notMerge\n              onChartReady={onChartReady}\n              onEvents={onEvents}\n              option={getOptions()}\n              opts={echartsOpts as unknown}\n              ref={chartRef}\n              style={{\n                height: '100%',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          )}\n          <ContextMenu\n            config={contextMenuConfig}\n            getExtraItems={getEpiContextMenuExtraItems}\n            onMenuClose={onEpiContextMenuClose}\n          />\n        </Box>\n      )}\n    </DashboardWidget>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ui/MapWidget/index.js

@@ -18,13 +18,13 @@ import { t as b } from "../../../_chunks/CaseDbDownloadUtil.js";
 import { n as oe } from "../../../_chunks/LegendaItem.js";
 import { t as se } from "../../../_chunks/Dashboard.js";
 import { CaseDbDimType as x, CaseDbGeoApi as ce } from "@gen-epix/api-casedb";
-import { QueryClientService as le } from "@gen-epix/ui/classes/services/QueryClientService";
+import { QueryClientService as le } from "@gen-epix/ui-client-common/classes/services/QueryClientService";
 import { Box as ue, ListItemIcon as de, ListItemText as fe, MenuItem as pe, useTheme as me } from "@mui/material";
 import { use as S, useCallback as C, useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
 import { useTranslation as he } from "react-i18next";
 import ge from "@mui/icons-material/FilterAlt";
 import { jsx as O, jsxs as k } from "react/jsx-runtime";
-import { useQueryMemo as _e } from "@gen-epix/ui/hooks/useQueryMemo";
+import { useQueryMemo as _e } from "@gen-epix/ui-client-common/hooks/useQueryMemo";
 import { useDimensions as ve } from "@gen-epix/ui-core/hooks/useDimensions";
 //#region src/components/ui/MapWidget/MapWidget.tsx
 var ye = /* @__PURE__ */ e(t(), 1), be = /* @__PURE__ */ e(o(), 1), xe = {
@@ -68,7 +68,11 @@ var A = () => {
 		return i.getInstance().data.regionsByRegionSetId[e];
 	}, [o, I.ref_cols]), U = T(() => ee.getCaseCount(M), [M]), Te = C(() => {
 		f(null), R(null);
-	}, []), Ee = we || Se, De = Ce, W = T(() => !o || !V ? null : V[I.ref_cols[o.ref_col_id].region_set_id], [
+	}, []), Ee = we || Se, De = Ce, W = T(() => {
+		if (!o || !V) return null;
+		let e = I.ref_cols[o.ref_col_id].region_set_id;
+		return V[e];
+	}, [
 		o,
 		I.ref_cols,
 		V