Synchronize fork with main (#5)

### Description

Bring upstream features into the fork.

This includes semantic models and column constraints.

---------

Co-authored-by: Marco d'Amore <58502369+marcodamore@users.noreply.github.com>
Co-authored-by: Jeremy Cohen <jeremy@dbtlabs.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Github Build Bot <buildbot@fishtownanalytics.com>
Co-authored-by: Emily Rockman <emily.rockman@dbtlabs.com>

src/app/components/column_details/column_details.html

@@ -12,6 +12,7 @@
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Column</th>
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Type</th>
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Description</th>
+                        <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;">Constraints</th>
                         <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;">Tests</th>
                         <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;" class='text-center'>More?</th>
                     </tr>
@@ -34,6 +35,15 @@
                         <td style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 1px;">
                             <span ng-show="!column.expanded">{{ column.description }}</span>
                         </td>
+                        <td>
+                            <span class="text-light" ng-show="!column.expanded">
+                                <span data-toggle="tooltip" title="Not Null" ng-if="has_constraint(column, 'not_null')">N</span>
+                                <span data-toggle="tooltip" title="Primary Key" ng-if="has_constraint(column, 'primary_key')">PK</span>
+                                <span data-toggle="tooltip" title="Foreign Key" ng-if="has_constraint(column, 'foreign_key')">FK</span>
+                                <span data-toggle="tooltip" title="Check" ng-if="has_constraint(column, 'check')">C</span>
+                                <span data-toggle="tooltip" title="Custom" ng-if="has_constraint(column, 'custom')">+</span>
+                            </span>
+                        </td>
                         <td>
                             <span class="text-light" ng-show="!column.expanded">
                                 <span data-toggle="tooltip" title="Unique" ng-if="has_test(column, 'U')">U</span>
@@ -76,6 +86,23 @@ <h5>Description</h5>
                                     <span marked="column.description"></span>
                                 </div>
 
+                                <div ng-show="column.constraints && column.constraints.length" style="margin-bottom: 15px">
+                                    <h5>Constraints</h5>
+                                    <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="constraint in column.constraints">
+                                                <dt class="detail-label">Name</dt>
+                                                <dd class="detail-value">{{ constraint.name }}</dd>
+                                                <dt class="detail-label">Type</dt>
+                                                <dd class="detail-value">{{ constraint.type }}</dd>
+                                                <dt class="detail-label">Expression</dt>
+                                                <dd class="detail-value">{{ constraint.expression }}</dd>
+                                            </dl>
+                                        </div>
+                                    </div>
+                                </div>
+
                                 <div ng-show="column.tests && column.tests.length" style="margin-bottom: 15px">
                                     <h5>Generic Tests</h5>
                                     <ul class="list-unstyled" style="margin-top: 2px">

src/app/components/column_details/column_details.js

@@ -18,13 +18,18 @@ angular
                 var test_types = _.pluck(col.tests, 'short');
                 return test_types.indexOf(test_name) != -1;
             }
+
+            scope.has_constraint = function(col, constraint_name) {
+                return col.constraints.some(constraint => constraint.type === constraint_name)
+            }
 
             scope.has_more_info = function(column) {
                 var tests = (column.tests || []);
                 var description = (column.description || "");
                 var meta = (column.meta || {});
+                var constraints = (column.constraints || []);
 
-                return tests.length || description.length || !_.isEmpty(meta);
+                return tests.length || description.length || constraints.length || !_.isEmpty(meta);
             }
 
             scope.toggle_column_expanded = function(column) {

src/app/components/graph/graph-launcher.js

@@ -155,6 +155,8 @@ angular
                     var nodes = graph.showFullGraph('exposure:' + node.name);
                 } else if (node && node.resource_type == 'metric') {
                     var nodes = graph.showFullGraph('metric:' + node.name);
+                } else if (node && node.resource_type == 'semantic_model') {
+                    var nodes = graph.showFullGraph('semantic_model:' + node.name);
                 } else {
                     var nodes = graph.showFullGraph(node_name);
                 }
@@ -170,6 +172,8 @@ angular
                     var nodes = graph.showVerticalGraph('exposure:' + node.name, true);
                 } else if (node && node.resource_type == 'metric') {
                     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 {
                     var nodes = graph.showVerticalGraph(node.name, true);
                 }

src/app/components/model_tree/model_tree.html

@@ -78,6 +78,17 @@
                     </ul>
                     <br />
                 </div>
+
+                <div ng-show="tree.semantic_models.length > 0">
+                    <strong>Semantic Models</strong>
+                    <ul style="display: block">
+                        <model-tree-line
+                            item="item"
+                            resource-type="semantic_model"
+                            ng-repeat="item in tree.semantic_models"></model-tree-line>
+                    </ul>
+                    <br />
+                </div>
 
                 <strong>Projects</strong>
                 <ul>

src/app/components/references/index.js

@@ -40,13 +40,15 @@ angular
                 } else if (type == 'analysis') {
                     return 'Analyses';
                 } else if (type == 'macro') {
-                      return 'Macros';
+                    return 'Macros';
                 } else if (type == 'exposure') {
-                      return 'Exposures';
+                    return 'Exposures';
                 } else if (type == 'metric') {
-                      return 'Metrics';
+                    return 'Metrics';
+                } else if (type == 'semantic_model') {
+                    return 'Semantic Models';
                 } else if (type == 'operation') {
-                        return 'Operations';
+                    return 'Operations';
                 } else {
                     return 'Nodes';
                 }

