perf: minify widget.js + lodash-es tree-shaking

.github/workflows/checks.yml

@@ -3,7 +3,7 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: "*"
+    branches: "**"
   merge_group:
   workflow_dispatch:
 

.github/workflows/deploy-ghpage.yml

@@ -6,22 +6,25 @@ on:
       - main
   pull_request:
     branches:
-#      - 'none-never'
-      - '*'
+      - '**'
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v6
       - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
         with:
-          run_install: true
-          package_json_file: packages/package.json
+          version: 9.10.0
+      - uses: actions/setup-node@v6
+        with:
+          cache: 'pnpm'
+          cache-dependency-path: 'packages/pnpm-lock.yaml'
+      - name: Install pnpm dependencies
+        working-directory: packages
+        run: pnpm install --frozen-lockfile
       - uses: astral-sh/setup-uv@v7
-      - name: Run tests
+      - name: Build storybook
         working-directory: ./packages/buckaroo-js-core
         run: |
           pnpm build-storybook

.github/workflows/publish-storybook.yml

@@ -7,14 +7,14 @@ on:
       - main
 
   pull_request:
-    branches: "*"
+    branches: "**"
 
 
 permissions:
   contents: read
   pages: write
   id-token: write
- 
+
 # List of jobs
 jobs:
   TestPython:
@@ -26,10 +26,15 @@ jobs:
       - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
         with:
-          run_install: true
-          package_json_file: packages/package.json
-      - uses: astral-sh/setup-uv@v7
-      - name: Run tests
+          version: 9.10.0
+      - uses: actions/setup-node@v6
+        with:
+          cache: 'pnpm'
+          cache-dependency-path: 'packages/pnpm-lock.yaml'
+      - name: Install pnpm dependencies
+        working-directory: packages
+        run: pnpm install --frozen-lockfile
+      - name: Build storybook
         working-directory: ./packages/buckaroo-js-core
         run: |
           pnpm build-storybook

.gitignore

@@ -159,6 +159,7 @@ ipydatagrid/nbextension/*
 buckaroo/nbextension/*
 buckaroo/labextension/*
 buckaroo/static/*.js
+buckaroo/static/*.js.map
 buckaroo/static/*.css
 docs/*.js
 docs/*.js.map

packages/buckaroo-js-core/jest.config.ts

@@ -8,6 +8,7 @@ export default {
     "\\.(css|less|sass|scss)$": "identity-obj-proxy",
     "^.+\\.svg$": "jest-transformer-svg",
     "^@/(.*)$": "<rootDir>/src/$1",
+    "^lodash-es$": "lodash",
   },
 
   testMatch: ["!**/*.spec.ts", "**/*.test.ts", "**/*.test.tsx"],

packages/buckaroo-js-core/package.json

