Improve metrics docs & DAG viz

CHANGELOG.md

@@ -2,6 +2,7 @@
 - [Snyk] Upgrade prismjs from 1.27.0 to 1.28.0 ([#271](https://github.com/dbt-labs/dbt-docs/issues/271))
 - Fixed sample SQL Code for sources when no database is defined ([docs#272](https://github.com/dbt-labs/dbt-docs/pull/272))
 - Run build and tests in CI checks ([docs#274](https://github.com/dbt-labs/dbt-docs/pull/274))
+- Improve metrics DAG viz and documentation page ([docs#285](https://github.com/dbt-labs/dbt-docs/pull/285))
 
 Contributors:
 - [@b-per](https://github.com/b-per) ([docs#272](https://github.com/dbt-labs/dbt-docs/pull/272))

src/app/components/search/search.js

@@ -45,6 +45,8 @@ angular
                     return model.source_name + "." + model.name;
                 } else if (model.resource_type == 'macro') {
                     return model.package_name + "." + model.name;
+                } else if (model.resource_type == 'metric') {
+                    return model.label;
                 } else {
                     return model.name;
                 }
@@ -62,7 +64,13 @@ angular
                 _.each(results, function(result){
                     _.each(result.matches, function(match){
                        if(!fileIDs.includes(result.model['unique_id'])){
-                           if((show_names && match.key === "name") || (show_descriptions && match.key === "description") || (show_columns && match.key === "columns") || (show_code && match.key === "raw_sql") || (show_tags && match.key === "tags")){
+                           let nameMatch = show_names && (match.key === "name" || match.key == 'label');
+                           let descriptionMatch = show_descriptions && match.key == "description";
+                           let columnsMatch = show_columns && match.key === "columns";
+                           let codeMatch = show_code && match.key === "raw_sql";
+                           let tagsMatch = show_tags && match.key === "tags";
+
+                           if(nameMatch || descriptionMatch || columnsMatch || codeMatch || tagsMatch) {
                             fileIDs.push(result.model['unique_id']);
                             finalResults.push(result);
                            }

src/app/docs/metric.html

@@ -21,7 +21,7 @@
             <div class="app-frame app-pad app-flush-bottom">
 
                 <h1>
-                    <span class="break">{{ metric.name }}</span>
+                    <span class="break">{{ metric.label }}</span>
                     <small>metric</small>
 
                     <div class='clearfix'></div>
@@ -34,6 +34,7 @@ <h1>
                 <li ui-sref-active='active'><a ui-sref="dbt.metric({'#': 'details'})">Details</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.metric({'#': 'description'})">Description</a></li>
                 <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.metric({'#': 'depends_on'})">Depends On</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.metric({'#': 'code'})">SQL</a></li>
             </ul>
         </div>
     </div>
@@ -66,6 +67,13 @@ <h6>Depends On</h6>
                 </div>
             </section>
 
+
+            <section class="section">
+                <div class="section-target" id="code"></div>
+                <div class="section-content">
+                    <code-block versions="versions" default="default_version"></code-block>
+                </div>
+            </section>
         </div>
     </div>
 </div>

src/app/docs/metric.js

@@ -23,5 +23,27 @@ angular
         $scope.parents = dag_utils.getParents(project, metric);
         $scope.parentsLength = $scope.parents.length;
 
+        $scope.versions = {
+            'Definition': codeService.generateMetricSQL($scope.metric)
+        }
+
+        let metric_type;
+        if ($scope.metric.type == 'expression') {
+            metric_type = 'Expression metric';
+        } else {
+            metric_type = 'Aggregate metric';
+        }
+
+        $scope.extra_table_fields = [
+            {
+                name: "Metric Type",
+                value: metric_type,
+            },
+            {
+                name: "Metric name",
+                value: $scope.metric.name
+            }
+        ]
+
     })
 }]);

src/app/services/code_service.js

@@ -56,6 +56,28 @@ angular
         return query.join("\n");
     }
 
+    service.generateMetricSQL = function(metric) {
+        if (metric.type == 'expression') {
+            return metric.sql
+        } else {
+            let query_parts = [
+                `select ${metric.type}(${metric.sql})` ,
+                `from {{ ${metric.model} }}`,
+            ]
+
+            if (metric.filters.length > 0) {
+                let filter_exprs = _.map(metric.filters, (filter) => {
+                    return `${filter.field} ${filter.operator} ${filter.value}`
+                })
+
+                let filters = filter_exprs.join(" AND ")
+                query_parts.push(`where ${filters}`)
+            }
+
+            return query_parts.join("\n")
+        }
+    }
+
     return service;
 
 }]);

src/app/services/graph.service.js

@@ -357,7 +357,7 @@ angular
                 var parent_node = service.manifest.nodes[parent];
                 var child_node = service.manifest.nodes[child];
 
-                if (!_.includes(['model', 'source', 'seed', 'snapshot'], parent_node.resource_type)) {
+                if (!_.includes(['model', 'source', 'seed', 'snapshot', 'metric'], parent_node.resource_type)) {
                     return;
                 } else if (child_node.resource_type == 'test' && child_node.hasOwnProperty('test_metadata')) {
                     return;

src/app/services/project_service.js

@@ -148,7 +148,6 @@ angular
 
             // Add metrics back into nodes to make site logic work
             _.each(service.files.manifest.metrics, function(node) {
-                node.label = node.name;
                 service.files.manifest.nodes[node.unique_id] = node;
             });
 
@@ -264,6 +263,7 @@ angular
             'columns':'object',
             'tags': 'array',
             'arguments': 'array',
+            'label': 'string',
         };
         var search = new RegExp(val, "i")
 
@@ -523,7 +523,7 @@ angular
 
             metrics[project].items.push({
                 type: 'file',
-                name: name,
+                name: node.label,
                 node: node,
                 active: is_active,
                 unique_id: node.unique_id,