@finos/legend-query-builder 0.0.1

package/src/components/shared/ElementIconUtils.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 Type,
+  Class,
+  Enumeration,
+  Measure,
+  Unit,
+  PrimitiveType,
+} from '@finos/legend-graph';
+import {
+  PURE_ClassIcon,
+  PURE_PrimitiveTypeIcon,
+  PURE_EnumerationIcon,
+  PURE_MeasureIcon,
+  PURE_UnknownElementTypeIcon,
+  PURE_UnitIcon,
+} from '@finos/legend-art';
+
+export const getClassPropertyIcon = (type: Type): React.ReactNode => {
+  if (type instanceof PrimitiveType) {
+    return <PURE_PrimitiveTypeIcon />;
+  } else if (type instanceof Class) {
+    return <PURE_ClassIcon />;
+  } else if (type instanceof Enumeration) {
+    return <PURE_EnumerationIcon />;
+  } else if (type instanceof Measure) {
+    return <PURE_MeasureIcon />;
+  } else if (type instanceof Unit) {
+    return <PURE_UnitIcon />;
+  }
+  return <PURE_UnknownElementTypeIcon />;
+};

package/src/components/shared/QueryBuilderLambdaEditor.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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 { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { type IKeyboardEvent, KeyCode } from 'monaco-editor';
+import { useCallback, useMemo } from 'react';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import type { Type } from '@finos/legend-graph';
+import {
+  useApplicationStore,
+  LambdaEditor,
+  type LambdaEditorState,
+  type LambdaEditorOnKeyDownEventHandler,
+} from '@finos/legend-application';
+
+export const QueryBuilderLambdaEditor = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    className?: string;
+    disabled: boolean;
+    lambdaEditorState: LambdaEditorState;
+    /**
+     * TODO: when we pass in these expected type we should match a type as expected type if it's covariance, i.e. it is a subtype of
+     * the expected type. Note that we also have to handle that relationship for Primitive type
+     * See https://dzone.com/articles/covariance-and-contravariance
+     */
+    expectedType?: Type;
+    matchedExpectedType?: () => boolean;
+    onExpectedTypeLabelSelect?: () => void;
+    forceBackdrop: boolean;
+    disableExpansion?: boolean | undefined;
+    forceExpansion?: boolean | undefined;
+    disablePopUp?: boolean | undefined;
+    useBaseTextEditorSettings?: boolean | undefined;
+    hideErrorBar?: boolean | undefined;
+    onEditorFocusEventHandler?: (() => void) | undefined;
+  }) => {
+    const {
+      queryBuilderState,
+      className,
+      lambdaEditorState,
+      disabled,
+      forceBackdrop,
+      expectedType,
+      onExpectedTypeLabelSelect,
+      matchedExpectedType,
+      disableExpansion,
+      forceExpansion,
+      disablePopUp,
+      useBaseTextEditorSettings,
+      hideErrorBar,
+      onEditorFocusEventHandler,
+    } = props;
+    const applicationStore = useApplicationStore();
+    const backdropSetter = useCallback(
+      (val: boolean) => queryBuilderState.setBackdrop(val),
+      [queryBuilderState],
+    );
+    const onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[] = useMemo(
+      () => [
+        {
+          matcher: (event: IKeyboardEvent): boolean =>
+            event.keyCode === KeyCode.F9,
+          action: (event: IKeyboardEvent): void => {
+            const handler = async (): Promise<void> => {
+              lambdaEditorState.clearErrors();
+              if (!disabled) {
+                await flowResult(
+                  lambdaEditorState.convertLambdaGrammarStringToObject(),
+                );
+                // abort action if parser error occurred
+                if (lambdaEditorState.parserError) {
+                  return;
+                }
+              }
+              await flowResult(queryBuilderState.compileQuery());
+            };
+            handler().catch(applicationStore.alertUnhandledError);
+          },
+        },
+      ],
+      [disabled, lambdaEditorState, applicationStore, queryBuilderState],
+    );
+
+    return (
+      <LambdaEditor
+        key={lambdaEditorState.uuid}
+        className={className}
+        disabled={disabled}
+        lambdaEditorState={lambdaEditorState}
+        expectedType={expectedType}
+        matchedExpectedType={matchedExpectedType}
+        onExpectedTypeLabelSelect={onExpectedTypeLabelSelect}
+        forceBackdrop={forceBackdrop}
+        backdropSetter={backdropSetter}
+        disableExpansion={disableExpansion}
+        forceExpansion={forceExpansion}
+        disablePopUp={disablePopUp}
+        useBaseTextEditorSettings={useBaseTextEditorSettings}
+        hideErrorBar={hideErrorBar}
+        onKeyDownEventHandlers={onKeyDownEventHandlers}
+        onEditorFocusEventHandler={onEditorFocusEventHandler}
+      />
+    );
+  },
+);

