Merge pull request #108 from unipept/enhancement/reroot-visualizations

Add reroot function to Sunburst and Treemap

CITATION.cff

@@ -0,0 +1,22 @@
+cff-version: 1.2.0
+message: "If you use this software, please cite it as below."
+preferred-citation:
+  type: article
+  authors:
+  - family-names: "Verschaffelt"
+    given-names: "Pieter"
+  - family-names: "Collier"
+    given-names: "James"
+  - family-names: "Botzki"
+    given-names: "Alexander"
+  - family-names: "Martens"
+    given-names: "Lennart"
+  - family-names: "Dawyndt"
+    given-names: "Peter"
+  - family-names: "Mesuere"
+    given-names: "Bart"
+    orcid: "https://orcid.org/0000-0003-0610-3441"
+  doi: "10.1093/bioinformatics/btab590"
+  journal: "Bioinformatics"
+  title: "Unipept Visualizations: An Interactive Visualization Library For Biological Data"
+  year: 2021

dist/visualizations/sunburst/Sunburst.d.ts

@@ -21,7 +21,18 @@ export default class Sunburst {
     private previousRoot;
     private previousMaxLevel;
     constructor(element: HTMLElement, data: DataNodeLike, options?: SunburstSettings);
+    /**
+     * Reset the current view of the visualization. The visualization will completely be reset to it's initial state.
+     */
     reset(): void;
+    /**
+     * Change the root of the visualization to the node with a given ID. Note that the reroot will only be executed if
+     * a node with the given ID exists. If no node was found, nothing happens.
+     *
+     * @param nodeId ID of the node that should now become the new root of the tree.
+     * @param triggerCallback Should the `rerootCallback` be triggered for this node?
+     */
+    reroot(nodeId: number, triggerCallback?: boolean): void;
     private fillOptions;
     private maxY;
     /**
@@ -60,6 +71,7 @@ export default class Sunburst {
      * Defines what happens after a node is clicked.
      *
      * @param d The data object of the clicked arc
+     * @param triggerCallback Should the rerootCallback function be triggered for this click?
      */
     private click;
     private renderArcs;

dist/visualizations/treemap/Treemap.d.ts

@@ -14,6 +14,14 @@ export default class Treemap {
     private nodeId;
     constructor(element: HTMLElement, data: DataNodeLike, options?: TreemapSettings);
     resize(newWidth: number, newHeight: number): void;
+    /**
+     * Change the root of the visualization to the node with a given ID. Note that the reroot will only be executed if
+     * a node with the given ID exists. If no node was found, nothing happens.
+     *
+     * @param nodeId ID of the node that should now become the new root of the tree.
+     * @param triggerCallback Should the `rerootCallback` be triggered for this node?
+     */
+    reroot(nodeId: number, triggerCallback?: boolean): void;
     reset(): void;
     private fillOptions;
     private initCss;

src/visualizations/sunburst/Sunburst.ts

@@ -105,10 +105,27 @@ export default class Sunburst {
         this.reset();
     }
 
+    /**
+     * Reset the current view of the visualization. The visualization will completely be reset to it's initial state.
+     */
     public reset() {
         this.click(this.data[0]);
     }
 
+    /**
+     * Change the root of the visualization to the node with a given ID. Note that the reroot will only be executed if
+     * a node with the given ID exists. If no node was found, nothing happens.
+     *
+     * @param nodeId ID of the node that should now become the new root of the tree.
+     * @param triggerCallback Should the `rerootCallback` be triggered for this node?
+     */
+    public reroot(nodeId: number, triggerCallback: boolean = true) {
+        const newRoot = this.data.find((obj: HRN<DataNode>) => obj.data.id === nodeId);
+        if (newRoot) {
+            this.click(newRoot, triggerCallback);
+        }
+    }
+
     private fillOptions(options: any = undefined): SunburstSettings {
         const output = new SunburstSettings();
         return Object.assign(output, options);
@@ -280,8 +297,9 @@ export default class Sunburst {
      * Defines what happens after a node is clicked.
      *
      * @param d The data object of the clicked arc
+     * @param triggerCallback Should the rerootCallback function be triggered for this click?
      */
-    private click(d: HRN<DataNode>) {
+    private click(d: HRN<DataNode>, triggerCallback: boolean = true) {
         if (d.data.name === "empty" || (this.previousRoot && this.previousRoot.data.id === d.data.id)) {
             return;
         }
@@ -292,7 +310,7 @@ export default class Sunburst {
             this.setBreadcrumbs(d);
         }
 
-        if (this.settings.rerootCallback) {
+        if (this.settings.rerootCallback && triggerCallback) {
             this.settings.rerootCallback(d.data);
         }
 

src/visualizations/treemap/Treemap.ts

@@ -97,6 +97,20 @@ export default class Treemap {
         this.render(this.currentRoot, false);
     }
 
+    /**
+     * Change the root of the visualization to the node with a given ID. Note that the reroot will only be executed if
+     * a node with the given ID exists. If no node was found, nothing happens.
+     *
+     * @param nodeId ID of the node that should now become the new root of the tree.
+     * @param triggerCallback Should the `rerootCallback` be triggered for this node?
+     */
+    public reroot(nodeId: number, triggerCallback: boolean = true) {
+        const newRoot = this.data.find((obj: HRN<DataNode>) => obj.data.id === nodeId);
+        if (newRoot) {
+            this.render(newRoot, triggerCallback);
+        }
+    }
+
     public reset() {
         this.render(this.data[0], false);
     }

src/visualizations/treeview/Treeview.ts

@@ -5,7 +5,7 @@ import TreeviewNode from "./TreeviewNode";
 import MaxCountHeap from "./heap/MaxCountHeap";
 import TreeviewPreprocessor from "./TreeviewPreprocessor";
 import TooltipUtilities from "./../../utilities/TooltipUtilities";
-import { DataNodeLike } from "./../../DataNode";
+import DataNode, { DataNodeLike } from "./../../DataNode";
 
 type HPN<T> = d3.HierarchyPointNode<T>;
 type HPL<T> = d3.HierarchyPointLink<T>;