@finos/legend-application-query 5.0.2 → 5.2.2

package/src/components/QueryBuilderPropertySearchPanel.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,
@@ -28,6 +29,7 @@ import {
   SearchIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   Class,
@@ -37,9 +39,7 @@ import {
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import { QUERY_BUILDER_PROPERTY_SEARCH_TYPE } from '../QueryBuilder_Const.js';
 import {
   type QueryBuilderExplorerTreeNodeData,
@@ -116,7 +116,9 @@ const QueryBuilderTreeNodeViewer = observer(
       props;
     const [isExpandable, setIsExpandable] = useState(false);
     const propertySearchPanelState = explorerState.propertySearchPanelState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -126,16 +128,17 @@ const QueryBuilderTreeNodeViewer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
-        collect: (monitor): { isDragging: boolean } => ({
+        collect: (monitor) => ({
           isDragging: monitor.isDragging(),
         }),
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
     const isMultiple =
       (node instanceof QueryBuilderExplorerTreePropertyNodeData &&
         (node.property.multiplicity.upperBound === undefined ||
@@ -186,10 +189,6 @@ const QueryBuilderTreeNodeViewer = observer(
         node.parentId === pn.id,
     );
 
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
-
     return (
       <div>
         <div

package/src/components/QueryBuilderResultModifierPanel.tsx

@@ -32,6 +32,7 @@ import {
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import type { QueryBuilderProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -39,6 +40,7 @@ const ColumnSortEditor = observer(
     columnSort: SortColumnState;
   }) => {
     const { queryBuilderState, columnSort } = props;
+    const applicationStore = useApplicationStore();
     const projectionState =
       queryBuilderState.fetchStructureState.projectionState;
     const sortColumns = queryBuilderState.resultSetModifierState.sortColumns;
@@ -81,7 +83,7 @@ const ColumnSortEditor = observer(
           disabled={projectionOptions.length <= 1}
           onChange={onChange}
           value={value}
-          darkMode={true}
+          darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
         />
         <button
           className="btn--dark btn--sm query-builder__projection__options__sort__type-btn"
@@ -95,7 +97,7 @@ const ColumnSortEditor = observer(
           )}
         </button>
         <button
-          className="query-builder__projection__options__sort__remove-btn"
+          className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
           onClick={deleteColumnSort}
           tabIndex={-1}
           title={'Remove'}

package/src/components/QueryBuilderResultPanel.tsx

@@ -288,6 +288,61 @@ const QueryBuilderResultContextMenu = observer(
   }),
 );
 
+const QueryBuilderGridResult = observer(
+  (props: {
+    executionResult: TdsExecutionResult;
+    queryBuilderState: QueryBuilderState;
+  }) => {
+    const { executionResult, queryBuilderState } = props;
+    const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
+      useState<CellMouseOverEvent | null>(null);
+    const columns = executionResult.result.columns;
+    const rowData = executionResult.result.rows.map((_row) => {
+      const row: Record<PropertyKey, unknown> = {};
+      const cols = executionResult.result.columns;
+      _row.values.forEach((value, idx) => {
+        // `ag-grid` shows `false` value as empty string so we have
+        // call `.toString()` to avoid this behavior.
+        // See https://github.com/finos/legend-studio/issues/1008
+        row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
+      });
+      return row;
+    });
+
+    return (
+      <ContextMenu
+        content={
+          <QueryBuilderResultContextMenu
+            event={cellDoubleClickedEvent}
+            queryBuilderState={queryBuilderState}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        key={executionResult._UUID}
+        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+      >
+        <AgGridReact
+          rowData={rowData}
+          onCellMouseOver={(event): void => {
+            setCellDoubleClickedEvent(event);
+          }}
+        >
+          {columns.map((colName) => (
+            <AgGridColumn
+              minWidth={50}
+              sortable={true}
+              resizable={true}
+              field={colName}
+              key={colName}
+              flex={1}
+            />
+          ))}
+        </AgGridReact>
+      </ContextMenu>
+    );
+  },
+);
+
 const QueryBuilderResultValues = observer(
   (props: {
     executionResult: ExecutionResult;
@@ -295,52 +350,11 @@ const QueryBuilderResultValues = observer(
   }) => {
     const { executionResult, queryBuilderState } = props;
     if (executionResult instanceof TdsExecutionResult) {
-      const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-        useState<CellMouseOverEvent | null>(null);
-      const columns = executionResult.result.columns;
-      const rowData = executionResult.result.rows.map((_row) => {
-        const row: Record<PropertyKey, unknown> = {};
-        const cols = executionResult.result.columns;
-        _row.values.forEach((value, idx) => {
-          // `ag-grid` shows `false` value as empty string so we have
-          // call `.toString()` to avoid this behavior.
-          // See https://github.com/finos/legend-studio/issues/1008
-          row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
-        });
-        return row;
-      });
       return (
-        <ContextMenu
-          content={
-            <QueryBuilderResultContextMenu
-              event={cellDoubleClickedEvent}
-              queryBuilderState={queryBuilderState}
-            />
-          }
-          menuProps={{ elevation: 7 }}
-          key={executionResult._UUID}
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
-        >
-          <AgGridReact
-            rowData={rowData}
-            onCellMouseOver={(event): void => {
-              setCellDoubleClickedEvent(event);
-            }}
-          >
-            {columns.map((colName) => (
-              <AgGridColumn
-                minWidth={50}
-                sortable={true}
-                resizable={true}
-                field={colName}
-                key={colName}
-                flex={1}
-              />
-            ))}
-          </AgGridReact>
-        </ContextMenu>
+        <QueryBuilderGridResult
+          queryBuilderState={queryBuilderState}
+          executionResult={executionResult}
+        />
       );
     } else if (executionResult instanceof RawExecutionResult) {
       return (
@@ -414,6 +428,9 @@ export const QueryBuilderResultPanel = observer(
         ],
       });
     };
+    const queryValidationIssues = queryBuilderState.validationIssues;
+    const isQueryValid =
+      !queryBuilderState.isQuerySupported() || !queryValidationIssues;
     const runQuery = (): void => {
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
@@ -439,6 +456,7 @@ export const QueryBuilderResultPanel = observer(
     const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
       flowResult(resultState.generatePlan(true)),
     );
+
     const changeLimit: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       const val = event.target.value;
       queryBuilderState.resultState.setPreviewLimit(
@@ -474,7 +492,7 @@ export const QueryBuilderResultPanel = observer(
                   type="number"
                   value={resultState.previewLimit}
                   onChange={changeLimit}
-                  disabled={!queryBuilderState.isValidQueryBuilderState()}
+                  disabled={!isQueryValid}
                 />
               </div>
             )}
@@ -483,7 +501,7 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__stop-btn"
                 onClick={cancelQuery}
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
                   <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
@@ -497,7 +515,14 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__execute-btn"
                 onClick={runQuery}
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                title={
+                  queryValidationIssues
+                    ? `Query is not valid:\n${queryValidationIssues
+                        .map((issue) => `\u2022 ${issue}`)
+                        .join('\n')}`
+                    : undefined
+                }
+                disabled={!isQueryValid}
               >
                 <div className="query-builder__result__execute-btn__label">
                   <PlayIcon className="query-builder__result__execute-btn__label__icon" />
@@ -560,14 +585,14 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__export__dropdown__label"
                 tabIndex={-1}
                 title="Export"
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 Export
               </button>
               <button
                 className="query-builder__result__export__dropdown__trigger"
                 tabIndex={-1}
-                disabled={!queryBuilderState.isValidQueryBuilderState()}
+                disabled={!isQueryValid}
               >
                 <CaretDownIcon />
               </button>

package/src/components/QueryBuilderSetupPanel.tsx

@@ -21,7 +21,6 @@ import {
   PURE_ClassIcon,
   PURE_MappingIcon,
   PURE_RuntimeIcon,
-  EyeIcon,
   ClockIcon,
   clsx,
 } from '@finos/legend-art';
@@ -46,8 +45,9 @@ import {
 } from '@finos/legend-graph';
 import {
   type PackageableElementOption,
-  getPackageableElementOptionalFormatter,
+  getPackageableElementOptionFormatter,
   buildElementOption,
+  useApplicationStore,
 } from '@finos/legend-application';
 import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
 import { useState } from 'react';
@@ -124,8 +124,8 @@ const generateClassLabel = (
         >
           {val.name}
         </div>
-        <EyeIcon
-          className="query-builder__setup__config__item__class-label__btn"
+        <ClockIcon
+          className="query-builder__setup__config__item__class-label__milestoning"
           title={milestoningParameterValues}
         />
       </div>
@@ -151,6 +151,7 @@ const generateClassLabel = (
 export const QueryBuilderSetupPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
     const querySetupState = queryBuilderState.querySetupState;
     const [isMilestoneEditorOpened, setIsMilestoneEditorOpened] =
       useState<boolean>(false);
@@ -266,15 +267,15 @@ export const QueryBuilderSetupPanel = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               disabled={!isQuerySupported || querySetupState.classIsReadOnly}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
-                darkMode: true,
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
             <button
-              className="btn--dark btn__icon--dark"
+              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
               tabIndex={-1}
               onClick={(): void => setIsMilestoneEditorOpened(true)}
               disabled={!isMilestonedQuery}
@@ -302,10 +303,10 @@ export const QueryBuilderSetupPanel = observer(
               options={mappingOptions}
               onChange={changeMapping}
               value={selectedMappingOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
-                darkMode: true,
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
           </div>
@@ -330,7 +331,7 @@ export const QueryBuilderSetupPanel = observer(
               options={runtimeOptions}
               onChange={changeRuntime}
               value={selectedRuntimeOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={runtimeFilterOption}
             />
           </div>

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -48,7 +48,9 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
     const { queryBuilderState } = props;
     const queryUnsupportedState = queryBuilderState.queryUnsupportedState;
     const lambdaError = queryUnsupportedState.lambdaError;
-    const errorMessage = lambdaError ? `due to: ${lambdaError.message}` : '';
+    const errorMessage = lambdaError?.message
+      ? ` due to: ${lambdaError.message}`
+      : '';
     const openLambdaModal = (): void =>
       queryBuilderState.queryTextEditorState.openModal(
         QueryTextEditorMode.TEXT,
@@ -63,7 +65,7 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
         <div className="panel__content">
           <BlankPanelContent>
             <div className="query-builder__unsupported-view__main">
-              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode ${errorMessage}`}</div>
+              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode${errorMessage}`}</div>
               <button
                 className="btn--dark query-builder__unsupported-view__to-text-mode__btn"
                 onClick={openLambdaModal}

package/src/components/QueryEditor.tsx

@@ -22,6 +22,9 @@ import {
   RobotIcon,
   SaveIcon,
   BlankPanelContent,
+  clsx,
+  EmptyLightBulbIcon,
+  LightBulbIcon,
 } from '@finos/legend-art';
 import { getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -108,6 +111,8 @@ const QueryExportDialogContent = observer(
           )}
           <button
             className="btn modal__footer__close-btn btn--dark"
+            // TODO?: we should probably annotate here why,
+            // when we disable this action
             disabled={!allowCreate}
             onClick={create}
           >
@@ -199,6 +204,10 @@ const QueryEditorHeaderContent = observer(() => {
       ),
     );
   };
+  const toggleLightDarkTheme = (): void =>
+    applicationStore.TEMPORARY__setIsLightThemeEnabled(
+      !applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
   const saveQuery = (): void => {
     editorStore.queryBuilderState
       .saveQuery(async (lambda: RawLambda) => {
@@ -227,6 +236,20 @@ const QueryEditorHeaderContent = observer(() => {
         >
           <ExternalLinkSquareIcon />
         </button>
+        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+          <button
+            className="query-editor__header__action query-editor__header__action--simple btn--dark"
+            tabIndex={-1}
+            title="Toggle Light/Dark Theme"
+            onClick={toggleLightDarkTheme}
+          >
+            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+              <EmptyLightBulbIcon />
+            ) : (
+              <LightBulbIcon />
+            )}
+          </button>
+        )}
         <button
           className="query-editor__header__action btn--dark"
           tabIndex={-1}
@@ -256,9 +279,24 @@ export const QueryEditor = observer(() => {
     );
   }, [editorStore, applicationStore]);
 
+  useEffect(() => {
+    document.body.classList.toggle(
+      'light-theme',
+      applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
+  }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
+
   return (
     <DndProvider backend={HTML5Backend}>
-      <div className="query-editor">
+      <div
+        className={clsx([
+          'query-editor ',
+          {
+            'query-editor--light':
+              applicationStore.TEMPORARY__isLightThemeEnabled,
+          },
+        ])}
+      >
         <div className="query-editor__header">
           <button
             className="query-editor__header__back-btn btn--dark"

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -42,6 +42,11 @@ import {
   WebApplicationNavigator,
   TEST__getTestApplicationStore,
 } from '@finos/legend-application';
+import {
+  type SDLCServerClient,
+  TEST__SDLCServerClientProvider,
+  TEST__getTestSDLCServerClient,
+} from '@finos/legend-server-sdlc';
 import { TEST__getTestLegendQueryApplicationConfig } from '../stores/QueryEditorStoreTestUtils.js';
 import { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import { ExistingQueryEditor } from './QueryEditor.js';
@@ -68,6 +73,8 @@ export const TEST__provideMockedQueryEditorStore = (customization?: {
   mock?: ExistingQueryEditorStore;
   applicationStore?: LegendQueryApplicationStore;
   depotServerClient?: DepotServerClient;
+  sdlcServerClient?: SDLCServerClient;
+
   graphManagerState?: GraphManagerState;
   pluginManager?: LegendQueryPluginManager;
 }): ExistingQueryEditorStore => {
@@ -82,6 +89,7 @@ export const TEST__provideMockedQueryEditorStore = (customization?: {
           pluginManager,
         ),
       customization?.depotServerClient ?? TEST__getTestDepotServerClient(),
+      customization?.sdlcServerClient ?? TEST__getTestSDLCServerClient(),
       pluginManager,
       TEST_QUERY_ID,
     );
@@ -185,11 +193,13 @@ export const TEST__setUpQueryEditor = async (
         config={TEST__getTestLegendQueryApplicationConfig()}
         pluginManager={LegendQueryPluginManager.create()}
       >
-        <TEST__DepotServerClientProvider>
-          <TEST__LegendQueryBaseStoreProvider>
-            <ExistingQueryEditor />
-          </TEST__LegendQueryBaseStoreProvider>
-        </TEST__DepotServerClientProvider>
+        <TEST__SDLCServerClientProvider>
+          <TEST__DepotServerClientProvider>
+            <TEST__LegendQueryBaseStoreProvider>
+              <ExistingQueryEditor />
+            </TEST__LegendQueryBaseStoreProvider>
+          </TEST__DepotServerClientProvider>
+        </TEST__SDLCServerClientProvider>
       </TEST__ApplicationStoreProvider>
     </Router>,
   );

package/src/components/QueryEditorStoreProvider.tsx

@@ -31,6 +31,7 @@ import {
   useLegendQueryApplicationStore,
   useLegendQueryBaseStore,
 } from './LegendQueryBaseStoreProvider.js';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
 
 export const QueryEditorStoreContext = createContext<
   QueryEditorStore | undefined
@@ -42,12 +43,14 @@ export const ExistingQueryEditorStoreProvider: React.FC<{
 }> = ({ children, queryId }) => {
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
+  const sdlcServerClient = useSDLCServerClient();
   const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new ExistingQueryEditorStore(
         applicationStore,
         depotServerClient,
+        sdlcServerClient,
         baseStore.pluginManager,
         queryId,
       ),
@@ -69,12 +72,14 @@ export const CreateQueryEditorStoreProvider: React.FC<{
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
+  const sdlcServerClient = useSDLCServerClient();
   const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new CreateQueryEditorStore(
         applicationStore,
         depotServerClient,
+        sdlcServerClient,
         baseStore.pluginManager,
         groupId,
         artifactId,
@@ -100,12 +105,14 @@ export const ServiceQueryEditorStoreProvider: React.FC<{
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
+  const sdlcServerClient = useSDLCServerClient();
   const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new ServiceQueryEditorStore(
         applicationStore,
         depotServerClient,
+        sdlcServerClient,
         baseStore.pluginManager,
         groupId,
         artifactId,

package/src/components/QuerySetupStoreProvider.tsx

@@ -23,6 +23,7 @@ import {
   useLegendQueryApplicationStore,
   useLegendQueryBaseStore,
 } from './LegendQueryBaseStoreProvider.js';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
 
 const QuerySetupStoreContext = createContext<QuerySetupStore | undefined>(
   undefined,
@@ -34,11 +35,13 @@ export const QuerySetupStoreProvider: React.FC<{
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
   const baseStore = useLegendQueryBaseStore();
+  const sdlcServerClient = useSDLCServerClient();
   const store = useLocalObservable(
     () =>
       new QuerySetupStore(
         applicationStore,
         depotServerClient,
+        sdlcServerClient,
         baseStore.pluginManager,
       ),
   );

package/src/stores/LegendQueryBaseStore.ts

@@ -15,10 +15,14 @@
  */
 
 import type { DepotServerClient } from '@finos/legend-server-depot';
-import type { ApplicationStore } from '@finos/legend-application';
+import {
+  type ApplicationStore,
+  LegendApplicationSDLCSetupState,
+} from '@finos/legend-application';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
 import type { LegendQueryApplicationPlugin } from './LegendQueryApplicationPlugin.js';
+import type { SDLCServerClient } from '@finos/legend-server-sdlc';
 
 export type LegendQueryApplicationStore = ApplicationStore<
   LegendQueryApplicationConfig,
@@ -29,17 +33,26 @@ export class LegendQueryBaseStore {
   applicationStore: LegendQueryApplicationStore;
   depotServerClient: DepotServerClient;
   pluginManager: LegendQueryPluginManager;
+  applicationSDLCSetupState: LegendApplicationSDLCSetupState;
 
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
+    sdlcServerClient: SDLCServerClient,
     pluginManager: LegendQueryPluginManager,
   ) {
     this.applicationStore = applicationStore;
+    this.applicationSDLCSetupState = new LegendApplicationSDLCSetupState(
+      applicationStore,
+      sdlcServerClient,
+    );
     this.depotServerClient = depotServerClient;
     this.pluginManager = pluginManager;
 
     // Register plugins
+    this.applicationSDLCSetupState.sdlcServerClient.setTracerService(
+      this.applicationStore.tracerService,
+    );
     this.depotServerClient.setTracerService(
       this.applicationStore.tracerService,
     );

package/src/stores/QueryBuilderExplorerState.ts

@@ -355,6 +355,11 @@ export const getQueryBuilderPropertyNodeData = (
     parentNode.isPartOfDerivedPropertyBranch ||
     (parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
       parentNode.property instanceof DerivedProperty);
+  // NOTE: in case of association, to avoid infinite exploration path
+  // we will prune it, on the other hand, in circular composition case
+  // A has property of type B and B has property of type A
+  // we will allow users to explore as deeply as they wish
+  // See https://github.com/finos/legend-studio/issues/1172
   if (
     property instanceof Property &&
     parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&