From 85dec858c5d213699fbc2cefa388ba1e80c94889 Mon Sep 17 00:00:00 2001 From: Benoit Perigaud <8754100+b-per@users.noreply.github.com> Date: Fri, 5 Aug 2022 04:28:30 +1000 Subject: [PATCH] Support node_color and docs.show under the config object (#281) * hard coded to start * add a node color config * play with this more * add placeholder snippets * working dynamic node colors * docs node_color config works * remove debugging logs and comments * remove newlines * Allow node_color and check show under config.docs * Support doc.show from the config object * Do color validation on the dbt-docs side * remove config properties * revert this * Read from docs.node_color instead of config.docs.node_color * Fetch latest CHANGELOG * Add support for `node_color` Co-authored-by: Matt Winkler Co-authored-by: Sung Won Chung --- CHANGELOG.md | 2 + src/app/services/graph.service.js | 19 ++- src/app/services/validate_node_color.js | 157 ++++++++++++++++++++++++ 3 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 src/app/services/validate_node_color.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d0064511..a5fc1d87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,9 +6,11 @@ - Update dependency webpack-dev-server from ^3.1.11 to ^4.9.3 ([#291](https://github.com/dbt-labs/dbt-docs/issues/291)) - Searches no longer require perfect matches, and instead consider each word individually. `my model` or `model my` will now find `my_model`, without the need for underscores ([docs#145](https://github.com/fishtown-analytics/dbt-docs/pull/145)) - Support the renaming of SQL to code happening in dbt-core ([#292](https://github.com/dbt-labs/dbt-docs/issues/292)) +- Leverages `docs.node_color` from `dbt-core` to color nodes in the DAG ([#281](https://github.com/dbt-labs/dbt-docs/pull/281)) Contributors: - [@joellabes](https://github.com/joellabes) ([docs#145](https://github.com/dbt-labs/dbt-docs/pull/145)) +- [@matt-winkler](https://github.com/matt-winkler) [@sungchun12](https://github.com/sungchun12) [@b-per](https://github.com/b-per) ([#281](https://github.com/dbt-labs/dbt-docs/pull/281)) ## dbt-core 1.2.0 (July 26, 2022) diff --git a/src/app/services/graph.service.js b/src/app/services/graph.service.js index bb1c1b09..36b1209d 100644 --- a/src/app/services/graph.service.js +++ b/src/app/services/graph.service.js @@ -4,6 +4,7 @@ const _ = require('underscore'); const graphlib = require('graphlib'); const selectorGraph = require('./selector_graph'); +const colorValidation = require('./validate_node_color'); angular .module('dbt') @@ -191,6 +192,12 @@ angular 'background-color': '#ff5688', } }, + { + selector: 'node[node_color]', + style: { + 'background-color': 'data(node_color)', + } + }, { selector: 'node[selected=1]', style: { @@ -301,12 +308,20 @@ angular el.data['selected'] = 1; } - if (el.data.docs && el.data.docs.show === false) { + // models can be hidden if docs.show === false + if (! ( _.get(el,['data', 'docs','show'],true)) ) { el.data['hidden'] = 1; } + + // models can be shown in a different color if docs.node_color is set + // we also validate that the color is either a valid hex color or a valid color name + var color_config = _.get(el, ['data', 'docs', 'node_color']) + if (color_config && colorValidation.isValidColor(color_config)) { + el.data['node_color'] = color_config; + } + }); service.graph.elements = _.filter(elements, function(e) { return e.data.display == 'element'}); - return node_ids; } diff --git a/src/app/services/validate_node_color.js b/src/app/services/validate_node_color.js new file mode 100644 index 00000000..b4fb5e46 --- /dev/null +++ b/src/app/services/validate_node_color.js @@ -0,0 +1,157 @@ +const colorSet = new Set([ + 'aliceblue', + 'antiquewhite', + 'aqua', + 'aquamarine', + 'azure', + 'beige', + 'bisque', + 'black', + 'blanchedalmond', + 'blue', + 'blueviolet', + 'brown', + 'burlywood', + 'cadetblue', + 'chartreuse', + 'chocolate', + 'coral', + 'cornflowerblue', + 'cornsilk', + 'crimson', + 'cyan', + 'darkblue', + 'darkcyan', + 'darkgoldenrod', + 'darkgray', + 'darkgreen', + 'darkkhaki', + 'darkmagenta', + 'darkolivegreen', + 'darkorange', + 'darkorchid', + 'darkred', + 'darksalmon', + 'darkseagreen', + 'darkslateblue', + 'darkslategray', + 'darkturquoise', + 'darkviolet', + 'deeppink', + 'deepskyblue', + 'dimgray', + 'dodgerblue', + 'firebrick', + 'floralwhite', + 'forestgreen', + 'fuchsia', + 'ghostwhite', + 'gold', + 'goldenrod', + 'gray', + 'green', + 'greenyellow', + 'honeydew', + 'hotpink', + 'indianred', + 'indigo', + 'ivory', + 'khaki', + 'lavender', + 'lavenderblush', + 'lawngreen', + 'lemonchiffon', + 'lightblue', + 'lightcoral', + 'lightcyan', + 'lightgoldenrodyellow', + 'lightgray', + 'lightgreen', + 'lightpink', + 'lightsalmon', + 'lightsalmon', + 'lightseagreen', + 'lightskyblue', + 'lightslategray', + 'lightsteelblue', + 'lightyellow', + 'lime', + 'limegreen', + 'linen', + 'magenta', + 'maroon', + 'mediumaquamarine', + 'mediumblue', + 'mediumorchid', + 'mediumpurple', + 'mediumseagreen', + 'mediumslateblue', + 'mediumslateblue', + 'mediumspringgreen', + 'mediumturquoise', + 'mediumvioletred', + 'midnightblue', + 'mintcream', + 'mistyrose', + 'moccasin', + 'navajowhite', + 'navy', + 'oldlace', + 'olive', + 'olivedrab', + 'orange', + 'orangered', + 'orchid', + 'palegoldenrod', + 'palegreen', + 'paleturquoise', + 'palevioletred', + 'papayawhip', + 'peachpuff', + 'peru', + 'pink', + 'plum', + 'powderblue', + 'purple', + 'rebeccapurple', + 'red', + 'rosybrown', + 'royalblue', + 'saddlebrown', + 'salmon', + 'sandybrown', + 'seagreen', + 'seashell', + 'sienna', + 'silver', + 'skyblue', + 'slateblue', + 'slategray', + 'snow', + 'springgreen', + 'steelblue', + 'tan', + 'teal', + 'thistle', + 'tomato', + 'turquoise', + 'violet', + 'wheat', + 'white', + 'whitesmoke', + 'yellow', + 'yellowgreen', + ]); + + + export function isValidColor(color) { + if (!color) return false; // empty string, null, undefined + + const serialized = color.trim().toLowerCase(); + if (serialized === '') return false; // only spaces + + const isHex = serialized.match(/^#([A-Fa-f0-9]{3}){1,2}$/); + const isColor = colorSet.has(serialized); + + return Boolean(isHex) || isColor; + } \ No newline at end of file