Merge pull request #69 from fishtown-analytics/feature/add-macros

Add macros to the docs site.

src/app/components/code_block/code_block.html

@@ -0,0 +1,22 @@
+<h6>Code</h6>
+<div class="panel">
+    <div class="panel-body">
+        <ul class="nav nav-tabs">
+            <li
+                ng-repeat="(version_name, version) in versions"
+                ng-class="{active: version_name == selected_version}">
+                <a ng-click="setSelected(version_name)">{{ titleCase(version_name) }}</a>
+            </li>
+            <li class='nav-pull-right'></li>
+            <li>
+                <a class='unselectable'
+                   ng-click="copy_to_clipboard()">{{ copied ? 'copied' : 'copy to clipboard' }}</a>
+            </li>
+        </ul>
+        <div style="margin-top: 1px">
+            <pre
+                class="source-code highlight sql"
+                ng-bind-html="source"></pre>
+        </div>
+    </div>
+</div>

src/app/components/code_block/code_block.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const template = require('./code_block.html');
+
+angular
+.module('dbt')
+.directive('codeBlock', ['code', function(codeService) {
+    return {
+        scope: {
+            versions: '=',
+            default: '<',
+        },
+        restrict: 'E',
+        templateUrl: template,
+        link: function(scope) {
+            scope.selected_version = scope.default;
+            scope.raw_source = null;
+            scope.source = null;
+
+            function updateTo(name) {
+                scope.raw_source = scope.versions[name];
+                scope.source = codeService.highlightSql(scope.raw_source);
+            }
+
+            scope.setSelected = function(name) {
+                scope.selected_version = name;
+                updateTo(name);
+            }
+
+            scope.titleCase = function(name) {
+                return name.charAt(0).toUpperCase() + name.substring(1);
+            }
+
+            scope.copied = false;
+            scope.copy_to_clipboard = function() {
+                codeService.copy_to_clipboard(scope.raw_source)
+                scope.copied = true;
+                setTimeout(function() {
+                    scope.$apply(function() {
+                       scope.copied = false;
+                    })
+                }, 1000);
+            }
+
+            scope.$watch('versions', function(nv, ov) {
+                if (nv) {
+                    scope.setSelected(scope.default);
+                }
+            })
+        }
+    }
+}]);

src/app/components/column_details/column_details.html

@@ -3,7 +3,9 @@
         <div ng-if="_.isEmpty(model.columns)">
             Column information is not available for this seed
         </div>
-        <div class="table-responsive" style="max-height: 800px; overflow-y: scroll;" ng-if="!_.isEmpty(model.columns)">
+        <div class="table-responsive"
+             style="max-height: 800px; overflow-y: scroll;"
+             ng-if="!_.isEmpty(model.columns)">
             <table class="table table-borderless table-hover">
                 <thead>
                     <tr>

src/app/components/index.js

@@ -6,3 +6,6 @@ require('./model_tree/model_tree_line.js');
 require('./search/search.js');
 require('./table_details/table_details.js');
 require('./column_details/column_details.js');
+require('./code_block/code_block.js');
+require('./macro_arguments/');
+require('./references/');

src/app/components/macro_arguments/index.html

