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>;