( •́ _ •̀) Make saved query work in docs

.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"

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);
  }

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

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 {

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) {

src/app/docs/index.js

@@ -9,4 +9,5 @@ require('./analysis');
 require('./exposure');
 require('./metric');
 require('./semantic_model');
+require('./saved_query');
 require('./operation');

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>

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
+ }
+ ]
+
+ })
+}]);

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) {

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',

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() {

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;

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 {