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

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

Author: pverscha

dist/unipept-visualizations.js

@@ -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.

dist/visualizations/treeview/TreeviewSettings.d.ts

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

examples/treeview-taxonomy.html

@@ -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",

package.json

@@ -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/Treeview.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.

src/visualizations/treeview/TreeviewSettings.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/TestConsts.d.ts

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

types/test/TestDataGenerator.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/test/TestUtils.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>;
 }