Take two: distinguish nodes in DAG viz based on access

.changes/unreleased/Docs-20230307-104219.yaml

@@ -1,6 +1,6 @@
 kind: Docs
-body: Distiguish access type in the DAG with node shape.
+body: Distiguish node "access" in the DAG with node borders & opacity.
 time: 2023-03-07T10:42:19.044231-06:00
 custom:
-  Author: emmyoop
+  Author: emmyoop jtcohen6
   Issue: "378"

ci-project/dbt_project.yml

@@ -17,6 +17,7 @@ clean-targets:
 
 models:
   jaffle_shop:
+    +group: jaffle
     +materialized: table
     marts:
       core:
@@ -25,3 +26,6 @@ models:
     staging:
       +materialized: view
       +tags: ["staging", "hourly"]
+
+tests:
+  +group: jaffle

ci-project/models/groups.yml

@@ -0,0 +1,7 @@
+version: 2
+
+groups:
+  - name: jaffle
+    owner:
+      name: Chef Jaffle
+      email: [email protected]

ci-project/models/marts/core/schema.yml

@@ -2,7 +2,10 @@ version: 2
 
 models:
   - name: dim_customers
+    access: public
     description: This table has basic information about a customer, as well as some derived facts based on a customer's orders
+    docs:
+      node_color: crimson
 
     columns:
       - name: customer_id
@@ -33,6 +36,7 @@ models:
         description: Total value (AUD) of a customer's orders
 
   - name: fct_orders
+    access: public
     description: This table has basic information about orders, as well as some derived facts based on payments
 
     columns:

ci-project/models/staging/schema.yml

@@ -2,13 +2,17 @@ version: 2
 
 models:
   - name: stg_customers
+    access: private
+    docs:
+      node_color: crimson
     columns:
       - name: customer_id
         tests:
           - unique
           - not_null
 
   - name: stg_orders
+    access: private
     columns:
       - name: order_id
         tests:
@@ -20,6 +24,7 @@ models:
               values: ['placed', 'shipped', 'completed', 'return_pending', 'returned']
 
   - name: stg_payments
+    access: private
     meta:
         owner: "@drew"
         contains_pii: true

src/app/services/graph.service.js

@@ -137,6 +137,7 @@ angular
                     style: {
                         'text-margin-x': '5px',
                         'background-color': '#0094b3',
+                        'border-color': '#0094b3',
                         'font-size': '16px',
                         'shape': 'ellipse',
                         'color': '#fff',
@@ -153,6 +154,7 @@ angular
                     selector: 'node.horizontal',
                     style: {
                         'background-color': '#0094b3',
+                        'border-color': '#0094b3',
                         'font-size': '24px',
                         'shape': 'roundrectangle',
                         'color': '#fff',
@@ -178,67 +180,72 @@ angular
                     selector: 'node[resource_type="source"]',
                     style: {
                         'background-color': '#5fb825',
+                        'border-color': '#5fb825',
                     }
                 },
                 {
                     selector: 'node[resource_type="exposure"]',
                     style: {
                         'background-color': '#ff694b',
+                        'border-color': '#ff694b',
                     }
                 },
                 {
                     selector: 'node[resource_type="metric"]',
                     style: {
                         'background-color': '#ff5688',
+                        'border-color': '#ff5688',
                     }
                 },
                 {
                     selector: 'node[language="python"]',
                     style: {
                         'background-color': '#6a5acd',
+                        'border-color': '#6a5acd',
                     }
                 },
                 {
                     selector: 'node[node_color]',
                     style: {
                         'background-color': 'data(node_color)',
+                        'border-color': 'data(node_color)',
                     }
                 },
                 {
                     selector: 'node[selected=1]',
                     style: {
                         'background-color': '#bd6bb6',
+                        'border-color': '#bd6bb6',
                     }
                 },
                 {
                     selector: 'node.horizontal[selected=1]',
                     style: {
-                        'background-color': '#88447d'
+                        'background-color': '#88447d',
+                        'border-color': '#88447d',
                     }
                 },
                 {
                     selector: 'node.horizontal.dirty',
                     style: {
                         'background-color': '#919599',
+                        'border-color': '#919599',
                     }
                 },
                 {
                     selector: 'node[hidden=1]',
                     style: {
                         'background-color': '#919599',
+                        'border-color': '#919599',
                         'background-opacity': 0.5,
                     }
                 },
                 {
                     selector: 'node[access="private"]',
                     style: {
-                        'shape': 'rectangle',
-                    }
-                },
-                {
-                    selector: 'node[access="public"]',
-                    style: {
-                        'shape': 'ellipse',
+                        'background-opacity': 0.2,
+                        'border-width': 2,
+                        'ghost': 'no',
                     }
                 },
             ],