Added "Referenced By" and "Depends On" section for each SQL file

Gemfile.lock

@@ -0,0 +1,61 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.6)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.13.1)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.7)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.2.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.5)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.20.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.8)
+
+BUNDLED WITH
+   2.1.4

src/app/components/references/index.js

@@ -36,6 +36,8 @@ angular
                     return 'Snapshots'
                 } else if (type == 'analysis') {
                     return 'Analyses';
+                } else if (type == 'macro') {
+                      return 'Macros';
                 } else {
                     return 'Nodes';
                 }

src/app/components/search/search.html

@@ -22,7 +22,7 @@ <h1>
     <div class="app-details">
         <div class="app-frame app-pad">
             <div class="results">
-                <div ng-repeat="result in results | filter:limit_search | orderBy:'-model.name':true track by result.model.unique_id"
+                <div ng-repeat="result in results | filter: limit_search | orderBy:'-model.name':true track by result.model.unique_id"
                      data-ui-state="getState(result.model)" data-ui-state-params="{unique_id: result.model.unique_id}"
                      ng-click="onSelect()"
                      class="result search-result a">
@@ -38,7 +38,7 @@ <h4 class="a">
                                 <p ng-bind-html="highlight(result.model.description)"></p>
                             </div>
                         </div>
-                    <div class="sub-results" ng-show="query.length > 0">
+                        <div class="sub-results" ng-show="query.length > 0">
                         <span ng-repeat="column in columnFilter(result.model.columns) | limitTo:limitColumns(result.model.unique_id)">
                             <span ng-show="$first === true">columns:</span>
                             <span ng-bind-html="highlight(column + ',')" ng-show="$last === false"></span>
@@ -47,14 +47,14 @@ <h4 class="a">
                         <a
                             ng-show="columnFilter(result.model.columns).length > max_results_columns && !limit_columns[result.model.unique_id]"
                             ng-click="$event.stopPropagation(); limit_columns[result.model.unique_id] = 100">Show {{ columnFilter(result.model.columns).length - max_results_columns }} more</a>
-                    </div>
-                    <div class="sub-results" ng-show="query.length > 0">
+                        </div>
+                        <div class="sub-results" ng-show="query.length > 0">
                         <span ng-repeat="tag in result.model.tags">
                             <span ng-show="$first === true">tags:</span>
                             <span ng-bind-html="highlight(tag + ',')" ng-show="$last === false"></span>
                             <span ng-bind-html="highlight(tag)" ng-show="$last === true"></span>
                         </span>
-                    </div>
+                        </div>
                 </div>
                 <a
                     ng-show="results.length >= max_results && !show_all"

src/app/components/search/search.js

@@ -15,7 +15,7 @@ angular
         templateUrl: template,
 
         link: function(scope) {
-            scope.max_results = 20;
+            scope.max_results = 20;                                             //# of results on the page at once
             scope.show_all = false;
             scope.max_results_columns = 3;
             scope.limit_columns = {};

src/app/docs/analysis.html

@@ -33,8 +33,10 @@ <h1>
         </div>
         <div class="app-frame app-pad-h">
             <ul class="nav nav-tabs">
-                <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'description'})">Description</a></li>
-                <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'sql'})">SQL</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'description'})">Description</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'referenced_by'})">Referenced By</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'depends_on'})">Depends On</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'sql'})">SQL</a></li>
             </ul>
         </div>
     </div>
@@ -54,6 +56,22 @@ <h6>Description</h6>
                 </div>
             </section>
 
+            <section class="section">
+                <div class="section-target" id="referenced_by"></div>
+                <div class="section-content">
+                    <h6>Referenced By</h6>
+                    <reference-list references="references" />
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" />
+                </div>
+            </section>
+
             <section class="section">
                 <div class="section-target" id="sql"></div>
                 <div class="section-content">

src/app/docs/analysis.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const angular = require('angular');
+const utils = require('./utils')
 require("./styles.css");
 
 angular
