From b204005b8e3845f1999598aa3b5af93dea85936f Mon Sep 17 00:00:00 2001
From: Chenyu Li <chenyu.li@dbtlabs.com>
Date: Tue, 21 May 2024 15:01:53 -0700
Subject: [PATCH] Make saved query work in docs (#510)

---
 .changes/unreleased/Docs-20240516-223036.yaml |  6 ++
 package-lock.json                             |  1 +
 src/app/components/graph/graph-launcher.js    |  4 +
 src/app/components/model_tree/model_tree.html | 12 +++
 src/app/components/references/index.js        |  2 +
 src/app/components/search/search.js           |  2 +
 src/app/docs/index.js                         |  1 +
 src/app/docs/saved_query.html                 | 97 +++++++++++++++++++
 src/app/docs/saved_query.js                   | 42 ++++++++
 src/app/graph/index.js                        |  2 +
 src/app/index.routes.js                       |  9 ++
 src/app/main/index.js                         |  1 +
 src/app/services/graph.service.js             | 11 ++-
 src/app/services/node_selection_service.js    |  9 +-
 src/app/services/project_service.js           | 56 ++++++++++-
 src/app/services/selector_matcher.js          | 26 ++++-
 src/app/services/selector_methods.test.js     | 15 +++
 17 files changed, 287 insertions(+), 9 deletions(-)
 create mode 100644 .changes/unreleased/Docs-20240516-223036.yaml
 create mode 100644 src/app/docs/saved_query.html
 create mode 100644 src/app/docs/saved_query.js

diff --git a/.changes/unreleased/Docs-20240516-223036.yaml b/.changes/unreleased/Docs-20240516-223036.yaml
new file mode 100644
index 000000000..1eb760396
--- /dev/null
+++ b/.changes/unreleased/Docs-20240516-223036.yaml
@@ -0,0 +1,6 @@
+kind: Docs
+body: Add support for Saved Query node
+time: 2024-05-16T22:30:36.206492-07:00
+custom:
+  Author: ChenyuLInx
+  Issue: "486"
diff --git a/package-lock.json b/package-lock.json
index d08a16bc9..47b57c19f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18017,6 +18017,7 @@
     },
     "cytoscape": {
       "version": "git+ssh://git@github.com/dbt-labs/cytoscape.js.git#b8a1192c270de70296a0381bd0bfe26a5ddeada3",
+      "integrity": "sha512-CJDw3nomL5E4OgviTrBhkfLCVaA5bDS5BTuLKY0Qk+/AK75Quue/e5z68RCpwe2G7XMoPjosP0xOrAje2dn6HQ==",
       "dev": true,
       "from": "cytoscape@https://github.com/dbt-labs/cytoscape.js.git#feature/cubic-bezier-edges",
       "requires": {
diff --git a/src/app/components/graph/graph-launcher.js b/src/app/components/graph/graph-launcher.js
index 8545f7dd3..1cf65a7ca 100644
--- a/src/app/components/graph/graph-launcher.js
+++ b/src/app/components/graph/graph-launcher.js
@@ -157,6 +157,8 @@ angular
                     var nodes = graph.showFullGraph('metric:' + node.name);
                 } else if (node && node.resource_type == 'semantic_model') {
                     var nodes = graph.showFullGraph('semantic_model:' + node.name);
+                } else if (node && node.resource_type == 'saved_query') {
+                    var nodes = graph.showFullGraph('saved_query:' + node.name);
                 } else {
                     var nodes = graph.showFullGraph(node_name);
                 }
@@ -174,6 +176,8 @@ angular
                     var nodes = graph.showVerticalGraph('metric:' + node.name, true);
                 } else if (node && node.resource_type == 'semantic_model') {
                     var nodes = graph.showVerticalGraph('semantic_model:' + node.name, true);
+                } else if (node && node.resource_type == 'saved_query') {
+                    var nodes = graph.showVerticalGraph('saved_query:' + node.name, true);
                 } else {
                     var nodes = graph.showVerticalGraph(node.name, true);
                 }
