@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiTree/EpiTree.tsx

@@ -0,0 +1,906 @@
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Button,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  useTheme,
+} from '@mui/material';
+import ClearIcon from '@mui/icons-material/Clear';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import LinkIcon from '@mui/icons-material/Link';
+import type {
+  ReactElement,
+  Ref,
+} from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useDebouncedCallback } from 'use-debounce';
+
+import type { EpiContextMenuConfigWithPosition } from '../EpiContextMenu';
+import { EpiContextMenu } from '../EpiContextMenu';
+import { EpiWidgetUnavailable } from '../EpiWidgetUnavailable';
+import { EpiTreeDescription } from '../EpiTreeDescription';
+import type { RetrievePhylogeneticTreeRequestBody } from '../../../api';
+import { CaseApi } from '../../../api';
+import { TreeFilter } from '../../../classes/filters/TreeFilter';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { DevicePixelRatioManager } from '../../../classes/managers/DevicePixelRatioManager';
+import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
+import { EpiHighlightingManager } from '../../../classes/managers/EpiHighlightingManager';
+import { Subject } from '../../../classes/Subject';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { useScrollbarSize } from '../../../hooks/useScrollbarSize';
+import { useSubscribable } from '../../../hooks/useSubscribable';
+import type {
+  EpiLinkedScrollSubjectValue,
+  TreeConfiguration,
+  Highlighting,
+} from '../../../models/epi';
+import { EPI_ZONE } from '../../../models/epi';
+import type { MenuItemData } from '../../../models/nestedMenu';
+import type {
+  TreeAssembly,
+  TreePathProperties,
+} from '../../../models/tree';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { userProfileStore } from '../../../stores/userProfileStore';
+import { SELECTION_FILTER_GROUP } from '../../../utils/CaseTypeUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { Spinner } from '../../ui/Spinner';
+import { EpiWidget } from '../EpiWidget';
+import { DownloadUtil } from '../../../utils/DownloadUtil';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { EpiTreeUtil } from '../../../utils/EpiTreeUtil';
+
+type ZoomInMenuItemConfig = {
+  caseIds?: string[];
+  rootId?: string;
+};
+
+type EpiTreeProps = {
+  readonly linkedScrollSubject: Subject<EpiLinkedScrollSubjectValue>;
+  readonly ref: Ref<EpiTreeRef>;
+  readonly itemHeight: number;
+};
+
+export interface EpiTreeRef {
+  link: () => void;
+}
+
+export const EpiTree = ({ linkedScrollSubject, ref, itemHeight }: EpiTreeProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const scrollbarSize = useScrollbarSize();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { dimensions: { width, height } } = useDimensions(containerRef);
+  const [treeCanvas, setTreeCanvas] = useState<HTMLCanvasElement>();
+  const [headerCanvas, setHeaderCanvas] = useState<HTMLCanvasElement>();
+  const highlightingManager = useMemo(() => EpiHighlightingManager.instance, []);
+  const canvasScrollSubject = useMemo<Subject<{ x: number; y: number }>>(() => new Subject({ x: 0, y: 0 }), []);
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const setPhylogeneticTreeResponse = useStore(epiDashboardStore, (state) => state.setPhylogeneticTreeResponse);
+  const baseData = useStore(epiDashboardStore, (state) => state.baseData);
+  const filteredCases = useStore(epiDashboardStore, (state) => state.filteredData[SELECTION_FILTER_GROUP]);
+  const setSorting = useStore(epiDashboardStore, (state) => state.setSorting);
+  const tree = useStore(epiDashboardStore, (state) => state.tree);
+  const sortByField = useStore(epiDashboardStore, (state) => state.sortByField);
+  const stratification = useStore(epiDashboardStore, (state) => state.stratification);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+  const hasActiveTreeFilter = useStore(epiDashboardStore, (state) => !state.filters.find(filter => filter instanceof TreeFilter).isInitialFilterValue());
+  const addTreeFilter = useStore(epiDashboardStore, (state) => state.addTreeFilter);
+  const treeFilterStepOut = useStore(epiDashboardStore, (state) => state.treeFilterStepOut);
+  const updateEpiTreeWidgetData = useStore(epiDashboardStore, (state) => state.updateEpiTreeWidgetData);
+  const removeTreeFilter = useStore(epiDashboardStore, (state) => state.removeTreeFilter);
+  const isCaseDataLoading = useStore(epiDashboardStore, (state) => state.isDataLoading);
+  const newick = useStore(epiDashboardStore, (state) => state.newick);
+  const resetTreeAddresses = useStore(epiDashboardStore, (state) => state.resetTreeAddresses);
+  const isShowDistancesEnabled = useStore(userProfileStore, (state) => state.epiDashboardTreeSettings.isShowDistancesEnabled);
+  const [epiContextMenuConfig, setEpiContextMenuConfig] = useState<EpiContextMenuConfigWithPosition | null>(null);
+  const [zoomInMenuItemConfig, setZoomInMenuItemConfig] = useState<ZoomInMenuItemConfig>(null);
+  const [extraLeafInfoId, setExtraLeafInfoId] = useState<string>(null);
+  const [treeConfiguration, setTreeConfiguration] = useState<TreeConfiguration>(epiDashboardStore.getState().epiTreeWidgetData.treeConfiguration);
+  const [treeAssembly, setTreeAssembly] = useState<TreeAssembly>(null);
+  const [verticalScrollPosition, setVerticalScrollPosition] = useState<number>(!isNaN(epiDashboardStore.getState().epiTreeWidgetData.verticalScrollPosition) ? epiDashboardStore.getState().epiTreeWidgetData.verticalScrollPosition : 0);
+  const [horizontalScrollPosition, setHorizontalScrollPosition] = useState<number>(!isNaN(epiDashboardStore.getState().epiTreeWidgetData.horizontalScrollPosition) ? epiDashboardStore.getState().epiTreeWidgetData.horizontalScrollPosition : 0);
+  const [zoomLevel, setZoomLevel] = useState<number>(!isNaN(epiDashboardStore.getState().epiTreeWidgetData.zoomLevel) ? epiDashboardStore.getState().epiTreeWidgetData.zoomLevel : 1);
+  const [devicePixelRatio, setDevicePixelRatio] = useState<number>(DevicePixelRatioManager.instance.data);
+  const [isLinked, setIsLinked] = useState(true);
+  const internalHighlightingSubject = useMemo(() => new Subject<Highlighting>({
+    caseIds: [],
+    origin: null,
+  }), []);
+
+  const treeConfigurations = useMemo(() => EpiTreeUtil.getTreeConfigurations(completeCaseType), [completeCaseType]);
+
+  const treeCanvasAriaLabel = useMemo(() => {
+    if (!treeConfiguration) {
+      return t('Phylogenetic tree visualization');
+    }
+
+    const label = treeConfiguration.col?.label || t('data');
+    const geneticDistanceProtocol = treeConfiguration.geneticDistanceProtocol?.name || t('unknown protocol');
+    const treeAlgorithm = treeConfiguration.treeAlgorithm?.name || t('unknown algorithm');
+
+    return t('Figure of a phylogenetic tree belonging to {{label}}. Generated using {{geneticDistanceProtocol}} and {{treeAlgorithm}}.', {
+      label,
+      geneticDistanceProtocol,
+      treeAlgorithm,
+    });
+  }, [treeConfiguration, t]);
+
+  useEffect(() => {
+    const unsubscribeHighlightingManager = highlightingManager.subscribe((highlighting) => {
+      if (highlighting.origin === EPI_ZONE.TREE) {
+        return;
+      }
+      internalHighlightingSubject.next(highlighting);
+    });
+    const unsubscribeInternalHighlightingSubject = internalHighlightingSubject.subscribe((highlighting) => {
+      if (highlighting.origin !== EPI_ZONE.TREE) {
+        return;
+      }
+      highlightingManager.highlight(highlighting);
+    });
+
+    return () => {
+      unsubscribeHighlightingManager();
+      unsubscribeInternalHighlightingSubject();
+    };
+  }, [highlightingManager, internalHighlightingSubject]);
+
+  useEffect(() => {
+    if (isLinked && zoomLevel !== 1) {
+      setIsLinked(false);
+    }
+  }, [isLinked, zoomLevel]);
+
+  const caseIds = useMemo(() => filteredCases.map(c => c.id).sort(), [filteredCases]);
+
+  useEffect(() => {
+    resetTreeAddresses();
+  }, [caseIds, resetTreeAddresses]);
+
+  const hasEnoughSequencesToShowTree = useMemo(() => caseIds.length >= 2 && caseIds.every(x => !!x), [caseIds]);
+  const hasToManyResultsToShowTree = useMemo(() => caseIds.length > 0 && completeCaseType.read_max_tree_size > 0 && caseIds.length > completeCaseType.read_max_tree_size, [caseIds, completeCaseType.read_max_tree_size]);
+
+  const retrievePhylogeneticTreeRequestBody = useMemo<RetrievePhylogeneticTreeRequestBody>(() => ({
+    case_ids: caseIds,
+    genetic_distance_col_id: treeConfiguration?.col.id,
+    tree_algorithm_code: treeConfiguration?.treeAlgorithm.code,
+    case_type_id: completeCaseType.id,
+  }), [caseIds, completeCaseType.id, treeConfiguration?.col.id, treeConfiguration?.treeAlgorithm.code]);
+
+  const { isLoading: isTreeLoading, error: treeError, data: treeData } = useQueryMemo({
+    queryKey: QueryUtil.getRetrievePhylogeneticTreeKey(retrievePhylogeneticTreeRequestBody),
+    queryFn: async ({ signal }) => {
+      const response = await CaseApi.instance.retrievePhylogeneticTree(retrievePhylogeneticTreeRequestBody, { signal });
+      return response.data;
+    },
+    enabled: hasEnoughSequencesToShowTree && !!treeConfiguration && !hasToManyResultsToShowTree,
+    retry: false,
+    staleTime: Infinity,
+  });
+
+  const isLoading = !!treeConfiguration && (isCaseDataLoading || (hasEnoughSequencesToShowTree && isTreeLoading));
+  const isTreeUnavailable = hasToManyResultsToShowTree || !isCaseDataLoading && ((!isLoading && !!treeError) || !hasEnoughSequencesToShowTree || tree?.maxBranchLength?.toNumber() === 0 || tree?.size === 0 || !treeConfiguration || (!isLoading && tree === null));
+  const shouldShowTree = !hasToManyResultsToShowTree && !!treeConfiguration && !isCaseDataLoading && !treeError && !isTreeLoading && width > 0 && tree?.size > 0 && hasEnoughSequencesToShowTree;
+
+  const treeCanvasWidth = width;
+  const treeCanvasHeight = height - ConfigManager.instance.config.epiTree.HEADER_HEIGHT;
+
+  const treeWidthMinusPadding = treeCanvasWidth - (2 * ConfigManager.instance.config.epiTree.TREE_PADDING);
+  const pixelToGeneticDistanceRatio = tree?.maxBranchLength ? treeWidthMinusPadding / tree.maxBranchLength.toNumber() : null;
+  // Note: There is some magic here, because of the position: sticky for the table header
+  const treeHeight = tree?.size ? (tree.size * itemHeight) + scrollbarSize : itemHeight;
+
+  useEffect(() => {
+    if (treeData) {
+      setPhylogeneticTreeResponse(treeData);
+    }
+  }, [treeData, setPhylogeneticTreeResponse]);
+
+  useEffect(() => {
+    const unsubscribe = canvasScrollSubject.subscribe((data) => {
+      if (!isNaN(data.x)) {
+        setHorizontalScrollPosition(data.x);
+      }
+      if (!isNaN(data.y)) {
+        setVerticalScrollPosition(data.y);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [canvasScrollSubject]);
+
+  useEffect(() => {
+    if (!treeConfigurations?.length) {
+      setTreeConfiguration(null);
+    }
+    const newConfig = epiDashboardStore.getState().epiTreeWidgetData.treeConfiguration || treeConfigurations[0];
+
+    setTreeConfiguration(newConfig);
+    updateEpiTreeWidgetData({
+      treeConfiguration: newConfig,
+    });
+  }, [epiDashboardStore, treeConfigurations, updateEpiTreeWidgetData]);
+
+  const updateLinkedScrollSubjectDebounced = useDebouncedCallback((position: number) => {
+    linkedScrollSubject.next({
+      position: position / devicePixelRatio,
+      origin: scrollContainerRef.current,
+    });
+  }, ConfigManager.instance.config.epiTree.LINKED_SCROLL_DEBOUNCE_DELAY_MS, { leading: true, trailing: true });
+
+  const updateScrollPosition = useCallback((positionX: number, positionY: number, internalZoomLevel: number) => {
+    const { newPositionX, newPositionY } = EpiTreeUtil.getSanitizedScrollPosition({
+      devicePixelRatio,
+      internalZoomLevel,
+      isLinked,
+      positionX,
+      positionY,
+      treeCanvasHeight,
+      treeCanvasWidth,
+      treeHeight,
+    });
+
+    canvasScrollSubject.next({
+      x: newPositionX,
+      y: newPositionY,
+    });
+
+    if (isLinked && internalZoomLevel === 1) {
+      updateLinkedScrollSubjectDebounced(newPositionY);
+    }
+  }, [devicePixelRatio, isLinked, treeCanvasWidth, canvasScrollSubject, treeHeight, treeCanvasHeight, updateLinkedScrollSubjectDebounced]);
+
+  useEffect(() => {
+    if (sortByField && isLinked) {
+      setIsLinked(false);
+      setZoomLevel(ConfigManager.instance.config.epiTree.INITIAL_UNLINKED_ZOOM_LEVEL);
+      updateScrollPosition(0, 0, 0);
+    }
+  }, [isLinked, sortByField, updateScrollPosition]);
+
+  const devicePixelRatioManagerCallback = useCallback((newDevicePixelRation: number, previousDevicePixelRatio: number) => {
+    canvasScrollSubject.next({
+      x: (canvasScrollSubject.data.x / previousDevicePixelRatio) * newDevicePixelRation,
+      y: (canvasScrollSubject.data.y / previousDevicePixelRatio) * newDevicePixelRation,
+    });
+    setDevicePixelRatio(newDevicePixelRation);
+  }, [canvasScrollSubject]);
+
+  useSubscribable(DevicePixelRatioManager.instance, {
+    callback: devicePixelRatioManagerCallback,
+  });
+
+  const updateEpiTreeWidgetDataDebounced = useDebouncedCallback(() => {
+    updateEpiTreeWidgetData({
+      zoomLevel,
+      verticalScrollPosition,
+      horizontalScrollPosition,
+    });
+  }, 500);
+
+  useEffect(() => {
+    updateEpiTreeWidgetDataDebounced();
+  }, [updateEpiTreeWidgetData, zoomLevel, verticalScrollPosition, horizontalScrollPosition, updateEpiTreeWidgetDataDebounced]);
+
+  const tickerMarkScale = useMemo(() => {
+    return EpiTreeUtil.getTickMarkScale({
+      treeWidthMinusPadding,
+      geneticTreeWidth: tree?.maxBranchLength,
+      minGeneticScaleUnit: Math.min(EpiTreeUtil.getMinGeneticScaleUnit(tree), treeConfiguration?.geneticDistanceProtocol?.min_scale_unit ?? Infinity),
+      // minGeneticScaleUnit: treeConfiguration?.geneticDistanceProtocol?.min_scale_unit,
+      zoomLevel,
+    });
+  }, [treeWidthMinusPadding, tree, treeConfiguration?.geneticDistanceProtocol?.min_scale_unit, zoomLevel]);
+
+  const onEpiContextMenuClose = useCallback(() => {
+    setEpiContextMenuConfig(null);
+    setZoomInMenuItemConfig(null);
+  }, []);
+
+  const linkLineListToTree = useCallback(() => {
+    const perform = async () => {
+      const newScrollPosition = EpiTreeUtil.getScrollPositionFromTreeVisibility({
+        treeHeight,
+        treeSize: tree?.size,
+        treeCanvasHeight,
+        verticalScrollPosition,
+        zoomLevel,
+        itemHeight,
+      });
+
+      await setSorting(null, null);
+      setZoomLevel(1);
+      setIsLinked(true);
+      updateScrollPosition(0, newScrollPosition, 1);
+      linkedScrollSubject.next({
+        position: newScrollPosition,
+        origin: scrollContainerRef.current,
+      });
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    perform();
+
+  }, [linkedScrollSubject, setSorting, tree?.size, treeCanvasHeight, treeHeight, verticalScrollPosition, updateScrollPosition, zoomLevel, itemHeight]);
+
+  const onLinkButtonClick = useCallback(() => {
+    linkLineListToTree();
+
+  }, [linkLineListToTree]);
+
+  const onOpenFiltersButtonClick = useCallback(() => {
+    EpiEventBusManager.instance.emit('openFiltersMenu');
+  }, []);
+
+  const resetZoomLevelAndScrollPosition = useCallback(() => {
+    setZoomLevel(1);
+    setIsLinked(true);
+    updateScrollPosition(0, 0, 1);
+  }, [updateScrollPosition]);
+
+  const onAddTreeFilterMenuItemClick = useCallback(async (onMenuClose: () => void) => {
+    await addTreeFilter(zoomInMenuItemConfig.rootId);
+    resetZoomLevelAndScrollPosition();
+    onMenuClose();
+  }, [addTreeFilter, zoomInMenuItemConfig?.rootId, resetZoomLevelAndScrollPosition]);
+
+  const onRemoveTreeFilterButtonClick = useCallback(async () => {
+    await removeTreeFilter();
+    resetZoomLevelAndScrollPosition();
+  }, [removeTreeFilter, resetZoomLevelAndScrollPosition]);
+
+  const onTreeFilterStepOutButtonClick = useCallback(async () => {
+    await treeFilterStepOut();
+    resetZoomLevelAndScrollPosition();
+  }, [resetZoomLevelAndScrollPosition, treeFilterStepOut]);
+
+  const getPathPropertiesFromCanvas = useCallback((canvas: HTMLCanvasElement, event: MouseEvent): TreePathProperties => {
+    return EpiTreeUtil.getPathPropertiesFromCanvas({
+      canvas,
+      event,
+      treeAssembly,
+      devicePixelRatio,
+    });
+  }, [treeAssembly, devicePixelRatio]);
+
+  useEffect(() => {
+    const unsubscribe = linkedScrollSubject.subscribe((data) => {
+      if (data.origin === scrollContainerRef.current) {
+        return;
+      }
+      if (isLinked && zoomLevel === 1) {
+        canvasScrollSubject.next({
+          x: canvasScrollSubject.data.x * devicePixelRatio,
+          y: data.position * devicePixelRatio,
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [linkedScrollSubject, canvasScrollSubject, updateScrollPosition, devicePixelRatio, isLinked, zoomLevel]);
+
+  // Setup canvas
+  useEffect(() => {
+    setTreeAssembly(EpiTreeUtil.assembleTree({ rootNode: tree, treeCanvasWidth, pixelToGeneticDistanceRatio, itemHeight }));
+  }, [pixelToGeneticDistanceRatio, tree, treeCanvasWidth, itemHeight]);
+
+  useEffect(() => {
+    if (!treeCanvas || !treeAssembly || !tree) {
+      return;
+    }
+
+    EpiTreeUtil.drawTreeCanvas({ canvas: treeCanvas, theme, geneticTreeWidth: tree?.maxBranchLength, treeAssembly, stratification, zoomLevel, isLinked, horizontalScrollPosition, verticalScrollPosition, treeCanvasWidth, treeCanvasHeight, pixelToGeneticDistanceRatio, tickerMarkScale, shouldShowDistances: isShowDistancesEnabled, devicePixelRatio });
+    let animationFrameId: number;
+    const unsubscribe = internalHighlightingSubject.subscribe((highlighting) => {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(() => {
+        EpiTreeUtil.drawTreeCanvas({ canvas: treeCanvas, theme, geneticTreeWidth: tree?.maxBranchLength, treeAssembly, stratification, zoomLevel, isLinked, horizontalScrollPosition, verticalScrollPosition, treeCanvasWidth, treeCanvasHeight, pixelToGeneticDistanceRatio, tickerMarkScale, highlightedNodeNames: highlighting.caseIds, shouldShowDistances: isShowDistancesEnabled, devicePixelRatio });
+      });
+    });
+    return () => {
+      unsubscribe();
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [treeCanvasHeight, treeCanvas, internalHighlightingSubject, pixelToGeneticDistanceRatio, stratification, theme, tickerMarkScale, treeAssembly, treeCanvasWidth, horizontalScrollPosition, verticalScrollPosition, width, zoomLevel, isLinked, isShowDistancesEnabled, devicePixelRatio, tree?.maxBranchLength, tree]);
+
+  // Setup canvas event listeners (note: must be in a separate useEffect to prevent render loop)
+  useEffect(() => {
+    if (!treeCanvas) {
+      return;
+    }
+
+    let pos = {
+      x: 0,
+      y: 0,
+      currentX: 0,
+      currentY: 0,
+    };
+    let followMouse = false;
+
+    const onMouseDown = (event: MouseEvent) => {
+      // store the current mouse position (to be used on mouse move for scrolling)
+      pos = {
+        x: event.clientX,
+        y: event.clientY,
+        currentX: canvasScrollSubject.data.x,
+        currentY: canvasScrollSubject.data.y,
+      };
+      followMouse = true;
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+      if (followMouse) {
+        treeCanvas.style.cursor = 'move';
+
+        // update the scroll position based on how far the mouse has moved
+        // how far the mouse has moved:
+        const deltaX = event.clientX - pos.x;
+        const deltaY = event.clientY - pos.y;
+        // the new scroll position:
+        const scrollPositionX = pos.currentX - deltaX;
+        const scrollPositionY = pos.currentY - deltaY;
+
+        let sanitizedScrollPositionX = scrollPositionX;
+        if (zoomLevel === 1 && Math.abs(deltaX) < ConfigManager.instance.config.epiTree.PANNING_THRESHOLD && pos.currentX === 0) {
+          sanitizedScrollPositionX = 0;
+        }
+
+        updateScrollPosition(sanitizedScrollPositionX, scrollPositionY, zoomLevel);
+        return;
+      }
+
+      const pathProperties = getPathPropertiesFromCanvas(treeCanvas, event);
+      if (pathProperties) {
+        treeCanvas.style.cursor = 'pointer';
+        internalHighlightingSubject.next({
+          caseIds: pathProperties.subTreeLeaveNames,
+          origin: EPI_ZONE.TREE,
+        });
+      } else {
+        treeCanvas.style.cursor = 'default';
+        // remove highlighting (only there is highlighting to prevent a render loop)
+        if (internalHighlightingSubject.data?.caseIds?.length) {
+          internalHighlightingSubject.next({
+            caseIds: [],
+            origin: EPI_ZONE.TREE,
+          });
+        }
+      }
+    };
+
+    const onMouseUp = (event: MouseEvent) => {
+      // stop following the mouse for scrolling
+      followMouse = false;
+
+      // Handle the click when the user clicked a path in the canvas
+      const pathProperties = getPathPropertiesFromCanvas(treeCanvas, event);
+      if (pathProperties?.treeNode) {
+        const { treeNode } = pathProperties;
+        setEpiContextMenuConfig({
+          position: {
+            left: event.clientX,
+            top: event.clientY,
+          },
+          caseIds: treeNode.subTreeLeaveNames ? treeNode.subTreeLeaveNames : [treeNode.name],
+          mouseEvent: event,
+        });
+        if (treeNode.subTreeNames.length && treeNode.name && treeNode.maxBranchLength.toNumber()) {
+          setZoomInMenuItemConfig({
+            caseIds: treeNode.subTreeLeaveNames,
+            rootId: treeNode.name,
+          });
+        }
+        if (treeNode.name && !treeNode.subTreeNames.length) {
+          setExtraLeafInfoId(treeNode.name);
+        }
+      } else if (pathProperties?.subTreeLeaveNames?.length) {
+        setEpiContextMenuConfig({
+          position: {
+            left: event.clientX,
+            top: event.clientY,
+          },
+          caseIds: pathProperties.subTreeLeaveNames,
+          mouseEvent: event,
+        });
+      }
+    };
+
+    const onMouseWheel = (event: WheelEvent) => {
+      event.preventDefault();
+
+      if (event.shiftKey) {
+        updateScrollPosition(canvasScrollSubject.data.x + (event.deltaX || event.deltaY), canvasScrollSubject.data.y, zoomLevel);
+        return;
+      }
+      if (event.metaKey || event.ctrlKey) {
+        updateScrollPosition(canvasScrollSubject.data.x, canvasScrollSubject.data.y + (event.deltaX || event.deltaY), zoomLevel);
+        return;
+      }
+
+      const { MAX_ZOOM_SPEED, MIN_ZOOM_SPEED, MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } = ConfigManager.instance.config.epiTree;
+
+      const zoomSpeed = Math.min(MAX_ZOOM_SPEED, Math.max(MIN_ZOOM_SPEED, treeHeight / treeCanvasHeight * 0.2));
+      const newZoomLevel = Math.min(MAX_ZOOM_LEVEL, Math.max(MIN_ZOOM_LEVEL, zoomLevel + (event.deltaY > 0 ? zoomSpeed : -zoomSpeed)));
+
+      const newScrollPositionY = EpiTreeUtil.getNewScrollPositionForZoomLevel({
+        eventOffset: event.offsetY,
+        scrollPosition: canvasScrollSubject.data.y,
+        dimensionSize: treeHeight,
+        currentZoomLevel: zoomLevel,
+        newZoomLevel,
+      });
+      const newScrollPositionX = EpiTreeUtil.getNewScrollPositionForZoomLevel({
+        eventOffset: event.offsetX,
+        scrollPosition: canvasScrollSubject.data.x,
+        dimensionSize: treeCanvasWidth,
+        currentZoomLevel: zoomLevel,
+        newZoomLevel,
+      });
+
+      setZoomLevel(newZoomLevel);
+      if (newZoomLevel !== 1) {
+        updateScrollPosition(newScrollPositionX, newScrollPositionY, newZoomLevel);
+      } else {
+        updateScrollPosition(newScrollPositionX, linkedScrollSubject.data?.position ?? 0, 1);
+      }
+
+      if (newZoomLevel > MIN_ZOOM_LEVEL && newZoomLevel < MAX_ZOOM_LEVEL) {
+        // Disconnect the event listener and allow a render cycle to complete
+        // But only when zoomLevel is not at it's boundaries, otherwise the event listener will not be reconnected
+        treeCanvas.removeEventListener('wheel', onMouseWheel);
+      }
+    };
+
+    const onMouseOut = () => {
+      followMouse = false;
+
+      // reset highlighting (because mouse move event may not have triggered it correctly)
+      internalHighlightingSubject.next({
+        caseIds: [],
+        origin: EPI_ZONE.TREE,
+      });
+    };
+
+    treeCanvas.addEventListener('mousemove', onMouseMove);
+    treeCanvas.addEventListener('mousedown', onMouseDown);
+    treeCanvas.addEventListener('mouseup', onMouseUp);
+    treeCanvas.addEventListener('mouseout', onMouseOut);
+    treeCanvas.addEventListener('wheel', onMouseWheel);
+
+    return () => {
+      treeCanvas.removeEventListener('mousemove', onMouseMove);
+      treeCanvas.removeEventListener('mousedown', onMouseDown);
+      treeCanvas.removeEventListener('mouseup', onMouseUp);
+      treeCanvas.removeEventListener('mouseout', onMouseOut);
+      treeCanvas.removeEventListener('wheel', onMouseWheel);
+    };
+  // note: we don't want to re-run this effect when the treeSubject.data changes; it would disconnect the event handles and prevent the user from interacting with the tree
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeCanvasHeight, treeCanvas, getPathPropertiesFromCanvas, internalHighlightingSubject, updateScrollPosition, scrollContainerRef, treeHeight, zoomLevel]);
+
+  // Setup header canvas
+  useEffect(() => {
+    if (!headerCanvas || !tree) {
+      return;
+    }
+    const canvas = headerCanvas;
+    const ctx = canvas.getContext('2d');
+    canvas.width = canvas.clientWidth * devicePixelRatio;
+    canvas.height = canvas.clientHeight * devicePixelRatio;
+
+    EpiTreeUtil.drawGuides({ canvas, geneticTreeWidth: tree?.maxBranchLength, tickerMarkScale, pixelToGeneticDistanceRatio, horizontalScrollPosition, paddingTop: ConfigManager.instance.config.epiTree.HEADER_HEIGHT * 0.7, paddingBottom: 0, zoomLevel, devicePixelRatio });
+    EpiTreeUtil.drawGuides({ canvas, geneticTreeWidth: tree?.maxBranchLength, tickerMarkScale, pixelToGeneticDistanceRatio, horizontalScrollPosition, paddingTop: 0, paddingBottom: ConfigManager.instance.config.epiTree.HEADER_HEIGHT * 0.7, zoomLevel, devicePixelRatio });
+    EpiTreeUtil.drawScale({ canvas, theme, tickerMarkScale, geneticTreeWidth: tree?.maxBranchLength, pixelToGeneticDistanceRatio, zoomLevel, devicePixelRatio, horizontalScrollPosition });
+
+    // Draw horizontal top divider
+    EpiTreeUtil.drawDivider({ canvas, y: 0, devicePixelRatio });
+    // Draw horizontal bottom divider
+    EpiTreeUtil.drawDivider({ canvas, y: ConfigManager.instance.config.epiTree.HEADER_HEIGHT - 1, devicePixelRatio });
+
+    ctx.translate(-0.5, -0.5);
+  }, [headerCanvas, pixelToGeneticDistanceRatio, theme, tickerMarkScale, zoomLevel, devicePixelRatio, horizontalScrollPosition, tree?.maxBranchLength, tree]);
+
+  const onShowDetailsSelectionMenuItemClick = useCallback((onMenuClose: () => void) => {
+    EpiEventBusManager.instance.emit('openCaseInfoDialog', {
+      caseId: baseData.find(c => c.id === extraLeafInfoId).id,
+      caseTypeId: completeCaseType.id,
+    });
+    onMenuClose();
+  }, [extraLeafInfoId, baseData, completeCaseType.id]);
+
+  const getEpiContextMenuExtraItems = useCallback((onMenuClose: () => void): ReactElement => {
+    if (zoomInMenuItemConfig) {
+      return (
+        <MenuItem
+          divider
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={async () => onAddTreeFilterMenuItemClick(onMenuClose)}
+        >
+          <ListItemIcon>
+            <FilterAltIcon fontSize={'small'} />
+          </ListItemIcon>
+          <ListItemText>
+            {t`Filter (show only this subtree)`}
+          </ListItemText>
+        </MenuItem>
+      );
+    }
+    if (extraLeafInfoId) {
+      return (
+        <MenuItem
+          divider
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => onShowDetailsSelectionMenuItemClick(onMenuClose)}
+        >
+          <ListItemIcon>
+            <InfoOutlinedIcon fontSize={'small'} />
+          </ListItemIcon>
+          <ListItemText>
+            {t`Show details`}
+          </ListItemText>
+        </MenuItem>
+      );
+    }
+  }, [extraLeafInfoId, onShowDetailsSelectionMenuItemClick, onAddTreeFilterMenuItemClick, t, zoomInMenuItemConfig]);
+
+  const titleMenu = useMemo<MenuItemData | string>(() => {
+    if (!treeConfigurations?.length) {
+      return t`Tree`;
+    }
+
+    const menu: MenuItemData = {
+      label: treeConfiguration ? t('Tree: {{algorithm}}', { algorithm: EpiTreeUtil.getTreeConfigurationLabel(treeConfiguration) }) : t`Tree`,
+      tooltip: treeConfiguration
+        ? (
+          <EpiTreeDescription
+            treeConfiguration={treeConfiguration}
+          />
+        )
+        : undefined,
+      disabled: !treeConfiguration,
+      items: treeConfigurations?.map<MenuItemData>(config => ({
+        label: EpiTreeUtil.getTreeConfigurationLabel(config),
+        callback: () => {
+          const perform = async () => {
+            await removeTreeFilter();
+            updateEpiTreeWidgetData({
+              treeConfiguration: config,
+            });
+            setTreeConfiguration(config);
+          };
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          perform();
+        },
+        active: !!treeConfiguration && treeConfiguration.computedId === config.computedId,
+        tooltip: (
+          <EpiTreeDescription
+            treeConfiguration={config}
+          />
+        ),
+      })) ?? [],
+    };
+
+    return menu;
+  }, [treeConfigurations, treeConfiguration, t, removeTreeFilter, updateEpiTreeWidgetData]);
+
+  const primaryMenu = useMemo<MenuItemData[]>(() => {
+    return [
+      {
+        disabled: !hasActiveTreeFilter,
+        label: t`Change tree filter to nearest ancestor`,
+        leftIcon: <ArrowUpwardIcon />,
+        callback: onTreeFilterStepOutButtonClick,
+      },
+      {
+        disabled: !hasActiveTreeFilter,
+        label: t`Remove tree filter`,
+        leftIcon: <ClearIcon />,
+        callback: onRemoveTreeFilterButtonClick,
+      },
+      {
+        label: t`Link and snap the Line List to the Tree (resets tree zoom level and Line List sorting)`,
+        leftIcon: (
+          <LinkIcon
+            sx={{
+              color: isLinked ? undefined : theme.palette.error.main,
+            }}
+          />
+        ),
+        callback: onLinkButtonClick,
+      },
+    ];
+  }, [hasActiveTreeFilter, t, onTreeFilterStepOutButtonClick, onRemoveTreeFilterButtonClick, isLinked, theme.palette.error.main, onLinkButtonClick]);
+
+  useEffect(() => {
+    const emitDownloadOptions = () => {
+      const baseName = t('Phylogenetic Tree - {{geneticDistanceProtocol}} - {{treeAlgorithm}}',
+        {
+          treeAlgorithm: treeConfiguration?.treeAlgorithm.name ?? '',
+          geneticDistanceProtocol: treeConfiguration?.geneticDistanceProtocol.name ?? '',
+        });
+
+      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
+        zone: EPI_ZONE.TREE,
+        disabled: isTreeUnavailable,
+        zoneLabel: t`Phylogenetic Tree`,
+        items: [
+          {
+            label: t`Save as Newick`,
+            callback: () => DownloadUtil.downloadNewick(baseName, newick, completeCaseType, t),
+          },
+          {
+            label: t`Save as JPEG`,
+            callback: () => DownloadUtil.downloadCanvasImage(baseName, treeCanvas, 'jpeg', completeCaseType, t),
+          },
+          {
+            label: t`Save as PNG`,
+            callback: () => DownloadUtil.downloadCanvasImage(baseName, treeCanvas, 'png', completeCaseType, t),
+          },
+        ],
+      });
+    };
+
+
+    emitDownloadOptions();
+    const remove = EpiEventBusManager.instance.addEventListener('onDownloadOptionsRequested', emitDownloadOptions);
+
+    return () => {
+      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
+        zone: EPI_ZONE.TREE,
+        items: null,
+        zoneLabel: t`Tree`,
+      });
+      remove();
+    };
+  }, [completeCaseType, isLinked, isTreeUnavailable, newick, t, treeCanvas, treeConfiguration?.geneticDistanceProtocol.name, treeConfiguration?.treeAlgorithm.name]);
+
+
+  const link = useCallback(() => {
+    // Link the tree to the current scroll position of the Line List
+    setIsLinked(true);
+    setZoomLevel(1);
+    updateScrollPosition(0, linkedScrollSubject.data?.position ?? 0, 1);
+  }, [linkedScrollSubject.data?.position, updateScrollPosition]);
+
+  useImperativeHandle(ref, () => ({
+    link,
+  }));
+
+  return (
+    <EpiWidget
+      expandDisabled={isTreeUnavailable}
+      primaryMenu={primaryMenu}
+      title={titleMenu}
+      zone={EPI_ZONE.TREE}
+    >
+      <Box
+        ref={containerRef}
+        sx={{
+          position: 'relative',
+          height: '100%',
+          width: '100%',
+          overflow: 'clip',
+        }}
+      >
+        {isTreeUnavailable && (
+          <>
+            {hasToManyResultsToShowTree && (
+              <Box>
+                <Alert severity={'warning'}>
+                  <AlertTitle>
+                    {t`Too many cases to display the phylogenetic tree`}
+                  </AlertTitle>
+                  <Box marginY={2}>
+                    {t('The phylogenetic tree cannot be displayed because the number of cases ({{caseCount}}) exceeds the maximum allowed number of cases ({{maxSize}}) to display a phylogenetic tree. Refine your filters to reduce the number of results.', {
+                      caseCount: caseIds.length,
+                      maxSize: completeCaseType.read_max_tree_size,
+                    })}
+                  </Box>
+                  <Button
+                    color={'inherit'}
+                    variant={'outlined'}
+                    onClick={onOpenFiltersButtonClick}
+                  >
+                    {t`Refine filters`}
+                  </Button>
+                </Alert>
+              </Box>
+            )}
+            {!hasToManyResultsToShowTree && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  zIndex: 1,
+                }}
+              >
+                <EpiWidgetUnavailable
+                  epiZone={EPI_ZONE.TREE}
+                  widgetName={t`phylogenetic tree`}
+                />
+              </Box>
+            )}
+          </>
+        )}
+        {(isLoading && !isTreeUnavailable) && (
+          <Spinner
+            label={t`Loading`}
+            takingLongerTimeoutMs={ConfigManager.instance.config.epiTree.TAKING_LONGER_TIMEOUT_MS}
+          />
+        )}
+        {!isTreeUnavailable && shouldShowTree && (
+          <Box
+            sx={{
+              height: ConfigManager.instance.config.epiTree.HEADER_HEIGHT,
+              position: 'absolute',
+              background: theme.palette.background.paper,
+              width: treeCanvasWidth,
+              top: 0,
+              zIndex: 1,
+            }}
+          >
+            <Box
+              ref={setHeaderCanvas}
+              aria-hidden
+              component={'canvas'}
+              role={'figure'}
+              sx={{
+                width: treeCanvasWidth,
+                height: ConfigManager.instance.config.epiTree.HEADER_HEIGHT,
+              }}
+            />
+          </Box>
+        )}
+        <Box
+          ref={scrollContainerRef}
+          sx={{
+            paddingTop: `${ConfigManager.instance.config.epiTree.HEADER_HEIGHT}px`,
+            position: 'absolute',
+            height,
+            width,
+            overflowY: 'hidden',
+          }}
+        >
+          {!isTreeUnavailable && shouldShowTree && (
+            <Box
+              ref={setTreeCanvas}
+              aria-label={treeCanvasAriaLabel}
+              component={'canvas'}
+              role={'figure'}
+              sx={{
+                width: treeCanvasWidth,
+                height: treeCanvasHeight,
+              }}
+            />
+          )}
+        </Box>
+      </Box>
+      <EpiContextMenu
+        config={epiContextMenuConfig}
+        getExtraItems={getEpiContextMenuExtraItems}
+        onMenuClose={onEpiContextMenuClose}
+      />
+    </EpiWidget>
+  );
+};