Skip to content

Commit

Permalink
Support node_color and docs.show under the config object (#281)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
Co-authored-by: Sung Won Chung <[email protected]>
  • Loading branch information
3 people authored Aug 4, 2022
1 parent 12ba81f commit 85dec85
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 2 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
19 changes: 17 additions & 2 deletions src/app/services/graph.service.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -191,6 +192,12 @@ angular
'background-color': '#ff5688',
}
},
{
selector: 'node[node_color]',
style: {
'background-color': 'data(node_color)',
}
},
{
selector: 'node[selected=1]',
style: {
Expand Down Expand Up @@ -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;
}

Expand Down
157 changes: 157 additions & 0 deletions src/app/services/validate_node_color.js
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 85dec85

Please sign in to comment.