@finos/legend-query-builder 4.17.100 → 4.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.17.100",
+  "version": "4.18.1",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -43,12 +43,12 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.103",
-    "@finos/legend-art": "7.1.145",
-    "@finos/legend-code-editor": "2.0.163",
-    "@finos/legend-data-cube": "0.3.80",
-    "@finos/legend-graph": "32.4.3",
-    "@finos/legend-lego": "2.0.182",
+    "@finos/legend-application": "16.0.104",
+    "@finos/legend-art": "7.1.146",
+    "@finos/legend-code-editor": "2.0.165",
+    "@finos/legend-data-cube": "0.3.82",
+    "@finos/legend-graph": "32.5.1",
+    "@finos/legend-lego": "2.0.184",
     "@finos/legend-server-depot": "6.1.10",
     "@finos/legend-shared": "11.0.23",
     "@finos/legend-storage": "3.0.144",

package/src/__test__.ts

@@ -18,3 +18,4 @@ export {
   TEST__setUpQueryBuilder,
   TEST__setUpGraphManagerState,
 } from './components/__test-utils__/QueryBuilderComponentTestUtils.js';
+export { TEST_DATA__QueryBuilder_Accessors } from './stores/__test-utils__/TEST_DATA__QueryBuilder_Accessors.js';

package/src/components/QueryBuilder.tsx

