@malloydata/render 0.0.112-dev231206194739 → 0.0.112-dev231207161601

package/dist/component/render-result-metadata.d.ts

@@ -0,0 +1,12 @@
+import { Field, Result } from '@malloydata/malloy';
+export interface FieldRenderMetadata {
+    field: Field;
+    min: number | null;
+    max: number | null;
+    minString: string | null;
+    maxString: string | null;
+}
+export interface RenderResultMetadata {
+    fields: Record<string, FieldRenderMetadata>;
+}
+export declare function getResultMetadata(result: Result): RenderResultMetadata;

package/dist/component/render-result-metadata.js

@@ -0,0 +1,87 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResultMetadata = void 0;
+const util_1 = require("./util");
+function getResultMetadata(result) {
+    const fieldKeyMap = new WeakMap();
+    const getFieldKey = (f) => {
+        if (fieldKeyMap.has(f))
+            return fieldKeyMap.get(f);
+        const fieldKey = JSON.stringify(f.fieldPath);
+        fieldKeyMap.set(f, fieldKey);
+        return fieldKey;
+    };
+    const metadata = {
+        fields: {},
+    };
+    function initFieldMeta(e) {
+        for (const f of e.allFields) {
+            if (f.isAtomicField()) {
+                const fieldKey = getFieldKey(f);
+                metadata.fields[fieldKey] = {
+                    field: f,
+                    min: null,
+                    max: null,
+                    minString: null,
+                    maxString: null,
+                };
+            }
+            else if (f.isExploreField()) {
+                initFieldMeta(f);
+            }
+        }
+    }
+    const populateFieldMeta = (data, metadata) => {
+        var _a, _b;
+        for (const row of data) {
+            for (const f of data.field.allFields) {
+                const value = f.isAtomicField() ? row.cell(f).value : undefined;
+                const fieldKey = getFieldKey(f);
+                const fieldMeta = metadata.fields[fieldKey];
+                if ((0, util_1.valueIsNumber)(f, value)) {
+                    const n = value;
+                    fieldMeta.min = Math.min((_a = fieldMeta.min) !== null && _a !== void 0 ? _a : n, n);
+                    fieldMeta.max = Math.max((_b = fieldMeta.max) !== null && _b !== void 0 ? _b : n, n);
+                }
+                else if ((0, util_1.valueIsString)(f, value)) {
+                    const s = value;
+                    if (!fieldMeta.minString || fieldMeta.minString.length > s.length)
+                        fieldMeta.minString = s;
+                    if (!fieldMeta.maxString || fieldMeta.maxString.length < s.length)
+                        fieldMeta.maxString = s;
+                }
+                else if (f.isExploreField()) {
+                    const data = row.cell(f);
+                    populateFieldMeta(data, metadata);
+                }
+            }
+        }
+    };
+    initFieldMeta(result.data.field);
+    populateFieldMeta(result.data, metadata);
+    return metadata;
+}
+exports.getResultMetadata = getResultMetadata;
+//# sourceMappingURL=render-result-metadata.js.map

package/dist/component/render.d.ts

@@ -1,9 +1,12 @@
 import { Result } from '@malloydata/malloy';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import './table';