@@ -20,7 +21,10 @@ angular
 
     $scope.model = {};
     projectService.ready(function(project) {
-        $scope.model = project.nodes[$scope.model_uid];
+        let mod = project.nodes[$scope.model_uid];
+        $scope.model = mod;
+        $scope.references = utils.getReferences(project, mod);
+        $scope.parents = utils.getParents(project, mod);
 
         $scope.versions = {
             'Source': $scope.model.raw_sql,

src/app/docs/macro.html

@@ -31,6 +31,7 @@ <h1>
                 <li ui-sref-active='active'><a ui-sref="dbt.macro({'#': 'description'})">Description</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.macro({'#': 'arguments'})">Arguments</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.macro({'#': 'referenced_by'})">Referenced By</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.macro({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.macro({'#': 'code'})">Code</a></li>
             </ul>
         </div>
@@ -51,7 +52,7 @@ <h6>Description</h6>
             </section>
 
             <section class="section">
-                <div class="section-target" id="columns"></div>
+                <div class="section-target" id="arguments"></div>
                 <div class="section-content">
                     <h6>Arguments</h6>
                     <macro-arguments macro="macro"></macro-arguments>
@@ -66,6 +67,14 @@ <h6>Referenced By</h6>
                 </div>
             </section>
 
+            <section class="section">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" />
+                </div>
+            </section>
+
             <section class="section">
                 <div class="section-target" id="code"></div>
                 <div class="section-content">

src/app/docs/macro.js

@@ -15,25 +15,47 @@ angular
     $scope.project = projectService;
     $scope.codeService = codeService;
 
-    function getReferences(project, macro) {
-        var references = _.filter(project.nodes, function(node) {
+    function getReferences(project, self) {
+        let references = _.filter(project.nodes, function(node) {
             if (node.depends_on && node.depends_on.macros && node.depends_on.macros.length) {
-                if (_.contains(node.depends_on.macros, macro.unique_id)) {
+                if (_.contains(node.depends_on.macros, self.unique_id)) {
                     return true;
                 }
             }
             return false;
         });
 
-        // TODO : include macros?
-        return _.groupBy(references, 'resource_type');
+        let macroReferences = _.filter(project.macros, function(macro) {
+            if (macro.depends_on && macro.depends_on.macros && macro.depends_on.macros.length) {
+                if (_.contains(macro.depends_on.macros, self.unique_id)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+
+        return _.groupBy(references.concat(macroReferences), 'resource_type');
+    }
+
+    function getMacroParents (project, self) {
+        let macroParents = _.filter(project.macros, function(macro) {
+            if (self.depends_on && self.depends_on.macros && self.depends_on.macros.length) {
+                if (_.contains(self.depends_on.macros, macro.unique_id)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+
+        return _.groupBy(macroParents, 'resource_type');
     }
 
     $scope.macro = {};
     projectService.ready(function(project) {
-        var macro = project.macros[$scope.model_uid];
+        let macro = project.macros[$scope.model_uid];
         $scope.macro = macro;
         $scope.references = getReferences(project, macro);
+        $scope.parents = getMacroParents(project, macro);
 
         // adapter macros
         if ($scope.macro.is_adapter_macro) {

src/app/docs/model.html

@@ -36,6 +36,8 @@ <h1>
                 <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'details'})">Details</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'description'})">Description</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'columns'})">Columns</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'referenced_by'})">Referenced By</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.model({'#': 'code'})">SQL</a></li>
             </ul>
         </div>
@@ -68,6 +70,22 @@ <h6>Columns</h6>
                 </div>
             </section>
 
+            <section class="section">
+                <div class="section-target" id="referenced_by"></div>
+                <div class="section-content">
+                    <h6>Referenced By</h6>
+                    <reference-list references="references" />
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" />
+                </div>
+            </section>
+
             <section class="section">
                 <div class="section-target" id="code"></div>
                 <div class="section-content">

src/app/docs/model.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const angular = require('angular');
+const utils = require('./utils')
 require("./styles.css");
 
 angular
@@ -12,7 +13,6 @@ angular
     $scope.tab = $state.params.tab;
     $scope.project = projectService;
     $scope.codeService = codeService;
-
     $scope.versions = {}
 
     $scope.copied = false;
@@ -28,7 +28,10 @@ angular
 
     $scope.model = {};
     projectService.ready(function(project) {
-        $scope.model = project.nodes[$scope.model_uid];
+        let mod = project.nodes[$scope.model_uid];
+        $scope.model = mod;
+        $scope.references = utils.getReferences(project, mod);
+        $scope.parents = utils.getParents(project, mod);
 
         var default_compiled = '\n-- compiled SQL not found for this model\n';
         $scope.versions = {

src/app/docs/seed.html

@@ -36,6 +36,8 @@ <h1>
                 <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'details'})">Details</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'description'})">Description</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'columns'})">Columns</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'referenced_by'})">Referenced By</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.seed({'#': 'code'})">SQL</a></li>
             </ul>
         </div>
@@ -67,6 +69,22 @@ <h6>Columns</h6>
                 </div>
             </section>
 
+            <section class="section">
+                <div class="section-target" id="referenced_by"></div>
+                <div class="section-content">
+                    <h6>Referenced By</h6>
+                    <reference-list references="references" />
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" />
+                </div>
+            </section>
+
             <section class="section">
                 <div class="section-target" id="code"></div>
                 <div class="section-content">

src/app/docs/seed.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const angular = require('angular');
+const utils = require('./utils')
 require("./styles.css");
 
 angular
@@ -17,7 +18,10 @@ angular
 
     $scope.model = {};
     projectService.ready(function(project) {
-        $scope.model = project.nodes[$scope.model_uid];
+        let mod = project.nodes[$scope.model_uid];
+        $scope.model = mod;
+        $scope.references = utils.getReferences(project, mod);
+        $scope.parents = utils.getParents(project, mod);
 
         $scope.versions = {
             'Example SQL': codeService.generateSourceSQL($scope.model)