package/src/components/shared/QueryBuilderPanelIssueCountBadge.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 { TimesCircleIcon } from '@finos/legend-art';
+
+export const QueryBuilderPanelIssueCountBadge: React.FC<{
+  issues: string[] | undefined;
+}> = (props) => {
+  const { issues } = props;
+  if (!issues) {
+    return null;
+  }
+  const labelText = `${issues.length} issue${issues.length > 1 ? 's' : ''}`;
+  return (
+    <div
+      className="query-builder-panel-issue-count-badge"
+      title={`Found ${labelText}:\n${issues
+        .map((issue) => `\u2022 ${issue}`)
+        .join('\n')}`}
+    >
+      <TimesCircleIcon className="query-builder-panel-issue-count-badge__icon" />
+      <div className="query-builder-panel-issue-count-badge__text">
+        {labelText}
+      </div>
+    </div>
+  );
+};

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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 TooltipPlacement, Tooltip } from '@finos/legend-art';
+import {
+  type AbstractProperty,
+  DerivedProperty,
+  getMultiplicityDescription,
+} from '@finos/legend-graph';
+
+export const QueryBuilderPropertyInfoTooltip: React.FC<{
+  property: AbstractProperty;
+  path: string;
+  isMapped: boolean;
+  children: React.ReactElement;
+  placement?: TooltipPlacement | undefined;
+}> = (props) => {
+  const { property, path, isMapped, children, placement } = props;
+  return (
+    <Tooltip
+      arrow={true}
+      {...(placement !== undefined ? { placement } : {})}
+      classes={{
+        tooltip: 'query-builder__tooltip',
+        arrow: 'query-builder__tooltip__arrow',
+        tooltipPlacementRight: 'query-builder__tooltip--right',
+      }}
+      TransitionProps={{
+        // disable transition
+        // NOTE: somehow, this is the only workaround we have, if for example
+        // we set `appear = true`, the tooltip will jump out of position
+        timeout: 0,
+      }}
+      title={
+        <div className="query-builder__tooltip__content">
+          <div className="query-builder__tooltip__item">
+            <div className="query-builder__tooltip__item__label">Type</div>
+            <div className="query-builder__tooltip__item__value">
+              {property.genericType.value.rawType.path}
+            </div>
+          </div>
+          <div className="query-builder__tooltip__item">
+            <div className="query-builder__tooltip__item__label">Path</div>
+            <div className="query-builder__tooltip__item__value">{path}</div>
+          </div>
+          <div className="query-builder__tooltip__item">
+            <div className="query-builder__tooltip__item__label">
+              Multiplicity
+            </div>
+            <div className="query-builder__tooltip__item__value">
+              {getMultiplicityDescription(property.multiplicity)}
+            </div>
+          </div>
+          <div className="query-builder__tooltip__item">
+            <div className="query-builder__tooltip__item__label">
+              Derived Property
+            </div>
+            <div className="query-builder__tooltip__item__value">
+              {property instanceof DerivedProperty ? 'Yes' : 'No'}
+            </div>
+          </div>
+          <div className="query-builder__tooltip__item">
+            <div className="query-builder__tooltip__item__label">Mapped</div>
+            <div className="query-builder__tooltip__item__value">
+              {isMapped ? 'Yes' : 'No'}
+            </div>
+          </div>
+        </div>
+      }
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -0,0 +1,198 @@
+/**
+ * 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 {
+  CustomSelectorInput,
+  createFilter,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import {
+  type Class,
+  type Mapping,
+  type Runtime,
+  PackageableElementExplicitReference,
+  RuntimePointer,
+  getMappingCompatibleRuntimes,
+  getClassCompatibleMappings,
+} from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  getPackageableElementOptionFormatter,
+  buildElementOption,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  buildRuntimeValueOption,
+  getRuntimeOptionFormatter,
+  QueryBuilderClassSelector,
+} from '../QueryBuilderSideBar.js';
+import type { ClassQueryBuilderState } from '../../stores/workflows/ClassQueryBuilderState.js';
+
+/**
+ * This setup panel supports cascading in order: Class -> Mapping -> Runtime
+ *
+ * In other words, we will only show:
+ * - For mapping selector: the list of compatible mappings with the selected class
+ * - For runtime value selector: the list of compatible runtimes with the selected mapping
+ *
+ * See details on propagation/cascading in {@link ClassQueryBuilderState}
+ */
+const ClassQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: ClassQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // class
+    const classes = queryBuilderState.graphManagerState.usableClasses;
+    const onClassChange = (val: Class): void =>
+      queryBuilderState.propagateClassChange(val);
+
+    // mapping
+    const mappingOptions = (
+      queryBuilderState.class
+        ? getClassCompatibleMappings(
+            queryBuilderState.class,
+            queryBuilderState.graphManagerState.usableMappings,
+          )
+        : []
+    ).map(buildElementOption);
+    const selectedMappingOption = queryBuilderState.mapping
+      ? buildElementOption(queryBuilderState.mapping)
+      : null;
+    const changeMapping = (val: PackageableElementOption<Mapping>): void => {
+      if (!queryBuilderState.class || val.value === queryBuilderState.mapping) {
+        return;
+      }
+      queryBuilderState.changeMapping(val.value);
+      queryBuilderState.propagateMappingChange(val.value);
+    };
+    const mappingFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Mapping>): string =>
+        option.value.path,
+    });
+
+    // runtime
+    const runtimeOptions = (
+      queryBuilderState.mapping
+        ? getMappingCompatibleRuntimes(
+            queryBuilderState.mapping,
+            queryBuilderState.graphManagerState.usableRuntimes,
+          )
+        : []
+    )
+      .map(
+        (rt) =>
+          new RuntimePointer(PackageableElementExplicitReference.create(rt)),
+      )
+      .map(buildRuntimeValueOption);
+    const selectedRuntimeOption = queryBuilderState.runtimeValue
+      ? buildRuntimeValueOption(queryBuilderState.runtimeValue)
+      : null;
+    const changeRuntime = (val: { value: Runtime }): void => {
+      if (val.value === queryBuilderState.runtimeValue) {
+        return;
+      }
+      queryBuilderState.changeRuntime(val.value);
+    };
+    const runtimeFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { value: Runtime }): string =>
+        option.value instanceof RuntimePointer
+          ? option.value.packageableRuntime.value.path
+          : 'custom',
+    });
+
+    return (
+      <>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          onClassChange={onClassChange}
+        />
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              execution context
+            </div>
+          </div>
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="mapping"
+              >
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder={
+                  mappingOptions.length
+                    ? 'Choose a mapping...'
+                    : 'No compatible mapping found for class'
+                }
+                noMatchMessage="No compatible mapping found for specified class"
+                disabled={!queryBuilderState.class}
+                options={mappingOptions}
+                onChange={changeMapping}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={mappingFilterOption}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="runtime"
+              >
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder="Choose a runtime..."
+                noMatchMessage="No compatible runtime found for specified mapping"
+                disabled={
+                  !queryBuilderState.class || !queryBuilderState.mapping
+                }
+                options={runtimeOptions}
+                onChange={changeRuntime}
+                value={selectedRuntimeOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={runtimeFilterOption}
+                formatOptionLabel={getRuntimeOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+export const renderClassQueryBuilderSetupPanelContent = (
+  queryBuilderState: ClassQueryBuilderState,
+): React.ReactNode => (
+  <ClassQueryBuilderSetupPanelContent queryBuilderState={queryBuilderState} />
+);

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -0,0 +1,195 @@
+/**
+ * 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 {
+  CustomSelectorInput,
+  createFilter,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import {
+  type Mapping,
+  type Runtime,
+  PackageableElementExplicitReference,
+  RuntimePointer,
+  getMappingCompatibleRuntimes,
+  getMappingCompatibleClasses,
+} from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  getPackageableElementOptionFormatter,
+  buildElementOption,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  buildRuntimeValueOption,
+  getRuntimeOptionFormatter,
+  QueryBuilderClassSelector,
+} from '../QueryBuilderSideBar.js';
+import { guaranteeType } from '@finos/legend-shared';
+import type { MappingQueryBuilderState } from '../../stores/workflows/MappingQueryBuilderState.js';
+
+/**
+ * This setup panel supports cascading in order: Mapping -> Runtime + Class
+ *
+ * In other words, we will only show:
+ * - For class selector: the list of compatible classes with the selected mapping
+ * - For runtime value selector: the list of compatible runtimes with the selected mapping
+ *
+ * See details on propagation/cascading in {@link MappingQueryBuilderState}
+ */
+const MappingQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: MappingQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // mapping
+    const mappingOptions =
+      queryBuilderState.graphManagerState.usableMappings.map(
+        buildElementOption,
+      );
+    const selectedMappingOption = queryBuilderState.mapping
+      ? buildElementOption(queryBuilderState.mapping)
+      : null;
+    const changeMapping = (val: PackageableElementOption<Mapping>): void => {
+      if (val.value === queryBuilderState.mapping) {
+        return;
+      }
+      queryBuilderState.changeMapping(val.value);
+      queryBuilderState.propagateMappingChange(val.value);
+      queryBuilderState.onMappingChange?.(val.value);
+    };
+    const mappingFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Mapping>): string =>
+        option.value.path,
+    });
+
+    // runtime
+    const runtimeOptions = (
+      queryBuilderState.mapping
+        ? getMappingCompatibleRuntimes(
+            queryBuilderState.mapping,
+            queryBuilderState.graphManagerState.usableRuntimes,
+          )
+        : []
+    )
+      .map(
+        (rt) =>
+          new RuntimePointer(PackageableElementExplicitReference.create(rt)),
+      )
+      .map(buildRuntimeValueOption);
+    const selectedRuntimeOption = queryBuilderState.runtimeValue
+      ? buildRuntimeValueOption(queryBuilderState.runtimeValue)
+      : null;
+    const changeRuntime = (val: { value: Runtime }): void => {
+      if (val.value === queryBuilderState.runtimeValue) {
+        return;
+      }
+      queryBuilderState.changeRuntime(val.value);
+      queryBuilderState.onRuntimeChange?.(val.value);
+    };
+    const runtimeFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { value: Runtime }): string =>
+        guaranteeType(option.value, RuntimePointer).packageableRuntime.value
+          .path,
+    });
+
+    // class
+    const classes = queryBuilderState.mapping
+      ? getMappingCompatibleClasses(
+          queryBuilderState.mapping,
+          queryBuilderState.graphManagerState.usableClasses,
+        )
+      : [];
+
+    return (
+      <>
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              execution context
+            </div>
+          </div>
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="mapping"
+              >
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder={
+                  mappingOptions.length
+                    ? 'Choose a mapping...'
+                    : 'No mapping found'
+                }
+                noMatchMessage="No mapping found"
+                options={mappingOptions}
+                onChange={changeMapping}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={mappingFilterOption}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="runtime"
+              >
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder="Choose a runtime..."
+                noMatchMessage="No compatible runtime found for specified mapping"
+                disabled={!queryBuilderState.mapping}
+                options={runtimeOptions}
+                onChange={changeRuntime}
+                value={selectedRuntimeOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={runtimeFilterOption}
+                formatOptionLabel={getRuntimeOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          noMatchMessage="No compatible class found for specified mapping"
+        />
+      </>
+    );
+  },
+);
+
+export const renderMappingQueryBuilderSetupPanelContent = (
+  queryBuilderState: MappingQueryBuilderState,
+): React.ReactNode => (
+  <MappingQueryBuilderSetupPanelContent queryBuilderState={queryBuilderState} />
+);