@finos/legend-query-builder 0.4.4 → 0.5.0

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -79,15 +79,15 @@ import {
   QueryBuilderDerivationProjectionColumnState,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  type QueryBuilderVariableDragSource,
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 import {
   QueryBuilderColumnInfoTooltip,
   renderPropertyTypeIcon,
@@ -95,7 +95,7 @@ import {
 import {
   type QueryBuilderOLAPColumnDragSource,
   QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState_.js';
+} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
@@ -280,9 +280,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
     isDragOver: boolean;
   }) => {
     const { node, isDragOver } = props;
-    const graph =
-      node.condition.postFilterState.tdsState.queryBuilderState
-        .graphManagerState.graph;
+    const queryBuilderState =
+      node.condition.postFilterState.tdsState.queryBuilderState;
+    const graph = queryBuilderState.graphManagerState.graph;
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
       node.condition.changeOperator(val);
@@ -299,15 +299,14 @@ const QueryBuilderPostFilterConditionEditor = observer(
     };
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        const parameterType =
-          item.variable.parameter.genericType?.value.rawType;
+      (item: QueryBuilderVariableDragSource): void => {
+        const parameterType = item.variable.genericType?.value.rawType;
         const conditionValueType = node.condition.columnState.getColumnType();
         if (
           conditionValueType &&
           isTypeCompatibleForAssignment(parameterType, conditionValueType)
         ) {
-          node.condition.setValue(item.variable.parameter);
+          node.condition.setValue(item.variable);
         } else {
           applicationStore.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
@@ -317,12 +316,12 @@ const QueryBuilderPostFilterConditionEditor = observer(
       [applicationStore, node.condition],
     );
     const [{ isFilterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -417,10 +416,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     valueSpecification={node.condition.value}
                     setValueSpecification={changeValueSpecification}
                     graph={graph}
-                    obseverContext={
-                      node.condition.postFilterState.tdsState.queryBuilderState
-                        .observableContext
-                    }
+                    obseverContext={queryBuilderState.observableContext}
                     typeCheckOption={{
                       expectedType: guaranteeNonNullable(
                         node.condition.columnState.getColumnType(),
@@ -428,6 +424,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     }}
                     resetValue={resetNode}
                     selectorConfig={selectorConfig}
+                    isConstant={queryBuilderState.constantState.isValueSpecConstant(
+                      node.condition.value,
+                    )}
                   />
                 </PanelEntryDropZonePlaceholder>
               </div>

package/src/components/fetch-structure/QueryBuilderPostTDSPanel.tsx

@@ -21,7 +21,7 @@ import {
   ResizablePanelSplitter,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from '../filter/QueryBuilderFilterPanel.js';
-import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel_.js';
+import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel.js';
 import { QueryBuilderPostFilterPanel } from './QueryBuilderPostFilterPanel.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -55,10 +55,6 @@ import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { flowResult } from 'mobx';
 import { useApplicationStore } from '@finos/legend-application';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import {
   type ConcreteFunctionDefinition,
   generateFunctionCallString,
@@ -73,6 +69,10 @@ import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../../stores/QueryBuilderConfig.js
 import type { QueryBuilderAggregateOperator } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregateOperator.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { LambdaEditor } from '../shared/LambdaEditor.js';
+import {
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -146,16 +146,16 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
       (
         item:
           | QueryBuilderExplorerTreeDragSource
-          | QueryBuilderParameterDragSource
+          | QueryBuilderVariableDragSource
           | QueryBuilderFunctionsExplorerDragSource,
         type: string,
       ): void => {
-        if (type === QUERY_BUILDER_PARAMETER_DND_TYPE) {
+        if (type === QUERY_BUILDER_VARIABLE_DND_TYPE) {
           projectionColumnState.derivationLambdaEditorState.setLambdaString(
             `${
               projectionColumnState.derivationLambdaEditorState.lambdaString
             }${VARIABLE_REFERENCE_TOKEN}${
-              (item as QueryBuilderParameterDragSource).variable.variableName
+              (item as QueryBuilderVariableDragSource).variable.name
             }`,
           );
         } else if (type === QUERY_BUILDER_FUNCTION_DND_TYPE) {
@@ -178,7 +178,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
     );
     const [, dropConnector] = useDrop<
       | QueryBuilderExplorerTreeDragSource
-      | QueryBuilderParameterDragSource
+      | QueryBuilderVariableDragSource
       | QueryBuilderFunctionsExplorerDragSource
     >(
       () => ({
@@ -187,7 +187,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
-          QUERY_BUILDER_PARAMETER_DND_TYPE,
+          QUERY_BUILDER_VARIABLE_DND_TYPE,
           QUERY_BUILDER_FUNCTION_DND_TYPE,
         ],
         drop: (item, monitor): void => {

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -70,10 +70,6 @@ import {
 } from '@finos/legend-shared';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { useApplicationStore } from '@finos/legend-application';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import type { ValueSpecification } from '@finos/legend-graph';
 import {
   type QueryBuilderProjectionColumnDragSource,
@@ -83,7 +79,11 @@ import {
 import type { QueryBuilderFilterOperator } from '../../stores/filter/QueryBuilderFilterOperator.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  BasicValueSpecificationEditor,
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 
 const QueryBuilderFilterGroupConditionEditor = observer(
   (props: {
@@ -139,6 +139,7 @@ const QueryBuilderFilterConditionEditor = observer(
     const { node, isDragOver } = props;
     const graph =
       node.condition.filterState.queryBuilderState.graphManagerState.graph;
+    const queryBuilderState = node.condition.filterState.queryBuilderState;
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderFilterOperator) => (): void =>
       node.condition.changeOperator(val);
@@ -148,19 +149,18 @@ const QueryBuilderFilterConditionEditor = observer(
       node.condition.changeProperty(
         buildPropertyExpressionFromExplorerTreeNodeData(
           propertyNode,
-          node.condition.filterState.queryBuilderState.explorerState,
+          queryBuilderState.explorerState,
         ),
       );
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        const parameterType =
-          item.variable.parameter.genericType?.value.rawType;
+      (item: QueryBuilderVariableDragSource): void => {
+        const parameterType = item.variable.genericType?.value.rawType;
         const conditionValueType =
           node.condition.propertyExpressionState.propertyExpression.func.value
             .genericType.value.rawType;
         if (isTypeCompatibleForAssignment(parameterType, conditionValueType)) {
-          node.condition.setValue(item.variable.parameter);
+          node.condition.setValue(item.variable);
         } else {
           applicationStore.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType.name}.`,
@@ -170,12 +170,12 @@ const QueryBuilderFilterConditionEditor = observer(
       [applicationStore, node.condition],
     );
     const [{ isFilterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -212,7 +212,6 @@ const QueryBuilderFilterConditionEditor = observer(
       reloadValues: debouncedTypeaheadSearch,
       cleanUpReloadValues,
     };
-
     return (
       <div className="query-builder-filter-tree__node__label__content">
         <PanelEntryDropZonePlaceholder
@@ -270,10 +269,7 @@ const QueryBuilderFilterConditionEditor = observer(
                     valueSpecification={node.condition.value}
                     setValueSpecification={changeValueSpecification}
                     graph={graph}
-                    obseverContext={
-                      node.condition.filterState.queryBuilderState
-                        .observableContext
-                    }
+                    obseverContext={queryBuilderState.observableContext}
                     typeCheckOption={{
                       expectedType:
                         node.condition.propertyExpressionState
@@ -282,6 +278,9 @@ const QueryBuilderFilterConditionEditor = observer(
                     }}
                     resetValue={resetNode}
                     selectorConfig={selectorConfig}
+                    isConstant={queryBuilderState.constantState.isValueSpecConstant(
+                      node.condition.value,
+                    )}
                   />
                 </PanelEntryDropZonePlaceholder>
               </div>

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -28,6 +28,7 @@ import {
   CustomSelectorInput,
   SaveIcon,
   PencilIcon,
+  DragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type Enum,
@@ -80,7 +81,7 @@ type TypeCheckOption = {
   match?: boolean;
 };
 
-const ParameterInfoTooltip: React.FC<{
+export const VariableInfoTooltip: React.FC<{
   variable: VariableExpression;
   children: React.ReactElement;
   placement?: TooltipPlacement | undefined;
@@ -136,35 +137,55 @@ const ParameterInfoTooltip: React.FC<{
   );
 };
 
+export const QUERY_BUILDER_VARIABLE_DND_TYPE = 'VARIABLE';
+
+export interface QueryBuilderVariableDragSource {
+  variable: VariableExpression;
+}
+
 const VariableExpressionParameterEditor = observer(
   (props: {
     valueSpecification: VariableExpression;
-    className?: string | undefined;
     resetValue: () => void;
+    className?: string | undefined;
+    isConstant?: boolean;
   }) => {
-    const { valueSpecification, className, resetValue } = props;
+    const { valueSpecification, resetValue, isConstant, className } = props;
     const varName = valueSpecification.name;
     return (
-      <div className={clsx('value-spec-editor__parameter', className)}>
-        <div className="value-spec-editor__parameter__icon">
-          <DollarIcon />
-        </div>
-        <div className="value-spec-editor__parameter__label">
-          <div className="value-spec-editor__parameter__text">{varName}</div>
-          <ParameterInfoTooltip variable={valueSpecification}>
-            <div className="value-spec-editor__parameter__info">
-              <InfoCircleIcon />
-            </div>
-          </ParameterInfoTooltip>
-          <button
-            className="value-spec-editor__parameter__reset-btn"
-            title="Reset"
-            onClick={resetValue}
-          >
-            <RefreshIcon />
-          </button>
+      <>
+        <DragPreviewLayer
+          labelGetter={(item: QueryBuilderVariableDragSource): string =>
+            item.variable.name
+          }
+          types={[QUERY_BUILDER_VARIABLE_DND_TYPE]}
+        />
+        <div
+          className={clsx('value-spec-editor__variable', className, {
+            'value-spec-editor__variable__constant': isConstant,
+          })}
+        >
+          <div className="value-spec-editor__variable__icon">
+            {isConstant ? <div className="icon">C</div> : <DollarIcon />}
+          </div>
+          <div className="value-spec-editor__variable__label">
+            <div className="value-spec-editor__variable__text">{varName}</div>
+            <VariableInfoTooltip variable={valueSpecification}>
+              <div className="value-spec-editor__variable__info">
+                <InfoCircleIcon />
+              </div>
+            </VariableInfoTooltip>
+
+            <button
+              className="value-spec-editor__variable__reset-btn"
+              title="Reset"
+              onClick={resetValue}
+            >
+              <RefreshIcon />
+            </button>
+          </div>
         </div>
-      </div>
+      </>
     );
   },
 );
@@ -682,6 +703,7 @@ export const BasicValueSpecificationEditor: React.FC<{
   className?: string | undefined;
   setValueSpecification: (val: ValueSpecification) => void;
   resetValue: () => void;
+  isConstant?: boolean;
   selectorConfig?:
     | {
         values: string[] | undefined;
@@ -702,6 +724,7 @@ export const BasicValueSpecificationEditor: React.FC<{
     setValueSpecification,
     resetValue,
     selectorConfig,
+    isConstant,
   } = props;
   if (valueSpecification instanceof PrimitiveInstanceValue) {
     const _type = valueSpecification.genericType.value.rawType;
@@ -728,6 +751,7 @@ export const BasicValueSpecificationEditor: React.FC<{
       case PRIMITIVE_TYPE.NUMBER:
       case PRIMITIVE_TYPE.FLOAT:
       case PRIMITIVE_TYPE.DECIMAL:
+      case PRIMITIVE_TYPE.BINARY:
       case PRIMITIVE_TYPE.INTEGER:
         return (
           <NumberPrimitiveInstanceValueEditor
@@ -790,6 +814,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         valueSpecification={valueSpecification}
         className={className}
         resetValue={resetValue}
+        isConstant={Boolean(isConstant)}
       />
     );
   } else if (valueSpecification instanceof INTERNAL__PropagatedValue) {

package/src/components/shared/LambdaEditor.tsx

@@ -46,7 +46,6 @@ import {
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
 import {
-  createPassThroughOnKeyHandler,
   EDITOR_LANGUAGE,
   EDITOR_THEME,
   TAB_SIZE,
@@ -191,13 +190,6 @@ const LambdaEditorInline = observer(
             : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
         });
-        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
-        // else, we could risk triggering these hotkeys command multiple times
-        // e.g.
-        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
-        // onKeyDownEventDisposer.current?.dispose();
-        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
-        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [editor, applicationStore, useBaseTextEditorSettings]);
@@ -472,13 +464,6 @@ const LambdaEditorPopUp = observer(
           language: EDITOR_LANGUAGE.PURE,
           theme: EDITOR_THEME.LEGEND,
         });
-        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
-        // else, we could risk triggering these hotkeys command multiple times
-        // e.g.
-        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
-        // onKeyDownEventDisposer.current?.dispose();
-        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
-        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     };

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -0,0 +1,186 @@
+/**
+ * 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 {
+  DollarIcon,
+  DragPreviewLayer,
+  InfoCircleIcon,
+  PanelFormListItems,
+  PencilIcon,
+  TimesIcon,
+  useDragPreviewLayer,
+} from '@finos/legend-art';
+import type {
+  ValueSpecification,
+  VariableExpression,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useDrag } from 'react-dnd';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import { getValueSpecificationStringValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
+import {
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+  VariableInfoTooltip,
+} from './BasicValueSpecificationEditor.js';
+
+export const VariableViewer = observer(
+  (props: {
+    variable: VariableExpression;
+    isReadOnly: boolean;
+    constantValue?: ValueSpecification | undefined;
+    actions?: {
+      editVariable: () => void;
+      deleteVariable: () => void;
+    };
+  }) => {
+    const { variable, constantValue, actions, isReadOnly } = props;
+    const valueString = constantValue
+      ? getValueSpecificationStringValue(constantValue)
+      : undefined;
+    const name = variable.name;
+    const variableType = variable.genericType?.value.rawType;
+    const typeName = variableType?.name;
+    const editVariable = (): void => {
+      actions?.editVariable();
+    };
+    const deleteVariable = (): void => {
+      actions?.deleteVariable();
+    };
+    const [, dragConnector, dragPreviewConnector] = useDrag(
+      () => ({
+        type: QUERY_BUILDER_VARIABLE_DND_TYPE,
+        item: { variable: variable },
+      }),
+      [variable],
+    );
+    useDragPreviewLayer(dragPreviewConnector);
+
+    return (
+      <div className="query-builder__variables__variable" ref={dragConnector}>
+        <DragPreviewLayer
+          labelGetter={(item: QueryBuilderVariableDragSource): string =>
+            item.variable.name === '' ? '(unknown)' : item.variable.name
+          }
+          types={[QUERY_BUILDER_VARIABLE_DND_TYPE]}
+        />
+        <div
+          onClick={editVariable}
+          className="query-builder__variables__variable__content"
+        >
+          <div className="query-builder__variables__variable__icon">
+            <div className="query-builder__variables__variable-icon">
+              {constantValue ? (
+                <div className="icon query-builder__variables__variable-icon">
+                  C
+                </div>
+              ) : (
+                <DollarIcon />
+              )}
+            </div>
+          </div>
+          <div className="query-builder__variables__variable__label">
+            {name}
+            {valueString ? (
+              <div className="query-builder__constants__value">
+                {valueString}
+              </div>
+            ) : (
+              <div className="query-builder__variables__variable__type">
+                <div className="query-builder__variables__variable__type__label">
+                  {typeName}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {actions && (
+          <div className="query-builder__variables__variable__actions">
+            <button
+              className="query-builder__variables__variable__action"
+              tabIndex={-1}
+              disabled={isReadOnly}
+              onClick={editVariable}
+              title="Edit"
+            >
+              <PencilIcon />
+            </button>
+            <button
+              className="query-builder__variables__variable__action"
+              tabIndex={-1}
+              onClick={deleteVariable}
+              disabled={isReadOnly}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+            <VariableInfoTooltip variable={variable}>
+              <div className="value-spec-editor__variable__info">
+                <InfoCircleIcon />
+              </div>
+            </VariableInfoTooltip>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+export const VariableSelector = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    filterBy?: (variableExpression: VariableExpression) => boolean;
+  }) => {
+    const { queryBuilderState, filterBy } = props;
+    const isReadOnly = !queryBuilderState.isQuerySupported;
+    const filteredParameterStates =
+      queryBuilderState.parametersState.parameterStates.filter((p) =>
+        filterBy ? filterBy(p.parameter) : true,
+      );
+    const filteredConstantState =
+      queryBuilderState.constantState.constants.filter((c) =>
+        filterBy ? filterBy(c.variable) : true,
+      );
+    return (
+      <>
+        <PanelFormListItems title="Available parameters">
+          {filteredParameterStates.length === 0 && (
+            <> No available parameters </>
+          )}
+          {filteredParameterStates.map((pState) => (
+            <VariableViewer
+              key={pState.uuid}
+              variable={pState.parameter}
+              isReadOnly={isReadOnly}
+            />
+          ))}
+        </PanelFormListItems>
+        {Boolean(filteredConstantState.length) && (
+          <PanelFormListItems title="Available constants">
+            {filteredConstantState.map((constantState) => (
+              <VariableViewer
+                key={constantState.uuid}
+                variable={constantState.variable}
+                constantValue={constantState.value}
+                isReadOnly={isReadOnly}
+              />
+            ))}
+          </PanelFormListItems>
+        )}
+      </>
+    );
+  },
+);