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>