Visualize dimensions for Semantic Models

.changes/unreleased/Docs-20241126-230636.yaml

@@ -0,0 +1,6 @@
+kind: Docs
+body: Add dimensions list to the Semantic Model docs
+time: 2024-11-26T23:06:36.7899668+01:00
+custom:
+    Author: SOVALINUX
+    Issue: "434"

src/app/components/dimension_details/dimension_details.html

@@ -0,0 +1,37 @@
+<div class="panel">
+    <div class="panel-body">
+        <div ng-if="_.isEmpty(model.dimensions)">
+            Dimension information is not available for this seed
+        </div>
+        <div class="table-responsive"
+             style="max-height: 800px; overflow-y: scroll;"
+             ng-if="!_.isEmpty(model.dimensions)">
+            <table class="table table-borderless table-hover">
+                <thead>
+                    <tr>
+                        <th style="background-color: white; position: sticky; top: 0; z-index: 1;">dimension</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>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        ng-repeat="dimension in dimensions track by dimension.index"
+                        class="column-row">
+                        <td>
+                            <div>
+                                <span class='text-dark'>{{ get_dim_name(dimension.name) }}</span>
+                            </div>
+                        </td>
+                        <td>
+                            <span class='text-dark'>{{ dimension.type }}</p>
+                        </td>
+                        <td>
+                            <span class='text-dark'>{{ dimension.description }}</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

src/app/components/dimension_details/dimension_details.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const template = require('./dimension_details.html');
+
+const _ = require('underscore');
+
+angular
+    .module('dbt')
+    .directive('dimensionDetails', ['project', function (projectService) {
+        return {
+            scope: {
+                model: '=',
+            },
+            templateUrl: template,
+            link: function (scope) {
+
+                console.log(scope);
+
+                scope.getState = function (node) {
+                    return 'dbt.' + node.resource_type;
+                }
+
+                scope.get_dim_name = function (dim_name) {
+                    return projectService.caseColumn(dim_name);
+                }
+
+
+                var dimensions = _.chain(scope.model.dimensions)
+                    .values()
+                    .sortBy('name')
+                    .value();
+
+                // re-number dimensions because index comes from the catalog, and index may not always be present
+                // this prevents errors with the view's `track by dimension.index`
+                _.each(dimensions, function (col, i) {
+                    col.index = i;
+                });
+
+                scope.dimensions = dimensions;
+
+            }
+        }
+    }]);
+

src/app/components/index.js

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

src/app/docs/semantic_model.html

@@ -83,6 +83,15 @@ <h6>Entities</h6>
                 </div>
             </div>
         </section>
+
+        <section class="section" ng-show = "semantic_model.dimensions.length != 0">
+                <div class="section-target" id="dimensions"></div>
+                <div class="section-content">
+                    <h6>Dimensions</h6>
+
+                <dimension-details model="semantic_model" />
+            </div>
+        </section>
 
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>