Skip to content

Commit

Permalink
Merge pull request #150 from unipept/fix/colorprovider-call-wrong
Browse files Browse the repository at this point in the history
Fix `ColorProvider` option is only called for the root level
  • Loading branch information
pverscha authored Jan 9, 2024
2 parents ed9e168 + 9170720 commit 807a02c
Show file tree
Hide file tree
Showing 14 changed files with 91 additions and 9 deletions.
4 changes: 2 additions & 2 deletions dist/unipept-visualizations.js

Large diffs are not rendered by default.

9 changes: 8 additions & 1 deletion dist/visualizations/treeview/TreeviewSettings.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion examples/treeview-taxonomy.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
data,
{
width: 900,
height: 600
height: 600,
colorProviderLevels: 3
}
);
});
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
11 changes: 10 additions & 1 deletion src/visualizations/treeview/Treeview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
10 changes: 9 additions & 1 deletion src/visualizations/treeview/TreeviewSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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.
Expand Down
10 changes: 10 additions & 0 deletions types/test/TestConsts.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions types/test/TestDataGenerator.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default class TestDataGenerator {
generateSmall2DDataset(): number[][];
}
15 changes: 15 additions & 0 deletions types/test/TestUtils.d.ts
Original file line number Diff line number Diff line change
@@ -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>;
2 changes: 1 addition & 1 deletion types/utilities/TooltipUtilities.d.ts
Original file line number Diff line number Diff line change
@@ -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>;
}
12 changes: 12 additions & 0 deletions types/visualizations/sunburst/Sunburst.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions types/visualizations/treemap/Treemap.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions types/visualizations/treeview/Treeview.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion types/visualizations/treeview/TreeviewSettings.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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.
Expand Down

0 comments on commit 807a02c

Please sign in to comment.