@finos/legend-data-cube 0.0.36 → 0.0.38

package/src/components/core/DataCubePureCodeEditorUtils.tsx

@@ -19,9 +19,12 @@ import {
   languages as monacoLanguagesAPI,
   type IPosition,
 } from 'monaco-editor';
-import type { CompletionItem } from '../../stores/core/DataCubeEngine.js';
+import type {
+  CompletionItem,
+  DataCubeEngine,
+} from '../../stores/core/DataCubeEngine.js';
 import type { V1_Lambda } from '@finos/legend-graph';
-import type { DataCubeViewState } from '../../stores/view/DataCubeViewState.js';
+import type { DataCubeSource } from '../../stores/core/model/DataCubeSource.js';
 
 // Since we render the editor in a window which has been CSS transformed, and monaco-editor renders
 // the widgets with position=fixed, the position of the widgets will be off, we need to move the root
@@ -43,7 +46,8 @@ export async function getCodeSuggestions(
   position: IPosition,
   model: monacoEditorAPI.ITextModel,
   prefix: string | undefined,
-  view: DataCubeViewState,
+  engine: DataCubeEngine,
+  source: DataCubeSource,
   baseQueryBuilder: () => V1_Lambda,
 ) {
   const textUntilPosition = model.getValueInRange({
@@ -57,10 +61,10 @@ export async function getCodeSuggestions(
   let suggestions: CompletionItem[] = [];
 
   try {
-    suggestions = await view.engine.getQueryTypeahead(
+    suggestions = await engine.getQueryTypeahead(
       (prefix ?? '') + textUntilPosition,
       baseQueryBuilder(),
-      view.source,
+      source,
     );
   } catch {
     // do nothing: provide no suggestions when error ocurred

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/services/DataCubeSettingService.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.settingService;
 
-  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,
+                  );
+                });
+              }}
+            />
           </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?.(dataCube.api, undefined)}
+              >
+                Run Action
+              </FormButton>
             </div>
           </div>
+        );
+      }
+      default:
+        return null;
+    }
+  },
+);
+
+export const DataCubeSettingsPanel = observer(() => {
+  const dataCube = useDataCube();
+  const panel = dataCube.settingService;
+  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.restoreDefaultValues()}
+          disabled={!panel.allowRestoreDefaultValues}
         >
           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(dataCube.api)}>
+          Apply
+        </FormButton>
+        <FormButton
+          className="ml-2"
+          onClick={() => {
+            panel.save(dataCube.api);
+            panel.display.close();
+          }}
         >
-          Save Settings
-        </button>
+          OK
+        </FormButton>
       </div>
     </>
   );

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

