@gen-epix/ui-client-casedb 4.3.0 → 4.3.2

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

@@ -1 +1 @@
-export declare const Grouping: () => import("react").JSX.Element;
+export declare const Grouping: () => import('react').JSX.Element;

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

@@ -1 +1 @@
-export declare const HistogramWidget: () => import("react").JSX.Element;
+export declare const HistogramWidget: () => import('react').JSX.Element;

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

@@ -223,7 +223,7 @@ var pe = {
 		Q,
 		f
 	]), $ = x(async (e) => {
-		!j || !F || !L || (await p({
+		j && F && L && (await p({
 			[F.id]: [j.a],
 			[L.id]: [j.b]
 		}), e());

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 {\n  Box,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  useTheme,\n} from '@mui/material';\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 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 {\n  Box,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  useTheme,\n} from '@mui/material';\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 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/HomePageTrends/HomePageTrendCard.d.ts

@@ -6,4 +6,4 @@ export type HomagePageTrendCardProps = {
     readonly sinceLabel: string;
     readonly value: number;
 };
-export declare const HomePageTrendCard: ({ callback, callbackLabel, diffPercentage, header, sinceLabel, value }: HomagePageTrendCardProps) => import("react").JSX.Element;
+export declare const HomePageTrendCard: ({ callback, callbackLabel, diffPercentage, header, sinceLabel, value }: HomagePageTrendCardProps) => import('react').JSX.Element;

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

@@ -1,4 +1,4 @@
 export declare const HomePageTrends: {
-    (props: Record<string, never>): import("react").JSX.Element;
+    (props: Record<string, never>): import('react').JSX.Element;
     displayName: string;
 };

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

@@ -7,4 +7,4 @@ export type LegendaItemProps = {
     readonly tooltip?: boolean;
     readonly tooltipProps?: Partial<TooltipProps>;
 };
-export declare const LegendaItem: ({ children, item, tooltip, tooltipProps }: LegendaItemProps) => import("react").JSX.Element;
+export declare const LegendaItem: ({ children, item, tooltip, tooltipProps }: LegendaItemProps) => import('react').JSX.Element;

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

@@ -1 +1 @@
-export declare const LineListWidget: () => import("react").JSX.Element;
+export declare const LineListWidget: () => import('react').JSX.Element;

package/dist/components/ui/LineListWidget/LineListWidgetIsInEventCell.d.ts

@@ -2,5 +2,5 @@ import { CaseDbCase } from '@gen-epix/api-casedb';
 type LineListWidgetIsInEventCellProps = {
     readonly row: CaseDbCase;
 };
-export declare const LineListWidgetIsInEventCell: import('react').MemoExoticComponent<({ row }: LineListWidgetIsInEventCellProps) => import("react").JSX.Element>;
+export declare const LineListWidgetIsInEventCell: import('react').MemoExoticComponent<({ row }: LineListWidgetIsInEventCellProps) => import('react').JSX.Element>;
 export {};

package/dist/components/ui/LineListWidget/LineListWidgetIsOwnCaseCell.d.ts

@@ -2,5 +2,5 @@ import { CaseDbCase } from '@gen-epix/api-casedb';
 type LineListWidgetIsOwnCaseCellProps = {
     readonly row: CaseDbCase;
 };
-export declare const LineListWidgetIsOwnCaseCell: import('react').MemoExoticComponent<({ row }: LineListWidgetIsOwnCaseCellProps) => import("react").JSX.Element>;
+export declare const LineListWidgetIsOwnCaseCell: import('react').MemoExoticComponent<({ row }: LineListWidgetIsOwnCaseCellProps) => import('react').JSX.Element>;
 export {};

package/dist/components/ui/LineListWidget/LineListWidgetPrimaryMenu.d.ts

@@ -2,4 +2,4 @@ import { CaseDbCaseSet } from '@gen-epix/api-casedb';
 export type LineListWidgetPrimaryMenuProps = {
     readonly caseSet?: CaseDbCaseSet;
 };
-export declare const LineListWidgetPrimaryMenu: ({ caseSet, }: LineListWidgetPrimaryMenuProps) => import("react").JSX.Element;
+export declare const LineListWidgetPrimaryMenu: ({ caseSet, }: LineListWidgetPrimaryMenuProps) => import('react').JSX.Element;

package/dist/components/ui/LineListWidget/LineListWidgetSecondaryMenu.d.ts

@@ -1 +1 @@
-export declare const LineListWidgetSecondaryMenu: () => import("react").JSX.Element;
+export declare const LineListWidgetSecondaryMenu: () => import('react').JSX.Element;

package/dist/components/ui/LineListWidget/LineListWidgetTitle.d.ts

@@ -1 +1 @@
-export declare const LineListWidgetTitle: () => import("react").JSX.Element;
+export declare const LineListWidgetTitle: () => import('react').JSX.Element;

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

@@ -1 +1 @@
-export declare const MapWidget: () => import("react").JSX.Element;
+export declare const MapWidget: () => import('react').JSX.Element;

package/dist/components/ui/PanelSeparator/PanelSeparatorHorizontal.d.ts

@@ -1,2 +1,2 @@
 import { SeparatorProps } from 'react-resizable-panels';
-export declare const PanelSeparatorHorizontal: (props: SeparatorProps) => import("react").JSX.Element;
+export declare const PanelSeparatorHorizontal: (props: SeparatorProps) => import('react').JSX.Element;

package/dist/components/ui/PanelSeparator/PanelSeparatorVertical.d.ts

@@ -1,2 +1,2 @@
 import { SeparatorProps } from 'react-resizable-panels';
-export declare const PanelSeparatorVertical: (props: SeparatorProps) => import("react").JSX.Element;
+export declare const PanelSeparatorVertical: (props: SeparatorProps) => import('react').JSX.Element;

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

@@ -1,2 +1,50 @@
-import { n as e, t } from "../../../_chunks/PanelSeparator.js";
-export { e as PanelSeparatorHorizontal, t as PanelSeparatorVertical };
+import { Box as e, styled as t, useTheme as n } from "@mui/material";
+import { useTranslation as r } from "react-i18next";
+import { jsx as i } from "react/jsx-runtime";
+import { Separator as a } from "react-resizable-panels";
+//#region src/components/ui/PanelSeparator/PanelSeparatorHorizontal.tsx
+var o = t(a)(() => ({})), s = (t) => {
+	let a = n(), { t: s } = r();
+	return /* @__PURE__ */ i(o, {
+		...t,
+		"aria-label": s("Horizontal separator"),
+		sx: {
+			"&:hover > div": {
+				background: a.palette.primary.main,
+				height: "3px",
+				margin: "4px 0"
+			},
+			height: "11px"
+		},
+		children: /* @__PURE__ */ i(e, { sx: {
+			background: a.palette.divider,
+			height: "1px",
+			margin: "5px 0",
+			width: "100%"
+		} })
+	});
+}, c = t(a)(() => ({})), l = (t) => {
+	let a = n(), { t: o } = r();
+	return /* @__PURE__ */ i(c, {
+		...t,
+		"aria-label": o("Vertical separator"),
+		sx: {
+			"&:hover > div": {
+				background: a.palette.primary.main,
+				margin: "0 4px ",
+				width: "3px"
+			},
+			width: "11px"
+		},
+		children: /* @__PURE__ */ i(e, { sx: {
+			background: a.palette.divider,
+			height: "100%",
+			margin: "0 5px",
+			width: "1px"
+		} })
+	});
+};
+//#endregion
+export { s as PanelSeparatorHorizontal, l as PanelSeparatorVertical };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ui/PanelSeparator/PanelSeparatorHorizontal.tsx","../../../../src/components/ui/PanelSeparator/PanelSeparatorVertical.tsx"],"sourcesContent":["import {\n  Box,\n  styled,\n  useTheme,\n} from '@mui/material';\nimport { useTranslation } from 'react-i18next';\nimport type { SeparatorProps } from 'react-resizable-panels';\nimport { Separator } from 'react-resizable-panels';\n\nconst StyledSeparator = styled(Separator)(() => ({}));\n\nexport const PanelSeparatorHorizontal = (props: SeparatorProps) => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n  return (\n    <StyledSeparator\n      {...props}\n      aria-label={t('Horizontal separator')}\n      sx={{\n        '&:hover > div': {\n          background: theme.palette.primary.main,\n          height: '3px',\n          margin: '4px 0',\n        },\n        height: '11px',\n      }}\n    >\n      <Box\n        sx={{\n          background: theme.palette.divider,\n          height: '1px',\n          margin: '5px 0',\n          width: '100%',\n        }}\n      />\n    </StyledSeparator>\n  );\n};\n","import {\n  Box,\n  styled,\n  useTheme,\n} from '@mui/material';\nimport { useTranslation } from 'react-i18next';\nimport type { SeparatorProps } from 'react-resizable-panels';\nimport { Separator } from 'react-resizable-panels';\n\nconst StyledSeparator = styled(Separator)(() => ({}));\n\nexport const PanelSeparatorVertical = (props: SeparatorProps) => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n\n  return (\n    <StyledSeparator\n      {...props}\n      aria-label={t('Vertical separator')}\n      sx={{\n        '&:hover > div': {\n          background: theme.palette.primary.main,\n          margin: '0 4px ',\n          width: '3px',\n        },\n        width: '11px',\n      }}\n    >\n      <Box\n        sx={{\n          background: theme.palette.divider,\n          height: '100%',\n          margin: '0 5px',\n          width: '1px',\n        }}\n      />\n    </StyledSeparator>\n  );\n};\n"],"mappings":";;;;;AASA,IAAM,IAAkB,EAAO,CAAS,CAAC,QAAQ,CAAC,EAAE,GAEvC,KAA4B,MAA0B;CACjE,IAAM,IAAQ,EAAS,GACjB,EAAE,SAAM,EAAe;CAC7B,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,cAAY,EAAE,sBAAsB;EACpC,IAAI;GACF,iBAAiB;IACf,YAAY,EAAM,QAAQ,QAAQ;IAClC,QAAQ;IACR,QAAQ;GACV;GACA,QAAQ;EACV;EAEA,UAAA,kBAAC,GAAD,EACE,IAAI;GACF,YAAY,EAAM,QAAQ;GAC1B,QAAQ;GACR,QAAQ;GACR,OAAO;EACT,EACD,CAAA;CACc,CAAA;AAErB,GC5BM,IAAkB,EAAO,CAAS,CAAC,QAAQ,CAAC,EAAE,GAEvC,KAA0B,MAA0B;CAC/D,IAAM,IAAQ,EAAS,GACjB,EAAE,SAAM,EAAe;CAE7B,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,cAAY,EAAE,oBAAoB;EAClC,IAAI;GACF,iBAAiB;IACf,YAAY,EAAM,QAAQ,QAAQ;IAClC,QAAQ;IACR,OAAO;GACT;GACA,OAAO;EACT;EAEA,UAAA,kBAAC,GAAD,EACE,IAAI;GACF,YAAY,EAAM,QAAQ;GAC1B,QAAQ;GACR,QAAQ;GACR,OAAO;EACT,EACD,CAAA;CACc,CAAA;AAErB"}

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

@@ -2,4 +2,4 @@ import { TreeConfiguration } from '../../../models/dashboard';
 export type TreeDescriptionProps = {
     readonly treeConfiguration: TreeConfiguration;
 };
-export declare const TreeDescription: ({ treeConfiguration, }: TreeDescriptionProps) => import("react").JSX.Element;
+export declare const TreeDescription: ({ treeConfiguration, }: TreeDescriptionProps) => import('react').JSX.Element;

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

@@ -1 +1 @@
-export declare const TreeWidget: () => import("react").JSX.Element;
+export declare const TreeWidget: () => import('react').JSX.Element;

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

@@ -1 +1 @@
-export declare const Upload: () => import("react").JSX.Element;
+export declare const Upload: () => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadCaseResultTable.d.ts

@@ -15,4 +15,4 @@ export type UploadCaseResultTableProps = {
     }) => void;
     readonly tableStore: StoreApi<TableStore<CaseDbCaseUploadResult>>;
 };
-export declare const UploadCaseResultTable: ({ caseRightsColMap, caseUploadResults, completeCaseType, getOriginalCellValue, onCaseContentEditSubmit, onColContentEditSubmit, tableStore }: UploadCaseResultTableProps) => import("react").JSX.Element;
+export declare const UploadCaseResultTable: ({ caseRightsColMap, caseUploadResults, completeCaseType, getOriginalCellValue, onCaseContentEditSubmit, onColContentEditSubmit, tableStore }: UploadCaseResultTableProps) => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadCreateCases.d.ts

@@ -1 +1 @@
-export declare const UploadCreateCases: () => import("react").JSX.Element;
+export declare const UploadCreateCases: () => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadMapColumns.d.ts

@@ -1 +1 @@
-export declare const UploadMapColumns: () => import("react").JSX.Element;
+export declare const UploadMapColumns: () => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadMapSequences.d.ts

@@ -1 +1 @@
-export declare const UploadMapSequences: () => import("react").JSX.Element;
+export declare const UploadMapSequences: () => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadNavigation.d.ts

@@ -7,4 +7,4 @@ export type UploadNavigationProps = {
     readonly proceedDisabled?: boolean;
     readonly proceedLabel?: string;
 };
-export declare const UploadNavigation: ({ backLabel, onGoBackButtonClick: onGoBack, onProceedButtonClick: onProceedButtonClick, proceedDisabled, proceedLabel, }: UploadNavigationProps) => import("react").JSX.Element;
+export declare const UploadNavigation: ({ backLabel, onGoBackButtonClick: onGoBack, onProceedButtonClick: onProceedButtonClick, proceedDisabled, proceedLabel, }: UploadNavigationProps) => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadPreviewNavigation.d.ts

@@ -2,4 +2,4 @@ export type UploadPreviewNavigationProps = {
     readonly onGoBackButtonClick: () => void;
     readonly onProceedButtonClick: () => void;
 };
-export declare const UploadPreviewNavigation: ({ onGoBackButtonClick, onProceedButtonClick }: UploadPreviewNavigationProps) => import("react").JSX.Element;
+export declare const UploadPreviewNavigation: ({ onGoBackButtonClick, onProceedButtonClick }: UploadPreviewNavigationProps) => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadSelectFile.d.ts

@@ -1 +1 @@
-export declare const UploadSelectFile: () => import("react").JSX.Element;
+export declare const UploadSelectFile: () => import('react').JSX.Element;

package/dist/components/ui/Upload/UploadSelectSequenceFiles.d.ts

@@ -1 +1 @@
-export declare const UploadSelectSequenceFiles: () => import("react").JSX.Element;
+export declare const UploadSelectSequenceFiles: () => import('react').JSX.Element;

package/dist/components/ui/UserRightsDialog/UserRightsDialogCaseAccessPolicy.d.ts

@@ -2,4 +2,4 @@ import { CaseDbUser } from '@gen-epix/api-casedb';
 export type UserRightsDialogCaseAccessPolicyProps = {
     readonly user: CaseDbUser;
 };
-export declare const UserRightsDialogCaseAccessPolicy: ({ user }: UserRightsDialogCaseAccessPolicyProps) => import("react").JSX.Element;
+export declare const UserRightsDialogCaseAccessPolicy: ({ user }: UserRightsDialogCaseAccessPolicyProps) => import('react').JSX.Element;

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

@@ -1,4 +1,4 @@
 export type WarningProps = {
     readonly warningMessage: string;
 };
-export declare const Warning: ({ warningMessage }: WarningProps) => import("react").JSX.Element;
+export declare const Warning: ({ warningMessage }: WarningProps) => import('react').JSX.Element;

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

@@ -2,4 +2,4 @@ import { IconButtonProps } from '@mui/material';
 export interface WidgetHeaderIconButtonProps extends IconButtonProps {
     readonly label: string;
 }
-export declare const WidgetHeaderIconButton: ({ label, ...props }: WidgetHeaderIconButtonProps) => import("react").JSX.Element;
+export declare const WidgetHeaderIconButton: ({ label, ...props }: WidgetHeaderIconButtonProps) => import('react').JSX.Element;

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

@@ -3,4 +3,4 @@ import { MenuItemData } from '@gen-epix/ui-core-components/models/nestedMenu';
 export type WidgetMenuProps = {
     readonly menu: MenuItemData[] | ReactNode;
 };
-export declare const WidgetMenu: ({ menu, }: WidgetMenuProps) => import("react").JSX.Element;
+export declare const WidgetMenu: ({ menu, }: WidgetMenuProps) => import('react').JSX.Element;

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

@@ -3,4 +3,4 @@ export type WidgetUnavailableProps = {
     readonly reason?: ReactElement | string;
     readonly widgetLabel: string;
 };
-export declare const WidgetUnavailable: ({ reason, widgetLabel }: WidgetUnavailableProps) => import("react").JSX.Element;
+export declare const WidgetUnavailable: ({ reason, widgetLabel }: WidgetUnavailableProps) => import('react').JSX.Element;

package/dist/context/caseAbac/CaseAbacContextProvider.d.ts

@@ -3,4 +3,4 @@ import { CaseAbacContext } from './CaseAbacContext';
 export type CaseAbacContextProviderProps = PropsWithChildren<{
     readonly caseAbac: CaseAbacContext;
 }>;
-export declare const CaseAbacContextProvider: (props: CaseAbacContextProviderProps) => import("react").JSX.Element;
+export declare const CaseAbacContextProvider: (props: CaseAbacContextProviderProps) => import('react').JSX.Element;

package/dist/context/caseTypeAbac/CaseTypeAbacContextProvider.d.ts

@@ -3,4 +3,4 @@ import { CaseTypeAbacContext } from './CaseTypeAbacContext';
 export type CaseTypeAbacContextProviderProps = PropsWithChildren<{
     readonly caseTypeAbac: CaseTypeAbacContext;
 }>;
-export declare const CaseTypeAbacContextProvider: (props: CaseTypeAbacContextProviderProps) => import("react").JSX.Element;
+export declare const CaseTypeAbacContextProvider: (props: CaseTypeAbacContextProviderProps) => import('react').JSX.Element;

package/dist/pages/CaseDbUsersAdminPage/CaseDbUsersAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseDbUsersAdminPage: () => import("react").JSX.Element;
+export declare const CaseDbUsersAdminPage: () => import('react').JSX.Element;

package/dist/pages/CaseSetCategoryAdminPage/CaseSetCategoryAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseSetCategoryAdminPage: () => import("react").JSX.Element;
+export declare const CaseSetCategoryAdminPage: () => import('react').JSX.Element;

package/dist/pages/CaseSetStatusAdminPage/CaseSetStatusAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseSetStatusAdminPage: () => import("react").JSX.Element;
+export declare const CaseSetStatusAdminPage: () => import('react').JSX.Element;

package/dist/pages/CaseTypeSetCategoriesAdminPage/CaseTypeSetCategoriesAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseTypeSetCategoriesAdminPage: () => import("react").JSX.Element;
+export declare const CaseTypeSetCategoriesAdminPage: () => import('react').JSX.Element;

package/dist/pages/CaseTypeSetsAdminPage/CaseTypeSetsAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseTypeSetsAdminPage: () => import("react").JSX.Element;
+export declare const CaseTypeSetsAdminPage: () => import('react').JSX.Element;

package/dist/pages/CaseTypesAdminPage/CaseTypesAdminPage.d.ts

@@ -1 +1 @@
-export declare const CaseTypesAdminPage: () => import("react").JSX.Element;
+export declare const CaseTypesAdminPage: () => import('react').JSX.Element;

package/dist/pages/CasesDetailPage/CasesDetailPage.d.ts

@@ -1 +1 @@
-export declare const CasesDetailPage: () => import("react").JSX.Element;
+export declare const CasesDetailPage: () => import('react').JSX.Element;

package/dist/pages/CasesDetailPage/index.js

@@ -1,37 +1,37 @@
 import { CASEDB_QUERY_KEY as e } from "../../constants/query.js";
 import { n as t } from "../../_chunks/Dashboard.js";
-import { t as n } from "../../_chunks/chunk-OB3PAWPO.js";
-import { CaseDbCaseApi as r } from "@gen-epix/api-casedb";
-import { useEffect as i, useMemo as a } from "react";
-import { useTranslation as o } from "react-i18next";
-import { jsx as s } from "react/jsx-runtime";
-import { ResponseHandler as c } from "@gen-epix/ui-client-common/components/ui/ResponseHandler";
-import { useItemQuery as l } from "@gen-epix/ui-client-common/hooks/useItemQuery";
-import { TestIdUtil as u } from "@gen-epix/ui-core/utils/TestIdUtil";
+import { CaseDbCaseApi as n } from "@gen-epix/api-casedb";
+import { useEffect as r, useMemo as i } from "react";
+import { useTranslation as a } from "react-i18next";
+import { jsx as o } from "react/jsx-runtime";
+import { ResponseHandler as s } from "@gen-epix/ui-client-common/components/ui/ResponseHandler";
+import { useItemQuery as c } from "@gen-epix/ui-client-common/hooks/useItemQuery";
+import { TestIdUtil as l } from "@gen-epix/ui-core/utils/TestIdUtil";
+import { useParams as u } from "react-router-dom";
 import { PageContainer as d } from "@gen-epix/ui-client-common/components/ui/PageContainer";
 import { useUpdateBreadcrumb as f } from "@gen-epix/ui-client-common/hooks/useUpdateBreadcrumb";
 //#region src/pages/CasesDetailPage/CasesDetailPage.tsx
 var p = () => {
-	let { t: p } = o(), { caseTypeId: m, slug: h } = n(), g = f("Case type"), { data: _, error: v, isLoading: y } = l({
+	let { t: p } = a(), { caseTypeId: m, slug: h } = u(), g = f("Case type"), { data: _, error: v, isLoading: y } = c({
 		baseQueryKey: e.CASE_TYPES,
 		itemId: m,
-		useQueryOptions: { queryFn: async ({ signal: e }) => (await r.getInstance().caseTypesGetOne(m, { signal: e })).data }
-	}), b = a(() => _?.name ? _?.name : p`Case`, [_, p]);
-	return i(() => {
+		useQueryOptions: { queryFn: async ({ signal: e }) => (await n.getInstance().caseTypesGetOne(m, { signal: e })).data }
+	}), b = i(() => _?.name ? _?.name : p`Case`, [_, p]);
+	return r(() => {
 		g(b);
-	}, [b, g]), /* @__PURE__ */ s(d, {
+	}, [b, g]), /* @__PURE__ */ o(d, {
 		fullHeight: !0,
 		fullWidth: !0,
 		showBreadcrumbs: !0,
-		testIdAttributes: u.createAttributes("CasesDetailPage", {
+		testIdAttributes: l.createAttributes("CasesDetailPage", {
 			"case-type-id": m,
 			slug: h
 		}),
 		title: b,
-		children: /* @__PURE__ */ s(c, {
+		children: /* @__PURE__ */ o(s, {
 			error: v,
 			isLoading: y,
-			children: /* @__PURE__ */ s(t, { caseTypeId: m })
+			children: /* @__PURE__ */ o(t, { caseTypeId: m })
 		})
 	});
 };

package/dist/pages/CasesPage/CasesPage.d.ts

@@ -1 +1 @@
-export declare const CasesPage: () => import("react").JSX.Element;
+export declare const CasesPage: () => import('react').JSX.Element;

package/dist/pages/ColSetsAdminPage/ColSetsAdminPage.d.ts

@@ -1 +1 @@
-export declare const ColSetsAdminPage: () => import("react").JSX.Element;
+export declare const ColSetsAdminPage: () => import('react').JSX.Element;

package/dist/pages/ColsAdminPage/ColsAdminPage.d.ts

@@ -1 +1 @@
-export declare const ColsAdminPage: () => import("react").JSX.Element;
+export declare const ColsAdminPage: () => import('react').JSX.Element;