diff --git a/src/app/components/model_tree/model_tree.html b/src/app/components/model_tree/model_tree.html
index db7f31e16..53b188cf6 100644
--- a/src/app/components/model_tree/model_tree.html
+++ b/src/app/components/model_tree/model_tree.html
@@ -90,6 +90,18 @@
                     <br />
                 </div>
 
+
+                <div ng-show="tree.saved_queries.length > 0">
+                    <strong>Saved Queries</strong>
+                    <ul style="display: block">
+                        <model-tree-line
+                            item="item"
+                            resource-type="saved_query"
+                            ng-repeat="item in tree.saved_queries"></model-tree-line>
+                    </ul>
+                    <br />
+                </div>
+
                 <strong>Projects</strong>
                 <ul>
                     <model-tree-line
diff --git a/src/app/components/references/index.js b/src/app/components/references/index.js
index 89874b408..bdcba533b 100644
--- a/src/app/components/references/index.js
+++ b/src/app/components/references/index.js
@@ -49,6 +49,8 @@ angular
                     return 'Metrics';
                 } else if (type == 'semantic_model') {
                     return 'Semantic Models';
+                } else if (type == 'saved_query') {
+                    return 'Saved Queries';
                 } else if (type == 'operation') {
                     return 'Operations';
                 } else {
diff --git a/src/app/components/search/search.js b/src/app/components/search/search.js
index c6bee4423..6b8f9c3d3 100644
--- a/src/app/components/search/search.js
+++ b/src/app/components/search/search.js
@@ -50,6 +50,8 @@ angular
                     return model.label;
                 } else if (model.resource_type == 'semantic_model') {
                     return model.name;
+                } else if (model.resource_type == 'saved_query') {
+                    return model.name;
                 } else if (model.resource_type == 'exposure') {
                     return model.label;
                 } else if (model.resource_type == 'model' && model.version != null) {
diff --git a/src/app/docs/index.js b/src/app/docs/index.js
index 19c501f6e..f8b99c004 100644
--- a/src/app/docs/index.js
+++ b/src/app/docs/index.js
@@ -9,4 +9,5 @@ require('./analysis');
 require('./exposure');
 require('./metric');
 require('./semantic_model');
+require('./saved_query');
 require('./operation');
diff --git a/src/app/docs/saved_query.html b/src/app/docs/saved_query.html
new file mode 100644
index 000000000..3e1747415
--- /dev/null
+++ b/src/app/docs/saved_query.html
@@ -0,0 +1,97 @@
+<style>
+/* TODO */
+.section-target {
+    top: -8em;
+}
+
+.noflex {
+    flex: 0 0 160px !important;
+}
+
+.highlight {
+    color: #24292e;
+    background-color: white;
+}
+
+</style>
+
+<div class='app-scroll'>
+    <div class="app-links app-sticky">
+        <div class="app-title">
+            <div class="app-frame app-pad app-flush-bottom">
+
+                <h1>
+                    <span class="break">{{ saved_query.name }}</span>
+                    <small>saved_query</small>
+
+                    <div class='clearfix'></div>
+                </h1>
+
+            </div>
+        </div>
+        <div class="app-frame app-pad-h">
+            <ul class="nav nav-tabs">
+                <li ui-sref-active='active'><a ui-sref="dbt.saved_query({'#': 'details'})">Details</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.saved_query({'#': 'description'})">Description</a></li>
+                <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.saved_query({'#': 'depends_on'})">Depends On</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="app-details">
+        <div class="app-frame app-pad">
+
+            <section class="section">
+                <div class="section-target" id="details"></div>
+                <table-details model="saved_query" extras="extra_table_fields" />
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="description"></div>
+                <div class="section-content">
+                    <h6>Description</h6>
+                    <div class="panel">
+                        <div class="panel-body">
+                            <div ng-if="saved_query.description" class="model-markdown" marked="saved_query.description"></div>
+                            <div ng-if="!saved_query.description">This {{ saved_query.resource_type }} is not currently documented</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section" ng-show = "saved_query.entities.length != 0">
+                <div class="section-target" id="entities"></div>
+                <div class="section-content">
+                    <h6>Entities</h6>
+
+                <div class="panel">
+                    <div class="detail-group" style="padding-bottom: 0">
+                        <div class="detail-body" style="padding-left: 0">
+                            <dl class="detail" ng-style="{'padding-left': $index == 0 ? 0 : 'auto'}"
+                                ng-repeat="entity in saved_query.entities">
+                                <dt class="detail-label">Name</dt>
+                                <dd class="detail-value" ng-if="entity.name">{{ entity.name }}</dd>
+                                <dd class="detail-value" ng-if="!entity.name">None</dd>
+                                <dt class="detail-label">Type</dt>
+                                <dd class="detail-value" ng-if="entity.type">{{ entity.type }}</dd>
+                                <dd class="detail-value" ng-if="!entity.type">None</dd>
+                                <dt class="detail-label">Expression</dt>
+                                <dd class="detail-value" ng-if="entity.expr">{{ entity.expr }}</dd>
+                                <dd class="detail-value" ng-if="!entity.expr">None</dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+            <section class="section" ng-show = "parentsLength != 0">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" node="saved_query" />
+                </div>
+            </section>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/docs/saved_query.js b/src/app/docs/saved_query.js
new file mode 100644
index 000000000..71426daf9
--- /dev/null
+++ b/src/app/docs/saved_query.js
@@ -0,0 +1,42 @@
+'use strict';
+
+const angular = require('angular');
+const dag_utils = require('./dag_utils')
+require("./styles.css");
+
+angular
+.module('dbt')
+.controller('SavedQueryCtrl', ['$scope', '$state', 'project', 'code', '$anchorScroll', '$location',
+            function($scope, $state, projectService, codeService, $anchorScroll, $location) {
+
+    $scope.model_uid = $state.params.unique_id;
+    $scope.project = projectService;
+
+    $scope.codeService = codeService;
+    $scope.extra_table_fields = [];
+    $scope.versions = {};
+
+    $scope.saved_query = {};
+    projectService.ready(function(project) {
+        let saved_query = project.nodes[$scope.model_uid];
+        $scope.saved_query = saved_query;
+        $scope.parents = dag_utils.getParents(project, saved_query);
+        $scope.parentsLength = $scope.parents.length;
+
+        const saved_query_type =  $scope.saved_query.type === 'expression'
+            ? 'Expression saved_query'
+            : 'Aggregate saved_query';
+
+        $scope.extra_table_fields = [
+            {
+                name: "Saved Query Type",
+                value: saved_query_type,
+            },
+            {
+                name: "Saved Query name",
+                value: $scope.saved_query.name
+            }
+        ]
+
+    })
+}]);
\ No newline at end of file
diff --git a/src/app/graph/index.js b/src/app/graph/index.js
index 78255ecd7..f82fde092 100644
--- a/src/app/graph/index.js
+++ b/src/app/graph/index.js
@@ -25,6 +25,8 @@ angular
                 return 'metric:' + node.name;
             } else if (node && node.resource_type == 'semantic_model') {
                 return 'semantic_model:' + node.name;
+            } else if (node && node.resource_type == 'saved_query') {
+                return 'saved_query:' + node.name;
             } else if (node && node.resource_type == 'model' && node.version != null) {
                 return node.label;
             } else if (node.name)  {
diff --git a/src/app/index.routes.js b/src/app/index.routes.js
index 3986e2e22..6e7232843 100644
--- a/src/app/index.routes.js
+++ b/src/app/index.routes.js
@@ -20,6 +20,7 @@ const templates = {
     exposure: require('./docs/exposure.html'),
     metric: require('./docs/metric.html'),
     semantic_model: require('./docs/semantic_model.html'),
+    saved_query: require('./docs/saved_query.html'),
     operation: require('./docs/operation.html'),
 }
 
@@ -151,6 +152,14 @@ angular
                 unique_id: {type: 'string'}
             },
         })
