@finos/legend-application-query 6.0.0 → 7.0.0

package/src/components/query-builder/shared/ElementIconUtils.tsx

@@ -1,47 +0,0 @@
-/**
- * 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/query-builder/shared/QueryBuilderLambdaEditor.tsx

@@ -1,120 +0,0 @@
-/**
- * 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/query-builder/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/query-builder/shared/QueryBuilderPanelIssueCountBadge.tsx

@@ -1,40 +0,0 @@
-/**
- * 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/query-builder/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -1,87 +0,0 @@
-/**
- * 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/query-builder/workflows/ClassQueryBuilder.tsx

@@ -1,198 +0,0 @@
-/**
- * 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/query-builder/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/query-builder/workflows/MappingQueryBuilder.tsx

@@ -1,195 +0,0 @@
-/**
- * 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/query-builder/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} />
-);