@@ -24,11 +24,15 @@ 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';
+import { useDataCube } from '../../DataCubeProvider.js';
 
 export const DataCubeEditor = observer((props: { view: DataCubeViewState }) => {
+  const dataCube = useDataCube();
+  const alertService = dataCube.alertService;
+
   const { view } = props;
   const editor = view.editor;
-  const engine = view.engine;
   const selectedTab = editor.currentTab;
   const tabs = [
     DataCubeEditorTab.COLUMNS,
@@ -80,34 +84,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 })
-              .catch((error) => engine.alertUnhandledError(error));
+              .applyChanges()
+              .catch((error) => alertService.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()
-              .catch((error) => engine.alertUnhandledError(error));
+              .applyChanges({ closeAfterApply: true })
+              .catch((error) => alertService.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,
@@ -44,21 +45,22 @@ import {
   DEFAULT_URL_LABEL_QUERY_PARAM,
   EMPTY_VALUE_PLACEHOLDER,
 } from '../../../stores/core/DataCubeQueryEngine.js';
-import { DocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
+import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
-import { _sortByColName } from '../../../stores/core/models/DataCubeColumn.js';
+import { _sortByColName } from '../../../stores/core/model/DataCubeColumn.js';
 
 export const DataCubeEditorColumnPropertiesPanel = observer(
   (props: { view: DataCubeViewState }) => {
     const { view } = props;
-    const panel = view.editor.columnProperties;
+    const editor = view.editor;
+    const panel = editor.columnProperties;
     const gridConfiguration = view.editor.generalProperties.configuration;
     const selectedColumn = panel.selectedColumn;
     const [
       openColumnDropdown,
       closeColumnDropdown,
       columnDropdownProps,
-      columnDropPropsOpen,
+      columnDropdownPropsOpen,
     ] = useDropdownMenu();
     const [
       openKindDropdown,
@@ -136,7 +138,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">
@@ -148,7 +150,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         {selectedColumn.dataType}
                       </div>
                       {Boolean(
-                        panel.editor.leafExtendColumns.find(
+                        editor.leafExtendColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ),
                       ) && (
@@ -157,7 +159,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         </div>
                       )}
                       {Boolean(
-                        panel.editor.groupExtendColumns.find(
+                        editor.groupExtendColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ),
                       ) && (
@@ -186,7 +188,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       {column.dataType}
                     </div>
                     {Boolean(
-                      panel.editor.leafExtendColumns.find(
+                      editor.leafExtendColumns.find(
                         (col) => col.name === column.name,
                       ),
                     ) && (
@@ -195,7 +197,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       </div>
                     )}
                     {Boolean(
-                      panel.editor.groupExtendColumns.find(
+                      editor.groupExtendColumns.find(
                         (col) => col.name === column.name,
                       ),
                     ) && (
@@ -215,7 +217,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       <FormDocumentation
                         className="ml-1"
                         documentationKey={
-                          DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_KIND
+                          DataCubeDocumentationKey.COLUMN_CONFIGURATION_KIND
                         }
                       />
                     </div>
@@ -225,10 +227,10 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                       open={kindDropdownPropsOpen}
                       // disallow changing the column kind if the column is being used as pivot column
                       disabled={Boolean(
-                        panel.editor.verticalPivots.selector.selectedColumns.find(
+                        editor.verticalPivots.selector.selectedColumns.find(
                           (col) => col.name === selectedColumn.name,
                         ) ??
-                          panel.editor.horizontalPivots.selector.selectedColumns.find(
+                          editor.horizontalPivots.selector.selectedColumns.find(
                             (col) => col.name === selectedColumn.name,
                           ),
                       )}
@@ -280,7 +282,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-80"
                     value={selectedColumn.displayName ?? ''}
                     onChange={(event) => {
-                      const value = event.target.value.trim();
+                      const value = event.target.value;
                       selectedColumn.setDisplayName(
                         value !== '' ? value : undefined,
                       );
@@ -306,7 +308,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-32"
                     {...aggregationOperationDropdownProps}
                   >
-                    {panel.view.engine.aggregateOperations
+                    {view.engine.aggregateOperations
                       .filter((op) => op.isCompatibleWithColumn(selectedColumn))
                       .map((op) => (
                         <FormDropdownMenuItem
@@ -423,7 +425,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         <FormDocumentation
                           className="ml-1"
                           documentationKey={
-                            DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_UNIT
+                            DataCubeDocumentationKey.COLUMN_CONFIGURATION_UNIT
                           }
                         />
                       </div>
@@ -433,7 +435,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         onChange={(event) => {
                           const value = event.target.value.trim();
                           selectedColumn.setUnit(
-                            value.trim() !== '' ? value.trim() : undefined,
+                            value.trim() !== '' ? value : undefined,
                           );
                         }}
                         placeholder={EMPTY_VALUE_PLACEHOLDER}
@@ -450,7 +452,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                         <FormDocumentation
                           className="ml-1"
                           documentationKey={
-                            DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_DISPLAY_AS_LINK
+                            DataCubeDocumentationKey.COLUMN_CONFIGURATION_DISPLAY_AS_LINK
                           }
                         />
                       </div>
@@ -487,7 +489,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     <FormDocumentation
                       className="ml-1"
                       documentationKey={
-                        DocumentationKey.DATA_CUBE_COLUMN_CONFIGURATION_MISSING_VALUE_FORMAT
+                        DataCubeDocumentationKey.COLUMN_CONFIGURATION_MISSING_VALUE_FORMAT
                       }
                     />
                   </div>
@@ -495,7 +497,7 @@ export const DataCubeEditorColumnPropertiesPanel = observer(
                     className="w-16"
                     value={selectedColumn.missingValueDisplayText ?? ''}
                     onChange={(event) => {
-                      const value = event.target.value.trim();
+                      const value = event.target.value;
                       selectedColumn.setMissingValueDisplayText(
                         value !== '' ? value : undefined,
                       );
@@ -1220,13 +1222,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>
               </>