@finos/legend-data-cube 0.0.35 → 0.0.37

package/src/components/core/DataCubeSettingsPanel.tsx

@@ -16,179 +16,211 @@
 
 import { observer } from 'mobx-react-lite';
 import { DataCubeIcon } from '@finos/legend-art';
-import { FormCheckbox, FormNumberInput } from './DataCubeFormUtils.js';
-import { useState } from 'react';
+import {
+  FormButton,
+  FormCheckbox,
+  FormNumberInput,
+  FormTextInput,
+} from './DataCubeFormUtils.js';
 import { useDataCube } from '../DataCubeProvider.js';
 import {
-  DataCubeSettingKey,
-  DEFAULT_SETTINGS,
-} from '../../stores/DataCubeSettings.js';
-
-export const DataCubeSettingsPanel = observer(() => {
-  const dataCube = useDataCube();
-
-  // NOTE: this makes sure the changes are not applied until saved, but it generates
-  // a lot of boilerplate code, consider using a more ergonomic approach when we need
-  // to scale this to more settings.
-  const [enableDebugMode, setEnableDebugMode] = useState(
-    dataCube.settings.enableDebugMode,
-  );
-  const [gridClientRowBuffer, setGridClientRowBuffer] = useState(
-    dataCube.settings.gridClientRowBuffer,
-  );
-  const [gridClientPurgeClosedRowNodes, setGridClientPurgeClosedRowNodes] =
-    useState(dataCube.settings.gridClientPurgeClosedRowNodes);
-  const [
-    gridClientSuppressLargeDatasetWarning,
-    setGridClientSuppressLargeDatasetWarning,
-  ] = useState(dataCube.settings.gridClientSuppressLargeDatasetWarning);
+  DataCubeSettingGroup,
+  DataCubeSettingType,
+  type DataCubeSetting,
+} from '../../stores/core/DataCubeSetting.js';
+import {
+  guaranteeIsBoolean,
+  guaranteeIsNumber,
+  guaranteeIsString,
+} from '@finos/legend-shared';
+import { runInAction } from 'mobx';
 
-  const save = () => {
-    dataCube.settings.setEnableDebugMode(enableDebugMode);
-    dataCube.settings.setGridClientRowBuffer(gridClientRowBuffer);
-    dataCube.settings.setGridClientPurgeClosedRowNodes(
-      gridClientPurgeClosedRowNodes,
-    );
-    dataCube.settings.setGridClientSuppressLargeDatasetWarning(
-      gridClientSuppressLargeDatasetWarning,
-    );
-  };
-  const restoreDefaults = () => {
-    setEnableDebugMode(DEFAULT_SETTINGS[DataCubeSettingKey.ENABLE_DEBUG_MODE]);
-    setGridClientRowBuffer(
-      DEFAULT_SETTINGS[DataCubeSettingKey.GRID_CLIENT_ROW_BUFFER],
-    );
-    setGridClientPurgeClosedRowNodes(
-      DEFAULT_SETTINGS[DataCubeSettingKey.GRID_CLIENT_PURGE_CLOSED_ROW_NODES],
-    );
-    setGridClientSuppressLargeDatasetWarning(
-      DEFAULT_SETTINGS[
-        DataCubeSettingKey.GRID_CLIENT_SUPPRESS_LARGE_DATASET_WARNING
-      ],
-    );
-    save();
-  };
+const DataCubeSettingEntryDisplay = observer(
+  (props: { configuration: DataCubeSetting }) => {
+    const { configuration } = props;
+    const dataCube = useDataCube();
+    const panel = dataCube.settings;
 
-  return (
-    <>
-      <div className="h-[calc(100%_-_40px)] w-full p-2 pb-0">
-        <div className="h-full w-full select-none overflow-auto border border-neutral-300 bg-white p-2">
-          <div className="flex h-6">
-            <div className="flex h-full">
-              <div className="flex h-6 items-center text-xl font-medium">
-                <DataCubeIcon.Table />
-              </div>
-              <div className="ml-1 flex h-6 items-center text-xl font-medium">
-                Grid
-              </div>
-            </div>
-          </div>
-          <div className="mt-1.5">
-            <div className="font-medium">Large Dataset Warning: Disabled</div>
+    switch (configuration.type) {
+      case DataCubeSettingType.BOOLEAN: {
+        const value = guaranteeIsBoolean(
+          panel.currentValues.get(configuration.key),
+        );
+        return (
+          <div className="my-2">
+            <div className="font-medium">{configuration.title}</div>
             <div className="flex pr-2">
               <FormCheckbox
-                label="Suggests user to enable pagination when handling large datasets to improve performance."
-                checked={gridClientSuppressLargeDatasetWarning}
-                onChange={() =>
-                  setGridClientSuppressLargeDatasetWarning(
-                    !gridClientSuppressLargeDatasetWarning,
-                  )
-                }
+                label={configuration.description}
+                checked={value}
+                onChange={() => {
+                  runInAction(() => {
+                    panel.currentValues.set(configuration.key, !value);
+                  });
+                }}
               />
             </div>
           </div>
+        );
+      }
+      case DataCubeSettingType.NUMERIC: {
+        const value = guaranteeIsNumber(
+          panel.currentValues.get(configuration.key),
+        );
+        const defaultValue = configuration.defaultValue as number;
+        return (
           <div className="my-2">
-            <div className="font-medium">Refresh Failed Data Fetch: Action</div>
+            <div className="font-medium">{configuration.title}</div>
             <div className="mb-1.5 text-sm text-neutral-700">
-              {`Manually re-run all failed data fetches in the grid.`}
-            </div>
-            <div className="flex pr-2">
-              <button
-                className="ml-2 h-5 min-w-16 border border-neutral-400 bg-neutral-300 px-2 text-sm first-of-type:ml-0 hover:brightness-95"
-                onClick={() => dataCube.refreshFailedDataFetches()}
-              >
-                Run Action
-              </button>
+              {configuration.description}
             </div>
+            <FormNumberInput
+              className="w-20 text-sm"
+              min={configuration.numericValueMin}
+              step={configuration.numericValueStep}
+              max={configuration.numericValueMax}
+              defaultValue={defaultValue}
+              value={value}
+              setValue={(newValue) => {
+                runInAction(() => {
+                  panel.currentValues.set(
+                    configuration.key,
+                    newValue ?? defaultValue,
+                  );
+                });
+              }}
+            />
           </div>
+        );
+      }
+      case DataCubeSettingType.STRING: {
+        const value = guaranteeIsString(
+          panel.currentValues.get(configuration.key),
+        );
+        return (
           <div className="my-2">
-            <div className="font-medium">Refresh Group Node Data: Enabled</div>
-            <div className="flex pr-2">
-              <FormCheckbox
-                label="Force refresh data when group node is opened."
-                checked={gridClientPurgeClosedRowNodes}
-                onChange={() =>
-                  setGridClientPurgeClosedRowNodes(
-                    !gridClientPurgeClosedRowNodes,
-                  )
-                }
-              />
+            <div className="font-medium">{configuration.title}</div>
+            <div className="mb-1.5 text-sm text-neutral-700">
+              {configuration.description}
             </div>
+            <FormTextInput
+              className="w-80 text-sm"
+              value={value}
+              onChange={(event) => {
+                runInAction(() => {
+                  panel.currentValues.set(
+                    configuration.key,
+                    event.target.value.trim(),
+                  );
+                });
+              }}
+            />
           </div>
+        );
+      }
+      case DataCubeSettingType.ACTION: {
+        return (
           <div className="my-2">
-            <div className="font-medium">Row Buffer</div>
+            <div className="font-medium">{configuration.title}</div>
             <div className="mb-1.5 text-sm text-neutral-700">
-              {`Sets the number of rows the grid renders outside of the viewable area. e.g. if the buffer is 10 and your grid is showing 50 rows (as that's all that fits on your screen without scrolling), then the grid will actually render 70 in total (10 extra above and 10 extra below). Then when you scroll, the grid will already have 10 rows ready and waiting to show, no redraw is needed. A low small buffer will make initial draws of the grid faster; whereas a big one will reduce the redraw visible vertically scrolling.`}
+              {configuration.description}
             </div>
             <div className="flex pr-2">
-              <FormNumberInput
-                className="w-16 text-sm"
-                min={10}
-                step={10}
-                defaultValue={
-                  DEFAULT_SETTINGS[DataCubeSettingKey.GRID_CLIENT_ROW_BUFFER]
-                }
-                value={gridClientRowBuffer}
-                setValue={(value) => {
-                  setGridClientRowBuffer(
-                    value ??
-                      DEFAULT_SETTINGS[
-                        DataCubeSettingKey.GRID_CLIENT_ROW_BUFFER
-                      ],
-                  );
-                }}
-              />
+              <FormButton
+                compact={true}
+                onClick={() => configuration.action?.(undefined)}
+              >
+                Run Action
+              </FormButton>
             </div>
           </div>
+        );
+      }
+      default:
+        return null;
+    }
+  },
+);
+
+export const DataCubeSettingsPanel = observer(() => {
+  const dataCube = useDataCube();
+  const panel = dataCube.settings;
+  const configurations = Array.from(panel.configurations.values()).toSorted(
+    (a, b) => a.title.localeCompare(b.title),
+  );
+
+  return (
+    <>
+      <div className="h-[calc(100%_-_40px)] w-full p-2 pb-0">
+        <div className="h-full w-full select-none overflow-auto border border-neutral-300 bg-white p-2">
+          <div className="mt-1 flex h-5">
+            <div className="flex h-full">
+              <div className="flex h-5 items-center text-xl font-medium">
+                <DataCubeIcon.Table />
+              </div>
+              <div className="ml-1 flex h-5 items-center text-xl font-medium">
+                Grid
+              </div>
+            </div>
+          </div>
+          {configurations
+            .filter((setting) => setting.group === DataCubeSettingGroup.GRID)
+            .map((configuration) => (
+              <DataCubeSettingEntryDisplay
+                key={configuration.key}
+                configuration={configuration}
+              />
+            ))}
 
           <div className="my-2 h-[1px] w-full bg-neutral-200" />
 
-          <div className="flex h-6">
+          <div className="mt-1 flex h-5">
             <div className="flex h-full">
-              <div className="flex h-6 items-center text-xl font-medium">
+              <div className="flex h-5 items-center text-xl font-medium">
                 <DataCubeIcon.Debug />
               </div>
-              <div className="ml-1 flex h-6 items-center text-xl font-medium">
+              <div className="ml-1 flex h-5 items-center text-xl font-medium">
                 Debug
               </div>
             </div>
           </div>
-
-          <div className="mt-1.5">
-            <div className="font-medium">Debug Mode: Enabled</div>
-            <div className="flex pr-2">
-              <FormCheckbox
-                label="Enable debug logging when running data queries, updating snapshots, etc."
-                checked={enableDebugMode}
-                onChange={() => setEnableDebugMode(!enableDebugMode)}
+          {configurations
+            .filter((setting) => setting.group === DataCubeSettingGroup.DEBUG)
+            .map((configuration) => (
+              <DataCubeSettingEntryDisplay
+                key={configuration.key}
+                configuration={configuration}
               />
-            </div>
-          </div>
+            ))}
         </div>
       </div>
       <div className="flex h-10 items-center justify-end px-2">
-        <button
-          className="ml-2 h-6 w-48 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-          onClick={restoreDefaults}
+        <FormButton
+          onClick={() => panel.resetDefaultValues()}
+          disabled={panel.currentValuesHashCode === panel.defaultValuesHashCode}
         >
           Restore Default Settings
-        </button>
-        <button
-          className="ml-2 h-6 w-36 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-          onClick={save}
+        </FormButton>
+        <FormButton
+          className="ml-2"
+          onClick={() => {
+            panel.display.close();
+          }}
+        >
+          Cancel
+        </FormButton>
+        <FormButton className="ml-2" onClick={() => panel.save()}>
+          Apply
+        </FormButton>
+        <FormButton
+          className="ml-2"
+          onClick={() => {
+            panel.save();
+            panel.display.close();
+          }}
         >
-          Save Settings
-        </button>
+          OK
+        </FormButton>
       </div>
     </>
   );

package/src/components/view/editor/DataCubeEditor.tsx

@@ -24,6 +24,7 @@ import { DataCubeEditorHorizontalPivotsPanel } from './DataCubeEditorHorizontalP
 import { DataCubeEditorColumnPropertiesPanel } from './DataCubeEditorColumnPropertiesPanel.js';
 import { cn } from '@finos/legend-art';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
+import { FormButton } from '../../core/DataCubeFormUtils.js';
 
 export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
   const { view } = props;
@@ -80,34 +81,29 @@ export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
         </div>
       </div>
       <div className="flex h-10 items-center justify-end px-2">
-        <button
-          className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100"
+        <FormButton onClick={() => editor.display.close()}>Cancel</FormButton>
+        <FormButton
+          className="ml-2"
           disabled={editor.finalizationState.isInProgress}
           onClick={() => {
             editor
-              .applyChanges({ closeAfterApply: true })
+              .applyChanges()
               .catch((error) => engine.alertUnhandledError(error));
           }}
         >
-          OK
-        </button>
-        <button
-          className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-          onClick={() => editor.display.close()}
-        >
-          Cancel
-        </button>
-        <button
-          className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100"
+          Apply
+        </FormButton>
+        <FormButton
+          className="ml-2"
           disabled={editor.finalizationState.isInProgress}
           onClick={() => {
             editor
-              .applyChanges()
+              .applyChanges({ closeAfterApply: true })
               .catch((error) => engine.alertUnhandledError(error));
           }}
         >
-          Apply
-        </button>
+          OK
+        </FormButton>
       </div>
     </>
   );

package/src/components/view/editor/DataCubeEditorColumnPropertiesPanel.tsx

@@ -27,6 +27,7 @@ import {
   FormNumberInput,
   FormTextInput,
   FormDocumentation,
+  FormButton,
 } from '../../core/DataCubeFormUtils.js';
 import {
   DataCubeQueryClientSideAggregateOperator,
@@ -58,7 +59,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
       openColumnDropdown,
       closeColumnDropdown,
       columnDropdownProps,
-      columnDropPropsOpen,
+      columnDropdownPropsOpen,
     ] = useDropdownMenu();
     const [
       openKindDropdown,
@@ -136,7 +137,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
               <FormDropdownMenuTrigger
                 className="w-80"
                 onClick={openColumnDropdown}
-                open={columnDropPropsOpen}
+                open={columnDropdownPropsOpen}
               >
                 <div className="flex h-full w-full items-center">
                   <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
@@ -1220,13 +1221,13 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                   <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
                   <div className="w-80">
                     <div className="mb-2 h-[1px] w-full bg-neutral-200" />
-                    <button
-                      className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
+                    <FormButton
+                      compact={true}
                       disabled={selectedColumn.isUsingDefaultStyling}
                       onClick={() => selectedColumn.useDefaultStyling()}
                     >
                       Use Default Styling
-                    </button>
+                    </FormButton>
                   </div>
                 </div>
               </>

package/src/components/view/editor/DataCubeEditorGeneralPropertiesPanel.tsx

@@ -42,6 +42,7 @@ import {
   FormNumberInput,
   FormBadge_WIP,
   FormDocumentation,
+  FormButton,
 } from '../../core/DataCubeFormUtils.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
@@ -773,13 +774,13 @@ export const DataCubeEditorGeneralPropertiesPanel = observer(
               <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
               <div className="w-80">
                 <div className="mb-2 h-[1px] w-full bg-neutral-200" />
-                <button
-                  className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
+                <FormButton
+                  compact={true}
                   disabled={configuration.isUsingDefaultStyling}
                   onClick={() => configuration.useDefaultStyling()}
                 >
                   Use Default Styling
-                </button>
+                </FormButton>
               </div>
             </div>
           </div>

package/src/components/view/extend/DataCubeColumnEditor.tsx

@@ -36,6 +36,7 @@ import {
   MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
 } from '../../core/DataCubePureCodeEditorUtils.js';
 import {
+  FormButton,
   FormDocumentation,
   FormDropdownMenu,
   FormDropdownMenuItem,
@@ -191,7 +192,7 @@ export const DataCubeColumnCreator = observer(
 
     return (
       <>
-        <div className="relative h-[calc(100%_-_40px)] w-full px-2 pt-2">
+        <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
           <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
             <div className="h-full w-full select-none p-0">
               <div className="h-24 w-full p-2">
@@ -340,26 +341,11 @@ export const DataCubeColumnCreator = observer(
           </div>
         </div>
         <div className="flex h-10 items-center justify-end px-2">
-          <button
-            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100"
-            disabled={
-              !state.isNameValid ||
-              !state.isTypeValid ||
-              state.validationState.isInProgress ||
-              state.finalizationState.isInProgress
-            }
-            onClick={() => {
-              state
-                .applyChanges()
-                .catch((error) => engine.alertUnhandledError(error));
-            }}
-          >
-            OK
-          </button>
+          <FormButton onClick={() => state.close()}>Cancel</FormButton>
           {state instanceof DataCubeExistingColumnEditorState && (
             <>
-              <button
-                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+              <FormButton
+                className="ml-2"
                 onClick={() => {
                   state.manager
                     .deleteColumn(state.initialData.name)
@@ -367,9 +353,9 @@ export const DataCubeColumnCreator = observer(
                 }}
               >
                 Delete
-              </button>
-              <button
-                className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+              </FormButton>
+              <FormButton
+                className="ml-2"
                 onClick={() => {
                   state
                     .reset()
@@ -377,15 +363,25 @@ export const DataCubeColumnCreator = observer(
                 }}
               >
                 Reset
-              </button>
+              </FormButton>
             </>
           )}
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => state.close()}
+          <FormButton
+            className="ml-2"
+            disabled={
+              !state.isNameValid ||
+              !state.isTypeValid ||
+              state.validationState.isInProgress ||
+              state.finalizationState.isInProgress
+            }
+            onClick={() => {
+              state
+                .applyChanges()
+                .catch((error) => engine.alertUnhandledError(error));
+            }}
           >
-            Cancel
-          </button>
+            OK
+          </FormButton>
         </div>
       </>
     );

package/src/components/view/filter/DataCubeFilterEditor.tsx

@@ -37,6 +37,7 @@ import {
   type DataCubeFilterEditorTreeNode,
 } from '../../../stores/core/filter/DataCubeQueryFilterEditorState.js';
 import {
+  FormButton,
   FormDropdownMenu,
   FormDropdownMenuItem,
   FormDropdownMenuTrigger,
@@ -844,14 +845,13 @@ export const DataCubeFilterEditor = observer(
                       <div>
                         No filter is specified. Click the button below to start.
                       </div>
-                      <button
-                        className="w-30 mt-2 h-6 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+                      <FormButton
                         onClick={() => {
                           editor.initializeTree();
                         }}
                       >
                         Create New Filter
-                      </button>
+                      </FormButton>
                     </div>
                   )}
                   {editor.tree.root && (
@@ -879,27 +879,19 @@ export const DataCubeFilterEditor = observer(
           </div>
         </div>
         <div className="flex h-10 items-center justify-end px-2">
-          <button
-            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+          <FormButton onClick={() => editor.display.close()}>Cancel</FormButton>
+          <FormButton className="ml-2" onClick={() => editor.applyChanges()}>
+            Apply
+          </FormButton>
+          <FormButton
+            className="ml-2"
             onClick={() => {
               editor.applyChanges();
               editor.display.close();
             }}
           >
             OK
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.display.close()}
-          >
-            Cancel
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.applyChanges()}
-          >
-            Apply
-          </button>
+          </FormButton>
         </div>
       </>
     );

package/src/components/view/grid/DataCubeGrid.tsx

@@ -50,13 +50,6 @@ import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.j
 // We MUST NEVER completely surpress this warning in production, else it's a violation of the ag-grid license!
 // See https://www.ag-grid.com/react-data-grid/licensing/
 const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
-// eslint-disable-next-line no-process-env
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line no-console
-  console.error = (message?: unknown, ...agrs: unknown[]) => {
-    console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
-  };
-}
 
 function textColorStyle(
   key: DataCubeConfigurationColorKey,
@@ -332,6 +325,14 @@ const DataCubeGridClient = observer((props: { view: DataCubeViewState }) => {
   const { view } = props;
   const grid = view.grid;
 
+  // eslint-disable-next-line no-process-env
+  if (process.env.NODE_ENV === 'development' && !grid.isClientConfigured) {
+    // eslint-disable-next-line no-console
+    console.error = (message?: unknown, ...agrs: unknown[]) => {
+      console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+    };
+  }
+
   return (
     <div className="relative h-[calc(100%_-_20px)] w-full">
       <AgGridReact