Merge pull request #150 from unipept/fix/colorprovider-call-wrong

Fix `ColorProvider` option is only called for the root level

dist/visualizations/treeview/TreeviewSettings.d.ts

@@ -48,6 +48,12 @@ export default class TreeviewSettings extends Settings {
      * Time the animation should last (in milliseconds).
      */
     animationDuration: number;
+    /**
+     * Amount of levels deep in the true for which the color should be set explicitly. This parameter determines up
+     * until which point in the tree the colorProvider function will be called. By default only the direct children of
+     * the root node (at level 1) are distinctly colored.
+     */
+    colorProviderLevels: number;
     /**
      * Function that returns a color to use as a fill color.
      *
@@ -71,7 +77,8 @@ export default class TreeviewSettings extends Settings {
     linkStrokeColor: (l: HierarchyPointLink<TreeviewNode>) => string;
     /**
      * Function that returns the color that should be used for a specific node. This actually corresponds to the
-     * specific color scale that should be used for this visualization.
+     * specific color scale that should be used for this visualization. Note that this function will only be called for
+     * nodes up until the level in the tree specified by the parameter "colorProviderLevels".
      *
      * @param d A TreeviewNode for which the corresponding color should be computed.
      * @return The color associated with the given node.

examples/treeview-taxonomy.html

@@ -20,7 +20,8 @@
                 data,
                 {
                     width: 900,
-                    height: 600
+                    height: 600,
+                    colorProviderLevels: 3
                 }
             );
         });

package.json

@@ -1,6 +1,6 @@
 {
     "name": "unipept-visualizations",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "description": "The Unipept visualisation library",
     "homepage": "https://github.com/unipept/unipept-visualizations",
     "bugs": "https://github.com/unipept/unipept-visualizations/issues",

src/visualizations/treeview/Treeview.ts

@@ -110,8 +110,17 @@ export default class Treeview {
 
         this.root.data.setSelected(true);
 
-        this.root.children?.forEach((d: HPN<TreeviewNode>, i: number) => {
+        const updateColor = (d: HPN<TreeviewNode>, level: number) => {
             d.data.setColor(this.settings.colorProvider(d.data));
+            if (level < this.settings.colorProviderLevels && d.children) {
+                for (const child of d.children) {
+                    updateColor(child, level + 1);
+                }
+            }
+        }
+
+        this.root.children?.forEach((d: HPN<TreeviewNode>, i: number) => {
+            updateColor(d, 1);
         });
 
         if (this.settings.enableExpandOnClick) {

src/visualizations/treeview/TreeviewSettings.ts

@@ -63,6 +63,13 @@ export default class TreeviewSettings extends Settings {
      */
     animationDuration: number = 500;
 
+    /**
+     * Amount of levels deep in the true for which the color should be set explicitly. This parameter determines up
+     * until which point in the tree the colorProvider function will be called. By default only the direct children of
+     * the root node (at level 1) are distinctly colored.
+     */
+    colorProviderLevels: number = 1;
+
     /**
      * Function that returns a color to use as a fill color.
      *
@@ -97,7 +104,8 @@ export default class TreeviewSettings extends Settings {
 
     /**
      * Function that returns the color that should be used for a specific node. This actually corresponds to the
-     * specific color scale that should be used for this visualization.
+     * specific color scale that should be used for this visualization. Note that this function will only be called for
+     * nodes up until the level in the tree specified by the parameter "colorProviderLevels".
      *
      * @param d A TreeviewNode for which the corresponding color should be computed.
      * @return The color associated with the given node.

types/test/TestConsts.d.ts

@@ -0,0 +1,10 @@
+export declare type ImageSnapshotSettings = {
+    comparisonMethod: string;
+    customSnapshotsDir: string;
+    customDiffDir: string;
+    failureThreshold: number;
+    failureThresholdType: string;
+};
+export default class TestConsts {
+    static resolveImageSnapshotFolder(path: string): ImageSnapshotSettings;
+}

types/test/TestDataGenerator.d.ts

@@ -0,0 +1,3 @@
+export default class TestDataGenerator {
+    generateSmall2DDataset(): number[][];
+}

types/test/TestUtils.d.ts

@@ -0,0 +1,15 @@
+export declare function sleep(ms: number): Promise<unknown>;
+/**
+ * This function waits a specified amount of time for promises to be fullfilled before returning.
+ *
+ * @param ms How many ms should we wait before continueing test execution?
+ */
+export declare function waitForPromises(ms: number): Promise<void>;
+/**
+ * This function returns only when the given condition evaluates to true, or when the given timeout has been exceeded.
+ *
+ * @param condition
+ * @param timeout
+ * @param interval
+ */
+export declare function waitForCondition(condition: () => boolean, timeout?: number, interval?: number): Promise<void>;

types/utilities/TooltipUtilities.d.ts

@@ -1,4 +1,4 @@
 import * as d3 from "d3";
 export default class TooltipUtilities {
-    static initTooltip(elementId: string): d3.Selection<HTMLDivElement, unknown, HTMLElement, any>;
+    static initTooltip(): d3.Selection<HTMLDivElement, unknown, HTMLElement, any>;
 }

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

types/visualizations/treemap/Treemap.d.ts

@@ -14,6 +14,15 @@ 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;
     private render;

types/visualizations/treeview/Treeview.d.ts

@@ -15,6 +15,7 @@ export default class Treeview {
     private zoomScale;
     private svg;
     constructor(element: HTMLElement, data: DataNodeLike, options?: TreeviewSettings);
+    reset(): void;
     private fillOptions;
     private render;
     private centerRoot;

types/visualizations/treeview/TreeviewSettings.d.ts

@@ -48,6 +48,12 @@ export default class TreeviewSettings extends Settings {
      * Time the animation should last (in milliseconds).
      */
     animationDuration: number;
+    /**
+     * Amount of levels deep in the true for which the color should be set explicitly. This parameter determines up
+     * until which point in the tree the colorProvider function will be called. By default only the direct children of
+     * the root node (at level 1) are distinctly colored.
+     */
+    colorProviderLevels: number;
     /**
      * Function that returns a color to use as a fill color.
      *
@@ -71,7 +77,8 @@ export default class TreeviewSettings extends Settings {
     linkStrokeColor: (l: HierarchyPointLink<TreeviewNode>) => string;
     /**
      * Function that returns the color that should be used for a specific node. This actually corresponds to the
-     * specific color scale that should be used for this visualization.
+     * specific color scale that should be used for this visualization. Note that this function will only be called for
+     * nodes up until the level in the tree specified by the parameter "colorProviderLevels".
      *
      * @param d A TreeviewNode for which the corresponding color should be computed.
      * @return The color associated with the given node.