@@ -30,14 +30,14 @@
     "/dist"
   ],
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^32.3.3",
-    "@ag-grid-community/core": "^32.3.3",
-    "@ag-grid-community/infinite-row-model": "^32.3.3",
-    "@ag-grid-community/react": "^32.3.3",
-    "@ag-grid-community/styles": "^32.3.3",
-    "@ag-grid-community/theming": "^32.3.3",
+    "@ag-grid-community/client-side-row-model": "^32.3.9",
+    "@ag-grid-community/core": "^32.3.9",
+    "@ag-grid-community/infinite-row-model": "^32.3.9",
+    "@ag-grid-community/react": "^32.3.9",
+    "@ag-grid-community/styles": "^32.3.9",
+    "@ag-grid-community/theming": "^32.3.9",
     "hyparquet": "^1.8.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "recharts": "^2.13.1"
   },
   "devDependencies": {
@@ -55,7 +55,8 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash-es": "^4.17.12",
+    "lodash": "^4.17.21",
     "@types/node": "^22.15.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

packages/buckaroo-js-core/src/components/BuckarooWidgetInfinite.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import _ from "lodash";
 import { OperationResult } from "./DependentTabs";
 import { ColumnsEditor } from "./ColumnsEditor";
 

packages/buckaroo-js-core/src/components/DCFCell.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import _ from "lodash";
 import { OperationResult } from "./DependentTabs";
 import { ColumnsEditor } from "./ColumnsEditor";
 

packages/buckaroo-js-core/src/components/DFViewerParts/ChartCell.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import { isArray } from "lodash-es";
 import React from "react";
 import { createPortal } from "react-dom";
 
@@ -125,7 +125,7 @@ export const getChartCell = (multiChartCellProps: ChartDisplayerA) => {
         const potentialHistogramArr = props.value;
         //for key "index", the value is "histogram"
         // this causes ReChart to blow up, so we check to see if it's an array
-        if (potentialHistogramArr === undefined || !_.isArray(potentialHistogramArr)) {
+        if (potentialHistogramArr === undefined || !isArray(potentialHistogramArr)) {
             return <span></span>;
         }
         const histogramArr = potentialHistogramArr as LineObservation[];

packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerDataHelper.ts

@@ -1,5 +1,5 @@
 import { IDatasource, IGetRowsParams } from "@ag-grid-community/core";
-import _ from "lodash";
+import { keys, times, reduce } from "lodash-es";
 
 export type RawDataWrapper = {
   data: any[];
@@ -48,11 +48,11 @@ export const createDatasourceWrapper = (data: DFData, delay_in_milliseconds: num
 };
 
 export const dictOfArraystoDFData = (dict: Record<string, any[]>): DFData => {
-  const keys = _.keys(dict);
-  const length = dict[keys[0]].length;
+  const dictKeys = keys(dict);
+  const length = dict[dictKeys[0]].length;
 
-  return _.times(length, index => {
-    return _.reduce(keys, (result, key) => {
+  return times(length, index => {
+    return reduce(dictKeys, (result, key) => {
       result[key] = dict[key][index];
       return result;
     }, {} as Record<string, any>);

packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerInfinite.tsx

@@ -4,7 +4,6 @@ import {
     useEffect,
     useRef,
 } from "react";
-import _ from "lodash";
 import { DFData, DFDataRow, DFViewerConfig, SDFT } from "./DFWhole";
 
 import { getCellRendererSelector, dfToAgrid, extractPinnedRows, extractSDFT } from "./gridUtils";

packages/buckaroo-js-core/src/components/DFViewerParts/DFWhole.ts

@@ -1,7 +1,6 @@
 // I'm not sure about adding underlying types too
 
 import { ColDef, ColGroupDef, GridOptions } from "@ag-grid-community/core";
-import _ from "lodash";
 
 type AGGrid_ColDef = ColDef;
 export type ColDefOrGroup = ColDef|ColGroupDef

packages/buckaroo-js-core/src/components/DFViewerParts/Displayer.ts

@@ -8,7 +8,7 @@ import {
     StringDisplayerA,
     ObjDisplayerA,
 } from "./DFWhole";
-import * as _ from "lodash";
+import { includes, isArray, isBoolean, isDate, isObject, map } from "lodash-es";
 
 import { HistogramCell } from "./HistogramCell";
 import { Base64PNGDisplayer, LinkCellRenderer, SVGDisplayer } from "./OtherRenderers";
@@ -43,12 +43,12 @@ export const getStringFormatter = (args: StringDisplayerA) => {
 };
 
 const dictDisplayer = (val: Record<string, any>): string => {
-    const objBody = _.map(val, (value, key) => `'${key}': ${objDisplayer(value)}`).join(",");
+    const objBody = map(val, (value, key) => `'${key}': ${objDisplayer(value)}`).join(",");
     return `{ ${objBody} }`;
 };
 
 export const isValidDate = (possibleDate: any): boolean => {
-    if (_.isDate(possibleDate) && isFinite(possibleDate.getTime())) {
+    if (isDate(possibleDate) && isFinite(possibleDate.getTime())) {
         return true;
     }
     return false;
@@ -72,11 +72,11 @@ export const dateDisplayerDefault = (d: Date): string => {
 const objDisplayer = (val: any | any[]): string => {
     if (val === undefined || val === null) {
         return "None";
-    } else if (_.isArray(val)) {
+    } else if (isArray(val)) {
         return `[ ${val.map(objDisplayer).join(", ")}]`;
-    } else if (_.isBoolean(val)) {
+    } else if (isBoolean(val)) {
         return boolDisplayer(val);
-    } else if (_.isObject(val)) {
+    } else if (isObject(val)) {
         return dictDisplayer(val);
     } else {
         return val.toString();
@@ -138,7 +138,7 @@ export const getFloatFormatter = (hint: FloatDisplayerA) => {
         }
 
         const res: string = floatFormatter.format(params.value);
-        if (!_.includes(res, ".")) {
+        if (!includes(res, ".")) {
             const padLength = res.length + hint.max_fraction_digits + 1;
             return res.padEnd(padLength);
         } else {
@@ -220,7 +220,7 @@ export function getCellRenderer(crArgs: CellRendererArgs) {
 }
 
 export function getFormatterFromArgs(dispArgs: DisplayerArgs) {
-    if (_.includes(cellRendererDisplayers, dispArgs.displayer)) {
+    if (includes(cellRendererDisplayers, dispArgs.displayer)) {
         return undefined;
     }
     const fArgs = dispArgs as FormatterArgs;

packages/buckaroo-js-core/src/components/DFViewerParts/HistogramCell.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import { isArray } from "lodash-es";
 import React from "react";
 import { createPortal } from "react-dom";
 
@@ -91,7 +91,7 @@ export const HistogramCell = (props:
     const potentialHistogramArr = props.value;
     //for key "index", the value is "histogram"
     // this causes ReChart to blow up, so we check to see if it's an array
-    if (potentialHistogramArr === undefined || !_.isArray(potentialHistogramArr)) {
+    if (potentialHistogramArr === undefined || !isArray(potentialHistogramArr)) {
         return <span></span>;
     }
   const histogramArr = potentialHistogramArr as HistogramBar[];

packages/buckaroo-js-core/src/components/DFViewerParts/OtherRenderers.tsx

@@ -1,4 +1,3 @@
-import _ from "lodash";
 import { ValueFormatterFunc } from "@ag-grid-community/core";
 
 export const getTextCellRenderer = (formatter: ValueFormatterFunc<any>) => {

packages/buckaroo-js-core/src/components/DFViewerParts/SmartRowCache.test.ts

@@ -1,4 +1,3 @@
-import * as _ from "lodash";
 //import { describe, expect } from 'jest';
 import {
     Segment,

packages/buckaroo-js-core/src/components/DFViewerParts/SmartRowCache.ts

@@ -1,4 +1,4 @@
-import * as _ from "lodash";
+import { fromPairs, has, map, sum } from "lodash-es";
 import {
     DFData,
 } from "./DFWhole";
@@ -494,12 +494,12 @@ export class KeyAwareSmartRowCache {
 
 
     public usedSize(): number {
-        return _.sum(Array.from(this.srcAccesses.values()).map((x) => x.usedSize()))
+        return sum(Array.from(this.srcAccesses.values()).map((x) => x.usedSize()))
     }
 
     public debugCacheState():void {
-	_.map(
-	    _.fromPairs(
+	map(
+	    fromPairs(
 		Array.from(this.srcAccesses.entries())),
 	    (k, _c) => {console.log(k,  k.safeGetExtents())});
     }
@@ -640,7 +640,7 @@ export class KeyAwareSmartRowCache {
 	} else {
             src.addRows(seg, resp.data)
 	}
-        if (_.has(this.waitingCallbacks, cbKey)) {
+        if (has(this.waitingCallbacks, cbKey)) {
             const [success, fail] = this.waitingCallbacks[cbKey];
             if(verifyResp(resp)) {
                 success(this.getRows(resp.key), src.sentLength);
@@ -654,7 +654,7 @@ export class KeyAwareSmartRowCache {
     public addErrorResponse(resp: PayloadResponse) {
         const cbKey = getPayloadKey(resp.key)
 
-        if (_.has(this.waitingCallbacks, cbKey)) {
+        if (has(this.waitingCallbacks, cbKey)) {
             const [_success, fail] = this.waitingCallbacks[cbKey];
             fail()
             delete this.waitingCallbacks[cbKey]

packages/buckaroo-js-core/src/components/DFViewerParts/TableInfinite.tsx

@@ -11,7 +11,7 @@ import {
 } from "./gridUtils";
 //import { InfiniteViewer } from "./InfiniteViewerImpl";
 import { Operation } from "../OperationUtils";
-import _ from "lodash";
+import { filter, map } from "lodash-es";
 import { PayloadResponse } from "./SmartRowCache";
 
 const data: [string, Operation[]][] = [
@@ -51,21 +51,21 @@ const MySelect = ({
 };
 
 function addSequentialIndex(list: Record<string, any>[]) {
-    return _.map(list, (item, index) => ({
+    return map(list, (item, index) => ({
         ...item,
         idx: index + 1, // Adding 1 to start the index from 1
     }));
 }
 
 function addUniqueIndex(list: Record<string, any>[]) {
-    return _.map(list, (item, _index) => ({
+    return map(list, (item, _index) => ({
         ...item,
         agIdx: `${item.idx}-${item.sport}`,
     }));
 }
 
 function filterBySport(list: any[], sport: string): any[] {
-    return _.filter(list, { sport: sport });
+    return filter(list, { sport: sport });
 }
 
 const getDataset = (sportName: string) => {

packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.test.ts

@@ -11,7 +11,7 @@ import {
     multiIndexColToColDef,
 
 } from './gridUtils';
-import * as _ from "lodash";
+import { omit } from "lodash-es";
 import { DFData, DFViewerConfig, NormalColumnConfig, MultiIndexColumnConfig, PinnedRowConfig, ColumnConfig } from "./DFWhole";
 import { getFloatFormatter } from './Displayer';
 import { ColDef, ValueFormatterParams } from '@ag-grid-community/core';
@@ -309,14 +309,14 @@ describe("testing multi index organiztion  ", () => {
 
 
   it("childColDef should return proper subset", () => {
-    expect(_.omit(childColDef(SUPER__SUB_A, 1), "valueFormatter")).toStrictEqual({
+    expect(omit(childColDef(SUPER__SUB_A, 1), "valueFormatter")).toStrictEqual({
       "cellDataType": false,
       "cellStyle": undefined,
       "field": "a",
       "headerName": "sub_a",
     });
 
-    expect(_.omit(childColDef(SUPER__SUB_A2, 1), "valueFormatter")).toStrictEqual({
+    expect(omit(childColDef(SUPER__SUB_A2, 1), "valueFormatter")).toStrictEqual({
       "cellDataType": false,
       "cellStyle": undefined,
       "field": "a",