This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new a955c46a2ae kie-issues#236: Implement DMN 1.4 Boxed filter expression
(#2258)
a955c46a2ae is described below
commit a955c46a2aed8fb64b47b0a5f2bc4f7e847aaca5
Author: Daniel José dos Santos <[email protected]>
AuthorDate: Thu Apr 25 12:36:33 2024 -0300
kie-issues#236: Implement DMN 1.4 Boxed filter expression (#2258)
---
.../ExpressionDefinitionLogicTypeSelector.tsx | 16 +-
.../FilterExpression/FilterExpression.css | 22 +++
.../FilterExpressionCollectionCell.tsx | 69 ++++++++
.../FilterExpression/FilterExpressionComponent.tsx | 186 +++++++++++++++++++++
.../FilterExpression/FilterExpressionMatchCell.tsx | 123 ++++++++++++++
.../src/resizing/Hooks.tsx | 12 +-
.../src/resizing/WidthConstants.ts | 4 +
.../src/resizing/WidthMaths.ts | 30 +++-
8 files changed, 455 insertions(+), 7 deletions(-)
diff --git
a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
index c997c59b639..361f27af11a 100644
---
a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
+++
b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
@@ -58,6 +58,8 @@ import "./ExpressionDefinitionLogicTypeSelector.css";
import { NavigationKeysUtils } from "../../keysUtils/keyUtils";
import { ConditionalExpression } from
"../ConditionalExpression/ConditionalExpression";
import { IteratorExpressionComponent } from
"../IteratorExpression/IteratorExpressionComponent";
+import { FilterExpressionComponent } from
"../FilterExpression/FilterExpressionComponent";
+import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
export interface ExpressionDefinitionLogicTypeSelectorProps {
/** Expression properties */
@@ -102,7 +104,7 @@ export function ExpressionDefinitionLogicTypeSelector({
"for",
"every",
"some",
- // "filter",
+ "filter",
],
[hideDmn14BoxedExpressions, isNested]
);
@@ -142,7 +144,9 @@ export function ExpressionDefinitionLogicTypeSelector({
<IteratorExpressionComponent expression={expression}
isNested={isNested} parentElementId={parentElementId} />
);
case "filter":
- return <></>;
+ return (
+ <FilterExpressionComponent expression={expression}
isNested={isNested} parentElementId={parentElementId} />
+ );
default:
assertUnreachable(logicType);
}
@@ -248,7 +252,7 @@ export function ExpressionDefinitionLogicTypeSelector({
case "some":
return <ResourcesAlmostEmptyIcon />;
case "filter":
- return <></>;
+ return <FilterIcon />;
default:
assertUnreachable(logicType);
}
@@ -359,6 +363,12 @@ export function ExpressionDefinitionLogicTypeSelector({
'For the "some" loop, the right part of the "some" displays the
iterator variable name. The second row holds an expression representing the
collection that will be iterated over. The expression in the "in" row MUST
resolve to a collection. ' +
"The last line is an expression that will be evaluated on each item.
The expression defined in the satisfies MUST resolve to a boolean."
);
+ case "filter":
+ return (
+ "A boxed filter offers a visual representation of collection
filtering. The top part is an expression that is the collection " +
+ "to be filtered. The bottom part, between the square brackets, holds
the filter expression."
+ );
+
default:
return "";
}
diff --git
a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
new file mode 100644
index 00000000000..44d66b203e8
--- /dev/null
+++
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
@@ -0,0 +1,22 @@
+.filter-expression-cell {
+ display: flex;
+ align-content: center;
+}
+
+.filter-expression-cell .bracket-sign-container {
+ background-color: var(--pf-global--palette--black-200);
+ width: 20px;
+ min-width: 20px;
+ max-width: 20px;
+ color: var(--pf-global--palette--black-600);
+ font-family: Menlo, monospace;
+ display: flex;
+ align-content: center;
+ align-items: center;
+}
+
+.bracket-sign {
+ width: 20px;
+ min-width: 20px;
+ max-width: 20px;
+}
diff --git
a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionCollectionCell.tsx
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionCollectionCell.tsx
new file mode 100644
index 00000000000..833357dce75
--- /dev/null
+++
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionCollectionCell.tsx
@@ -0,0 +1,69 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 * as React from "react";
+import { useCallback } from "react";
+import { BeeTableCellProps, BoxedFilter } from "../../api";
+import {
+ NestedExpressionDispatchContextProvider,
+ useBoxedExpressionEditorDispatch,
+} from "../../BoxedExpressionEditorContext";
+import { ExpressionContainer } from
"../ExpressionDefinitionRoot/ExpressionContainer";
+import { ROWTYPE } from "./FilterExpressionComponent";
+import "./FilterExpression.css";
+
+export function FilterExpressionCollectionCell({
+ rowIndex,
+ data: items,
+ columnIndex,
+ parentElementId,
+}: BeeTableCellProps<ROWTYPE> & { parentElementId: string }) {
+ const { setExpression } = useBoxedExpressionEditorDispatch();
+
+ const onSetExpression = useCallback(
+ ({ getNewExpression }) => {
+ setExpression((prev: BoxedFilter) => {
+ return {
+ ...prev,
+ in: {
+ ...prev.in,
+ expression: getNewExpression(prev.in.expression),
+ },
+ };
+ });
+ },
+ [setExpression]
+ );
+
+ return (
+ <div className="filter-expression">
+ <NestedExpressionDispatchContextProvider
onSetExpression={onSetExpression}>
+ <ExpressionContainer
+ expression={items[rowIndex]?.expression}
+ isResetSupported={true}
+ isNested={true}
+ rowIndex={rowIndex}
+ columnIndex={columnIndex}
+ parentElementId={parentElementId}
+ parentElementTypeRef={undefined}
+ />
+ </NestedExpressionDispatchContextProvider>
+ </div>
+ );
+}
diff --git
a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionComponent.tsx
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionComponent.tsx
new file mode 100644
index 00000000000..7b01ec3ca6d
--- /dev/null
+++
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionComponent.tsx
@@ -0,0 +1,186 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 {
+ BeeTableContextMenuAllowedOperationsConditions,
+ BeeTableHeaderVisibility,
+ BeeTableOperation,
+ BeeTableOperationConfig,
+ BeeTableProps,
+ BoxedFilter,
+ DmnBuiltInDataType,
+} from "../../api";
+import { BeeTable, BeeTableColumnUpdate } from "../../table/BeeTable";
+import { ResizerStopBehavior } from "../../resizing/ResizingWidthsContext";
+import React, { useCallback, useMemo } from "react";
+import { DMN15__tChildExpression } from
"@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
+import * as ReactTable from "react-table";
+import { useBoxedExpressionEditorI18n } from "../../i18n";
+import { DEFAULT_EXPRESSION_VARIABLE_NAME } from
"../../expressionVariable/ExpressionVariableMenu";
+import { useBoxedExpressionEditor, useBoxedExpressionEditorDispatch } from
"../../BoxedExpressionEditorContext";
+import { NestedExpressionContainerContext } from
"../../resizing/NestedExpressionContainerContext";
+import { useNestedExpressionContainerWithNestedExpressions } from
"../../resizing/Hooks";
+import {
+ FILTER_EXPRESSION_EXTRA_WIDTH,
+ FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ FILTER_EXPRESSION_MIN_WIDTH,
+} from "../../resizing/WidthConstants";
+import { FilterExpressionCollectionCell } from
"./FilterExpressionCollectionCell";
+import { FilterExpressionMatchCell } from "./FilterExpressionMatchCell";
+import "./FilterExpression.css";
+
+export type ROWTYPE = DMN15__tChildExpression;
+
+export function FilterExpressionComponent({
+ isNested,
+ parentElementId,
+ expression: filterExpression,
+}: {
+ expression: BoxedFilter;
+ isNested: boolean;
+ parentElementId: string;
+}) {
+ const { i18n } = useBoxedExpressionEditorI18n();
+ const { expressionHolderId, widthsById } = useBoxedExpressionEditor();
+ const { setExpression } = useBoxedExpressionEditorDispatch();
+
+ const beeTableColumns = useMemo<ReactTable.Column<ROWTYPE>[]>(() => {
+ return [
+ {
+ accessor: expressionHolderId as any, // FIXME:
https://github.com/kiegroup/kie-issues/issues/169
+ label: filterExpression["@_label"] ?? DEFAULT_EXPRESSION_VARIABLE_NAME,
+ dataType: filterExpression["@_typeRef"] ??
DmnBuiltInDataType.Undefined,
+ isRowIndexColumn: false,
+ minWidth: FILTER_EXPRESSION_MIN_WIDTH,
+ width: undefined,
+ },
+ ];
+ }, [filterExpression, expressionHolderId]);
+
+ const headerVisibility = useMemo(() => {
+ return isNested ? BeeTableHeaderVisibility.None :
BeeTableHeaderVisibility.AllLevels;
+ }, [isNested]);
+
+ const beeTableOperationConfig = useMemo<BeeTableOperationConfig>(() => {
+ return [
+ {
+ group: i18n.terms.selection.toUpperCase(),
+ items: [{ name: i18n.terms.copy, type: BeeTableOperation.SelectionCopy
}],
+ },
+ {
+ group: i18n.function.toUpperCase(),
+ items: [{ name: i18n.rowOperations.reset, type:
BeeTableOperation.RowReset }],
+ },
+ ];
+ }, [i18n]);
+
+ const tableRows = useMemo(() => {
+ return [filterExpression.in];
+ }, [filterExpression.in]);
+
+ const allowedOperations = useCallback((conditions:
BeeTableContextMenuAllowedOperationsConditions) => {
+ if (!conditions.selection.selectionStart ||
!conditions.selection.selectionEnd) {
+ return [];
+ }
+
+ return [
+ BeeTableOperation.SelectionCopy,
+ ...(conditions.selection.selectionStart.columnIndex > 1
+ ? [BeeTableOperation.SelectionCut, BeeTableOperation.SelectionPaste,
BeeTableOperation.SelectionReset]
+ : []),
+ ];
+ }, []);
+
+ const { nestedExpressionContainerValue, onColumnResizingWidthChange } =
+ useNestedExpressionContainerWithNestedExpressions(
+ useMemo(() => {
+ return {
+ nestedExpressions: [filterExpression.in.expression,
filterExpression.match.expression],
+ fixedColumnActualWidth: 0,
+ fixedColumnResizingWidth: { value: 0, isPivoting: false },
+ fixedColumnMinWidth: 0,
+ nestedExpressionMinWidth: FILTER_EXPRESSION_MIN_WIDTH,
+ extraWidth: FILTER_EXPRESSION_EXTRA_WIDTH,
+ expression: filterExpression,
+ flexibleColumnIndex: 1,
+ widthsById: widthsById,
+ nestedExpressionsExtraWidths: new Map([
+ [filterExpression.match.expression?.["@_id"] ?? "",
FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH],
+ ]),
+ };
+ }, [filterExpression, widthsById])
+ );
+
+ const cellComponentByColumnAccessor:
BeeTableProps<ROWTYPE>["cellComponentByColumnAccessor"] = useMemo(
+ () => ({
+ [expressionHolderId]: (props) => <FilterExpressionCollectionCell
{...props} parentElementId={parentElementId} />,
+ }),
+ [expressionHolderId, parentElementId]
+ );
+
+ const beeTableAdditionalRow = useMemo(() => {
+ return [
+ <FilterExpressionMatchCell
+ key={0}
+ rowIndex={1}
+ parentElementId={parentElementId}
+ data={[filterExpression.match]}
+ columnIndex={0}
+ columnId={"filterExpressionColumn"}
+ />,
+ ];
+ }, [filterExpression.match, parentElementId]);
+
+ const onColumnUpdates = useCallback(
+ ([{ name, typeRef }]: BeeTableColumnUpdate<ROWTYPE>[]) => {
+ setExpression((prev: BoxedFilter) => {
+ // Do not inline this variable for type safety. See
https://github.com/microsoft/TypeScript/issues/241
+ const ret: BoxedFilter = {
+ ...prev,
+ "@_label": name,
+ "@_typeRef": typeRef,
+ };
+
+ return ret;
+ });
+ },
+ [setExpression]
+ );
+
+ return (
+ <NestedExpressionContainerContext.Provider
value={nestedExpressionContainerValue}>
+ <BeeTable<ROWTYPE>
+ onColumnResizingWidthChange={onColumnResizingWidthChange}
+ resizerStopBehavior={ResizerStopBehavior.SET_WIDTH_WHEN_SMALLER}
+ tableId={filterExpression["@_id"]}
+ headerVisibility={headerVisibility}
+ cellComponentByColumnAccessor={cellComponentByColumnAccessor}
+ columns={beeTableColumns}
+ rows={tableRows}
+ operationConfig={beeTableOperationConfig}
+ allowedOperations={allowedOperations}
+ onColumnUpdates={onColumnUpdates}
+ shouldRenderRowIndexColumn={false}
+ shouldShowRowsInlineControls={false}
+ shouldShowColumnsInlineControls={false}
+ additionalRow={beeTableAdditionalRow}
+ />
+ </NestedExpressionContainerContext.Provider>
+ );
+}
diff --git
a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
new file mode 100644
index 00000000000..f67b94befd7
--- /dev/null
+++
b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
@@ -0,0 +1,123 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 { BeeTableCellProps, BoxedFilter } from "../../api";
+import {
+ NestedExpressionDispatchContextProvider,
+ OnSetExpression,
+ useBoxedExpressionEditorDispatch,
+} from "../../BoxedExpressionEditorContext";
+import React, { useCallback, useMemo } from "react";
+import { ExpressionContainer } from
"../ExpressionDefinitionRoot/ExpressionContainer";
+import { ROWTYPE } from "./FilterExpressionComponent";
+import "./FilterExpression.css";
+import {
+ NestedExpressionContainerContext,
+ NestedExpressionContainerContextType,
+ useNestedExpressionContainer,
+} from "../../resizing/NestedExpressionContainerContext";
+import {
+ FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ LITERAL_EXPRESSION_EXTRA_WIDTH,
+ LITERAL_EXPRESSION_MIN_WIDTH,
+} from "../../resizing/WidthConstants";
+import { useNestedExpressionContainerWithNestedExpressions } from
"../../resizing/Hooks";
+import { ResizingWidth } from "../../resizing/ResizingWidthsContext";
+
+export function FilterExpressionMatchCell({
+ rowIndex,
+ data: items,
+ columnIndex,
+ parentElementId,
+}: BeeTableCellProps<ROWTYPE> & {
+ parentElementId: string;
+}) {
+ const { setExpression } = useBoxedExpressionEditorDispatch();
+
+ const onSetExpression = useCallback<OnSetExpression>(
+ ({ getNewExpression }) => {
+ setExpression((prev: BoxedFilter) => {
+ const newExpression = getNewExpression(prev.match.expression);
+
+ // Do not inline this variable for type safety. See
https://github.com/microsoft/TypeScript/issues/241
+ const ret: BoxedFilter = {
+ ...prev,
+ match: {
+ ...prev.match,
+ expression: newExpression!, // SPEC DISCREPANCY
+ },
+ };
+
+ return ret;
+ });
+ },
+ [setExpression]
+ );
+
+ const nestedExpressionContainer = useNestedExpressionContainer();
+
+ const nestedExpressionContainerValue =
useMemo<NestedExpressionContainerContextType>(() => {
+ return {
+ minWidth: nestedExpressionContainer.minWidth -
FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ actualWidth: nestedExpressionContainer.actualWidth -
FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ resizingWidth: {
+ value: nestedExpressionContainer.resizingWidth.value -
FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ isPivoting: nestedExpressionContainer.resizingWidth.isPivoting,
+ },
+ };
+ }, [
+ nestedExpressionContainer.actualWidth,
+ nestedExpressionContainer.minWidth,
+ nestedExpressionContainer.resizingWidth.isPivoting,
+ nestedExpressionContainer.resizingWidth.value,
+ ]);
+
+ return (
+ <div className={"filter-expression-cell"}>
+ <div
+ className={"bracket-sign-container"}
+ style={{ borderRight: "1px solid var(--pf-global--palette--black-300)"
}}
+ >
+ <div className={"bracket-sign"}>[</div>
+ </div>
+ <div>
+ <NestedExpressionContainerContext.Provider
value={nestedExpressionContainerValue}>
+ <NestedExpressionDispatchContextProvider
onSetExpression={onSetExpression}>
+ <ExpressionContainer
+ expression={items[0].expression}
+ isResetSupported={true}
+ isNested={true}
+ rowIndex={rowIndex}
+ columnIndex={columnIndex}
+ parentElementId={parentElementId}
+ parentElementTypeRef={undefined}
+ parentElementName={undefined}
+ />
+ </NestedExpressionDispatchContextProvider>
+ </NestedExpressionContainerContext.Provider>
+ </div>
+ <div
+ className={"bracket-sign-container"}
+ style={{ borderLeft: "1px solid var(--pf-global--palette--black-300)"
}}
+ >
+ <div className={"bracket-sign"}>]</div>
+ </div>
+ </div>
+ );
+}
diff --git a/packages/boxed-expression-component/src/resizing/Hooks.tsx
b/packages/boxed-expression-component/src/resizing/Hooks.tsx
index 1c91fd96670..106b09020fa 100644
--- a/packages/boxed-expression-component/src/resizing/Hooks.tsx
+++ b/packages/boxed-expression-component/src/resizing/Hooks.tsx
@@ -37,7 +37,8 @@ export function useNestedExpressionResizingWidthValue(
fixedColumnMinWidth: number,
nestedExpressionMinWidth: number,
extraWidth: number,
- widthsById: Map<string, number[]>
+ widthsById: Map<string, number[]>,
+ nestedExpressionsExtraWidths?: Map<string, number>
) {
const { resizingWidths } = useResizingWidths();
const nestedExpressionContainer = useNestedExpressionContainer();
@@ -54,7 +55,8 @@ export function useNestedExpressionResizingWidthValue(
if (nestedPivotingExpression) {
return Math.max(
- getExpressionResizingWidth(nestedPivotingExpression, resizingWidths,
widthsById),
+ getExpressionResizingWidth(nestedPivotingExpression, resizingWidths,
widthsById) +
+
(nestedExpressionsExtraWidths?.get(nestedPivotingExpression["@_id"]!) ?? 0),
fixedColumnMinWidth
);
}
@@ -83,6 +85,7 @@ export function useNestedExpressionResizingWidthValue(
resizingWidths,
widthsById,
fixedColumnMinWidth,
+ nestedExpressionsExtraWidths,
]);
}
@@ -144,6 +147,7 @@ export function
useNestedExpressionContainerWithNestedExpressions({
expression,
flexibleColumnIndex,
widthsById,
+ nestedExpressionsExtraWidths,
}: {
nestedExpressions: BoxedExpression[];
fixedColumnActualWidth: number;
@@ -154,6 +158,7 @@ export function
useNestedExpressionContainerWithNestedExpressions({
expression: BoxedExpression;
flexibleColumnIndex: number;
widthsById: Map<string, number[]>;
+ nestedExpressionsExtraWidths?: Map<string, number>;
}) {
const nestedExpressionContainer = useNestedExpressionContainer();
@@ -189,7 +194,8 @@ export function
useNestedExpressionContainerWithNestedExpressions({
fixedColumnMinWidth,
nestedExpressionMinWidth,
extraWidth,
- widthsById
+ widthsById,
+ nestedExpressionsExtraWidths
);
const maxNestedExpressionMinWidth = useNestedExpressionMinWidth(
diff --git a/packages/boxed-expression-component/src/resizing/WidthConstants.ts
b/packages/boxed-expression-component/src/resizing/WidthConstants.ts
index 06d98a78d26..0713ba22a3f 100644
--- a/packages/boxed-expression-component/src/resizing/WidthConstants.ts
+++ b/packages/boxed-expression-component/src/resizing/WidthConstants.ts
@@ -75,3 +75,7 @@ export const CONDITIONAL_EXPRESSION_EXTRA_WIDTH = 2; // 2px
for borders of conte
export const ITERATOR_EXPRESSION_LABEL_COLUMN_WIDTH = 80;
export const ITERATOR_EXPRESSION_CLAUSE_COLUMN_MIN_WIDTH = 210;
export const ITERATOR_EXPRESSION_EXTRA_WIDTH = 2; // 2px for borders of
context entry expression // It's a mistery why to this cell is counting the
borders.
+
+export const FILTER_EXPRESSION_MIN_WIDTH = 250;
+export const FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH = 2 * 20; // 20px is the
size of the 'bracket-sign-container' CSS class in the FilterExpression.css file
+export const FILTER_EXPRESSION_EXTRA_WIDTH = 2; // 2px for borders of context
entry expression // It's a mistery why to this cell is counting the borders.
diff --git a/packages/boxed-expression-component/src/resizing/WidthMaths.ts
b/packages/boxed-expression-component/src/resizing/WidthMaths.ts
index 3b3f3e5003f..6b516671066 100644
--- a/packages/boxed-expression-component/src/resizing/WidthMaths.ts
+++ b/packages/boxed-expression-component/src/resizing/WidthMaths.ts
@@ -54,6 +54,9 @@ import {
ITERATOR_EXPRESSION_LABEL_COLUMN_WIDTH,
ITERATOR_EXPRESSION_CLAUSE_COLUMN_MIN_WIDTH,
ITERATOR_EXPRESSION_EXTRA_WIDTH,
+ FILTER_EXPRESSION_MIN_WIDTH,
+ FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH,
+ FILTER_EXPRESSION_EXTRA_WIDTH,
} from "./WidthConstants";
export function getExpressionMinWidth(expression?: BoxedExpression): number {
@@ -167,6 +170,17 @@ export function getExpressionMinWidth(expression?:
BoxedExpression): number {
ITERATOR_EXPRESSION_EXTRA_WIDTH
);
}
+
+ // Filter
+ else if (expression.__$$element === "filter") {
+ const inExpressionWidth = getExpressionMinWidth(expression.in.expression);
+ const matchExpressionWidth =
+ getExpressionMinWidth(expression.match.expression) +
FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH;
+ return (
+ Math.max(FILTER_EXPRESSION_MIN_WIDTH, inExpressionWidth,
matchExpressionWidth) + FILTER_EXPRESSION_EXTRA_WIDTH
+ );
+ }
+
// Others
else {
throw new Error("Shouldn't ever reach this point");
@@ -378,9 +392,23 @@ export function getExpressionResizingWidth(
);
}
+ // Filter
+ else if (expression.__$$element === "filter") {
+ const inExpressionWidth =
getExpressionResizingWidth(expression.in.expression, resizingWidths,
widthsById);
+ const matchExpressionWidth =
+ getExpressionResizingWidth(expression.match.expression, resizingWidths,
widthsById) +
+ FILTER_EXPRESSION_MATCH_ROW_EXTRA_WIDTH;
+ return (
+ resizingWidth ??
+ Math.max(FILTER_EXPRESSION_MIN_WIDTH, inExpressionWidth,
matchExpressionWidth) + FILTER_EXPRESSION_EXTRA_WIDTH
+ );
+ }
+
// Others
else {
- throw new Error(`Can't determine resizing width for expression of unknown
type '${expression.__$$element}'`);
+ throw new Error(
+ `Can't determine resizing width for expression of unknown type
'${(expression as any).__$$element}'`
+ );
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