src/app/components/search/search.js

@@ -48,6 +48,8 @@ angular
                     return model.package_name + "." + model.name;
                 } else if (model.resource_type == 'metric') {
                     return model.label;
+                } else if (model.resource_type == 'semantic_model') {
+                    return model.name;
                 } else if (model.resource_type == 'exposure') {
                     return model.label;
                 } else if (model.resource_type == 'model' && model.version != null) {

src/app/components/table_details/table_details.js

@@ -140,6 +140,10 @@ angular
                         name: "Version",
                         value: model.version
                     },
+                    {
+                        name: "Contract",
+                        value: model.config.contract.enforced ? "Enforced" : "Not Enforced"
+                    },
                 ]
 
                 return _.filter(stats, function(s) { return s.value !== undefined })

src/app/docs/index.js

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

src/app/docs/metric.html

@@ -34,7 +34,6 @@ <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>
@@ -67,13 +66,6 @@ <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" language="language"></code-block>
-                </div>
-            </section>
         </div>
     </div>
 </div>

src/app/docs/metric.js

@@ -23,10 +23,6 @@ angular
         $scope.parents = dag_utils.getParents(project, metric);
         $scope.parentsLength = $scope.parents.length;
 
-        $scope.versions = {
-            'Definition': codeService.generateMetricSQL($scope.metric)
-        }
-
         const metric_type =  $scope.metric.type === 'expression'
             ? 'Expression metric'
             : 'Aggregate metric';

src/app/docs/semantic_model.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">{{ semantic_model.name }}</span>
+                    <small>semantic_model</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.semantic_model({'#': 'details'})">Details</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.semantic_model({'#': 'description'})">Description</a></li>
+                <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.semantic_model({'#': '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="semantic_model" 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="semantic_model.description" class="model-markdown" marked="semantic_model.description"></div>
+                            <div ng-if="!semantic_model.description">This {{ semantic_model.resource_type }} is not currently documented</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section" ng-show = "semantic_model.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 semantic_model.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="semantic_model" />
+                </div>
+            </section>
+
+        </div>
+    </div>
+</div>

src/app/docs/semantic_model.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const angular = require('angular');
+const dag_utils = require('./dag_utils')
+require("./styles.css");
+
+angular
+.module('dbt')
+.controller('SemanticModelCtrl', ['$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.semantic_model = {};
+    projectService.ready(function(project) {
+        let semantic_model = project.nodes[$scope.model_uid];
+        $scope.semantic_model = semantic_model;
+        $scope.parents = dag_utils.getParents(project, semantic_model);
+        $scope.parentsLength = $scope.parents.length;
+
+        const semantic_model_type =  $scope.semantic_model.type === 'expression'
+            ? 'Expression semantic_model'
+            : 'Aggregate semantic_model';
+
+        $scope.extra_table_fields = [
+            {
+                name: "Semantic Model Type",
+                value: semantic_model_type,
+            },
+            {
+                name: "Semantic Model name",
+                value: $scope.semantic_model.name
+            }
+        ]
+
+    })
+}]);

src/app/graph/index.js

@@ -23,6 +23,8 @@ angular
                 return 'exposure:' + node.name;
             } else if (node && node.resource_type == 'metric') {
                 return 'metric:' + node.name;
+            } else if (node && node.resource_type == 'semantic_model') {
+                return 'semantic_model:' + node.name;
             } else if (node && node.resource_type == 'model' && node.version != null) {
                 return node.label;
             } else if (node.name)  {

src/app/index.routes.js

@@ -18,6 +18,7 @@ const templates = {
     macro: require('./docs/macro.html'),
     exposure: require('./docs/exposure.html'),
     metric: require('./docs/metric.html'),
+    semantic_model: require('./docs/semantic_model.html'),
     operation: require('./docs/operation.html'),
 }
 
@@ -133,6 +134,14 @@ angular
                 unique_id: {type: 'string'}
             },
         })
+        .state('dbt.semantic_model', {
+            url: 'semantic_model/:unique_id?section&' + graph_params,
+            controller: 'SemanticModelCtrl',
+            templateUrl: templates.semantic_model,
+            params: {
+                unique_id: {type: 'string'}
+            },
+        })
         .state('dbt.operation', {
             url: 'operation/:unique_id?section&' + graph_params,
             controller: 'OperationCtrl',

src/app/main/index.js

@@ -87,6 +87,7 @@ angular
         $scope.tree.sources = tree.sources;
         $scope.tree.exposures = tree.exposures;
         $scope.tree.metrics = tree.metrics;
+        $scope.tree.semantic_models = tree.semantic_models;
         $scope.tree.groups = tree.groups;
 
         setTimeout(function() {

src/app/services/code_service.js

@@ -65,28 +65,6 @@ angular
         return query.join("\n");
     }
 
-    service.generateMetricSQL = function(metric) {
-        if (metric.calculation_method == 'derived') {
-            return "-- derived\n" + metric.expression;
-        }
-
-        const queryParts = [
-            `select ${metric.calculation_method}(${metric.expression})` ,
-            `from {{ ${metric.model} }}`,
-        ];
-
-        if (metric.filters.length > 0) {
-            const filterExprs = metric.filters.map(filter => (
-                `${filter.field} ${filter.operator} ${filter.value}`
-            ));
-
-            const filters = filterExprs.join(' AND ');
-            queryParts.push(`where ${filters}`);
-        }
-
-        return queryParts.join('\n');
-    }
-
     return service;
 
 }]);