@finos/legend-application-data-cube 0.2.4 → 0.2.6

package/src/components/builder/LegendDataCubeBuilder.tsx

@@ -0,0 +1,331 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import {
+  DataCube,
+  FormButton,
+  type DataCubeSettingValues,
+  DataCubePlaceholder,
+  DataCubeNativeMenuItem,
+  DataCubePlaceholderErrorDisplay,
+  type DataCubeMenuItem,
+  DataCubeSpecification,
+} from '@finos/legend-data-cube';
+import {} from '@finos/legend-art';
+import {
+  useLegendDataCubeBuilderStore,
+  withLegendDataCubeBuilderStore,
+} from './LegendDataCubeBuilderStoreProvider.js';
+import { useParams } from '@finos/legend-application/browser';
+import {
+  LEGEND_DATA_CUBE_ROUTE_PATTERN_TOKEN,
+  type LegendDataCubeBuilderPathParams,
+} from '../../__lib__/LegendDataCubeNavigation.js';
+import { useEffect } from 'react';
+import { LegendDataCubeSettingStorageKey } from '../../__lib__/LegendDataCubeSetting.js';
+import type { LegendDataCubeBuilderStore } from '../../stores/builder/LegendDataCubeBuilderStore.js';
+
+const LegendDataCubeBuilderHeader = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+
+  return (
+    <div className="flex h-full items-center">
+      <FormButton compact={true} onClick={() => store.loader.display.open()}>
+        Load DataCube
+      </FormButton>
+      <FormButton
+        compact={true}
+        className="ml-1.5"
+        onClick={() => store.creator.display.open()}
+      >
+        New DataCube
+      </FormButton>
+      <FormButton
+        compact={true}
+        className="ml-1.5"
+        disabled={!store.builder?.dataCube}
+        onClick={() => store.saverDisplay.open()}
+      >
+        Save DataCube
+      </FormButton>
+    </div>
+  );
+});
+
+export const LegendDataCubeAbout = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+  const config = store.application.config;
+
+  return (
+    <div className="h-full items-center p-4">
+      <div className="my-0.5 flex font-mono">
+        <div>Environment:</div>
+        <div className="ml-1 font-bold">{config.env}</div>
+      </div>
+      <div className="my-0.5 flex font-mono">
+        <div>Version:</div>
+        <div className="ml-1 font-bold">{config.appVersion}</div>
+      </div>
+      <div className="my-0.5 flex font-mono">
+        <div>Revision:</div>
+        <div className="ml-1 font-bold">{config.appVersionCommitId}</div>
+      </div>
+      <div className="my-0.5 flex font-mono">
+        <div>Build Time:</div>
+        <div className="ml-1 font-bold">{config.appVersionBuildTime}</div>
+      </div>
+      <div className="mt-3 rounded-sm bg-white px-4 py-2">
+        <div className="my-0.5 flex font-mono">
+          <div>Engine Server:</div>
+          <div className="ml-1 font-bold text-sky-500 underline">
+            <a
+              href={config.engineServerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {config.engineServerUrl}
+            </a>
+          </div>
+        </div>
+        <div className="my-0.5 flex font-mono">
+          <div>Depot Server:</div>
+          <div className="ml-1 font-bold text-sky-500 underline">
+            <a
+              href={config.depotServerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {config.depotServerUrl}
+            </a>
+          </div>
+        </div>
+        {config.engineQueryServerUrl !== undefined && (
+          <div className="my-0.5 flex font-mono">
+            <div>DataCube Server:</div>
+            <div className="ml-1 font-bold text-sky-500 underline">
+              <a
+                href={config.engineQueryServerUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {config.engineQueryServerUrl}
+              </a>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+function generateMenuItems(store: LegendDataCubeBuilderStore) {
+  const application = store.application;
+  const builder = store.builder;
+  const persistentDataCube = builder?.persistentDataCube;
+
+  const menuItems: (DataCubeMenuItem | DataCubeNativeMenuItem)[] = builder
+    ? [
+        ...(builder.source
+          ? [
+              {
+                label: 'View Source',
+                action: () => {
+                  store.sourceViewerDisplay.open();
+                },
+              },
+            ]
+          : []),
+        ...(persistentDataCube
+          ? [
+              {
+                label: 'Reset to Latest Save',
+                action: () => {
+                  const latestSpecification =
+                    DataCubeSpecification.serialization.fromJson(
+                      persistentDataCube.content,
+                    );
+                  builder.dataCube
+                    ?.applySpecification(latestSpecification)
+                    .catch((error) =>
+                      store.alertService.alertUnhandledError(error),
+                    );
+                },
+              },
+              {
+                label: 'Update Info...',
+                action: () => {
+                  // effectively, we open the save window to let user update the DataCube info, such as name, auto-enable caching, etc.
+                  store.saverDisplay.open();
+                },
+                disabled:
+                  !store.canCurrentUserManageDataCube(persistentDataCube),
+              },
+              {
+                label: 'Delete DataCube...',
+                action: () => {
+                  store.setDataCubeToDelete(builder.persistentDataCube);
+                  store.deleteConfirmationDisplay.open();
+                },
+                disabled:
+                  !store.canCurrentUserManageDataCube(persistentDataCube),
+              },
+            ]
+          : []),
+      ]
+    : [];
+  return [
+    ...(menuItems.length
+      ? [...menuItems, DataCubeNativeMenuItem.SEPARATOR]
+      : []),
+    {
+      label: 'See Documentation',
+      action: () => {
+        const url = application.documentationService.url;
+        if (url) {
+          application.navigationService.navigator.visitAddress(
+            application.documentationService.url,
+          );
+        }
+      },
+      disabled: !application.documentationService.url,
+    },
+    {
+      label: 'About',
+      action: () => {
+        store.aboutDisplay.open();
+      },
+    },
+  ];
+}
+
+export const LegendDataCubeBuilder = withLegendDataCubeBuilderStore(
+  observer(() => {
+    const store = useLegendDataCubeBuilderStore();
+    const builder = store.builder;
+    const application = store.application;
+    const params = useParams<LegendDataCubeBuilderPathParams>();
+    const dataCubeId =
+      params[LEGEND_DATA_CUBE_ROUTE_PATTERN_TOKEN.DATA_CUBE_ID];
+
+    useEffect(() => {
+      application.navigationService.navigator.blockNavigation(
+        // Only block navigation in production, in development, we should have
+        // the flexibility to reload the page quickly
+        // eslint-disable-next-line no-process-env
+        [() => process.env.NODE_ENV === 'production'],
+      );
+      return (): void => {
+        application.navigationService.navigator.unblockNavigation();
+      };
+    }, [application]);
+
+    useEffect(() => {
+      store
+        .initialize()
+        .catch((error) => store.alertService.alertUnhandledError(error));
+      return () => {
+        store
+          .cleanUp()
+          .catch((error) => store.alertService.alertUnhandledError(error));
+      };
+    }, [store]);
+
+    useEffect(() => {
+      store
+        .loadDataCube(dataCubeId)
+        .catch((error) => store.alertService.alertUnhandledError(error));
+    }, [store, dataCubeId]);
+
+    if (!store.initializeState.hasSucceeded) {
+      return (
+        <DataCubePlaceholder
+          title="[ Legend DataCube ]"
+          layoutManager={store.layoutService.manager}
+          taskManager={store.taskService.manager}
+          headerContent={<LegendDataCubeBuilderHeader />}
+          menuItems={generateMenuItems(store)}
+        >
+          {store.initializeState.isInProgress && (
+            <div className="h-full w-full p-2">
+              <div>Initializing...</div>
+            </div>
+          )}
+          {store.initializeState.hasFailed && (
+            <DataCubePlaceholderErrorDisplay
+              message="Initialization Failure"
+              prompt="Resolve the issue and reload."
+            />
+          )}
+        </DataCubePlaceholder>
+      );
+    }
+    if (!builder) {
+      return (
+        <DataCubePlaceholder
+          title="[ Legend DataCube ]"
+          layoutManager={store.layoutService.manager}
+          taskManager={store.taskService.manager}
+          headerContent={<LegendDataCubeBuilderHeader />}
+          menuItems={generateMenuItems(store)}
+        >
+          <div className="h-full w-full p-2">
+            <div>Create a new DataCube to start</div>
+            <FormButton
+              className="mt-1.5"
+              onClick={() => store.creator.display.open()}
+            >
+              New DataCube
+            </FormButton>
+          </div>
+        </DataCubePlaceholder>
+      );
+    }
+    return (
+      <DataCube
+        key={builder.uuid} // used as mechanism to reload data-cube component when changing between DataCubes or between create/edit mode
+        specification={builder.initialSpecification}
+        engine={store.baseStore.engine}
+        options={{
+          layoutManager: store.layoutService.manager,
+          taskManager: store.taskService.manager,
+          gridClientLicense: store.baseStore.gridClientLicense,
+          onInitialized(event) {
+            builder.setDataCube(event.api);
+          },
+          onViewInitialized(event) {
+            builder.setSource(event.source);
+          },
+          innerHeaderRenderer: () => <LegendDataCubeBuilderHeader />,
+          getHeaderMenuItems: () => generateMenuItems(store),
+          settingsData: {
+            configurations: store.baseStore.settings,
+            values: application.settingService.getObjectValue(
+              LegendDataCubeSettingStorageKey.DATA_CUBE,
+            ) as DataCubeSettingValues | undefined,
+          },
+          onSettingsChanged(event) {
+            application.settingService.persistValue(
+              LegendDataCubeSettingStorageKey.DATA_CUBE,
+              event.values,
+            );
+          },
+          enableCache: true,
+        }}
+      />
+    );
+  }),
+);

package/src/components/{query-builder/LegendDataCubeQueryBuilderStoreProvider.tsx → builder/LegendDataCubeBuilderStoreProvider.tsx}

@@ -17,40 +17,43 @@
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useLocalObservable } from 'mobx-react-lite';
 import { createContext, useContext } from 'react';
-import { LegendDataCubeQueryBuilderStore } from '../../stores/query-builder/LegendDataCubeQueryBuilderStore.js';
+import { LegendDataCubeBuilderStore } from '../../stores/builder/LegendDataCubeBuilderStore.js';
 import { useLegendDataCubeBaseStore } from '../LegendDataCubeFrameworkProvider.js';
+import { LegendDataCubeBlockingWindow } from '../LegendDataCubeBlockingWindow.js';
 
-const LegendDataCubeQueryBuilderStoreContext = createContext<
-  LegendDataCubeQueryBuilderStore | undefined
+const LegendDataCubeBuilderStoreContext = createContext<
+  LegendDataCubeBuilderStore | undefined
 >(undefined);
-const LegendDataCubeQueryBuilderStoreProvider = (props: {
+const LegendDataCubeBuilderStoreProvider = (props: {
   children: React.ReactNode;
 }) => {
   const { children } = props;
   const baseStore = useLegendDataCubeBaseStore();
   const store = useLocalObservable(
-    () => new LegendDataCubeQueryBuilderStore(baseStore),
+    () => new LegendDataCubeBuilderStore(baseStore),
   );
   return (
-    <LegendDataCubeQueryBuilderStoreContext.Provider value={store}>
+    <LegendDataCubeBuilderStoreContext.Provider value={store}>
       {children}
-    </LegendDataCubeQueryBuilderStoreContext.Provider>
+      <LegendDataCubeBlockingWindow windowState={store.saverDisplay} />
+      <LegendDataCubeBlockingWindow
+        windowState={store.deleteConfirmationDisplay}
+      />
+    </LegendDataCubeBuilderStoreContext.Provider>
   );
 };
 
-export const useLegendDataCubeQueryBuilderStore = () =>
+export const useLegendDataCubeBuilderStore = () =>
   guaranteeNonNullable(
-    useContext(LegendDataCubeQueryBuilderStoreContext),
-    `Can't find query builder store in context`,
+    useContext(LegendDataCubeBuilderStoreContext),
+    `Can't find builder store in context`,
   );
 
-export const withLegendDataCubeQueryBuilderStore = (
-  WrappedComponent: React.FC,
-) =>
-  function WithLegendDataCubeQueryBuilderStore() {
+export const withLegendDataCubeBuilderStore = (WrappedComponent: React.FC) =>
+  function WithLegendDataCubeBuilderStore() {
     return (
-      <LegendDataCubeQueryBuilderStoreProvider>
+      <LegendDataCubeBuilderStoreProvider>
         <WrappedComponent />
-      </LegendDataCubeQueryBuilderStoreProvider>
+      </LegendDataCubeBuilderStoreProvider>
     );
   };

package/src/components/{query-builder/LegendDataCubeNewQueryBuilder.tsx → builder/LegendDataCubeCreator.tsx}

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { LegendDataCubeSourceBuilderType } from '../../stores/query-builder/source-builder/LegendDataCubeSourceBuilderState.js';
+import { LegendDataCubeSourceBuilderType } from '../../stores/builder/source/LegendDataCubeSourceBuilderState.js';
 import { useDropdownMenu } from '@finos/legend-art';
 import {
   FormButton,
@@ -23,15 +23,15 @@ import {
   FormDropdownMenuItem,
   FormDropdownMenuTrigger,
 } from '@finos/legend-data-cube';
-import { LegendQueryDataCubeSourceBuilderState } from '../../stores/query-builder/source-builder/LegendQueryDataCubeSourceBuilderState.js';
-import { LegendQueryDataCubeSourceBuilder } from './source-builder/LegendQueryDataCubeSourceBuilder.js';
-import { AdhocQueryDataCubeSourceBuilder } from './source-builder/AdhocQueryDataCubeSourceBuilder.js';
-import { AdhocQueryDataCubeSourceBuilderState } from '../../stores/query-builder/source-builder/AdhocQueryDataCubeSourceBuilderState.js';
-import { useLegendDataCubeQueryBuilderStore } from './LegendDataCubeQueryBuilderStoreProvider.js';
+import { LegendQueryDataCubeSourceBuilderState } from '../../stores/builder/source/LegendQueryDataCubeSourceBuilderState.js';
+import { LegendQueryDataCubeSourceBuilder } from './source/LegendQueryDataCubeSourceBuilder.js';
+import { AdhocQueryDataCubeSourceBuilder } from './source/AdhocQueryDataCubeSourceBuilder.js';
+import { AdhocQueryDataCubeSourceBuilderState } from '../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
 
-export const LegendDataCubeNewQueryBuilder = observer(() => {
-  const store = useLegendDataCubeQueryBuilderStore();
-  const state = store.newQueryState;
+export const LegendDataCubeCreator = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+  const state = store.creator;
   const sourceBuilder = state.sourceBuilder;
   const selectedSourceType = sourceBuilder.label;
   const [

package/src/components/builder/LegendDataCubeDeleteConfirmation.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormButton, FormTextInput } from '@finos/legend-data-cube';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
+import { formatDate } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const LegendDataCubeDeleteConfirmation = observer(() => {
+  const [text, setText] = useState('');
+  const store = useLegendDataCubeBuilderStore();
+  const application = useApplicationStore();
+  const persistentDataCube = store.dataCubeToDelete;
+  const confirmationText = `${application.identityService.isAnonymous ? '' : application.identityService.currentUser}_${formatDate(Date.now(), 'yyyyMMdd')}`;
+
+  useEffect(() => {
+    setText('');
+  }, [persistentDataCube]);
+
+  if (!persistentDataCube) {
+    return null;
+  }
+  return (
+    <>
+      <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 p-2">
+            <div>
+              <div className="whitespace-break-spaces">
+                You are about to delete this DataCube. Once deleted, it{' '}
+                <span className="font-bold">cannot be recovered</span>
+                <br />
+                Please type the following to confirm:
+                <span className="ml-1 rounded-sm bg-neutral-100 p-0.5 font-mono font-bold text-red-500">
+                  {confirmationText}
+                </span>
+              </div>
+              <div className="mt-1 whitespace-break-spaces text-neutral-500">
+                {text}
+              </div>
+            </div>
+            <div className="flex h-6 w-full items-center">
+              <FormTextInput
+                className="w-full"
+                value={text}
+                onChange={(event) => {
+                  setText(event.target.value);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex h-10 items-center justify-end px-2">
+        <FormButton onClick={() => store.deleteConfirmationDisplay.close()}>
+          Cancel
+        </FormButton>
+        <FormButton
+          className="ml-2"
+          disabled={store.deleteState.isInProgress || text !== confirmationText}
+          onClick={() => {
+            store
+              .deleteDataCube()
+              .catch((error) => store.alertService.alertUnhandledError(error));
+          }}
+        >
+          Delete
+        </FormButton>
+      </div>
+    </>
+  );
+});