@@ -520,7 +520,7 @@ export const QueryBuilder = observer(
       // we use an empty RawLambda with an empty class and this useEffect is called earlier than initializeWithQuery()
       if (
         queryBuilderState.isQuerySupported &&
-        queryBuilderState.class &&
+        queryBuilderState.sourceElement &&
         queryBuilderState.canBuildQuery
       ) {
         const calculatedQuery = returnUndefOnError(() =>
@@ -676,6 +676,7 @@ export const QueryBuilder = observer(
                         onClick={toggleShowFilterPanel}
                         disabled={
                           !queryBuilderState.isQuerySupported ||
+                          queryBuilderState.sourceAccessor !== undefined ||
                           Array.from(
                             queryBuilderState.filterState.nodes.values(),
                           ).length > 0

package/src/components/QueryBuilderSideBar.tsx

@@ -115,17 +115,20 @@ export const QueryBuilderClassSelector = observer(
         value: _class,
         label: generateClassLabel(_class, queryBuilderState),
       })) as PackageableElementOption<Class>[];
-    const selectedClassOption = queryBuilderState.class
+    const selectedClassOption = queryBuilderState.sourceClass
       ? ({
-          value: queryBuilderState.class,
-          label: generateClassLabel(queryBuilderState.class, queryBuilderState),
+          value: queryBuilderState.sourceClass,
+          label: generateClassLabel(
+            queryBuilderState.sourceClass,
+            queryBuilderState,
+          ),
         } as PackageableElementOption<Class>)
       : null;
     const changeClass = (val: PackageableElementOption<Class>): void => {
-      if (val.value === queryBuilderState.class) {
+      if (val.value === queryBuilderState.sourceElement) {
         return;
       }
-      queryBuilderState.changeClass(val.value);
+      queryBuilderState.changeSourceElement(val.value);
       onClassChange?.(val.value);
     };
 
@@ -222,7 +225,7 @@ const BasicQueryBuilderSetup = observer(
       : null;
     const changeMapping = (val: PackageableElementOption<Mapping>): void => {
       if (
-        !queryBuilderState.class ||
+        !queryBuilderState.sourceElement ||
         val.value === queryBuilderState.executionContextState.mapping ||
         queryBuilderState.isMappingReadOnly
       ) {
@@ -291,7 +294,8 @@ const BasicQueryBuilderSetup = observer(
                   : 'No mapping found'
               }
               disabled={
-                queryBuilderState.isMappingReadOnly || !queryBuilderState.class
+                queryBuilderState.isMappingReadOnly ||
+                !queryBuilderState.sourceElement
               }
               options={mappingOptions}
               onChange={changeMapping}
@@ -326,7 +330,7 @@ const BasicQueryBuilderSetup = observer(
               }
               disabled={
                 queryBuilderState.isRuntimeReadOnly ||
-                !queryBuilderState.class ||
+                !queryBuilderState.sourceElement ||
                 !queryBuilderState.executionContextState.mapping
               }
               options={runtimeOptions}

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

@@ -40,6 +40,7 @@ import {
   GraphManagerState,
   PackageableElementExplicitReference,
   RuntimePointer,
+  Core_GraphManagerPreset,
 } from '@finos/legend-graph';
 import {
   ApplicationStoreProvider,
@@ -61,7 +62,11 @@ import {
 } from '../../stores/__test-utils__/QueryBuilderStateTestUtils.js';
 import { STYLE_PREFIX, STYLE_PREFIX__DARK } from '@finos/legend-art';
 import { expect } from '@jest/globals';
-import { QueryBuilderAdvancedWorkflowState } from '../../stores/query-workflow/QueryBuilderWorkFlowState.js';
+import {
+  QueryBuilderActionConfig,
+  QueryBuilderAdvancedWorkflowState,
+} from '../../stores/query-workflow/QueryBuilderWorkFlowState.js';
+import { AccessorQueryBuilderState } from '../../stores/workflows/accessor/AccessorQueryBuilderState.js';
 import { Route, Routes } from '@finos/legend-application/browser';
 import {
   BasicValueSpecificationEditor,
@@ -301,6 +306,73 @@ export const TEST__setUpQueryBuilder = async (
   };
 };
 
+export const TEST__setUpAccessorQueryBuilder = async (
+  entities: Entity[],
+): Promise<{
+  renderResult: RenderResult;
+  queryBuilderState: AccessorQueryBuilderState;
+}> => {
+  const pluginManager = TEST__LegendApplicationPluginManager.create();
+  pluginManager
+    .usePresets([
+      new Core_GraphManagerPreset(),
+      new QueryBuilder_GraphManagerPreset(),
+    ])
+    .install();
+  const graphManagerState = new GraphManagerState(
+    pluginManager,
+    new LogService(),
+  );
+  await graphManagerState.graphManager.initialize({
+    env: 'test',
+    tabSize: 2,
+    clientConfig: {},
+  });
+  await graphManagerState.initializeSystem();
+  await graphManagerState.graphManager.buildGraph(
+    graphManagerState.graph,
+    entities,
+    graphManagerState.graphBuildState,
+  );
+
+  const MOCK__applicationStore = new ApplicationStore(
+    TEST__getGenericApplicationConfig(),
+    pluginManager,
+  );
+
+  const queryBuilderState = new AccessorQueryBuilderState(
+    MOCK__applicationStore,
+    undefined,
+    graphManagerState,
+    QueryBuilderAdvancedWorkflowState.INSTANCE,
+    QueryBuilderActionConfig.INSTANCE,
+  );
+
+  const renderResult = render(
+    <ApplicationStoreProvider store={MOCK__applicationStore}>
+      <TEST__BrowserEnvironmentProvider initialEntries={['/']}>
+        <ApplicationFrameworkProvider>
+          <Routes>
+            <Route
+              path="*"
+              element={<QueryBuilder queryBuilderState={queryBuilderState} />}
+            />
+          </Routes>
+        </ApplicationFrameworkProvider>
+      </TEST__BrowserEnvironmentProvider>
+    </ApplicationStoreProvider>,
+  );
+
+  await waitFor(() =>
+    renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER),
+  );
+
+  return {
+    renderResult,
+    queryBuilderState,
+  };
+};
+
 export const TEST__setUpBasicValueSpecificationEditor = (
   pluginManager: TEST__LegendApplicationPluginManager,
   props: {

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -85,17 +85,18 @@ import {
   PrimitiveType,
   PrecisePrimitiveType,
   PRIMITIVE_TYPE,
+  PRECISE_PRIMITIVE_TYPE,
   Enumeration,
   TYPE_CAST_TOKEN,
   getMultiplicityDescription,
   isElementDeprecated,
+  extractElementNameFromPath,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 import {
   debounce,
   filterByType,
-  guaranteeNonNullable,
   isNonNullable,
   prettyCONSTName,
 } from '@finos/legend-shared';
@@ -107,6 +108,7 @@ import { getStandardPrimitiveTypeEquivalent } from '../../stores/QueryBuilderVal
 import { QueryBuilderRootClassInfoTooltip } from '../shared/QueryBuilderRootClassInfoTooltip.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 import type { QueryBuilderPropertySearchState } from '../../stores/explorer/QueryBuilderPropertySearchState.js';
+import { QueryBuilderRelationExplorerPanel } from './QueryBuilderRelationExplorerPanel.js';
 
 export const checkForDeprecatedNode = (
   node: QueryBuilderExplorerTreeNodeData,
@@ -420,8 +422,34 @@ const QueryBuilderExplorerContextMenu = observer(
   }),
 );
 
+const PRECISE_PRIMITIVE_STRING_TYPES = new Set([
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.VARCHAR),
+]);
+
+const PRECISE_PRIMITIVE_NUMBER_TYPES = new Set([
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.TINY_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_TINY_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.SMALL_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_SMALL_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.BIG_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.U_BIG_INT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.FLOAT),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DOUBLE),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.NUMERIC),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DECIMAL),
+]);
+
+const PRECISE_PRIMITIVE_TIME_TYPES = new Set([
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.TIMESTAMP),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.STRICTDATE),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.DATETIME),
+  extractElementNameFromPath(PRECISE_PRIMITIVE_TYPE.STRICTTIME),
+]);
+
 export const renderPropertyTypeIcon = (type: Type): React.ReactNode => {
-  if (type instanceof PrimitiveType || type instanceof PrecisePrimitiveType) {
+  if (type instanceof PrimitiveType || type instanceof PrimitiveType) {
     const typeName = getStandardPrimitiveTypeEquivalent(type) ?? type.path;
     if (typeName === PRIMITIVE_TYPE.STRING) {
       return (
@@ -449,6 +477,20 @@ export const renderPropertyTypeIcon = (type: Type): React.ReactNode => {
         <ClockIcon className="query-builder-explorer-tree__icon query-builder-explorer-tree__icon__time" />
       );
     }
+  } else if (type instanceof PrecisePrimitiveType) {
+    if (PRECISE_PRIMITIVE_STRING_TYPES.has(type.name)) {
+      return (
+        <StringTypeIcon className="query-builder-explorer-tree__icon query-builder-explorer-tree__icon__string" />
+      );
+    } else if (PRECISE_PRIMITIVE_NUMBER_TYPES.has(type.name)) {
+      return (
+        <HashtagIcon className="query-builder-explorer-tree__icon query-builder-explorer-tree__icon__number" />
+      );
+    } else if (PRECISE_PRIMITIVE_TIME_TYPES.has(type.name)) {
+      return (
+        <ClockIcon className="query-builder-explorer-tree__icon query-builder-explorer-tree__icon__time" />
+      );
+    }
   }
   return getClassPropertyIcon(type);
 };
@@ -507,6 +549,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       node instanceof QueryBuilderExplorerTreePropertyNodeData &&
       node.type instanceof PrimitiveType &&
       !node.isPartOfDerivedPropertyBranch;
+
     const nodeExpandIcon = isExpandable ? (
       node.isOpen ? (
         <ChevronDownIcon />
@@ -611,18 +654,20 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
                 {node.label}
               </div>
               <div className="query-builder-explorer-tree__node__actions">
-                <QueryBuilderRootClassInfoTooltip
-                  _class={guaranteeNonNullable(queryBuilderState.class)}
-                >
-                  <div
-                    className="query-builder-explorer-tree__node__action query-builder-explorer-tree__node__info"
-                    data-testid={
-                      QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TOOLTIP_ICON
-                    }
+                {queryBuilderState.sourceClass && (
+                  <QueryBuilderRootClassInfoTooltip
+                    _class={queryBuilderState.sourceClass}
                   >
-                    <InfoCircleIcon />
-                  </div>
-                </QueryBuilderRootClassInfoTooltip>
+                    <div
+                      className="query-builder-explorer-tree__node__action query-builder-explorer-tree__node__info"
+                      data-testid={
+                        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TOOLTIP_ICON
+                      }
+                    >
+                      <InfoCircleIcon />
+                    </div>
+                  </QueryBuilderRootClassInfoTooltip>
+                )}
               </div>
             </>
           )}
@@ -1000,7 +1045,7 @@ const QueryBuilderExplorerSearchInput = observer(
   }),
 );
 
-export const QueryBuilderExplorerPanel = observer(
+const QueryBuilderClassExplorerPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const searchInputRef = useRef<HTMLInputElement>(null);
@@ -1159,3 +1204,21 @@ export const QueryBuilderExplorerPanel = observer(
     );
   },
 );
+
+export const QueryBuilderExplorerPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const accessor = queryBuilderState.sourceAccessor;
+    if (accessor) {
+      return (
+        <QueryBuilderRelationExplorerPanel
+          queryBuilderState={queryBuilderState}
+          accessor={accessor}
+        />
+      );
+    }
+    return (
+      <QueryBuilderClassExplorerPanel queryBuilderState={queryBuilderState} />
+    );
+  },
+);