+        .state('dbt.saved_query', {
+            url: 'saved_query/:unique_id?section&' + graph_params,
+            controller: 'SavedQueryCtrl',
+            templateUrl: templates.saved_query,
+            params: {
+                unique_id: {type: 'string'}
+            },
+        })
         .state('dbt.operation', {
             url: 'operation/:unique_id?section&' + graph_params,
             controller: 'OperationCtrl',
diff --git a/src/app/main/index.js b/src/app/main/index.js
index 484dcb1b9..aa899a8ff 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -88,6 +88,7 @@ angular
         $scope.tree.exposures = tree.exposures;
         $scope.tree.metrics = tree.metrics;
         $scope.tree.semantic_models = tree.semantic_models;
+        $scope.tree.saved_queries = tree.saved_queries;
         $scope.tree.groups = tree.groups;
 
         setTimeout(function() {
diff --git a/src/app/services/graph.service.js b/src/app/services/graph.service.js
index 8513d1d94..8e9793433 100644
--- a/src/app/services/graph.service.js
+++ b/src/app/services/graph.service.js
@@ -204,6 +204,13 @@ angular
                         'border-color': '#ffa8c2',
                     }
                 },
+                {
+                    selector: 'node[resource_type="saved_query"]',
+                    style: {
+                        'background-color': '#ff7f50',
+                        'border-color': '#ff7f50',
+                    }
+                },
                 {
                     selector: 'node[language="python"]',
                     style: {
@@ -380,7 +387,7 @@ angular
 
         _.each(_.filter(service.manifest.nodes, function(node) {
             // operation needs to be a graph type so that the parent/child map can be resolved even though we won't be displaying it
-            var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis', 'exposure', 'metric', 'semantic_model', 'operation'], node.resource_type);
+            var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis', 'exposure', 'metric', 'semantic_model', 'operation', 'saved_query'], node.resource_type);
             var is_singular_test = node.resource_type === 'test' && !node.hasOwnProperty('test_metadata');
             var is_unit_test = node.resource_type === 'unit_test';
             return is_graph_type || is_singular_test || is_unit_test;
@@ -402,7 +409,7 @@ angular
                 var parent_node = service.manifest.nodes[parent];
                 var child_node = service.manifest.nodes[child];
 
-                if (!_.includes(['model', 'source', 'seed', 'snapshot', 'metric', 'semantic_model'], parent_node.resource_type)) {
+                if (!_.includes(['model', 'source', 'seed', 'snapshot', 'metric', 'semantic_model', 'saved_query'], parent_node.resource_type)) {
                     return;
                 } else if (child_node.resource_type == 'test' && child_node.hasOwnProperty('test_metadata')) {
                     return;
diff --git a/src/app/services/node_selection_service.js b/src/app/services/node_selection_service.js
index d34f35f67..2844d3b1b 100644
--- a/src/app/services/node_selection_service.js
+++ b/src/app/services/node_selection_service.js
@@ -22,7 +22,8 @@ angular
             'analysis',
             'exposure',
             'metric',
-            'semantic_model'
+            'semantic_model',
+            'saved_query'
         ],
         depth: 1,
     };
@@ -38,7 +39,7 @@ angular
         options: {
             packages: [],
             tags: [null],
-            resource_types: ['model', 'seed', 'snapshot', 'source', 'test', 'analysis', 'exposure', 'metric', 'semantic_model', 'unit_test'],
+            resource_types: ['model', 'seed', 'snapshot', 'source', 'test', 'analysis', 'exposure', 'metric', 'semantic_model', 'unit_test', 'saved_query'],
         }
     };
 
@@ -64,6 +65,8 @@ angular
             include_selection = '+metric:' + node.name;
         } else if (node && node.resource_type == 'semantic_model') {
             include_selection = '+semantic_model:' + node.name;
+        } else if (node && node.resource_type == 'saved_query') {
+            include_selection = '+saved_query:' + node.name;
         } else if (node && _.includes(['analysis', 'test', 'unit_test'], node.resource_type)) {
             include_selection = '+' + node.name;
         } else {
@@ -96,7 +99,7 @@ angular
         if (node.resource_type == 'source') {
             pre += "source:"
             node_name = node.source_name + "." + node.name;
-        } else if (['exposure', 'metric', 'semantic_model'].indexOf(node.resource_type) > -1) {
+        } else if (['exposure', 'metric', 'semantic_model', 'saved_query'].indexOf(node.resource_type) > -1) {
             pre += node.resource_type + ":"
             node_name = node.name;
         } else {
diff --git a/src/app/services/project_service.js b/src/app/services/project_service.js
index 7e157ae43..15b98c2e8 100644
--- a/src/app/services/project_service.js
+++ b/src/app/services/project_service.js
@@ -185,6 +185,12 @@ angular
                 node.label = node.name;
             });
 
+            // Add saved queries back into nodes to make site logic work
+            _.each(service.files.manifest.saved_queries, function(node) {
+                service.files.manifest.nodes[node.unique_id] = node;
+                node.label = node.name;
+            });
+
             // Add unit tests into nodes
             _.each(service.files.manifest.unit_tests, function(node) {
                 service.files.manifest.nodes[node.unique_id] = node;
@@ -284,7 +290,7 @@ angular
             });
 
             var search_nodes = _.filter(service.project.nodes, function(node) {
-                return _.includes(['model', 'source', 'seed', 'snapshot', 'analysis', 'exposure', 'metric', 'semantic_model'], node.resource_type);
+                return _.includes(['model', 'source', 'seed', 'snapshot', 'analysis', 'exposure', 'metric', 'semantic_model', 'saved_query'], node.resource_type);
             });
 
             service.project.searchable = _.filter(search_nodes.concat(search_macros), function(obj) {
@@ -412,7 +418,7 @@ angular
                     return true;
                 }
 
-                var accepted = ['snapshot', 'source', 'seed', 'model', 'analysis', 'exposure', 'metric', 'semantic_model'];
+                var accepted = ['snapshot', 'source', 'seed', 'model', 'analysis', 'exposure', 'metric', 'semantic_model', 'saved_query'];
                 return _.includes(accepted, node.resource_type);
             })
 
@@ -432,6 +438,9 @@ angular
             var semantic_models = _.values(service.project.semantic_models);
             service.tree.semantic_models = buildSemanticModelTree(semantic_models, select);
 
+            var saved_queries = _.values(service.project.saved_queries);
+            service.tree.saved_queries = buildSavedQueryTree(saved_queries, select);
+
             cb(service.tree);
         });
     }
@@ -463,6 +472,7 @@ angular
         service.updateSelectedInTree(select, service.tree.exposures);
         service.updateSelectedInTree(select, service.tree.metrics);
         service.updateSelectedInTree(select, service.tree.semantic_models);
+        service.updateSelectedInTree(select, service.tree.saved_queries);
 
         return service.tree;
     }
