@finos/legend-application-data-cube 0.3.2 → 0.3.3

package/src/components/LegendDataCubeBlockingWindow.tsx

@@ -27,6 +27,9 @@ import { useRef } from 'react';
 export const LegendDataCubeBlockingWindow = observer(
   (props: { windowState: LegendDataCubeBlockingWindowState }) => {
     const { windowState } = props;
+    const closeModal = !windowState.onClose
+      ? (): void => windowState.close()
+      : windowState.onClose;
     const ref = useRef<HTMLDivElement>(null);
 
     // set the width and height of the dialog to make sure content overflow works properly
@@ -45,7 +48,7 @@ export const LegendDataCubeBlockingWindow = observer(
     return (
       <Dialog
         open={windowState.isOpen}
-        onClose={() => windowState.close()}
+        onClose={closeModal}
         slotProps={{
           transition: {
             onEnter: handleEnter,
@@ -72,7 +75,7 @@ export const LegendDataCubeBlockingWindow = observer(
             <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={() => windowState.close()}
+              onClick={closeModal}
             >
               <DataCubeIcon.X />
             </button>
@@ -91,11 +94,13 @@ export const LegendDataCubeBlockingWindow = observer(
 export class LegendDataCubeBlockingWindowState {
   isOpen = false;
   readonly configuration: LayoutConfiguration;
+  readonly onClose: (() => void) | undefined;
 
   constructor(
     title: string,
     contentRenderer: (config: LayoutConfiguration) => React.ReactNode,
     windowConfiguration?: WindowConfiguration | undefined,
+    closeModal?: (() => void) | undefined,
   ) {
     makeObservable(this, {
       isOpen: observable,
@@ -108,6 +113,7 @@ export class LegendDataCubeBlockingWindowState {
     if (windowConfiguration) {
       this.configuration.window = windowConfiguration;
     }
+    this.onClose = closeModal;
   }
 
   open() {

package/src/components/__test-utils__/LegendDataCubeStoreTestUtils.tsx

@@ -0,0 +1,231 @@
+/**
+ * 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 { type RenderResult, render, waitFor } from '@testing-library/react';
+import {
+  type AbstractPlugin,
+  type AbstractPreset,
+  type PlainObject,
+} from '@finos/legend-shared';
+import { createMock, createSpy } from '@finos/legend-shared/test';
+import {
+  ApplicationStore,
+  ApplicationStoreProvider,
+} from '@finos/legend-application';
+import { LegendDataCubePluginManager } from '../../application/LegendDataCubePluginManager.js';
+import { Core_LegendDataCubeApplicationPlugin } from '../../application/Core_LegendDataCubeApplicationPlugin.js';
+import { TEST__getTestLegendDataCubeApplicationConfig } from '../../application/__test-utils__/LegendDataCubeApplicationTestUtils.js';
+import {
+  type LegendDataCubeBuilderState,
+  LegendDataCubeBuilderStore,
+} from '../../stores/builder/LegendDataCubeBuilderStore.js';
+import {
+  type LegendDataCubeApplicationStore,
+  LegendDataCubeBaseStore,
+} from '../../stores/LegendDataCubeBaseStore.js';
+import { TEST__BrowserEnvironmentProvider } from '@finos/legend-application/test';
+import { LegendDataCubeFrameworkProvider } from '../LegendDataCubeFrameworkProvider.js';
+import { Route, Routes } from '@finos/legend-application/browser';
+import { LEGEND_DATA_CUBE_ROUTE_PATTERN } from '../../__lib__/LegendDataCubeNavigation.js';
+import { LegendDataCubeBuilder } from '../builder/LegendDataCubeBuilder.js';
+import { LEGEND_DATACUBE_TEST_ID } from '@finos/legend-data-cube';
+import { Core_LegendDataCube_LegendApplicationPlugin } from '../../application/Core_LegendDataCube_LegendApplicationPlugin.js';
+import {
+  type PersistentDataCube,
+  type V1_LambdaReturnTypeInput,
+  type V1_Query,
+  type V1_RawLambda,
+  type V1_ValueSpecification,
+  V1_entitiesToPureModelContextData,
+  V1_ExecuteInput,
+  V1_PureModelContextData,
+  V1_serializePureModelContext,
+} from '@finos/legend-graph';
+import { DSL_DataSpace_GraphManagerPreset } from '@finos/legend-extension-dsl-data-space/graph';
+import {
+  ENGINE_TEST_SUPPORT__execute,
+  ENGINE_TEST_SUPPORT__getLambdaRelationType,
+  ENGINE_TEST_SUPPORT__grammarToJSON_lambda,
+  ENGINE_TEST_SUPPORT__grammarToJSON_valueSpecification,
+  ENGINE_TEST_SUPPORT__JSONToGrammar_valueSpecification,
+} from '@finos/legend-graph/test';
+import type { Entity } from '@finos/legend-storage';
+
+export const TEST__provideMockedLegendDataCubeBaseStore =
+  async (customization?: {
+    mock?: LegendDataCubeBaseStore | undefined;
+    applicationStore?: LegendDataCubeApplicationStore | undefined;
+    pluginManager?: LegendDataCubePluginManager | undefined;
+    extraPlugins?: AbstractPlugin[] | undefined;
+    extraPresets?: AbstractPreset[] | undefined;
+  }): Promise<LegendDataCubeBaseStore> => {
+    const pluginManager =
+      customization?.pluginManager ?? LegendDataCubePluginManager.create();
+    pluginManager
+      .usePlugins([
+        new Core_LegendDataCube_LegendApplicationPlugin(),
+        new Core_LegendDataCubeApplicationPlugin(),
+        ...(customization?.extraPlugins ?? []),
+      ])
+      .usePresets([
+        new DSL_DataSpace_GraphManagerPreset(),
+        ...(customization?.extraPresets ?? []),
+      ])
+      .install();
+    const applicationStore =
+      customization?.applicationStore ??
+      new ApplicationStore(
+        TEST__getTestLegendDataCubeApplicationConfig(),
+        pluginManager,
+      );
+    const value =
+      customization?.mock ?? new LegendDataCubeBaseStore(applicationStore);
+    await value.initialize();
+    const MOCK__LegendDataCubeBaseStoreProvider = require('../LegendDataCubeFrameworkProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports
+    MOCK__LegendDataCubeBaseStoreProvider.useLegendDataCubeBaseStore =
+      createMock();
+    MOCK__LegendDataCubeBaseStoreProvider.useLegendDataCubeBaseStore.mockReturnValue(
+      value,
+    );
+    return value;
+  };
+
+export const TEST__provideMockedLegendDataCubeBuilderStore =
+  async (customization?: {
+    mock?: LegendDataCubeBuilderStore;
+    mockBaseStore?: LegendDataCubeBaseStore;
+    applicationStore?: LegendDataCubeApplicationStore;
+    pluginManager?: LegendDataCubePluginManager;
+    extraPlugins?: AbstractPlugin[];
+    extraPresets?: AbstractPreset[];
+  }): Promise<LegendDataCubeBuilderStore> => {
+    const value =
+      customization?.mock ??
+      new LegendDataCubeBuilderStore(
+        await TEST__provideMockedLegendDataCubeBaseStore({
+          mock: customization?.mockBaseStore,
+          applicationStore: customization?.applicationStore,
+          pluginManager: customization?.pluginManager,
+          extraPlugins: customization?.extraPlugins,
+          extraPresets: customization?.extraPresets,
+        }),
+      );
+    const MOCK__LegendDataCubeBuilderStoreProvider = require('../builder/LegendDataCubeBuilderStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports
+    MOCK__LegendDataCubeBuilderStoreProvider.useLegendDataCubeBuilderStore =
+      createMock();
+    MOCK__LegendDataCubeBuilderStoreProvider.useLegendDataCubeBuilderStore.mockReturnValue(
+      value,
+    );
+    return value;
+  };
+
+export const TEST__setUpDataCubeBuilder = async (
+  MOCK__builderStore: LegendDataCubeBuilderStore,
+  mockDataCube?: PersistentDataCube,
+  mockQuery?: V1_Query,
+  mockEntities?: PlainObject<Entity>[],
+): Promise<{
+  renderResult: RenderResult;
+  legendDataCubeBuilderState: LegendDataCubeBuilderState | undefined;
+}> => {
+  if (mockDataCube) {
+    createSpy(MOCK__builderStore.graphManager, 'getDataCube').mockResolvedValue(
+      mockDataCube,
+    );
+  }
+  if (mockQuery) {
+    createSpy(
+      MOCK__builderStore.graphManager.engine,
+      'getQuery',
+    ).mockResolvedValue(mockQuery);
+  }
+  if (mockEntities) {
+    const pmcd = new V1_PureModelContextData();
+    await V1_entitiesToPureModelContextData(
+      mockEntities as unknown as Entity[],
+      pmcd,
+      MOCK__builderStore.application.pluginManager.getPureProtocolProcessorPlugins(),
+      undefined,
+      undefined,
+    );
+    createSpy(
+      MOCK__builderStore.depotServerClient,
+      'getVersionEntities',
+    ).mockResolvedValue(mockEntities);
+    createSpy(
+      MOCK__builderStore.engineServerClient,
+      'lambdaRelationType',
+    ).mockImplementation(
+      async (input: PlainObject<V1_LambdaReturnTypeInput>) => {
+        return ENGINE_TEST_SUPPORT__getLambdaRelationType(
+          input.lambda as PlainObject<V1_RawLambda>,
+          V1_serializePureModelContext(pmcd),
+        );
+      },
+    );
+    createSpy(
+      MOCK__builderStore.engineServerClient,
+      'runQuery',
+    ).mockImplementation(async (input: PlainObject<V1_ExecuteInput>) => {
+      const executeInput = V1_ExecuteInput.serialization.fromJson(input);
+      executeInput.model = pmcd;
+      return ENGINE_TEST_SUPPORT__execute(executeInput);
+    });
+  }
+  createSpy(
+    MOCK__builderStore.engineServerClient,
+    'grammarToJSON_lambda',
+  ).mockImplementation(async (input: string) =>
+    ENGINE_TEST_SUPPORT__grammarToJSON_lambda(input),
+  );
+  createSpy(
+    MOCK__builderStore.engineServerClient,
+    'grammarToJSON_valueSpecification',
+  ).mockImplementation(async (input: string) =>
+    ENGINE_TEST_SUPPORT__grammarToJSON_valueSpecification(input),
+  );
+  createSpy(
+    MOCK__builderStore.engineServerClient,
+    'JSONToGrammar_valueSpecification',
+  ).mockImplementation(async (input: PlainObject<V1_ValueSpecification>) =>
+    ENGINE_TEST_SUPPORT__JSONToGrammar_valueSpecification(input),
+  );
+
+  const renderResult = render(
+    <ApplicationStoreProvider store={MOCK__builderStore.application}>
+      <TEST__BrowserEnvironmentProvider
+        initialEntries={[mockDataCube?.id ? `/${mockDataCube.id}` : '/']}
+      >
+        <LegendDataCubeFrameworkProvider>
+          <Routes>
+            <Route
+              path={LEGEND_DATA_CUBE_ROUTE_PATTERN.BUILDER}
+              element={<LegendDataCubeBuilder />}
+            />
+          </Routes>
+        </LegendDataCubeFrameworkProvider>
+      </TEST__BrowserEnvironmentProvider>
+    </ApplicationStoreProvider>,
+  );
+  await waitFor(() =>
+    renderResult.getByTestId(LEGEND_DATACUBE_TEST_ID.PLACEHOLDER),
+  );
+
+  return {
+    renderResult,
+    legendDataCubeBuilderState: MOCK__builderStore.builder,
+  };
+};

package/src/components/builder/LegendDataCubeBuilder.tsx

@@ -38,7 +38,7 @@ import {
 import { useEffect } from 'react';
 import { LegendDataCubeSettingStorageKey } from '../../__lib__/LegendDataCubeSetting.js';
 import type { LegendDataCubeBuilderStore } from '../../stores/builder/LegendDataCubeBuilderStore.js';
-import { LocalFileDataCubeSource } from '../../stores/model/LocalFileDataCubeSource.js';
+import { ReleaseViewer } from '@finos/legend-application';
 
 const LegendDataCubeBuilderHeader = observer(() => {
   const store = useLegendDataCubeBuilderStore();
@@ -58,11 +58,7 @@ const LegendDataCubeBuilderHeader = observer(() => {
       <FormButton
         compact={true}
         className="ml-1.5"
-        disabled={
-          !store.builder?.dataCube ||
-          /* TODO: @gs-gunjan we should allow saving DataCube using CSV file source */
-          store.builder.source instanceof LocalFileDataCubeSource
-        }
+        disabled={!store.builder?.dataCube}
         onClick={() => store.saverDisplay.open()}
       >
         Save DataCube
@@ -71,8 +67,37 @@ const LegendDataCubeBuilderHeader = observer(() => {
   );
 });
 
+export const LegendDataCubeReleaseLogManager = observer(
+  (props: { showOnlyLatestNotes: boolean }) => {
+    const { showOnlyLatestNotes } = props;
+    const store = useLegendDataCubeBuilderStore();
+    const applicationStore = store.application;
+    const releaseService = applicationStore.releaseNotesService;
+    const releaseNotes =
+      (showOnlyLatestNotes
+        ? releaseService.showableVersions()
+        : releaseService.releaseNotes) ?? [];
+
+    applicationStore.releaseNotesService.updateViewedVersion();
+
+    return (
+      <div className="legend-datacube-release-notes h-full items-center p-3">
+        <div className="my-0.5 flex font-mono">
+          New features, enhancements and bug fixes that were released
+        </div>
+        <div className="p-2">
+          {releaseNotes.map((e) => (
+            <ReleaseViewer key={e.version} releaseNotes={e} />
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
 export const LegendDataCubeAbout = observer(() => {
   const store = useLegendDataCubeBuilderStore();
+  const releaseService = store.application.releaseNotesService;
   const config = store.application.config;
 
   return (
@@ -93,6 +118,14 @@ export const LegendDataCubeAbout = observer(() => {
         <div>Build Time:</div>
         <div className="ml-1 font-bold">{config.appVersionBuildTime}</div>
       </div>
+      {releaseService.isConfigured && (
+        <div
+          onClick={() => store.releaseLogDisplay.open()}
+          className="my-0.5 flex cursor-pointer font-bold text-sky-500 underline"
+        >
+          <div>Details of Released Versions</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>
@@ -255,6 +288,18 @@ export const LegendDataCubeBuilder = withLegendDataCubeBuilderStore(
         .catch((error) => store.alertService.alertUnhandledError(error));
     }, [store, dataCubeId]);
 
+    useEffect(() => {
+      const releaseService = application.releaseNotesService;
+      const releaseNotes = releaseService.showableVersions();
+      const isOpen = releaseService.showCurrentReleaseModal;
+
+      if (releaseService.isConfigured && isOpen && releaseNotes?.length) {
+        store.releaseNotesDisplay.open();
+      } else {
+        releaseService.updateViewedVersion();
+      }
+    }, [application, store.releaseNotesDisplay]);
+
     if (!store.initializeState.hasSucceeded) {
       return (
         <DataCubePlaceholder

package/src/components/builder/LegendDataCubeBuilderStoreProvider.tsx

@@ -39,6 +39,9 @@ const LegendDataCubeBuilderStoreProvider = (props: {
       <LegendDataCubeBlockingWindow
         windowState={store.deleteConfirmationDisplay}
       />
+      <LegendDataCubeBlockingWindow
+        windowState={store.loader.sourceLoader.display}
+      />
     </LegendDataCubeBuilderStoreContext.Provider>
   );
 };

package/src/components/builder/LegendDataCubePartialSourceLoader.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 { FormButton } from '@finos/legend-data-cube';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
+import { LocalFileDataCubePartialSourceLoaderState } from '../../stores/builder/source/loader/LocalFileDataCubePartialSourceLoaderState.js';
+import { LocalFileDataCubePartialSourceLoader } from './source/loader/LocalFileDataCubePartialSourceLoader.js';
+import { useEffect } from 'react';
+import { DataCubeIcon } from '@finos/legend-art';
+import { formatDistanceToNow } from '@finos/legend-shared';
+
+export const LegendDataCubePartialSourceLoader = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+  const state = store.loader.sourceLoader;
+  const sourceLoader = state.partialSourceLoader;
+
+  useEffect(() => {
+    sourceLoader.initialize();
+  }, [sourceLoader]);
+
+  return (
+    <>
+      <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
+        <div className="h-full w-full border border-neutral-300 bg-white">
+          <div className="h-full w-full select-none p-2">
+            <div className="relative mb-0.5 flex h-[42px] w-full border border-neutral-200 bg-neutral-100">
+              <div className="w-full">
+                <div className="h-6 w-4/5 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 leading-6">
+                  {state.persistentDataCube?.name}
+                </div>
+                <div className="flex h-[18px] items-start justify-between px-1.5">
+                  <div className="flex">
+                    <DataCubeIcon.ClockEdit className="text-sm text-neutral-500" />
+                    <div className="ml-1 text-sm text-neutral-500">
+                      {state.persistentDataCube?.lastUpdatedAt
+                        ? formatDistanceToNow(
+                            new Date(state.persistentDataCube.lastUpdatedAt),
+                            {
+                              includeSeconds: true,
+                              addSuffix: true,
+                            },
+                          )
+                        : '(unknown)'}
+                    </div>
+                  </div>
+                  <div className="flex">
+                    <DataCubeIcon.User className="text-sm text-neutral-500" />
+                    <div className="ml-1 text-sm text-neutral-500">
+                      {state.persistentDataCube?.owner}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex h-10 w-full items-center">
+              <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                Source Type:
+                <div className="pl-3">{sourceLoader.label}</div>
+              </div>
+            </div>
+            <div className="h-[calc(100%_-_41px)] w-full overflow-auto">
+              {sourceLoader instanceof
+                LocalFileDataCubePartialSourceLoaderState && (
+                <LocalFileDataCubePartialSourceLoader
+                  partialSourceLoader={sourceLoader}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex h-10 items-center justify-end px-2">
+        <FormButton onClick={state.display.onClose}>Cancel</FormButton>
+        <FormButton
+          className="ml-2"
+          disabled={!sourceLoader.isValid || state.finalizeState.isInProgress}
+          onClick={() => {
+            state
+              .finalize()
+              .then(() => store.loadPartialSourceDataCube())
+              .catch((error) => {
+                store.alertService.alertUnhandledError(error);
+              })
+              .finally(() => {
+                state.display.close();
+              });
+          }}
+        >
+          OK
+        </FormButton>
+      </div>
+    </>
+  );
+});

package/src/components/builder/LegendDataCubeSourceViewer.tsx

@@ -18,8 +18,175 @@ import { observer } from 'mobx-react-lite';
 import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
 import { LegendQueryDataCubeSource } from '../../stores/model/LegendQueryDataCubeSource.js';
 import { useLegendDataCubeApplicationStore } from '../LegendDataCubeFrameworkProvider.js';
-import { EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl } from '../../__lib__/LegendDataCubeNavigation.js';
+import {
+  EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl,
+  EXTERNAL_APPLICATION_NAVIGATION__generateStudioSDLCViewUrl,
+  EXTERNAL_APPLICATION_NAVIGATION__generateStudioViewUrl,
+} from '../../__lib__/LegendDataCubeNavigation.js';
 import { DataCubeIcon } from '@finos/legend-art';
+import { UserDefinedFunctionDataCubeSource } from '@finos/legend-data-cube';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  type DepotServerClient,
+  DepotScope,
+  StoreProjectData,
+} from '@finos/legend-server-depot';
+import { returnUndefOnError } from '@finos/legend-shared';
+import {
+  V1_deserializePureModelContext,
+  V1_LegendSDLC,
+  V1_PureModelContextPointer,
+  type V1_PureModelContext,
+} from '@finos/legend-graph';
+
+const handleFetchProject = (
+  depotServerClient: DepotServerClient,
+  model: V1_PureModelContext,
+  handleProjectChange: (val: StoreProjectData | undefined) => void,
+) => {
+  if (
+    model instanceof V1_PureModelContextPointer &&
+    model.sdlcInfo instanceof V1_LegendSDLC
+  ) {
+    depotServerClient
+      .getProject(model.sdlcInfo.groupId, model.sdlcInfo.artifactId)
+      .then((e) => {
+        handleProjectChange(
+          returnUndefOnError(() => StoreProjectData.serialization.fromJson(e)),
+        );
+      })
+      .catch((e) => {
+        // ignore
+      });
+  }
+};
+
+const generateStudioViewLink = (
+  studio: string,
+  project: StoreProjectData,
+  version: string,
+  element: string | undefined,
+): string => {
+  if (version.endsWith(DepotScope.SNAPSHOT)) {
+    return EXTERNAL_APPLICATION_NAVIGATION__generateStudioViewUrl(
+      studio,
+      project.groupId,
+      project.artifactId,
+      version,
+      element,
+    );
+  } else {
+    return EXTERNAL_APPLICATION_NAVIGATION__generateStudioSDLCViewUrl(
+      studio,
+      project.projectId,
+      version,
+      element,
+    );
+  }
+};
+
+const UserDefinedFunctionSourceViewer = observer(
+  (props: { source: UserDefinedFunctionDataCubeSource }) => {
+    const { source } = props;
+    const sourceModel = returnUndefOnError(() =>
+      V1_deserializePureModelContext(source.model),
+    );
+    const version =
+      sourceModel instanceof V1_PureModelContextPointer &&
+      sourceModel.sdlcInfo instanceof V1_LegendSDLC
+        ? sourceModel.sdlcInfo.version
+        : undefined;
+    const store = useLegendDataCubeBuilderStore();
+    const application = useLegendDataCubeApplicationStore();
+    const [project, setProject] = useState<StoreProjectData | undefined>(
+      undefined,
+    );
+    const link =
+      project?.projectId && application.config.studioApplicationUrl && version
+        ? generateStudioViewLink(
+            application.config.studioApplicationUrl,
+            project,
+            version,
+            source.functionPath,
+          )
+        : undefined;
+    const _handleFetchProject = useCallback(() => {
+      if (sourceModel) {
+        handleFetchProject(store.depotServerClient, sourceModel, setProject);
+      }
+    }, [sourceModel, store.depotServerClient]);
+
+    useEffect(() => {
+      _handleFetchProject();
+    }, [_handleFetchProject]);
+
+    return (
+      <div className="h-full w-full px-2 pt-2">
+        <div className="h-[calc(100%_-_8px)] w-full border border-neutral-300 bg-white">
+          <div className="h-full w-full select-none p-2">
+            <div className="flex h-6">
+              <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">
+                User Defined Function
+              </div>
+            </div>
+            {link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 px-1.5 font-bold text-sky-500 underline">
+                  <a
+                    href={link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="overflow-hidden overflow-ellipsis whitespace-nowrap"
+                  >
+                    {source.functionPath}
+                  </a>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    store.application.clipboardService
+                      .copyTextToClipboard(link)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy Link"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+            {!link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 bg-neutral-200 px-1.5">
+                  <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    {source.functionPath}
+                  </div>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    application.clipboardService
+                      .copyTextToClipboard(source.functionPath)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy ID"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
 
 export const LegendDataCubeSourceViewer = observer(() => {
   const store = useLegendDataCubeBuilderStore();
@@ -36,6 +203,7 @@ export const LegendDataCubeSourceViewer = observer(() => {
           source.info.id,
         )
       : undefined;
+
     return (
       <div className="h-full w-full px-2 pt-2">
         <div className="h-[calc(100%_-_8px)] w-full border border-neutral-300 bg-white">
@@ -101,6 +269,8 @@ export const LegendDataCubeSourceViewer = observer(() => {
         </div>
       </div>
     );
+  } else if (source instanceof UserDefinedFunctionDataCubeSource) {
+    return <UserDefinedFunctionSourceViewer source={source} />;
   }
   return (
     <div className="h-full w-full px-2 pt-2">{`Can't display source`}</div>