@malloydata/render 0.0.103 → 0.0.104-dev231116200719

package/.storybook/preview.ts

@@ -3,7 +3,9 @@ import {Preview} from '@storybook/html';
 import registeredData from './registered_data.json';
 
 async function createConnection() {
-  const connection = new DuckDBWASMConnection('duckdb');
+  const connection = new DuckDBWASMConnection('duckdb', null, undefined, {
+    rowLimit: 1000,
+  });
   await connection.connecting;
   for (let tableName of registeredData) {
     const fullTableName = `data/${tableName}`;

package/dist/component/render.js

@@ -47,6 +47,7 @@ MalloyRender.styles = (0, lit_1.css) `
       --table-body-weight: 400;
       --table-border: 1px solid #e5e7eb;
       --table-background: white;
+      --table-gutter-size: 15px;
 
       font-family: Inter, system-ui, sans-serif;
       font-size: var(--table-font-size);

package/dist/component/table.js

@@ -31,16 +31,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
+const class_map_js_1 = require("lit/directives/class-map.js");
+const util_1 = require("./util");
+// TODO: replace with an estimator per column
+function getColumnWidth() {
+    return 130;
+}
+const getContentStyle = (f) => {
+    if (f.isAtomicField()) {
+        const width = getColumnWidth();
+        return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
+    }
+    return '';
+};
+const renderCell = (f, value) => {
+    return (0, lit_1.html) `<div class="cell-wrapper">
+    <div class="cell-gutter-start"></div>
+    <div class="cell-content" style="${getContentStyle(f)}">${value}</div>
+    <div class="cell-gutter-end"></div>
+  </div>`;
+};
+const renderFieldContent = (row, f) => {
+    if (f.isExploreField()) {
+        return (0, lit_1.html) `<malloy-table
+      .data=${row.cell(f)}
+    ></malloy-table>`;
+    }
+    return renderCell(f, row.cell(f).value);
+};
+const renderField = (row, f) => {
+    return (0, lit_1.html) `<td
+    class=${(0, class_map_js_1.classMap)({
+        'column-cell': true,
+        'hide-end-gutter': (0, util_1.isLastChild)(f),
+        'hide-start-gutter': (0, util_1.isFirstChild)(f),
+    })}
+  >
+    ${renderFieldContent(row, f)}
+  </td>`;
+};
+const renderHeader = (f) => {
+    const isFirst = (0, util_1.isFirstChild)(f);
+    const isParentFirst = (0, util_1.isFirstChild)(f.parentExplore);
+    const isParentNotAField = !f.parentExplore.isExploreField();
+    const hideStartGutter = isFirst && (isParentFirst || isParentNotAField);
+    const isLast = (0, util_1.isLastChild)(f);
+    const isParentLast = (0, util_1.isLastChild)(f.parentExplore);
+    const hideEndGutter = isLast && (isParentLast || isParentNotAField);
+    return (0, lit_1.html) `<th
+    class=${(0, class_map_js_1.classMap)({
+        'column-cell': true,
+        'hide-end-gutter': hideEndGutter,
+        'hide-start-gutter': hideStartGutter,
+    })}
+  >
+    ${renderCell(f, f.name)}
+  </th>`;
+};
 let Table = exports.Table = class Table extends lit_1.LitElement {
     render() {
         const fields = this.data.field.allFields;
-        const headers = fields.map(f => (0, lit_1.html) `<th class="column-cell">${f.name}</th>`);
+        const headers = fields.map(f => renderHeader(f));
         const rows = Array.from(this.data, row => (0, lit_1.html) `<tr>
-          ${fields.map(f => (0, lit_1.html) `<td class="column-cell">${row.cell(f).value}</td>`)}
+          ${fields.map(f => renderField(row, f))}
         </tr>`);
         return (0, lit_1.html) `<table>
       <thead>
-        ${headers}
+        <tr>
+          ${headers}
+        </tr>
       </thead>
       <tbody>
         ${rows}
@@ -52,16 +111,26 @@ Table.styles = (0, lit_1.css) `
     table {
       border-collapse: collapse;
       background: var(--table-background);
+      font-variant-numeric: tabular-nums;
+    }
+
+    table * {
+      box-sizing: border-box;
     }
 
     .column-cell {
       height: var(--table-row-height);
-      border-block: var(--table-border);
       overflow: hidden;
       white-space: nowrap;
       text-align: left;
-      padding: 0px 15px;
-      font-variant-numeric: tabular-nums;
+      padding: 0px;
+      vertical-align: top;
+      position: relative;
+    }
+
+    td.column-cell {
+      font-weight: var(--table-body-weight);
+      color: var(--table-body-color);
     }
 
     th.column-cell {
@@ -69,18 +138,40 @@ Table.styles = (0, lit_1.css) `
       color: var(--table-header-color);
     }
 
-    td.column-cell {
-      font-weight: var(--table-body-weight);
-      color: var(--table-body-color);
+    .cell-wrapper {
+      height: var(--table-row-height);
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+    }
+
+    .cell-content {
+      border-top: var(--table-border);
+      height: var(--table-row-height);
+      line-height: var(--table-row-height);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .cell-gutter-start {
+      border-top: var(--table-border);
+      height: var(--table-row-height);
+      width: var(--table-gutter-size);
     }
 
-    th.column-cell:first-child,
-    td.column-cell:first-child {
-      padding-left: 0px;
+    .cell-gutter-end {
+      border-top: var(--table-border);
+      height: var(--table-row-height);
+      width: var(--table-gutter-size);
+    }
+
+    .hide-end-gutter .cell-gutter-end {
+      border-top: none;
     }
-    th.column-cell:last-child,
-    td.column-cell:last-child {
-      padding-right: 0px;
+
+    .hide-start-gutter .cell-gutter-start {
+      border-top: none;
     }
   `;
 __decorate([

package/dist/component/util.d.ts

@@ -0,0 +1,3 @@
+import { Explore, Field } from '@malloydata/malloy';
+export declare function isLastChild(f: Field | Explore): boolean;
+export declare function isFirstChild(f: Field | Explore): boolean;

package/dist/component/util.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFirstChild = exports.isLastChild = void 0;
+function getLocationInParent(f) {
+    var _a;
+    const parent = f.parentExplore;
+    return (_a = parent === null || parent === void 0 ? void 0 : parent.allFields.findIndex(pf => pf.name === f.name)) !== null && _a !== void 0 ? _a : -1;
+}
+function isLastChild(f) {
+    if (f.parentExplore)
+        return getLocationInParent(f) === f.parentExplore.allFields.length - 1;
+    return true;
+}
+exports.isLastChild = isLastChild;
+function isFirstChild(f) {
+    return getLocationInParent(f) === 0;
+}
+exports.isFirstChild = isFirstChild;
+//# sourceMappingURL=util.js.map

package/dist/stories/basic.stories.js

@@ -16,7 +16,7 @@ exports.default = {
 exports.ProductsTable = {
     args: {
         source: 'products',
-        view: '{ select: * }',
+        view: 'records',
     },
 };
 exports.ProductsBar = {

package/dist/stories/tables.stories.d.ts

@@ -22,3 +22,9 @@ export declare const Products2Column: {
         view: string;
     };
 };
+export declare const Nested: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/tables.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
 const tables_malloy_raw_1 = __importDefault(require("./static/tables.malloy?raw"));
 const util_1 = require("./util");
 require("./themes.css");
@@ -40,4 +40,10 @@ exports.Products2Column = {
         view: 'category_bar',
     },
 };
+exports.Nested = {
+    args: {
+        source: 'products',
+        view: 'nested',
+    },
+};
 //# sourceMappingURL=tables.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.103",
+  "version": "0.0.104-dev231116200719",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.103",
+    "@malloydata/malloy": "^0.0.104-dev231116200719",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",