@@ -646,6 +656,46 @@ angular
         return semantic_models
     }
 
+    function buildSavedQueryTree(nodes, select) {
+        var saved_queries = {}
+
+        _.each(nodes, function(node) {
+            var name = node.name;
+
+            var project = node.package_name;
+
+            var is_active = node.unique_id == select;
+
+            if (!saved_queries[project]) {
+                saved_queries[project] = {
+                    type: "folder",
+                    name: project,
+                    active: is_active,
+                    items: []
+                };
+            } else if (is_active) {
+                saved_queries[project].active = true;
+            }
+
+            saved_queries[project].items.push({
+                type: 'file',
+                name: node.name,
+                node: node,
+                active: is_active,
+                unique_id: node.unique_id,
+                node_type: 'saved_query'
+            })
+        });
+
+        var saved_queries = _.sortBy(_.values(saved_queries), 'name');
+
+        _.each(saved_queries, function(saved_query) {
+            saved_queries.items = _.sortBy(saved_queries.items, 'name');
+        });
+
+        return saved_queries
+    }
+
     function consolidateAdapterMacros(macros, adapter) {
         var adapter_macros = {};
         _.each(macros, function(macro) {
@@ -692,7 +742,7 @@ angular
 
         _.each(nodes.concat(macros), function(node) {
             var show = _.get(node, ['docs', 'show'], true);
-            if (node.resource_type == 'source' || node.resource_type == 'exposure' || node.resource_type == 'metric' || node.resource_type == 'semantic_model') {
+            if (node.resource_type == 'source' || node.resource_type == 'exposure' || node.resource_type == 'metric' || node.resource_type == 'semantic_model' || node.resource_type == 'saved_query') {
                 // no sources in the model tree, sorry
                 return;
             } else if (!show) {
diff --git a/src/app/services/selector_matcher.js b/src/app/services/selector_matcher.js
index 7e79a0815..ccd5dcc03 100644
--- a/src/app/services/selector_matcher.js
+++ b/src/app/services/selector_matcher.js
@@ -10,6 +10,7 @@ var SELECTOR_TYPE = {
     EXPOSURE: 'exposure',
     METRIC: 'metric',
     SEMANTIC_MODEL: 'semantic_model',
+    SAVED_QUERY: 'saved_query',
     GROUP: 'group',
     PATH: 'path',
     FILE: 'file',
@@ -27,6 +28,7 @@ NODE_MATCHERS[SELECTOR_TYPE.SOURCE] = getNodesBySource;
 NODE_MATCHERS[SELECTOR_TYPE.EXPOSURE] = getNodesByExposure;
 NODE_MATCHERS[SELECTOR_TYPE.METRIC] = getNodesByMetric;
 NODE_MATCHERS[SELECTOR_TYPE.SEMANTIC_MODEL] = getNodesBySemanticModel;
+NODE_MATCHERS[SELECTOR_TYPE.SAVED_QUERY] = getNodesBySavedQuery;
 NODE_MATCHERS[SELECTOR_TYPE.GROUP] = getNodesByGroup;
 NODE_MATCHERS[SELECTOR_TYPE.PATH] = getNodesByPath;
 NODE_MATCHERS[SELECTOR_TYPE.FILE] = getNodesByFile;
@@ -96,7 +98,8 @@ function getNodesByFQN(elements, qualified_name) {
           node.resource_type == 'source' || 
           node.resource_type == 'exposure' || 
           node.resource_type == 'metric' || 
-          node.resource_type == 'semantic_model'
+          node.resource_type == 'semantic_model' ||
+          node.resource_type == 'saved_query'
         ) {
             return;
         }
@@ -337,6 +340,27 @@ function getNodesBySemanticModel(elements, semantic_model) {
     return nodes;
 }
 
+function getNodesBySavedQuery(elements, saved_query) {
+    var nodes = [];
+    _.each(elements, function(node_obj) {
+        var node = node_obj.data;
+
+        if (node.resource_type != 'saved_query') {
+            return;
+        }
+
+        var saved_query_name = node.name;
+        var selected_saved_query_name = saved_query;
+
+        if (selected_saved_query_name == '*') {
+            nodes.push(node_obj.data);
+        } else if (selected_saved_query_name == saved_query_name) {
+            nodes.push(node_obj.data);
+        }
+    })
+    return nodes;
+}
+
 function getNodesByGroup(elements, group) {
     var nodes = [];
     _.each(elements, function(node_obj) {
diff --git a/src/app/services/selector_methods.test.js b/src/app/services/selector_methods.test.js
index feceb2c9a..0fde42b86 100644
--- a/src/app/services/selector_methods.test.js
+++ b/src/app/services/selector_methods.test.js
@@ -191,6 +191,21 @@ test("Test parsing specs (explicit semantic model)", () => {
     });
 })
 
+test("Test parsing specs (explicit saved query)", () => {
+    expect(
+        selectors.parseSpec('+saved_query:a')
+    ).toStrictEqual({
+        select_at: false,
+        select_children: false,
+        select_parents: true,
+        parents_depth: null,
+        children_depth: null,
+        selector_type: 'saved_query',
+        selector_value: 'a',
+        raw: '+saved_query:a',
+    });
+})
+
 test("Test parsing specs (scoped fqn)", () => {
     expect(
         selectors.parseSpec('a.b.c+')