@finos/legend-extension-dsl-data-space 10.1.91 → 10.1.94

package/lib/stores/query/DataSpaceTemplateQueryCreatorStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataSpaceTemplateQueryCreatorStore.js","sourceRoot":"","sources":["../../../src/stores/query/DataSpaceTemplateQueryCreatorStore.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-data-space",
-  "version": "10.1.91",
+  "version": "10.1.94",
   "description": "Legend extension for Data Space DSL",
   "keywords": [
     "legend",
@@ -44,17 +44,17 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.72",
-    "@finos/legend-application-query": "13.2.16",
-    "@finos/legend-application-studio": "28.16.3",
-    "@finos/legend-art": "7.1.24",
-    "@finos/legend-extension-dsl-diagram": "8.0.147",
-    "@finos/legend-graph": "31.9.3",
-    "@finos/legend-lego": "1.2.16",
-    "@finos/legend-query-builder": "4.14.16",
-    "@finos/legend-server-depot": "6.0.37",
-    "@finos/legend-shared": "10.0.33",
-    "@finos/legend-storage": "3.0.83",
+    "@finos/legend-application": "15.0.73",
+    "@finos/legend-application-query": "13.2.19",
+    "@finos/legend-application-studio": "28.16.6",
+    "@finos/legend-art": "7.1.25",
+    "@finos/legend-extension-dsl-diagram": "8.0.150",
+    "@finos/legend-graph": "31.9.6",
+    "@finos/legend-lego": "1.2.19",
+    "@finos/legend-query-builder": "4.14.19",
+    "@finos/legend-server-depot": "6.0.38",
+    "@finos/legend-shared": "10.0.34",
+    "@finos/legend-storage": "3.0.84",
     "@types/react": "18.2.31",
     "mobx": "6.10.2",
     "mobx-react-lite": "4.0.5",

package/src/__lib__/query/DSL_DataSpace_LegendQueryNavigation.ts

@@ -29,12 +29,19 @@ export enum DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN {
   DATA_SPACE_PATH = 'dataSpacePath',
   EXECUTION_CONTEXT = 'executionContext',
   RUNTIME_PATH = 'runtimePath',
+  TEMPLATE = 'template',
 }
 
 export enum DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN {
   CLASS_PATH = 'class',
 }
 
+export enum DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN {
+  GAV = 'gav',
+  DATA_SPACE_PATH = 'dataSpacePath',
+  TEMPLATE_QUERY_TITLE = 'templateQueryTitle',
+}
+
 export type DataSpaceQueryCreatorPathParams = {
   [DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV]: string;
   [DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH]: string;
@@ -42,6 +49,12 @@ export type DataSpaceQueryCreatorPathParams = {
   [DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.RUNTIME_PATH]?: string;
 };
 
+export type DataSpaceTemplateQueryCreatorPathParams = {
+  [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV]: string;
+  [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH]: string;
+  [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_TITLE]: string;
+};
+
 export type DataSpaceQueryEditorQueryParams = {
   [DATA_SPACE_QUERY_CREATOR_QUERY_PARAM_TOKEN.CLASS_PATH]?: string | undefined;
 };
@@ -49,6 +62,7 @@ export type DataSpaceQueryEditorQueryParams = {
 export const DATA_SPACE_QUERY_ROUTE_PATTERN = Object.freeze({
   SETUP: `/dataspace`,
   CREATE: `/dataspace/:${DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV}/:${DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH}/:${DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.EXECUTION_CONTEXT}/:${DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.RUNTIME_PATH}?`,
+  TEMPLATE_QUERY: `/dataspace/:${DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV}/:${DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH}/:${DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE}/:${DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_TITLE}`,
 });
 
 export const generateDataSpaceQuerySetupRoute = (): string =>
@@ -86,3 +100,24 @@ export const generateDataSpaceQueryCreatorRoute = (
         : undefined,
     }),
   );
+
+export const generateDataSpaceTemplateQueryCreatorRoute = (
+  groupId: string,
+  artifactId: string,
+  versionId: string,
+  dataSpacePath: string,
+  templateQueryTitle: string,
+): string =>
+  generatePath(
+    generateExtensionUrlPattern(DATA_SPACE_QUERY_ROUTE_PATTERN.TEMPLATE_QUERY),
+    {
+      [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV]:
+        generateGAVCoordinates(groupId, artifactId, versionId),
+      [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH]:
+        dataSpacePath,
+      [DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE]:
+        DATA_SPACE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE,
+      [DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_TITLE]:
+        templateQueryTitle,
+    },
+  );

package/src/components/DSL_DataSpace_LegendApplicationPlugin.tsx

@@ -24,7 +24,9 @@ import {
 import packageJson from '../../package.json' assert { type: 'json' };
 import type {
   LoadQueryFilterOption,
+  QueryBuilderState,
   QueryBuilder_LegendApplicationPlugin_Extension,
+  TemplateQueryPanelContentRenderer,
 } from '@finos/legend-query-builder';
 import { DataSpaceQueryBuilderState } from '../stores/query/DataSpaceQueryBuilderState.js';
 import {
@@ -34,6 +36,7 @@ import {
 import { DSL_DATA_SPACE_LEGEND_APPLICATION_COMMAND_CONFIG } from '../__lib__/DSL_DataSpace_LegendApplicationCommand.js';
 import type { QuerySearchSpecification } from '@finos/legend-graph';
 import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
+import { renderDataSpaceQueryBuilderTemplateQueryPanelContent } from './query/DataSpaceQueryBuilderTemplateQueryPanelContent.js';
 
 export class DSL_DataSpace_LegendApplicationPlugin
   extends LegendApplicationPlugin
@@ -114,4 +117,17 @@ export class DSL_DataSpace_LegendApplicationPlugin
       },
     ];
   }
+
+  getExtraTemplateQueryPanelContentRenderer(): TemplateQueryPanelContentRenderer[] {
+    return [
+      (queryBuilderState: QueryBuilderState): React.ReactNode => {
+        if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
+          return renderDataSpaceQueryBuilderTemplateQueryPanelContent(
+            queryBuilderState,
+          );
+        }
+        return undefined;
+      },
+    ];
+  }
 }