+import { RenderResultMetadata } from './render-result-metadata';
 export declare class MalloyRender extends LitElement {
     static styles: import("lit").CSSResult;
     result: Result;
+    metadata: RenderResultMetadata;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/component/render.js

@@ -32,6 +32,9 @@ exports.MalloyRender = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
 require("./table");
+const context_1 = require("@lit/context");
+const result_context_1 = require("./result-context");
+const render_result_metadata_1 = require("./render-result-metadata");
 // Get the first valid theme value or fallback to CSS variable
 function getThemeValue(prop, ...themes) {
     let value;
@@ -46,6 +49,11 @@ function getThemeValue(prop, ...themes) {
         .toLowerCase()})`);
 }
 let MalloyRender = exports.MalloyRender = class MalloyRender extends lit_1.LitElement {
+    willUpdate(changedProperties) {
+        if (changedProperties.has('result')) {
+            this.metadata = (0, render_result_metadata_1.getResultMetadata)(this.result);
+        }
+    }
     render() {
         const modelTag = this.result.modelTag;
         const { tag: resultTag } = this.result.tagParse();
@@ -62,11 +70,13 @@ let MalloyRender = exports.MalloyRender = class MalloyRender extends lit_1.LitEl
         const tableGutterSize = getThemeValue('tableGutterSize', localTheme, modelTheme);
         const tablePinnedBackground = getThemeValue('tablePinnedBackground', localTheme, modelTheme);
         const tablePinnedBorder = getThemeValue('tablePinnedBorder', localTheme, modelTheme);
+        const fontFamily = getThemeValue('fontFamily', localTheme, modelTheme);
         const dynamicStyle = (0, lit_1.html) `<style>
       :host {
         --malloy-render--table-row-height: ${tableRowHeight};
         --malloy-render--table-body-color: ${tableBodyColor};
         --malloy-render--table-font-size: ${tableFontSize};
+        --malloy-render--font-family: ${fontFamily};
         --malloy-render--table-header-color: ${tableHeaderColor};
         --malloy-render--table-header-weight: ${tableHeaderWeight};
         --malloy-render--table-body-weight: ${tableBodyWeight};
@@ -96,8 +106,9 @@ MalloyRender.styles = (0, lit_1.css) `
       --malloy-theme--table-gutter-size: 15px;
       --malloy-theme--table-pinned-background: #f5fafc;
       --malloy-theme--table-pinned-border: 1px solid #daedf3;
+      --malloy-theme--font-family: Inter, system-ui, sans-serif;
 
-      font-family: Inter, system-ui, sans-serif;
+      font-family: var(--malloy-render--font-family);
       font-size: var(--malloy-render--table-font-size);
     }
 
@@ -117,6 +128,9 @@ MalloyRender.styles = (0, lit_1.css) `
 __decorate([
     (0, decorators_js_1.property)({ attribute: false })
 ], MalloyRender.prototype, "result", void 0);
+__decorate([
+    (0, context_1.provide)({ context: result_context_1.resultContext })
+], MalloyRender.prototype, "metadata", void 0);
 exports.MalloyRender = MalloyRender = __decorate([
     (0, decorators_js_1.customElement)('malloy-render')
 ], MalloyRender);

package/dist/component/result-context.d.ts

@@ -0,0 +1,4 @@
+import { RenderResultMetadata } from './render-result-metadata';
+export declare const resultContext: {
+    __context__: RenderResultMetadata;
+};

package/dist/component/result-context.js

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resultContext = void 0;
+const context_1 = require("@lit/context");
+exports.resultContext = (0, context_1.createContext)('malloy-render-result');
+//# sourceMappingURL=result-context.js.map

package/dist/component/table.d.ts

@@ -1,7 +1,9 @@
-import { DataArray } from '@malloydata/malloy';
+import { DataArray, Field } from '@malloydata/malloy';
 import { LitElement, TemplateResult } from 'lit';
+import { RenderResultMetadata } from './render-result-metadata';
 type TableContext = {
     root: boolean;
+    widthCache: Map<Field, number>;
 };
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult;
@@ -10,12 +12,19 @@ export declare class Table extends LitElement {
     pinnedHeader: boolean;
     protected _scrolling: boolean;
     parentCtx: TableContext | undefined;
-    ctx: {
-        root: boolean;
-    };
+    ctx: TableContext;
+    metadata: RenderResultMetadata;
     connectedCallback(): void;
     private _handleScroll;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private renderHeader;
+    private renderField;
+    private getCellFontStyling;
+    private measuringCanvas;
+    private getColumnWidth;
+    private getContentStyle;
+    private renderCell;
+    private renderFieldContent;
     render(): TemplateResult<1>;
 }
 declare global {

package/dist/component/table.js

@@ -35,96 +35,31 @@ const class_map_js_1 = require("lit/directives/class-map.js");
 const context_1 = require("@lit/context");
 const util_1 = require("./util");
 const render_numeric_field_1 = require("./render-numeric-field");
+const result_context_1 = require("./result-context");
+const MIN_COLUMN_WIDTH = 32;
+const MAX_COLUMN_WIDTH = 384;
+const COLUMN_BUFFER = 12;
 const tableContext = (0, context_1.createContext)('table');
-// 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, options) => {
-    return (0, lit_1.html) `<div class="cell-wrapper">
-    <div
-      class=${(0, class_map_js_1.classMap)({
-        'cell-gutter': true,
-        'hide-gutter-border': options.hideStartGutter,
-    })}
-    ></div>
-    <div class="cell-content" style="${getContentStyle(f)}">${value}</div>
-    <div
-      class=${(0, class_map_js_1.classMap)({
-        'cell-gutter': true,
-        'hide-gutter-border': options.hideEndGutter,
-    })}
-    ></div>
-  </div>`;
-};
-const renderFieldContent = (row, f, options) => {
-    var _a;
-    if (f.isExploreField()) {
-        return (0, lit_1.html) `<malloy-table
-      .data=${row.cell(f)}
-      .pinnedHeader=${(_a = options.pinnedHeader) !== null && _a !== void 0 ? _a : false}
-      .rowLimit=${options.pinnedHeader ? 1 : Infinity}
-    ></malloy-table>`;
-    }
-    let value = row.cell(f).value;
-    if (options.pinnedHeader)
-        value = '';
-    else if (f.isAtomicField() && f.isNumber()) {
-        value = (0, render_numeric_field_1.renderNumericField)(f, value);
-    }
-    return renderCell(f, value, {
-        hideStartGutter: (0, util_1.isFirstChild)(f),
-        hideEndGutter: (0, util_1.isLastChild)(f),
-    });
-};
-const renderField = (row, f, options) => {
-    return (0, lit_1.html) `<td
-    class="column-cell ${(0, class_map_js_1.classMap)({
-        numeric: f.isAtomicField() && f.isNumber(),
-    })}"
-  >
-    ${renderFieldContent(row, f, options)}
-  </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="column-cell ${(0, class_map_js_1.classMap)({
-        numeric: f.isAtomicField() && f.isNumber(),
-    })}"
-  >
-    ${renderCell(f, f.name, {
-        hideStartGutter,
-        hideEndGutter,
-    })}
-  </th>`;
-};
 let Table = exports.Table = class Table extends lit_1.LitElement {
     constructor() {
         super(...arguments);
         this.rowLimit = Infinity;
         this.pinnedHeader = false;
         this._scrolling = false;
-        this.ctx = { root: false };
+        this.measuringCanvas = document.createElement('canvas');
     }
     connectedCallback() {
         super.connectedCallback();
         if (typeof this.parentCtx === 'undefined') {
             this.ctx = {
                 root: true,
+                widthCache: new Map(),
+            };
+        }
+        else {
+            this.ctx = {
+                root: false,
+                widthCache: this.parentCtx.widthCache,
             };
         }
     }
@@ -138,19 +73,135 @@ let Table = exports.Table = class Table extends lit_1.LitElement {
             return this;
         return super.createRenderRoot();
     }
+    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="column-cell ${(0, class_map_js_1.classMap)({
+            numeric: f.isAtomicField() && f.isNumber(),
+        })}"
+    >
+      ${this.renderCell(f, f.name, {
+            hideStartGutter,
+            hideEndGutter,
+        })}
+    </th>`;
+    }
+    renderField(row, f) {
+        return (0, lit_1.html) `<td
+      class="column-cell ${(0, class_map_js_1.classMap)({
+            numeric: f.isAtomicField() && f.isNumber(),
+        })}"
+    >
+      ${this.renderFieldContent(row, f)}
+    </td>`;
+    }
+    getCellFontStyling() {
+        const rootStyle = getComputedStyle(this);
+        const fontFamily = rootStyle
+            .getPropertyValue('--malloy-render--font-family')
+            .trim();
+        const fontSize = rootStyle
+            .getPropertyValue('--malloy-render--table-font-size')
+            .trim();
+        return {
+            fontFamily,
+            fontSize,
+        };
+    }
+    getColumnWidth(f) {
+        const fieldKey = JSON.stringify(f.fieldPath);
+        const fieldMeta = this.metadata.fields[fieldKey];
+        let width = this.ctx.widthCache.get(f);
+        if (typeof width === 'undefined') {
+            const fontStyles = this.getCellFontStyling();
+            const font = `${fontStyles.fontSize} ${fontStyles.fontFamily}`;
+            const titleWidth = (0, util_1.getTextWidth)(f.name, font, this.measuringCanvas);
+            if (f.isAtomicField() && f.isString()) {
+                width =
+                    Math.max((0, util_1.getTextWidth)(fieldMeta.maxString, font, this.measuringCanvas), titleWidth) + COLUMN_BUFFER;
+            }
+            else if (f.isAtomicField() && f.isNumber()) {
+                const formattedValue = (0, render_numeric_field_1.renderNumericField)(f, fieldMeta.max);
+                width =
+                    Math.max((0, util_1.getTextWidth)(formattedValue, font, this.measuringCanvas), titleWidth) + COLUMN_BUFFER;
+            }
+            else
+                width = 130;
+            width = (0, util_1.clamp)(MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH, width);
+            this.ctx.widthCache.set(f, width);
+        }
+        return width;
+    }
+    getContentStyle(f) {
+        if (f.isAtomicField()) {
+            const width = this.getColumnWidth(f);
+            return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
+        }
+        return '';
+    }
+    renderCell(f, value, options) {
+        return (0, lit_1.html) `<div class="cell-wrapper">
+      <div
+        class=${(0, class_map_js_1.classMap)({
+            'cell-gutter': true,
+            'hide-gutter-border': options.hideStartGutter,
+        })}
+      ></div>
+      <div
+        class="cell-content"
+        style="${this.getContentStyle(f)}"
+        title="${value}"
+      >
+        ${value}
+      </div>
+      <div
+        class=${(0, class_map_js_1.classMap)({
+            'cell-gutter': true,
+            'hide-gutter-border': options.hideEndGutter,
+        })}
+      ></div>
+    </div>`;
+    }
+    renderFieldContent(row, f) {
+        var _a;
+        if (f.isExploreField()) {
+            return (0, lit_1.html) `<malloy-table
+        .data=${row.cell(f)}
+        .pinnedHeader=${(_a = this.pinnedHeader) !== null && _a !== void 0 ? _a : false}
+        .rowLimit=${this.pinnedHeader ? 1 : Infinity}
+      ></malloy-table>`;
+        }
+        let value = row.cell(f).value;
+        if (this.pinnedHeader)
+            value = '';
+        else if ((0, util_1.valueIsNumber)(f, value)) {
+            // TS doesn't support typeguards for multiple parameters, so unfortunately have to assert AtomicField here. https://github.com/microsoft/TypeScript/issues/26916
+            value = (0, render_numeric_field_1.renderNumericField)(f, value);
+        }
+        else if (value === null) {
+            value = '∅';
+        }
+        return this.renderCell(f, value, {
+            hideStartGutter: (0, util_1.isFirstChild)(f),
+            hideEndGutter: (0, util_1.isLastChild)(f),
+        });
+    }
     render() {
         const fields = this.data.field.allFields;
-        const headers = fields.map(f => renderHeader(f));
-        const renderOptions = {
-            pinnedHeader: this.pinnedHeader,
-        };
+        const headers = fields.map(f => this.renderHeader(f));
         const rows = [];
         let i = 0;
         for (const row of this.data) {
             if (i >= this.rowLimit)
                 break;
             rows.push((0, lit_1.html) `<tr>