@@ -0,0 +1,73 @@
+<style>
+.arg-header {
+    background-color: white;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+</style>
+
+<div class="panel">
+    <div class="panel-body">
+        <div ng-if="macro.arguments.length == 0">
+            Details are not available for this macro
+        </div>
+        <div
+            ng-if="macro.arguments.length > 0"
+            class="table-responsive"
+            style="max-height: 800px; overflow-y: scroll;">
+            <table class="table table-borderless table-hover">
+                <thead>
+                    <tr>
+                        <th class="arg-header">Argument</th>
+                        <th class="arg-header">Type</th>
+                        <th class="arg-header">Description</th>
+                        <th style="width: 1px;" class='text-center'>More?</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat-start="arg in macro.arguments"
+                        ng-click="arg.expanded = !arg.expanded"
+                        ng-class="{'column-row-selected': arg.expanded}"
+                        ng-style="{cursor: arg.description ? 'pointer' : 'auto'}"
+                        class="column-row">
+                        <td>
+                            <div>
+                                <span class='text-dark'>{{ arg.name }}</span>
+                            </div>
+                        </td>
+                        <td>
+                            <span class='text-dark'>{{ arg.type }}</p>
+                        </td>
+                        <td style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 1px;">
+                            <span ng-show="!arg.expanded">{{ arg.description }}</span>
+                        </td>
+                        <td class='text-center'>
+                            <span class='text-light' ng-show="arg.description">
+                                <span ng-if="arg.expanded">
+                                    <svg class="icn"><use xlink:href="#icn-up"></use></svg>
+                                </span>
+                                <span ng-if="!arg.expanded">
+                                    <svg class="icn"><use xlink:href="#icn-right"></use></svg>
+                                </span>
+                            </span>
+                        </td>
+                    </tr>
+                    <tr ng-repeat-end
+                        ng-show="arg.expanded"
+                        style="background-color: white; padding: 10px">
+                        <td colspan="4" class="column-expanded">
+                            <div style="padding: 5px 20px">
+                                <div style="margin-bottom: 15px">
+                                    <h5>Description</h5>
+                                    <span marked="arg.description"></span>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

src/app/components/macro_arguments/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const template = require('./index.html');
+
+angular
+.module('dbt')
+.directive('macroArguments', [function() {
+    return {
+        scope: {
+            macro: '=',
+        },
+        templateUrl: template,
+        link: function(scope) {
+
+            _.each(scope.macro.arguments, function(arg) {
+                arg.expanded = false;
+            })
+        }
+    }
+}]);
+

src/app/components/references/index.html

@@ -0,0 +1,23 @@
+<div class="panel">
+    <div class="panel-body" ng-if="!has_references">
+        No resources reference this macro
+    </div>
+    <div class="panel-body" ng-if="has_references">
+        <ul class="nav nav-tabs">
+            <li
+                ng-repeat="(resource_type, nodes) in references"
+                ng-class="{active: resource_type == selected_type}">
+                <a ng-click="setType(resource_type)">
+                    {{ mapResourceType(resource_type) }}
+                </a>
+            </li>
+        </ul>
+        <div style="margin-top: 15px">
+            <ul class='list-unstyled'>
+                <li ng-repeat="node in nodes">
+                    <a ng-href="{{ getNodeUrl(node) }}">{{ node.name }}</a>
+                </li>
+            </ul>
+        <div>
+    </div>
+</div>

src/app/components/references/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const template = require('./index.html');
+
+angular
+.module('dbt')
+.directive('referenceList', ["$state", function($state) {
+    return {
+        scope: {
+            references: '=',
+        },
+        restrict: 'E',
+        templateUrl: template,
+        link: function(scope) {
+            scope.selected_type = null;
+
+            scope.setType = function(type) {
+                scope.selected_type = type;
+                scope.nodes = scope.references[scope.selected_type];
+            }
+
+            scope.getNodeUrl = function(node) {
+                var state = 'dbt.' + node.resource_type;
+                return $state.href(state, {
+                    unique_id: node.unique_id,
+                    '#': null
+                })
+            }
+
+            scope.mapResourceType = function(type) {
+                if (type == 'model') {
+                    return 'Models';
+                } else if (type == 'test') {
+                    return 'Tests';
+                } else if (type == 'snapshot') {
+                    return 'Snapshots'
+                } else if (type == 'analysis') {
+                    return 'Analyses';
+                } else {
+                    return 'Nodes';
+                }
+            }
+
+            scope.$watch('references', function(nv) {
+                if (nv && _.size(nv) > 0) {
+                    scope.selected_type = _.keys(nv)[0];
+                    scope.has_references = true;
+                    scope.nodes = scope.references[scope.selected_type];
+                } else {
+                    scope.has_references = false;
+                }
+            })
+        }
+    }
+}]);

src/app/components/search/search.js

@@ -31,6 +31,8 @@ angular
             scope.getModelName = function(model) {
                 if (model.resource_type == 'source') {
                     return model.source_name + "." + model.name;
+                } else if (model.resource_type == 'macro') {
+                    return model.package_name + "." + model.name;
                 } else {
                     return model.name;
                 }

src/app/docs/index.js

@@ -3,3 +3,4 @@ require('./model');
 require('./source');
 require('./seed');
 require('./snapshot');
+require('./macro');

src/app/docs/macro.html

@@ -0,0 +1,77 @@
+<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">{{ macro.package_name }}.{{ macro.name }}</span>
+                    <small ng-if="macro.is_adapter_macro">adapter macro</small>
+                    <small ng-if="!macro.is_adapter_macro">macro</small>
+                </h1>
+            </div>
+        </div>
+        <div class="app-frame app-pad-h">
+            <ul class="nav nav-tabs">
+                <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({'#': 'code'})">Code</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="app-details">
+        <div class="app-frame app-pad">
+            <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="macro.description" class="model-markdown" marked="macro.description"></div>
+                            <div ng-if="!macro.description">This {{ macro.resource_type }} is not currently documented</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="columns"></div>
+                <div class="section-content">
+                    <h6>Arguments</h6>
+                    <macro-arguments macro="macro"></macro-arguments>
+                </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="code"></div>
+                <div class="section-content">
+                    <code-block versions="versions" default="default_version"></code-block>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>