@finos/legend-data-cube 0.0.2

package/src/components/DataCube.tsx

@@ -0,0 +1,157 @@
+/**
+ * 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 { useEffect } from 'react';
+import { DataCubeGrid } from './grid/DataCubeGrid.js';
+import {
+  DataCubeIcon,
+  DropdownMenu,
+  DropdownMenuItem,
+  ProgressBar,
+  useDropdownMenu,
+} from '@finos/legend-art';
+import { DataCubeLayoutManager } from './application/DataCubeLayoutManager.js';
+import type { DataCubeViewState } from '../stores/DataCubeViewState.js';
+import { INTERNAL__MonacoEditorWidgetsRoot } from './shared/DataCubePureCodeEditorUtils.js';
+import { useDataCube } from './DataCubeProvider.js';
+import { DataCubeBlockingActionAlert } from './application/DataCubeAlert.js';
+
+const DataCubeStatusBar = observer((props: { view: DataCubeViewState }) => {
+  const { view } = props;
+
+  return (
+    <div className="flex h-5 w-full justify-between bg-neutral-100">
+      <div className="flex">
+        <button
+          className="flex items-center px-2 text-sky-600 hover:text-sky-700"
+          onClick={() => view.editor.display.open()}
+        >
+          <DataCubeIcon.Settings className="text-xl" />
+          <div className="pl-0.5 underline">Properties</div>
+        </button>
+        <div className="flex">
+          <button
+            className="flex items-center text-sky-600 hover:text-sky-700"
+            onClick={() => {
+              view.filter.display.open();
+            }}
+          >
+            <DataCubeIcon.TableFilter className="text-lg" />
+            <div className="pl-0.5 underline">Filter</div>
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center px-2">
+        <div className="flex h-3.5 w-48 border-[0.5px] border-neutral-300">
+          {view.runningTasks.size > 0 && (
+            <ProgressBar
+              classes={{
+                root: 'h-3.5 w-full bg-transparent',
+                bar1Indeterminate: 'bg-green-500',
+                bar2Indeterminate: 'bg-green-500',
+              }}
+              variant="indeterminate"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+// TODO?: we might need to move this up a level to accomondate for multi-view use case
+// as only the top-level view should have their own title bar
+const DataCubeTitleBar = observer((props: { view: DataCubeViewState }) => {
+  const { view } = props;
+  const application = view.application;
+  const [openMenuDropdown, closeMenuDropdown, menuDropdownProps] =
+    useDropdownMenu();
+
+  return (
+    <div className="flex h-6 justify-between bg-neutral-100">
+      <div className="flex select-none items-center pl-1 pr-2 text-lg font-medium">
+        <DataCubeIcon.Cube className="mr-1 h-4 w-4" />
+        <div>{view.info.name}</div>
+      </div>
+      <div>
+        <button
+          className="flex h-6 w-6 flex-shrink-0 items-center justify-center text-lg"
+          onClick={openMenuDropdown}
+        >
+          <DataCubeIcon.Menu />
+        </button>
+        <DropdownMenu
+          {...menuDropdownProps}
+          menuProps={{
+            anchorOrigin: { vertical: 'top', horizontal: 'left' },
+            transformOrigin: { vertical: 'top', horizontal: 'right' },
+            classes: {
+              paper: 'rounded-none mt-[1px]',
+              list: 'w-36 p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
+            },
+          }}
+        >
+          <DropdownMenuItem
+            className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
+            onClick={() => {
+              if (application.documentationUrl) {
+                application.openLink(application.documentationUrl);
+              }
+              closeMenuDropdown();
+            }}
+            disabled={true} // TODO: enable when we set up the documentation website
+          >
+            See Documentation
+          </DropdownMenuItem>
+          <div className="my-0.5 h-[1px] w-full bg-neutral-200" />
+          <DropdownMenuItem
+            className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
+            onClick={() => {
+              view.dataCube.settingsDisplay.open();
+              closeMenuDropdown();
+            }}
+          >
+            Settings...
+          </DropdownMenuItem>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+});
+
+export const DataCube = observer(() => {
+  const dataCube = useDataCube();
+  const application = dataCube.application;
+  const view = dataCube.view;
+
+  useEffect(() => {
+    view.initialize().catch((error) => application.logUnhandledError(error));
+  }, [view, application]);
+
+  return (
+    <div className="data-cube relative flex h-full w-full flex-col bg-white">
+      <DataCubeTitleBar view={view} />
+
+      <DataCubeGrid view={view} />
+      <DataCubeStatusBar view={view} />
+
+      <DataCubeLayoutManager layout={application.layout} />
+      <DataCubeBlockingActionAlert />
+      <INTERNAL__MonacoEditorWidgetsRoot />
+    </div>
+  );
+});

package/src/components/DataCubeProvider.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { createContext, useContext, useEffect } from 'react';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { DataCubeState } from '../stores/DataCubeState.js';
+import type { DataCubeApplicationEngine } from '../stores/engine/DataCubeApplicationEngine.js';
+import type { DataCubeEngine } from '../stores/engine/DataCubeEngine.js';
+
+const DataCubeStateContext = createContext<DataCubeState | undefined>(
+  undefined,
+);
+
+export const DataCubeProvider = observer(
+  (props: {
+    children: React.ReactNode;
+    application: DataCubeApplicationEngine;
+    engine: DataCubeEngine;
+  }): React.ReactElement => {
+    const { children, application, engine } = props;
+    const store = useLocalObservable(
+      () => new DataCubeState(application, engine),
+    );
+
+    useEffect(() => {
+      store.initialize().catch((error) => application.logUnhandledError(error));
+    }, [store, application]);
+
+    if (!store.initState.hasSucceeded) {
+      return <></>;
+    }
+    return (
+      <DataCubeStateContext.Provider value={store}>
+        {children}
+      </DataCubeStateContext.Provider>
+    );
+  },
+);
+
+export const useDataCube = () =>
+  guaranteeNonNullable(
+    useContext(DataCubeStateContext),
+    `Can't find Data Cube in context`,
+  );

package/src/components/application/DataCubeAlert.tsx

@@ -0,0 +1,173 @@
+/**
+ * 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 { cn, DataCubeIcon, Dialog } from '@finos/legend-art';
+import { noop } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { useDataCube } from '../DataCubeProvider.js';
+
+export enum AlertType {
+  INFO = 'INFO',
+  WARNING = 'WARNING',
+  ERROR = 'ERROR',
+}
+
+export type ActionAlertAction = { label: string; handler: () => void };
+
+export type ActionAlert = {
+  title?: string | undefined;
+  message: string;
+  prompt?: string | undefined;
+  type: AlertType;
+  text?: string | undefined;
+  actions?: ActionAlertAction[] | undefined;
+  onClose?: () => void;
+};
+
+export function Alert(props: {
+  message: string;
+  type: AlertType;
+  text?: string | undefined;
+  actions?: ActionAlertAction[] | undefined;
+  onClose?: () => void;
+}) {
+  const { message, type, text, actions = [], onClose } = props;
+
+  return (
+    <div className="h-full w-full">
+      <div
+        className={cn('flex w-full overflow-auto p-6', {
+          'h-[calc(100%_-_40px)]': actions.length !== 0,
+          'h-full': !actions.length,
+        })}
+      >
+        <div className="mr-3">
+          {type === AlertType.INFO && (
+            <DataCubeIcon.AlertInfo className="flex-shrink-0 stroke-[0.5px] text-[40px] text-sky-500" />
+          )}
+          {type === AlertType.WARNING && (
+            <DataCubeIcon.AlertWarning className="flex-shrink-0 stroke-[0.3px] text-[40px] text-amber-500" />
+          )}
+          {type === AlertType.ERROR && (
+            <DataCubeIcon.AlertError className="flex-shrink-0 stroke-[0.5px] text-[40px] text-red-500" />
+          )}
+        </div>
+        <div>
+          <div className="whitespace-break-spaces text-lg">{message}</div>
+          <div className="mt-1 whitespace-break-spaces text-neutral-500">
+            {text}
+          </div>
+        </div>
+      </div>
+      {actions.length !== 0 && (
+        <div className="flex h-10 items-center justify-center border border-t-neutral-300 px-2">
+          {actions.map((action, idx) => (
+            <button
+              className="ml-2 h-6 border border-neutral-400 bg-neutral-300 px-2 first-of-type:ml-0 hover:brightness-95"
+              // eslint-disable-next-line react/no-array-index-key
+              key={idx}
+              onClick={() => {
+                action.handler();
+                onClose?.();
+              }}
+              autoFocus={idx === 0} // UX-wise, the first action should always be the default, i.e. auto-focus on the first button
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const BlockingActionAlertContent = observer((props: { alert: ActionAlert }) => {
+  const { alert } = props;
+  const { title, message, prompt, type, onClose, actions } = alert;
+  const ref = useRef<HTMLDivElement>(null);
+  const dataCube = useDataCube();
+  const application = dataCube.application;
+
+  // set the width and height of the dialog to make sure content overflow works properly
+  const handleEnter = () => {
+    if (ref.current?.parentElement) {
+      const { width, height } =
+        ref.current.parentElement.getBoundingClientRect();
+      ref.current.style.width = `${width}px`;
+      ref.current.style.height = `${height}px`;
+    }
+  };
+
+  return (
+    <Dialog
+      open={true}
+      onClose={noop} // disallow closing dialog by using Esc key or clicking on the backdrop
+      TransitionProps={{
+        onEnter: handleEnter,
+      }}
+      PaperProps={{
+        elevation: 0,
+      }}
+      slotProps={{
+        backdrop: {
+          classes: {
+            root: 'bg-black !opacity-25',
+          },
+        },
+      }}
+      classes={{
+        root: 'h-full w-full flex items-center justify-center',
+        paper: 'min-h-10 min-w-40 rounded-none shadow-md',
+      }}
+    >
+      <div
+        className="border border-neutral-400 bg-neutral-200 shadow-xl"
+        ref={ref}
+      >
+        <div className="flex h-6 w-full select-none items-center justify-between border-b border-b-neutral-300 bg-white">
+          <div className="px-2">{title ?? ''}</div>
+        </div>
+        <div className="h-[calc(100%_-_24px)] w-full">
+          <Alert
+            type={type}
+            message={message}
+            text={prompt}
+            actions={(actions ?? []).map((action) => ({
+              label: action.label,
+              handler: () => {
+                action.handler();
+                onClose?.();
+                application.alertAction(undefined);
+              },
+            }))}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
+
+export const DataCubeBlockingActionAlert = observer(() => {
+  const dataCube = useDataCube();
+  const application = dataCube.application;
+  const actionAlert = application.currentActionAlert;
+
+  if (!actionAlert) {
+    return null;
+  }
+  return <BlockingActionAlertContent alert={actionAlert} />;
+});

package/src/components/application/DataCubeDocumentationPanel.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 { MarkdownTextViewer } from '@finos/legend-art';
+import { isString } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useDataCube } from '../DataCubeProvider.js';
+
+export const DocumentationPanel = observer(() => {
+  const dataCube = useDataCube();
+  const application = dataCube.application;
+  const entry = application.currentDocumentationEntry;
+
+  if (!entry) {
+    return null;
+  }
+  const content = entry.markdownText ?? entry.text;
+  return (
+    <div className="h-full w-full overflow-auto bg-white p-4">
+      <div className="mb-3 text-2xl font-bold">{entry.title}</div>
+      {content &&
+        (isString(content) ? (
+          <div className="">{content}</div>
+        ) : (
+          <MarkdownTextViewer value={content} />
+        ))}
+    </div>
+  );
+});

package/src/components/application/DataCubeLayoutManager.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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 { useState } from 'react';
+import { DataCubeIcon, ResizableAndDraggableBox, cn } from '@finos/legend-art';
+import {
+  WINDOW_DEFAULT_HEIGHT,
+  WINDOW_DEFAULT_MIN_HEIGHT,
+  WINDOW_DEFAULT_MIN_WIDTH,
+  WINDOW_DEFAULT_OFFSET,
+  WINDOW_DEFAULT_WIDTH,
+  type LayoutManagerState,
+  type WindowState,
+} from '../../stores/engine/DataCubeLayoutManagerState.js';
+import { observer } from 'mobx-react-lite';
+
+export const Window = (props: {
+  parent?: React.RefObject<HTMLElement> | undefined;
+  layout: LayoutManagerState;
+  windowState: WindowState;
+}) => {
+  const { parent, layout, windowState } = props;
+  const configuration = windowState.configuration.window;
+  const [windowSpec, setWindowSpec] = useState(() => {
+    const x = configuration.x ?? WINDOW_DEFAULT_OFFSET;
+    const y = configuration.y ?? WINDOW_DEFAULT_OFFSET;
+    const width = configuration.width ?? WINDOW_DEFAULT_WIDTH;
+    const height = configuration.height ?? WINDOW_DEFAULT_HEIGHT;
+
+    const parentElement = parent?.current ?? document.body;
+
+    const { width: containerWidth, height: containerHeight } =
+      parentElement.getBoundingClientRect();
+
+    if (configuration.center) {
+      const finalWidth =
+        width + WINDOW_DEFAULT_OFFSET * 2 > containerWidth
+          ? containerWidth - WINDOW_DEFAULT_OFFSET * 2
+          : width;
+      const finalHeight =
+        height + WINDOW_DEFAULT_OFFSET * 2 > containerHeight
+          ? containerHeight - WINDOW_DEFAULT_OFFSET * 2
+          : height;
+      return {
+        x: (containerWidth - finalWidth) / 2,
+        y: (containerHeight - finalHeight) / 2,
+        width: finalWidth,
+        height: finalHeight,
+      };
+    }
+
+    const finalWidth =
+      width + Math.abs(x) + WINDOW_DEFAULT_OFFSET > containerWidth
+        ? containerWidth - Math.abs(x) - WINDOW_DEFAULT_OFFSET
+        : width;
+    const finalHeight =
+      height + Math.abs(y) + WINDOW_DEFAULT_OFFSET > containerHeight
+        ? containerHeight - Math.abs(y) - WINDOW_DEFAULT_OFFSET
+        : height;
+
+    return {
+      x: x < 0 ? containerWidth - Math.abs(x) - finalWidth : x,
+      y: y < 0 ? containerHeight - Math.abs(y) - finalHeight : y,
+      width: finalWidth,
+      height: finalHeight,
+    };
+  });
+
+  return (
+    <ResizableAndDraggableBox
+      className="absolute z-10"
+      handle={`.data-cube__window-${windowState.uuid}`}
+      position={{ x: windowSpec.x, y: windowSpec.y }}
+      size={{ width: windowSpec.width, height: windowSpec.height }}
+      minWidth={configuration.minWidth ?? WINDOW_DEFAULT_MIN_WIDTH}
+      minHeight={configuration.minHeight ?? WINDOW_DEFAULT_MIN_HEIGHT}
+      onDragStop={(event, data) => {
+        setWindowSpec({ ...windowSpec, x: data.x, y: data.y });
+      }}
+      dragHandleClassName={`data-cube__window-${windowState.uuid}`}
+      onResize={(event, direction, ref, delta, position) => {
+        setWindowSpec({
+          ...position,
+          width: ref.offsetWidth,
+          height: ref.offsetHeight,
+        });
+      }}
+      enableResizing={{
+        top: true,
+        right: true,
+        bottom: true,
+        left: true,
+        topRight: true,
+        bottomRight: true,
+        bottomLeft: true,
+        topLeft: true,
+      }}
+      resizeHandleStyles={{
+        top: { cursor: 'ns-resize' },
+        right: { cursor: 'ew-resize' },
+        bottom: { cursor: 'ns-resize' },
+        left: { cursor: 'ew-resize' },
+        topRight: {
+          cursor: 'nesw-resize',
+          width: 14,
+          height: 14,
+          top: -7,
+          right: -7,
+        },
+        bottomRight: {
+          cursor: 'nwse-resize',
+          width: 14,
+          height: 14,
+          bottom: -7,
+          right: -7,
+        },
+        bottomLeft: {
+          cursor: 'nesw-resize',
+          width: 14,
+          height: 14,
+          bottom: -7,
+          left: -7,
+        },
+        topLeft: {
+          cursor: 'nwse-resize',
+          width: 14,
+          height: 14,
+          top: -7,
+          left: -7,
+        },
+      }}
+    >
+      <div
+        className="h-full w-full border border-neutral-400 bg-neutral-200 shadow-xl"
+        onMouseDown={() => {
+          layout.bringWindowFront(windowState);
+        }}
+      >
+        <div
+          className={cn(
+            `data-cube__window-${windowState.uuid}`,
+            'flex h-6 w-full select-none items-center justify-between border-b border-b-neutral-300 bg-white active:cursor-move',
+          )}
+        >
+          <div className="px-2">{windowState.configuration.title}</div>
+          <button
+            className="flex h-[23px] w-6 items-center justify-center hover:bg-red-500 hover:text-white"
+            onClick={() => layout.closeWindow(windowState)}
+          >
+            <DataCubeIcon.X />
+          </button>
+        </div>
+        <div className="h-[calc(100%_-_24px)] w-full">
+          {windowState.configuration.contentRenderer(windowState.configuration)}
+        </div>
+      </div>
+    </ResizableAndDraggableBox>
+  );
+};
+
+export const DataCubeLayoutManager = observer(
+  (props: { layout: LayoutManagerState }) => {
+    const { layout } = props;
+
+    return (
+      <>
+        {layout.windows.map((windowState) => (
+          <Window
+            key={windowState.uuid}
+            layout={layout}
+            windowState={windowState}
+          />
+        ))}
+      </>
+    );
+  },
+);