package/src/components/DataSpaceDiagramViewer.tsx

@@ -235,6 +235,7 @@ const buildDiagramOption = (
 const DataSpaceDiagramViewerHeader = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
+    const applicationStore = dataSpaceViewerState.applicationStore;
     const diagramViewerState = dataSpaceViewerState.diagramViewerState;
     const diagramOptions =
       dataSpaceViewerState.dataSpaceAnalysisResult.diagrams.map(
@@ -275,7 +276,10 @@ const DataSpaceDiagramViewerHeader = observer(
             onChange={onDiagramOptionChange}
             value={selectedDiagramOption}
             placeholder="Search for a diagram"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
           <div className="data-space__viewer__diagram-viewer__header__navigation__pager">
             <input

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -543,14 +543,20 @@ const DataSpaceModelsDocumentationGridPanel = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const documentationState = dataSpaceViewerState.modelsDocumentationState;
+    const darkMode =
+      !dataSpaceViewerState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
 
     return (
       <div
         className={clsx(
-          'data-space__viewer__models-documentation__grid data-space__viewer__grid ag-theme-balham-dark',
+          'data-space__viewer__models-documentation__grid',
+          'data-space__viewer__grid',
           {
             'data-space__viewer__models-documentation__grid--shrink':
               documentationState.showFilterPanel,
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
           },
         )}
       >

package/src/components/DataSpaceQuickStart.tsx

@@ -149,6 +149,8 @@ const DataSpaceExecutableTDSResultView = observer(
       extractTDSExecutableActionConfigurations.find(
         (config) => config.key === selectedTab,
       );
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     return (
       <div className="data-space__viewer__quickstart__item__content">
@@ -277,7 +279,16 @@ const DataSpaceExecutableTDSResultView = observer(
         </div>
         <div className="data-space__viewer__quickstart__item__content__tab__content">
           {selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (
-            <div className="data-space__viewer__quickstart__tds__column-specs data-space__viewer__grid ag-theme-balham-dark">
+            <div
+              className={clsx(
+                'data-space__viewer__quickstart__tds__column-specs',
+                'data-space__viewer__grid',
+                {
+                  'ag-theme-balham': !darkMode,
+                  'ag-theme-balham-dark': darkMode,
+                },
+              )}
+            >
               <DataGrid
                 rowData={columnSpecifications}
                 gridOptions={{

package/src/components/query/DSL_DataSpace_LegendQueryApplicationPlugin.tsx

@@ -70,6 +70,7 @@ import type {
   DataSpace,
   DataSpaceExecutionContext,
 } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import { DataSpaceTemplateQueryCreator } from './DataSpaceTemplateQueryCreator.js';
 
 const resolveExecutionContext = (
   dataSpace: DataSpace,
@@ -103,6 +104,13 @@ export class DSL_DataSpace_LegendQueryApplicationPlugin extends LegendQueryAppli
         addressPatterns: [DATA_SPACE_QUERY_ROUTE_PATTERN.SETUP],
         renderer: DataSpaceQuerySetup,
       },
+      // data space template query creator
+      // Heads-up: TEMPLATE_QUERY must come before CREATE as it has a more specific pattern than CREATE.
+      {
+        key: 'data-space-template-query-viewer-application-page',
+        addressPatterns: [DATA_SPACE_QUERY_ROUTE_PATTERN.TEMPLATE_QUERY],
+        renderer: DataSpaceTemplateQueryCreator,
+      },
       // data space query editor
       {
         key: 'data-space-query-editor-application-page',

package/src/components/query/DataSpaceAdvancedSearchModal.tsx

@@ -153,7 +153,9 @@ export const DataSpaceAdvancedSearchModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal data-space-advanced-search__dialog"
         >
           <ModalHeader className="data-space-advanced-search__dialog__header">
@@ -185,7 +187,10 @@ export const DataSpaceAdvancedSearchModal = observer(
                 placeholder="Search for data space by name..."
                 isClearable={true}
                 escapeClearsValue={true}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 formatOptionLabel={formatDataSpaceOptionLabel}
               />
               <button

package/src/components/query/DataSpaceQueryBuilderTemplateQueryPanelContent.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 {
+  PanelHeader,
+  FilterIcon,
+  BasePopover,
+  ClickAwayListener,
+  ShareIcon,
+  TagIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { DataSpaceExecutableTemplate } from '../../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import type { DataSpaceQueryBuilderState } from '../../stores/query/DataSpaceQueryBuilderState.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { generateDataSpaceTemplateQueryCreatorRoute } from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+
+const DataSpaceTemplateQueryDialog = observer(
+  (props: {
+    triggerElement: HTMLElement | null;
+    queryBuilderState: DataSpaceQueryBuilderState;
+    templateQueries: DataSpaceExecutableTemplate[];
+  }) => {
+    const { triggerElement, queryBuilderState, templateQueries } = props;
+    const applicationStore = useApplicationStore();
+    const handleClose = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(false);
+    };
+
+    const loadTemplateQuery = (template: DataSpaceExecutableTemplate): void => {
+      const executionContext =
+        queryBuilderState.dataSpace.executionContexts.find(
+          (c) => c.name === template.executionContextKey,
+        );
+      if (
+        executionContext &&
+        executionContext.hashCode !==
+          queryBuilderState.executionContext.hashCode
+      ) {
+        queryBuilderState.setExecutionContext(executionContext);
+        queryBuilderState.propagateExecutionContextChange(executionContext);
+        queryBuilderState.initializeWithQuery(template.query);
+        queryBuilderState.onExecutionContextChange?.(executionContext);
+      } else {
+        queryBuilderState.initializeWithQuery(template.query);
+      }
+      handleClose();
+    };
+
+    const loadQuery = (template: DataSpaceExecutableTemplate): void => {
+      if (queryBuilderState.changeDetectionState.hasChanged) {
+        applicationStore.alertService.setActionAlertInfo({
+          message:
+            'Unsaved changes will be lost if you continue. Do you still want to proceed?',
+          type: ActionAlertType.CAUTION,
+          actions: [
+            {
+              label: 'Proceed',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+              handler: (): void => loadTemplateQuery(template),
+            },
+            {
+              label: 'Abort',
+              type: ActionAlertActionType.PROCEED,
+              default: true,
+            },
+          ],
+        });
+      } else {
+        loadTemplateQuery(template);
+      }
+    };
+
+    const visitTemplateQuery = (
+      template: DataSpaceExecutableTemplate,
+    ): void => {
+      if (queryBuilderState.projectInfo?.groupId) {
+        applicationStore.navigationService.navigator.visitAddress(
+          applicationStore.navigationService.navigator.generateAddress(
+            generateDataSpaceTemplateQueryCreatorRoute(
+              queryBuilderState.projectInfo.groupId,
+              queryBuilderState.projectInfo.artifactId,
+              queryBuilderState.projectInfo.versionId,
+              queryBuilderState.dataSpace.path,
+              template.title,
+            ),
+          ),
+        );
+      }
+    };
+
+    return (
+      <ClickAwayListener onClickAway={handleClose}>
+        <div>
+          <BasePopover
+            open={queryBuilderState.isTemplateQueryDialogOpen}
+            PaperProps={{
+              classes: {
+                root: '"query-builder__data-space__template-query-panel__container__root',
+              },
+            }}
+            className="query-builder__data-space__template-query-panel__container"
+            onClose={handleClose}
+            anchorEl={triggerElement}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+          >
+            <div className="query-builder__data-space__template-query-panel">
+              <div className="query-builder__data-space__template-query-panel__header">
+                Curated Template Queries
+              </div>
+              {templateQueries.map((query) => (
+                <div
+                  key={query.title}
+                  className="query-builder__data-space__template-query-panel__query"
+                >
+                  <TagIcon className="query-builder__data-space__template-query-panel__query__icon" />
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__entry"
+                    title="click to load template query"
+                    onClick={() => loadQuery(query)}
+                  >
+                    <div className="query-builder__data-space__template-query-panel__query__entry__content">
+                      <div className="query-builder__data-space__template-query-panel__query__entry__content__title">
+                        {query.title}
+                      </div>
+                      {query.description && (
+                        <div className="query-builder__data-space__template-query-panel__query__entry__content__description">
+                          {query.description}
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                  <button
+                    className="query-builder__data-space__template-query-panel__query__share"
+                    title="Visit..."
+                    onClick={() => visitTemplateQuery(query)}
+                  >
+                    <ShareIcon />
+                    <div className="query-builder__data-space__template-query-panel__query__share__label">
+                      Visit
+                    </div>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </BasePopover>
+        </div>
+      </ClickAwayListener>
+    );
+  },
+);
+
+const DataSpaceQueryBuilderTemplateQueryPanel = observer(
+  (props: { queryBuilderState: DataSpaceQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const templateQueryButtonRef = useRef<HTMLButtonElement>(null);
+    const templateQueries = queryBuilderState.dataSpace.executables?.filter(
+      (e) => e instanceof DataSpaceExecutableTemplate,
+    ) as DataSpaceExecutableTemplate[] | undefined;
+
+    const showTemplateQueries = (): void => {
+      queryBuilderState.setTemplateQueryDialogOpen(true);
+    };
+
+    return (
+      <>
+        {templateQueries && templateQueries.length > 0 && (
+          <PanelHeader className="query-builder__data-space__template-query">
+            <div className="query-builder__data-space__template-query__title">
+              <FilterIcon />
+            </div>
+            <button
+              className="query-builder__data-space__template-query__btn"
+              ref={templateQueryButtonRef}
+              onClick={showTemplateQueries}
+            >
+              Template ( {templateQueries.length} )
+            </button>
+            {queryBuilderState.isTemplateQueryDialogOpen && (
+              <DataSpaceTemplateQueryDialog
+                triggerElement={templateQueryButtonRef.current}
+                queryBuilderState={queryBuilderState}
+                templateQueries={templateQueries}
+              />
+            )}
+          </PanelHeader>
+        )}
+      </>
+    );
+  },
+);
+
+export const renderDataSpaceQueryBuilderTemplateQueryPanelContent = (
+  queryBuilderState: DataSpaceQueryBuilderState,
+): React.ReactNode => (
+  <DataSpaceQueryBuilderTemplateQueryPanel
+    queryBuilderState={queryBuilderState}
+  />
+);

package/src/components/query/DataSpaceTemplateQueryCreator.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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, useLocalObservable } from 'mobx-react-lite';
+import { useParams } from '@finos/legend-application/browser';
+import {
+  QueryEditor,
+  QueryEditorStoreContext,
+  useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
+} from '@finos/legend-application-query';
+import {
+  DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN,
+  type DataSpaceTemplateQueryCreatorPathParams,
+} from '../../__lib__/query/DSL_DataSpace_LegendQueryNavigation.js';
+import { parseGAVCoordinates } from '@finos/legend-storage';
+import { DataSpaceTemplateQueryCreatorStore } from '../../stores/query/DataSpaceTemplateQueryCreatorStore.js';
+
+const DataSpaceTemplateQueryCreatorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  gav: string;
+  dataSpacePath: string;
+  templateQueryTitle: string;
+}> = ({ children, gav, dataSpacePath, templateQueryTitle }) => {
+  const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+  const applicationStore = useLegendQueryApplicationStore();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new DataSpaceTemplateQueryCreatorStore(
+        applicationStore,
+        baseStore.depotServerClient,
+        groupId,
+        artifactId,
+        versionId,
+        dataSpacePath,
+        templateQueryTitle,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const DataSpaceTemplateQueryCreator = observer(() => {
+  const parameters = useParams<DataSpaceTemplateQueryCreatorPathParams>();
+  const gav =
+    parameters[DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.GAV];
+  const dataSpacePath =
+    parameters[
+      DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.DATA_SPACE_PATH
+    ];
+  const templateQueryTitle =
+    parameters[
+      DATA_SPACE_TEMPLATE_QUERY_CREATOR_ROUTE_PATTERN_TOKEN.TEMPLATE_QUERY_TITLE
+    ];
+
+  return (
+    <DataSpaceTemplateQueryCreatorStoreProvider
+      gav={gav}
+      dataSpacePath={dataSpacePath}
+      templateQueryTitle={templateQueryTitle}
+    >
+      <QueryEditor />
+    </DataSpaceTemplateQueryCreatorStoreProvider>
+  );
+});

package/src/components/studio/DataSpacePreviewAction.tsx

@@ -59,6 +59,7 @@ export const DataSpacePreviewAction = observer(
 
 export const DataSpacePreviewDialog = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const dataSpacePreviewState =
     DataSpacePreviewState.retrieveNullableState(editorStore);
   if (!dataSpacePreviewState) {
@@ -81,7 +82,9 @@ export const DataSpacePreviewDialog = observer(() => {
       }}
     >
       <Modal
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
         className="editor-modal data-space-preview__dialog"
       >
         <ModalHeader className="data-space-preview__dialog__header">

package/src/graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.ts

@@ -25,6 +25,7 @@ import {
   type Association,
   type Package,
   type RawLambda,
+  type DataElementReference,
   PackageableElement,
 } from '@finos/legend-graph';
 import { DATA_SPACE_HASH_STRUCTURE } from '../../../../../DSL_DataSpace_HashUtils.js';
@@ -36,6 +37,7 @@ export class DataSpaceExecutionContext implements Hashable {
   description?: string | undefined;
   mapping!: PackageableElementReference<Mapping>;
   defaultRuntime!: PackageableElementReference<PackageableRuntime>;
+  testData: DataElementReference | undefined;
 
   get hashCode(): string {
     return hashArray([
@@ -45,6 +47,7 @@ export class DataSpaceExecutionContext implements Hashable {
       this.description ?? '',
       this.mapping.valueForSerialization ?? '',
       this.defaultRuntime.valueForSerialization ?? '',
+      this.testData ?? '',
     ]);
   }
 }