-          ${fields.map(f => renderField(row, f, renderOptions))}
+          ${fields.map(f => this.renderField(row, f))}
         </tr>`);
             i++;
         }
@@ -321,6 +372,10 @@ __decorate([
 __decorate([
     (0, context_1.provide)({ context: tableContext })
 ], Table.prototype, "ctx", void 0);
+__decorate([
+    (0, context_1.consume)({ context: result_context_1.resultContext }),
+    (0, decorators_js_1.property)({ attribute: false })
+], Table.prototype, "metadata", void 0);
 __decorate([
     (0, decorators_js_1.eventOptions)({ passive: true })
 ], Table.prototype, "_handleScroll", null);

package/dist/component/util.d.ts

@@ -1,3 +1,7 @@
 import { Explore, Field } from '@malloydata/malloy';
 export declare function isLastChild(f: Field | Explore): boolean;
 export declare function isFirstChild(f: Field | Explore): boolean;
+export declare function valueIsNumber(f: Field, v: unknown): v is number;
+export declare function valueIsString(f: Field, s: unknown): s is string;
+export declare function getTextWidth(text: string, font: string, canvasToUse?: HTMLCanvasElement): number;
+export declare function clamp(s: number, e: number, v: number): number;

package/dist/component/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFirstChild = exports.isLastChild = void 0;
+exports.clamp = exports.getTextWidth = exports.valueIsString = exports.valueIsNumber = exports.isFirstChild = exports.isLastChild = void 0;
 function getLocationInParent(f) {
     var _a;
     const parent = f.parentExplore;
@@ -16,4 +16,24 @@ function isFirstChild(f) {
     return getLocationInParent(f) === 0;
 }
 exports.isFirstChild = isFirstChild;
+function valueIsNumber(f, v) {
+    return f.isAtomicField() && f.isNumber() && v !== null;
+}
+exports.valueIsNumber = valueIsNumber;
+function valueIsString(f, s) {
+    return f.isAtomicField() && f.isString() && s !== null;
+}
+exports.valueIsString = valueIsString;
+function getTextWidth(text, font, canvasToUse) {
+    const canvas = canvasToUse !== null && canvasToUse !== void 0 ? canvasToUse : document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    context.font = font;
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+exports.getTextWidth = getTextWidth;
+function clamp(s, e, v) {
+    return Math.max(s, Math.min(e, v));
+}
+exports.clamp = clamp;
 //# sourceMappingURL=util.js.map

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

@@ -34,3 +34,9 @@ export declare const NumberFormatting: {
         view: string;
     };
 };
+export declare const NullTest: {
+    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.NumberFormatting = exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+exports.NullTest = exports.NumberFormatting = 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");
@@ -56,4 +56,10 @@ exports.NumberFormatting = {
         view: 'number_formats',
     },
 };
+exports.NullTest = {
+    args: {
+        source: 'null_test',
+        view: '{ select: * }',
+    },
+};
 //# sourceMappingURL=tables.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.112-dev231206194739",
+  "version": "0.0.112-dev231207161601",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.112-dev231206194739",
+    "@malloydata/malloy": "^0.0.112-dev231207161601",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",