From 19bd4008e6532fe5ef168ceb1cacecd8711b8f98 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Fri, 18 Oct 2024 10:48:20 +0200 Subject: [PATCH 01/22] kie-issues#1547: Render evaluation highlights in the Boxed Expression Editor Closes: apache/incubator-kie-issues/issues/1547 --- .../src/BoxedExpressionEditor.tsx | 4 ++ .../src/BoxedExpressionEditorContext.tsx | 3 ++ .../src/table/BeeTable/BeeTable.css | 44 +++++++++++++++++++ .../src/table/BeeTable/BeeTableBody.tsx | 12 +++-- .../src/table/BeeTable/BeeTableTd.tsx | 19 +++++++- 5 files changed, 78 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx index 920e4110257..18f7ef5b7b9 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx @@ -59,6 +59,8 @@ export interface BoxedExpressionEditorProps { isReadOnly?: boolean; /** PMML models available to use on Boxed PMML Function */ pmmlDocuments?: PmmlDocument[]; + /** Array of the hit sub-expressions UUID IDs (Decision Tables rules and Conditional Expression branches). IDs may repeat in the array as mentioned sub-expressions may hit more times. */ + evaluationHitIds?: string[]; /** The containing HTMLElement which is scrollable */ scrollableParentRef: React.RefObject; /** Parsed variables used for syntax coloring and auto-complete */ @@ -79,6 +81,7 @@ export function BoxedExpressionEditor({ isResetSupportedOnRootExpression, scrollableParentRef, pmmlDocuments, + evaluationHitIds, onRequestFeelVariables, widthsById, onWidthsChange, @@ -103,6 +106,7 @@ export function BoxedExpressionEditor({ isReadOnly={isReadOnly} dataTypes={dataTypes} pmmlDocuments={pmmlDocuments} + evaluationHitIds={evaluationHitIds} onRequestFeelVariables={onRequestFeelVariables} widthsById={widthsById} hideDmn14BoxedExpressions={hideDmn14BoxedExpressions} diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index ce879f8808c..484b3d3acd5 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -34,6 +34,7 @@ export interface BoxedExpressionEditorContextType { pmmlDocuments?: PmmlDocument[]; dataTypes: DmnDataType[]; isReadOnly?: boolean; + evaluationHitIds?: string[]; // State currentlyOpenContextMenu: string | undefined; @@ -74,6 +75,7 @@ export function BoxedExpressionEditorContextProvider({ beeGwtService, children, pmmlDocuments, + evaluationHitIds, scrollableParentRef, onRequestFeelVariables, widthsById, @@ -114,6 +116,7 @@ export function BoxedExpressionEditorContextProvider({ dataTypes, isReadOnly, pmmlDocuments, + evaluationHitIds, //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168) currentlyOpenContextMenu, diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 7f18dc54aab..622839c6340 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,6 +203,50 @@ border: 0; } +.expression-container .table-component .evaluation-highlights-row-overlay td { + position: relative; +} + +.expression-container .table-component .evaluation-highlights-row-overlay td::before { + content: ""; + position: absolute; + background-color: rgb(215, 201, 255, 0.5); + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.evaluation-hit-count-overlay-non-colored::before { + content: attr(data-evaluation-hits-count); + font-size: 0.8em; + text-align: left; + color: white; + background-color: var(--pf-global--palette--black-600); + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + padding-left: 0.2em; +} + +.evaluation-hit-count-overlay-colored::before { + content: attr(data-evaluation-hits-count); + font-size: 0.8em; + text-align: left; + color: white; + background-color: rgb(134, 106, 212); + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + padding-left: 0.2em; +} + .expression-container .table-component table tbody tr td.row-index-cell-column { padding: 1.1em 0; } diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index a704f2c7c32..902f08f5c92 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -25,6 +25,7 @@ import { BeeTableTdForAdditionalRow } from "./BeeTableTdForAdditionalRow"; import { BeeTableTd } from "./BeeTableTd"; import { BeeTableCoordinatesContextProvider } from "../../selection/BeeTableSelectionContext"; import { ResizerStopBehavior } from "../../resizing/ResizingWidthsContext"; +import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext"; export interface BeeTableBodyProps { /** Table instance */ @@ -73,12 +74,18 @@ export function BeeTableBody({ rowWrapper, isReadOnly, }: BeeTableBodyProps) { + const { evaluationHitIds } = useBoxedExpressionEditor(); + const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); + const rowKey = getRowKey(row); + const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; + const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); + const renderTr = () => ( - + {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); return ( @@ -104,6 +111,7 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} + evaluationHitsCount={rowHitCount} /> )} @@ -114,8 +122,6 @@ export function BeeTableBody({ const RowWrapper = rowWrapper; - const rowKey = getRowKey(row); - return ( {RowWrapper ? ( diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index b9a0a71da04..37e43098ee6 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,6 +49,7 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; + evaluationHitsCount?: number; } export type HoverInfo = @@ -73,6 +74,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, + evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); const [hoverInfo, setHoverInfo] = useState({ isHovered: false }); @@ -246,7 +248,22 @@ export function BeeTableTd({ }} > {column.isRowIndexColumn ? ( - <>{rowIndexLabel} + evaluationHitsCount !== undefined ? ( + <> +
0 + ? "evaluation-hit-count-overlay-colored" + : "evaluation-hit-count-overlay-non-colored" + } + data-evaluation-hits-count={evaluationHitsCount} + > + {rowIndexLabel} +
+ + ) : ( + <>{rowIndexLabel} + ) ) : ( <> {tdContent} From 713e27d76bd1c0fd2fea5673844a84bc92a2187b Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Fri, 18 Oct 2024 16:26:51 +0200 Subject: [PATCH 02/22] restrict ::before size --- .../src/table/BeeTable/BeeTable.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 622839c6340..e7f10dfb167 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -226,8 +226,8 @@ position: absolute; top: 0px; left: 0px; - height: 100%; - width: 100%; + height: 55px; + width: 55px; clip-path: polygon(0% 65%, 65% 0%, 0% 0%); padding-left: 0.2em; } @@ -241,8 +241,8 @@ position: absolute; top: 0px; left: 0px; - height: 100%; - width: 100%; + height: 55px; + width: 55px; clip-path: polygon(0% 65%, 65% 0%, 0% 0%); padding-left: 0.2em; } From d99ef6a58e5c953faebf545930eb609819e90f68 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Mon, 21 Oct 2024 19:24:44 +0200 Subject: [PATCH 03/22] Display evaluationHitsCount in the leading column of the DT and Conditional --- .../src/api/BeeTable.ts | 1 + .../ConditionalExpression.tsx | 6 ++++ .../DecisionTableExpression.tsx | 1 + .../src/table/BeeTable/BeeTable.tsx | 2 ++ .../src/table/BeeTable/BeeTableBody.tsx | 7 ++++- .../src/table/BeeTable/BeeTableTd.tsx | 31 ++++++++----------- 6 files changed, 29 insertions(+), 19 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index 68c662f4ba2..b637efe2288 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -97,6 +97,7 @@ export interface BeeTableProps { shouldShowColumnsInlineControls: boolean; resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; + evaluationHitsCountColumnIndex?: number; } /** Possible status for the visibility of the Table's Header */ diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index ab9871d81e8..774c3a5d6fd 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -226,6 +226,10 @@ export function ConditionalExpression({ [setExpression] ); + const getRowKey = useCallback((row: ReactTable.Row) => { + return row.original.part["@_id"]; + }, []); + return (
@@ -234,6 +238,7 @@ export function ConditionalExpression({ isEditableHeader={!isReadOnly} resizerStopBehavior={ResizerStopBehavior.SET_WIDTH_WHEN_SMALLER} tableId={id} + getRowKey={getRowKey} headerLevelCountForAppendingRowIndexColumn={1} headerVisibility={headerVisibility} cellComponentByColumnAccessor={cellComponentByColumnAccessor} @@ -247,6 +252,7 @@ export function ConditionalExpression({ shouldRenderRowIndexColumn={false} shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} + evaluationHitsCountColumnIndex={1} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index e22e1da0ce0..67ec3df601a 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1073,6 +1073,7 @@ export function DecisionTableExpression({ shouldRenderRowIndexColumn={true} shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} + evaluationHitsCountColumnIndex={0} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 /> diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 6bd456c9f80..72786121dbd 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -103,6 +103,7 @@ export function BeeTableInternal({ resizerStopBehavior, lastColumnMinWidth, rowWrapper, + evaluationHitsCountColumnIndex, }: BeeTableProps & { selectionRef?: React.RefObject; }) { @@ -657,6 +658,7 @@ export function BeeTableInternal({ onDataCellKeyUp={onDataCellKeyUp} lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} + evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} /> { rowWrapper?: React.FunctionComponent>; isReadOnly: boolean; + evaluationHitsCountColumnIndex?: number; } export function BeeTableBody({ @@ -73,8 +74,10 @@ export function BeeTableBody({ lastColumnMinWidth, rowWrapper, isReadOnly, + evaluationHitsCountColumnIndex, }: BeeTableBodyProps) { const { evaluationHitIds } = useBoxedExpressionEditor(); + // const evaluationHitIds = ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7"]; const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { @@ -83,11 +86,12 @@ export function BeeTableBody({ const rowKey = getRowKey(row); const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); - const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); + const shouldDisplayEvaluationHitsCount = + rowHitCount !== undefined && cellIndex === evaluationHitsCountColumnIndex; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( @@ -111,6 +115,7 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} + shouldDisplayEvaluationHitsCount={shouldDisplayEvaluationHitsCount} evaluationHitsCount={rowHitCount} /> )} diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index 37e43098ee6..d487cce17d9 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,6 +49,7 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; + shouldDisplayEvaluationHitsCount?: boolean; evaluationHitsCount?: number; } @@ -74,6 +75,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, + shouldDisplayEvaluationHitsCount, evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); @@ -227,6 +229,12 @@ export function BeeTableTd({ return onDataCellKeyUp?.(column.id); }, [column.id, onDataCellKeyUp]); + const evaluationHitsCountCss = shouldDisplayEvaluationHitsCount + ? (evaluationHitsCount ?? 0) > 0 + ? "evaluation-hit-count-overlay-colored" + : "evaluation-hit-count-overlay-non-colored" + : ""; + return ( ({ }} > {column.isRowIndexColumn ? ( - evaluationHitsCount !== undefined ? ( - <> -
0 - ? "evaluation-hit-count-overlay-colored" - : "evaluation-hit-count-overlay-non-colored" - } - data-evaluation-hits-count={evaluationHitsCount} - > - {rowIndexLabel} -
- - ) : ( - <>{rowIndexLabel} - ) +
+ {rowIndexLabel} +
) : ( - <> +
{tdContent} {!isReadOnly && shouldRenderResizer && ( @@ -279,7 +274,7 @@ export function BeeTableTd({ setResizing={setResizing} /> )} - +
)} {!isReadOnly && From f2274d0a407b526cd971a6a3d621a7ec05a1632b Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 11:34:27 +0100 Subject: [PATCH 04/22] Adapt props to Map --- .../src/BoxedExpressionEditor.tsx | 7 +++---- .../src/BoxedExpressionEditorContext.tsx | 6 +++--- .../src/table/BeeTable/BeeTableBody.tsx | 12 ++++++++---- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx index 18f7ef5b7b9..261f91fb877 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx @@ -59,8 +59,7 @@ export interface BoxedExpressionEditorProps { isReadOnly?: boolean; /** PMML models available to use on Boxed PMML Function */ pmmlDocuments?: PmmlDocument[]; - /** Array of the hit sub-expressions UUID IDs (Decision Tables rules and Conditional Expression branches). IDs may repeat in the array as mentioned sub-expressions may hit more times. */ - evaluationHitIds?: string[]; + evaluationHitsCountPerId?: Map; /** The containing HTMLElement which is scrollable */ scrollableParentRef: React.RefObject; /** Parsed variables used for syntax coloring and auto-complete */ @@ -81,7 +80,7 @@ export function BoxedExpressionEditor({ isResetSupportedOnRootExpression, scrollableParentRef, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, onRequestFeelVariables, widthsById, onWidthsChange, @@ -106,7 +105,7 @@ export function BoxedExpressionEditor({ isReadOnly={isReadOnly} dataTypes={dataTypes} pmmlDocuments={pmmlDocuments} - evaluationHitIds={evaluationHitIds} + evaluationHitsCountPerId={evaluationHitsCountPerId} onRequestFeelVariables={onRequestFeelVariables} widthsById={widthsById} hideDmn14BoxedExpressions={hideDmn14BoxedExpressions} diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index 484b3d3acd5..14b760e9b05 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -34,7 +34,7 @@ export interface BoxedExpressionEditorContextType { pmmlDocuments?: PmmlDocument[]; dataTypes: DmnDataType[]; isReadOnly?: boolean; - evaluationHitIds?: string[]; + evaluationHitsCountPerId?: Map; // State currentlyOpenContextMenu: string | undefined; @@ -75,7 +75,7 @@ export function BoxedExpressionEditorContextProvider({ beeGwtService, children, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, scrollableParentRef, onRequestFeelVariables, widthsById, @@ -116,7 +116,7 @@ export function BoxedExpressionEditorContextProvider({ dataTypes, isReadOnly, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168) currentlyOpenContextMenu, diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index 55d5f02cf06..7afe9d11d67 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -76,16 +76,20 @@ export function BeeTableBody({ isReadOnly, evaluationHitsCountColumnIndex, }: BeeTableBodyProps) { - const { evaluationHitIds } = useBoxedExpressionEditor(); - // const evaluationHitIds = ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7"]; + // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); + const evaluationHitsCountPerId: Map = new Map(); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; - const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); + const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; + const rowClassName = rowHitCount + ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") + : undefined; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { From 84a6a4698f54c9b09ebcae3934f5145b54db92ad Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 12:25:12 +0100 Subject: [PATCH 05/22] Style the first column only --- .../src/table/BeeTable/BeeTable.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index e7f10dfb167..7dd2813d585 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,11 +203,7 @@ border: 0; } -.expression-container .table-component .evaluation-highlights-row-overlay td { - position: relative; -} - -.expression-container .table-component .evaluation-highlights-row-overlay td::before { +.expression-container .table-component tr.evaluation-highlights-row-overlay > td:first-child::before { content: ""; position: absolute; background-color: rgb(215, 201, 255, 0.5); @@ -226,9 +222,9 @@ position: absolute; top: 0px; left: 0px; - height: 55px; - width: 55px; - clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + height: 40px; + width: 40px; + clip-path: polygon(0% 100%, 100% 0%, 0% 0%); padding-left: 0.2em; } @@ -241,9 +237,9 @@ position: absolute; top: 0px; left: 0px; - height: 55px; - width: 55px; - clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + height: 40px; + width: 40px; + clip-path: polygon(0% 100%, 100% 0%, 0% 0%); padding-left: 0.2em; } From 527aad4ce688e92c396d99dd523c8e36537a23af Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 13:28:58 +0100 Subject: [PATCH 06/22] Prevent evaluationHitCount in 'if' row --- .../src/api/BeeTable.ts | 1 + .../ConditionalExpression.tsx | 5 +++++ .../DecisionTableExpression.tsx | 5 +++++ .../src/table/BeeTable/BeeTable.tsx | 2 ++ .../src/table/BeeTable/BeeTableBody.tsx | 20 +++++++++++++++---- 5 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index b637efe2288..002cafe2c10 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -98,6 +98,7 @@ export interface BeeTableProps { resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; evaluationHitsCountColumnIndex?: number; + getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } /** Possible status for the visibility of the Table's Header */ diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index 774c3a5d6fd..de44afdc6b1 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -230,6 +230,10 @@ export function ConditionalExpression({ return row.original.part["@_id"]; }, []); + const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + return row.original.label !== "if"; + }, []); + return (
@@ -253,6 +257,7 @@ export function ConditionalExpression({ shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} evaluationHitsCountColumnIndex={1} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index 67ec3df601a..e1fe29c0794 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1045,6 +1045,10 @@ export function DecisionTableExpression({ [beeTableRows.length] ); + const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + return true; + }, []); + return (
@@ -1074,6 +1078,7 @@ export function DecisionTableExpression({ shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} evaluationHitsCountColumnIndex={0} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 />
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 72786121dbd..6bd01901fbc 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -104,6 +104,7 @@ export function BeeTableInternal({ lastColumnMinWidth, rowWrapper, evaluationHitsCountColumnIndex, + getEvaluationHitsCountSupportedByRow, }: BeeTableProps & { selectionRef?: React.RefObject; }) { @@ -659,6 +660,7 @@ export function BeeTableInternal({ lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} + getEvalationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} /> { isReadOnly: boolean; evaluationHitsCountColumnIndex?: number; + getEvalationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } export function BeeTableBody({ @@ -75,27 +76,38 @@ export function BeeTableBody({ rowWrapper, isReadOnly, evaluationHitsCountColumnIndex, + getEvalationHitsCountSupportedByRow, }: BeeTableBodyProps) { // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const evaluationHitsCountPerId: Map = new Map(); evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", 40); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", 50); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", 60); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", 70); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", 80); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); + const isEvalationHitsCountSupportedByRow: boolean = getEvalationHitsCountSupportedByRow?.(row) ?? false; const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; - const rowClassName = rowHitCount - ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") - : undefined; + const rowClassName = + rowHitCount && isEvalationHitsCountSupportedByRow + ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") + : undefined; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); const shouldDisplayEvaluationHitsCount = - rowHitCount !== undefined && cellIndex === evaluationHitsCountColumnIndex; + rowHitCount !== undefined && + cellIndex === evaluationHitsCountColumnIndex && + isEvalationHitsCountSupportedByRow; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( From 22270b1d0e617fe74f514afdf90527e3f4bd7d17 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 16:02:42 +0100 Subject: [PATCH 07/22] Refactor variable names --- .../src/api/BeeTable.ts | 2 ++ .../src/table/BeeTable/BeeTable.css | 6 ++-- .../src/table/BeeTable/BeeTable.tsx | 2 +- .../src/table/BeeTable/BeeTableBody.tsx | 29 ++++++++++--------- .../src/table/BeeTable/BeeTableTd.tsx | 16 +++++----- 5 files changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index 002cafe2c10..8d35e0aa387 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -97,7 +97,9 @@ export interface BeeTableProps { shouldShowColumnsInlineControls: boolean; resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; + /** Index of the column, where the evaluation hits count should be displayed. If not set, evaluation hits count number is not shown. */ evaluationHitsCountColumnIndex?: number; + /** Method should return true for table rows, that can display evaluation hits count, false otherwise. If not set, BeeTableBody defaults to false. */ getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 7dd2813d585..2c4c2839784 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,7 +203,7 @@ border: 0; } -.expression-container .table-component tr.evaluation-highlights-row-overlay > td:first-child::before { +.expression-container .table-component tr.evaluation-hits-count-row-overlay > td:first-child::before { content: ""; position: absolute; background-color: rgb(215, 201, 255, 0.5); @@ -213,7 +213,7 @@ height: 100%; } -.evaluation-hit-count-overlay-non-colored::before { +.evaluation-hits-count-badge-non-colored::before { content: attr(data-evaluation-hits-count); font-size: 0.8em; text-align: left; @@ -228,7 +228,7 @@ padding-left: 0.2em; } -.evaluation-hit-count-overlay-colored::before { +.evaluation-hits-count-badge-colored::before { content: attr(data-evaluation-hits-count); font-size: 0.8em; text-align: left; diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 6bd01901fbc..f06360b56d4 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -660,7 +660,7 @@ export function BeeTableInternal({ lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} - getEvalationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} /> { rowWrapper?: React.FunctionComponent>; isReadOnly: boolean; + /** See BeeTable.ts */ evaluationHitsCountColumnIndex?: number; - getEvalationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; + /** See BeeTable.ts */ + getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } export function BeeTableBody({ @@ -76,7 +78,7 @@ export function BeeTableBody({ rowWrapper, isReadOnly, evaluationHitsCountColumnIndex, - getEvalationHitsCountSupportedByRow, + getEvaluationHitsCountSupportedByRow, }: BeeTableBodyProps) { // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const evaluationHitsCountPerId: Map = new Map(); @@ -94,20 +96,19 @@ export function BeeTableBody({ reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const isEvalationHitsCountSupportedByRow: boolean = getEvalationHitsCountSupportedByRow?.(row) ?? false; - const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; - const rowClassName = - rowHitCount && isEvalationHitsCountSupportedByRow - ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") - : undefined; + const isEvalationHitsCountSupportedByRow: boolean = getEvaluationHitsCountSupportedByRow?.(row) ?? false; + const rowEvaluationHitsCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; + const canDisplayEvaluationHitsCountRowOverlay = + rowEvaluationHitsCount !== undefined && isEvalationHitsCountSupportedByRow === true; + const rowClassName = canDisplayEvaluationHitsCountRowOverlay + ? rowKey + (rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : "") + : rowKey; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); - const shouldDisplayEvaluationHitsCount = - rowHitCount !== undefined && - cellIndex === evaluationHitsCountColumnIndex && - isEvalationHitsCountSupportedByRow; + const canDisplayEvaluationHitsCountBadge = + canDisplayEvaluationHitsCountRowOverlay && cellIndex === evaluationHitsCountColumnIndex; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( @@ -131,8 +132,8 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} - shouldDisplayEvaluationHitsCount={shouldDisplayEvaluationHitsCount} - evaluationHitsCount={rowHitCount} + canDisplayEvaluationHitsCountBadge={canDisplayEvaluationHitsCountBadge} + evaluationHitsCount={rowEvaluationHitsCount} /> )} diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index d487cce17d9..b9615b7df01 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,7 +49,9 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; - shouldDisplayEvaluationHitsCount?: boolean; + /** True means the table cell can display evaluation hits count. False means evaluation hits count is not displayed in the table cell. */ + canDisplayEvaluationHitsCountBadge?: boolean; + /** Actuall evaluation hits count number that will be displayed in the table cell if 'canDisplayEvaluationHitsCountBadge' is set to true. */ evaluationHitsCount?: number; } @@ -75,7 +77,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, - shouldDisplayEvaluationHitsCount, + canDisplayEvaluationHitsCountBadge, evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); @@ -229,10 +231,10 @@ export function BeeTableTd({ return onDataCellKeyUp?.(column.id); }, [column.id, onDataCellKeyUp]); - const evaluationHitsCountCss = shouldDisplayEvaluationHitsCount + const evaluationHitsCountBadgeClassName = canDisplayEvaluationHitsCountBadge ? (evaluationHitsCount ?? 0) > 0 - ? "evaluation-hit-count-overlay-colored" - : "evaluation-hit-count-overlay-non-colored" + ? "evaluation-hits-count-badge-colored" + : "evaluation-hits-count-badge-non-colored" : ""; return ( @@ -256,11 +258,11 @@ export function BeeTableTd({ }} > {column.isRowIndexColumn ? ( -
+
{rowIndexLabel}
) : ( -
+
{tdContent} {!isReadOnly && shouldRenderResizer && ( From b2bf4a94087612c3057a74e8eaf7494c2dac2c58 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 16:10:30 +0100 Subject: [PATCH 08/22] Cleanup --- .../src/table/BeeTable/BeeTableBody.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index c9c084bcbf9..d6ca78b4933 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -80,16 +80,7 @@ export function BeeTableBody({ evaluationHitsCountColumnIndex, getEvaluationHitsCountSupportedByRow, }: BeeTableBodyProps) { - // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); - const evaluationHitsCountPerId: Map = new Map(); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", 40); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", 50); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", 60); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", 70); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", 80); + const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { From 22996a03b567e363ee273a9f2a06096a5ffa7f1f Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 10:43:32 +0100 Subject: [PATCH 09/22] Update packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Luiz João Motta --- .../src/BoxedExpressionEditorContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index 14b760e9b05..72087d930e0 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -34,7 +34,7 @@ export interface BoxedExpressionEditorContextType { pmmlDocuments?: PmmlDocument[]; dataTypes: DmnDataType[]; isReadOnly?: boolean; - evaluationHitsCountPerId?: Map; + evaluationHitsCountById?: Map; // State currentlyOpenContextMenu: string | undefined; From 0ec93a0fdad7330997da11f8b10da3054b0714a1 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 10:44:58 +0100 Subject: [PATCH 10/22] evaluationHitsCountPerId -> evaluationHitsCountById --- .../src/BoxedExpressionEditor.tsx | 6 +++--- .../src/BoxedExpressionEditorContext.tsx | 4 ++-- .../src/table/BeeTable/BeeTableBody.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx index 261f91fb877..de4354ec49a 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx @@ -59,7 +59,7 @@ export interface BoxedExpressionEditorProps { isReadOnly?: boolean; /** PMML models available to use on Boxed PMML Function */ pmmlDocuments?: PmmlDocument[]; - evaluationHitsCountPerId?: Map; + evaluationHitsCountById?: Map; /** The containing HTMLElement which is scrollable */ scrollableParentRef: React.RefObject; /** Parsed variables used for syntax coloring and auto-complete */ @@ -80,7 +80,7 @@ export function BoxedExpressionEditor({ isResetSupportedOnRootExpression, scrollableParentRef, pmmlDocuments, - evaluationHitsCountPerId, + evaluationHitsCountById, onRequestFeelVariables, widthsById, onWidthsChange, @@ -105,7 +105,7 @@ export function BoxedExpressionEditor({ isReadOnly={isReadOnly} dataTypes={dataTypes} pmmlDocuments={pmmlDocuments} - evaluationHitsCountPerId={evaluationHitsCountPerId} + evaluationHitsCountById={evaluationHitsCountById} onRequestFeelVariables={onRequestFeelVariables} widthsById={widthsById} hideDmn14BoxedExpressions={hideDmn14BoxedExpressions} diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index 72087d930e0..5bf11e36f4e 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -75,7 +75,7 @@ export function BoxedExpressionEditorContextProvider({ beeGwtService, children, pmmlDocuments, - evaluationHitsCountPerId, + evaluationHitsCountById, scrollableParentRef, onRequestFeelVariables, widthsById, @@ -116,7 +116,7 @@ export function BoxedExpressionEditorContextProvider({ dataTypes, isReadOnly, pmmlDocuments, - evaluationHitsCountPerId, + evaluationHitsCountById, //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168) currentlyOpenContextMenu, diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index d6ca78b4933..8fd45f1c38b 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -80,7 +80,7 @@ export function BeeTableBody({ evaluationHitsCountColumnIndex, getEvaluationHitsCountSupportedByRow, }: BeeTableBodyProps) { - const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); + const { evaluationHitsCountById } = useBoxedExpressionEditor(); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { @@ -88,7 +88,7 @@ export function BeeTableBody({ const rowKey = getRowKey(row); const isEvalationHitsCountSupportedByRow: boolean = getEvaluationHitsCountSupportedByRow?.(row) ?? false; - const rowEvaluationHitsCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; + const rowEvaluationHitsCount = evaluationHitsCountById ? evaluationHitsCountById?.get(rowKey) ?? 0 : undefined; const canDisplayEvaluationHitsCountRowOverlay = rowEvaluationHitsCount !== undefined && isEvalationHitsCountSupportedByRow === true; const rowClassName = canDisplayEvaluationHitsCountRowOverlay From 6e4ea9b19e6f30c5823218601f71a7058c37619e Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 10:56:09 +0100 Subject: [PATCH 11/22] useMemo --- .../src/table/BeeTable/BeeTableTd.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index b9615b7df01..3ef78a9f950 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -231,11 +231,13 @@ export function BeeTableTd({ return onDataCellKeyUp?.(column.id); }, [column.id, onDataCellKeyUp]); - const evaluationHitsCountBadgeClassName = canDisplayEvaluationHitsCountBadge - ? (evaluationHitsCount ?? 0) > 0 - ? "evaluation-hits-count-badge-colored" - : "evaluation-hits-count-badge-non-colored" - : ""; + const evaluationHitsCountBadgeClassName = useMemo(() => { + canDisplayEvaluationHitsCountBadge + ? (evaluationHitsCount ?? 0) > 0 + ? "evaluation-hits-count-badge-colored" + : "evaluation-hits-count-badge-non-colored" + : ""; + }, [canDisplayEvaluationHitsCountBadge, evaluationHitsCount]); return ( From 19e8b23f1462390c9d2bbbbe66309ba98abc160e Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 11:02:06 +0100 Subject: [PATCH 12/22] supportsEvaluationHitsCount --- packages/boxed-expression-component/src/api/BeeTable.ts | 2 +- .../ConditionalExpression/ConditionalExpression.tsx | 4 ++-- .../DecisionTableExpression/DecisionTableExpression.tsx | 4 ++-- .../src/table/BeeTable/BeeTable.tsx | 4 ++-- .../src/table/BeeTable/BeeTableBody.tsx | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index 8d35e0aa387..fc3423c05f8 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -100,7 +100,7 @@ export interface BeeTableProps { /** Index of the column, where the evaluation hits count should be displayed. If not set, evaluation hits count number is not shown. */ evaluationHitsCountColumnIndex?: number; /** Method should return true for table rows, that can display evaluation hits count, false otherwise. If not set, BeeTableBody defaults to false. */ - getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; + supportsEvaluationHitsCount?: (row: ReactTable.Row) => boolean; } /** Possible status for the visibility of the Table's Header */ diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index de44afdc6b1..892106b92d7 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -230,7 +230,7 @@ export function ConditionalExpression({ return row.original.part["@_id"]; }, []); - const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + const supportsEvaluationHitsCount = useCallback((row: ReactTable.Row) => { return row.original.label !== "if"; }, []); @@ -257,7 +257,7 @@ export function ConditionalExpression({ shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} evaluationHitsCountColumnIndex={1} - getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} + supportsEvaluationHitsCount={supportsEvaluationHitsCount} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index e1fe29c0794..a0459de44fa 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1045,7 +1045,7 @@ export function DecisionTableExpression({ [beeTableRows.length] ); - const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + const supportsEvaluationHitsCount = useCallback((row: ReactTable.Row) => { return true; }, []); @@ -1078,7 +1078,7 @@ export function DecisionTableExpression({ shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} evaluationHitsCountColumnIndex={0} - getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} + supportsEvaluationHitsCount={supportsEvaluationHitsCount} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 />
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index f06360b56d4..de5faa6432c 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -104,7 +104,7 @@ export function BeeTableInternal({ lastColumnMinWidth, rowWrapper, evaluationHitsCountColumnIndex, - getEvaluationHitsCountSupportedByRow, + supportsEvaluationHitsCount, }: BeeTableProps & { selectionRef?: React.RefObject; }) { @@ -660,7 +660,7 @@ export function BeeTableInternal({ lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} - getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} + supportsEvaluationHitsCount={supportsEvaluationHitsCount} /> { /** See BeeTable.ts */ evaluationHitsCountColumnIndex?: number; /** See BeeTable.ts */ - getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; + supportsEvaluationHitsCount?: (row: ReactTable.Row) => boolean; } export function BeeTableBody({ @@ -78,7 +78,7 @@ export function BeeTableBody({ rowWrapper, isReadOnly, evaluationHitsCountColumnIndex, - getEvaluationHitsCountSupportedByRow, + supportsEvaluationHitsCount, }: BeeTableBodyProps) { const { evaluationHitsCountById } = useBoxedExpressionEditor(); @@ -87,7 +87,7 @@ export function BeeTableBody({ reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const isEvalationHitsCountSupportedByRow: boolean = getEvaluationHitsCountSupportedByRow?.(row) ?? false; + const isEvalationHitsCountSupportedByRow: boolean = supportsEvaluationHitsCount?.(row) ?? false; const rowEvaluationHitsCount = evaluationHitsCountById ? evaluationHitsCountById?.get(rowKey) ?? 0 : undefined; const canDisplayEvaluationHitsCountRowOverlay = rowEvaluationHitsCount !== undefined && isEvalationHitsCountSupportedByRow === true; From d52e5534406f9b06351f33dca82656aa9ac9b42c Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 11:10:58 +0100 Subject: [PATCH 13/22] inline variable --- .../src/table/BeeTable/BeeTableBody.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index 2ab714207bf..a57ad9ea148 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -87,10 +87,9 @@ export function BeeTableBody({ reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const isEvalationHitsCountSupportedByRow: boolean = supportsEvaluationHitsCount?.(row) ?? false; const rowEvaluationHitsCount = evaluationHitsCountById ? evaluationHitsCountById?.get(rowKey) ?? 0 : undefined; const canDisplayEvaluationHitsCountRowOverlay = - rowEvaluationHitsCount !== undefined && isEvalationHitsCountSupportedByRow === true; + rowEvaluationHitsCount !== undefined && (supportsEvaluationHitsCount?.(row) ?? false); const rowClassName = canDisplayEvaluationHitsCountRowOverlay ? rowKey + (rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : "") : rowKey; From 4312521f076f675ebd0bba245679406edf551ced Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 13:43:10 +0100 Subject: [PATCH 14/22] missing hook dependencies --- .../src/table/BeeTable/BeeTableBody.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index a57ad9ea148..07859669855 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -147,6 +147,9 @@ export function BeeTableBody({ ); }, [ + evaluationHitsCountById, + evaluationHitsCountColumnIndex, + supportsEvaluationHitsCount, reactTableInstance, rowWrapper, getRowKey, From d5194b22b0dd1ad1570c918f72e16e2c67af126b Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 14:14:42 +0100 Subject: [PATCH 15/22] fix useMemo --- .../src/table/BeeTable/BeeTableTd.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index 3ef78a9f950..a9ce90b8575 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -232,7 +232,7 @@ export function BeeTableTd({ }, [column.id, onDataCellKeyUp]); const evaluationHitsCountBadgeClassName = useMemo(() => { - canDisplayEvaluationHitsCountBadge + return canDisplayEvaluationHitsCountBadge ? (evaluationHitsCount ?? 0) > 0 ? "evaluation-hits-count-badge-colored" : "evaluation-hits-count-badge-non-colored" From 3991237cfeef547236aac07c571fe6c74b20d853 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 14:18:06 +0100 Subject: [PATCH 16/22] split ternary operator to multiline From 4ca0587d31bdb2b9ea881f1f98eb9c22b1a039d9 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 14:22:20 +0100 Subject: [PATCH 17/22] remove one ternary operator --- .../src/table/BeeTable/BeeTableBody.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index 07859669855..b6c1aa987e9 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -90,9 +90,8 @@ export function BeeTableBody({ const rowEvaluationHitsCount = evaluationHitsCountById ? evaluationHitsCountById?.get(rowKey) ?? 0 : undefined; const canDisplayEvaluationHitsCountRowOverlay = rowEvaluationHitsCount !== undefined && (supportsEvaluationHitsCount?.(row) ?? false); - const rowClassName = canDisplayEvaluationHitsCountRowOverlay - ? rowKey + (rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : "") - : rowKey; + const rowClassName = `${rowKey}${canDisplayEvaluationHitsCountRowOverlay && rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : ""}`; + const renderTr = () => ( {row.cells.map((cell, cellIndex) => { From 080f4cdac94f9f64d11d94bd1e826d604512a1a0 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 11 Dec 2024 14:54:46 +0100 Subject: [PATCH 18/22] fix styling: highlight whole row --- .../ConditionalExpression.tsx | 2 +- .../src/table/BeeTable/BeeTable.css | 38 ++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index 892106b92d7..d6a4d637dac 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -236,7 +236,7 @@ export function ConditionalExpression({ return ( -
+
isReadOnly={isReadOnly} isEditableHeader={!isReadOnly} diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 2c4c2839784..8a730ce590e 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,7 +203,43 @@ border: 0; } -.expression-container .table-component tr.evaluation-hits-count-row-overlay > td:first-child::before { +.expression-container-box + .conditional-expression + .table-component + tr.evaluation-hits-count-row-overlay + > td:first-child::before { + content: ""; + position: absolute; + background-color: rgb(215, 201, 255, 0.5); + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.expression-container-box + .conditional-expression + .table-component + tr.evaluation-hits-count-row-overlay + > td + > div + > div + > div + > .logic-type-selected-header::before { + content: ""; + position: absolute; + background-color: rgb(215, 201, 255, 0.5); + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.expression-container-box + .decision-table-expression + .table-component + tr.evaluation-hits-count-row-overlay + > td::before { content: ""; position: absolute; background-color: rgb(215, 201, 255, 0.5); From 1fe7f311d26b7b4fe979ce42021790821b447089 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 11 Dec 2024 17:21:29 +0100 Subject: [PATCH 19/22] add stories --- .../Conditional/Conditional.stories.tsx | 184 ++++++++++++++++++ .../DecisionTable/DecisionTable.stories.tsx | 77 ++++++++ 2 files changed, 261 insertions(+) diff --git a/packages/boxed-expression-component/stories/boxedExpressions/Conditional/Conditional.stories.tsx b/packages/boxed-expression-component/stories/boxedExpressions/Conditional/Conditional.stories.tsx index c4315e4d878..3bd4d508899 100644 --- a/packages/boxed-expression-component/stories/boxedExpressions/Conditional/Conditional.stories.tsx +++ b/packages/boxed-expression-component/stories/boxedExpressions/Conditional/Conditional.stories.tsx @@ -103,6 +103,190 @@ export const Readonly: Story = { }, }; +export const EvaluationHits: Story = { + render: (args) => + BoxedExpressionEditorStory({ + evaluationHitsCountById: new Map([ + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 70], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", 40], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", 50], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", 20], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", 70], + ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", 20], + ]), + }), + parameters: { exclude: ["dataTypes", "beeGwtService", "pmmlDocuments"] }, + args: { + ...EmptyExpression.args, + expression: { + __$$element: "conditional", + "@_id": generateUuid(), + "@_label": "Expression Name", + if: { + "@_id": generateUuid(), + expression: { + __$$element: "literalExpression", + "@_id": generateUuid(), + }, + }, + then: { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", + expression: { + __$$element: "decisionTable", + "@_id": generateUuid(), + "@_typeRef": "Any", + "@_hitPolicy": "UNIQUE", + input: [ + { + "@_id": generateUuid(), + inputExpression: { + "@_id": generateUuid(), + text: { __$$text: "input-1" }, + }, + }, + { + "@_id": generateUuid(), + inputExpression: { + "@_id": generateUuid(), + text: { __$$text: "input-2" }, + }, + }, + ], + output: [ + { + "@_id": generateUuid(), + "@_label": "output-1", + }, + { + "@_id": generateUuid(), + "@_label": "output-2", + }, + { + "@_id": generateUuid(), + "@_label": "output-3", + }, + ], + annotation: [ + { + "@_name": "Annotations", + }, + ], + rule: [ + { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", + inputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "E" } }, + { "@_id": generateUuid(), text: { __$$text: "E" } }, + ], + outputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + ], + annotationEntry: [{ text: { __$$text: "// Your annotations here" } }], + }, + { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", + inputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "E" } }, + { "@_id": generateUuid(), text: { __$$text: "E" } }, + ], + outputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + ], + annotationEntry: [{ text: { __$$text: "// Your annotations here" } }], + }, + ], + }, + }, + else: { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", + expression: { + __$$element: "conditional", + "@_id": generateUuid(), + "@_label": "Expression Name", + if: { + "@_id": generateUuid(), + expression: { + __$$element: "literalExpression", + "@_id": generateUuid(), + }, + }, + then: { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", + expression: { + __$$element: "literalExpression", + "@_id": generateUuid(), + }, + }, + else: { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", + expression: { + __$$element: "decisionTable", + "@_id": generateUuid(), + "@_typeRef": "Any", + "@_hitPolicy": "UNIQUE", + input: [ + { + "@_id": generateUuid(), + inputExpression: { + "@_id": generateUuid(), + text: { __$$text: "input-1" }, + }, + }, + { + "@_id": generateUuid(), + inputExpression: { + "@_id": generateUuid(), + text: { __$$text: "input-2" }, + }, + }, + ], + output: [ + { + "@_id": generateUuid(), + "@_label": "output-1", + }, + { + "@_id": generateUuid(), + "@_label": "output-2", + }, + { + "@_id": generateUuid(), + "@_label": "output-3", + }, + ], + annotation: [ + { + "@_name": "Annotations", + }, + ], + rule: [ + { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", + inputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "E" } }, + { "@_id": generateUuid(), text: { __$$text: "E" } }, + ], + outputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + ], + annotationEntry: [{ text: { __$$text: "// Your annotations here" } }], + }, + ], + }, + }, + }, + }, + }, + }, +}; + export const MonthlyFee: Story = { render: (args) => BoxedExpressionEditorStory(), parameters: { exclude: ["dataTypes", "beeGwtService", "pmmlDocuments"] }, diff --git a/packages/boxed-expression-component/stories/boxedExpressions/DecisionTable/DecisionTable.stories.tsx b/packages/boxed-expression-component/stories/boxedExpressions/DecisionTable/DecisionTable.stories.tsx index 0a8d78dfc98..859819df758 100644 --- a/packages/boxed-expression-component/stories/boxedExpressions/DecisionTable/DecisionTable.stories.tsx +++ b/packages/boxed-expression-component/stories/boxedExpressions/DecisionTable/DecisionTable.stories.tsx @@ -103,6 +103,83 @@ export const Base: Story = { }, }; +export const EvaluationHits: Story = { + render: (args) => + BoxedExpressionEditorStory({ + evaluationHitsCountById: new Map([["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30]]), + }), + parameters: { exclude: ["dataTypes", "beeGwtService", "pmmlDocuments"] }, + args: { + ...EmptyExpression.args, + expression: { + __$$element: "decisionTable", + "@_id": "_92929AE6-3BB5-4217-B66E-07614680971D", + "@_label": "Expression Name", + "@_hitPolicy": "UNIQUE", + input: [ + { + "@_id": generateUuid(), + inputExpression: { + "@_id": generateUuid(), + text: { __$$text: "input-1" }, + "@_typeRef": undefined, + }, + }, + ], + output: [ + { + "@_id": generateUuid(), + "@_label": "output-1", + "@_typeRef": undefined, + }, + ], + annotation: [ + { + "@_name": "Annotations", + }, + ], + rule: [ + { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", + inputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "E" } }, + { "@_id": generateUuid(), text: { __$$text: "E" } }, + ], + outputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + ], + annotationEntry: [{ text: { __$$text: "// Your annotations here" } }], + }, + { + "@_id": "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B4", + inputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "E" } }, + { "@_id": generateUuid(), text: { __$$text: "E" } }, + ], + outputEntry: [ + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + { "@_id": generateUuid(), text: { __$$text: "aaa" } }, + ], + annotationEntry: [{ text: { __$$text: "// Your annotations here" } }], + }, + ], + }, + widthsById: { + "_92929AE6-3BB5-4217-B66E-07614680971D": [ + BEE_TABLE_ROW_INDEX_COLUMN_WIDTH, + DECISION_TABLE_INPUT_DEFAULT_WIDTH, + DECISION_TABLE_OUTPUT_DEFAULT_WIDTH, + DECISION_TABLE_ANNOTATION_DEFAULT_WIDTH, + ], + }, + + isResetSupportedOnRootExpression: true, + }, +}; + export const Readonly: Story = { render: (args) => BoxedExpressionEditorStory(), parameters: { exclude: ["dataTypes", "beeGwtService", "pmmlDocuments"] }, From 156db3e69487e9f785168a9c9c561849898e8144 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Thu, 12 Dec 2024 08:37:43 +0100 Subject: [PATCH 20/22] stories wrapper --- .../stories/boxedExpressionStoriesWrapper.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx b/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx index 92276209843..2b3e7e55ac0 100644 --- a/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx +++ b/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx @@ -87,6 +87,7 @@ type StorybookArgWidhtsById = Record; export type BoxedExpressionEditorStoryArgs = Omit & { widthsById?: Record; onWidthsChange?: React.Dispatch>>; + evaluationHitsCountById?: Map; }; export function BoxedExpressionEditorStory(props?: Partial) { @@ -95,6 +96,7 @@ export function BoxedExpressionEditorStory(props?: Partial | undefined>( args?.expression ?? props?.expression ); + const [evaluationHitsCountById, setEvaluationHitsCountById] = useState(props?.evaluationHitsCountById); const [widthsByIdState, setWidthsByIdState] = useState( args.widthsById ?? props?.widthsById ?? {} @@ -175,6 +177,7 @@ export function BoxedExpressionEditorStory(props?: Partial Date: Fri, 13 Dec 2024 11:45:07 +0100 Subject: [PATCH 21/22] Remove evaluationHitsCountColumnIndex --- .../src/api/BeeTable.ts | 2 -- .../ConditionalExpression.tsx | 1 - .../DecisionTableExpression.tsx | 1 - .../src/table/BeeTable/BeeTable.tsx | 2 -- .../src/table/BeeTable/BeeTableBody.tsx | 16 ++++++++++------ 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index fc3423c05f8..4a2db5972ca 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -97,8 +97,6 @@ export interface BeeTableProps { shouldShowColumnsInlineControls: boolean; resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; - /** Index of the column, where the evaluation hits count should be displayed. If not set, evaluation hits count number is not shown. */ - evaluationHitsCountColumnIndex?: number; /** Method should return true for table rows, that can display evaluation hits count, false otherwise. If not set, BeeTableBody defaults to false. */ supportsEvaluationHitsCount?: (row: ReactTable.Row) => boolean; } diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index d6a4d637dac..ac4923eacce 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -256,7 +256,6 @@ export function ConditionalExpression({ shouldRenderRowIndexColumn={false} shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} - evaluationHitsCountColumnIndex={1} supportsEvaluationHitsCount={supportsEvaluationHitsCount} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index a0459de44fa..ec9cf39be4b 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1077,7 +1077,6 @@ export function DecisionTableExpression({ shouldRenderRowIndexColumn={true} shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} - evaluationHitsCountColumnIndex={0} supportsEvaluationHitsCount={supportsEvaluationHitsCount} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 /> diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index de5faa6432c..6fcadbf14f3 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -103,7 +103,6 @@ export function BeeTableInternal({ resizerStopBehavior, lastColumnMinWidth, rowWrapper, - evaluationHitsCountColumnIndex, supportsEvaluationHitsCount, }: BeeTableProps & { selectionRef?: React.RefObject; @@ -659,7 +658,6 @@ export function BeeTableInternal({ onDataCellKeyUp={onDataCellKeyUp} lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} - evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} supportsEvaluationHitsCount={supportsEvaluationHitsCount} /> diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index b6c1aa987e9..3878ddaf700 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -57,8 +57,6 @@ export interface BeeTableBodyProps { isReadOnly: boolean; /** See BeeTable.ts */ - evaluationHitsCountColumnIndex?: number; - /** See BeeTable.ts */ supportsEvaluationHitsCount?: (row: ReactTable.Row) => boolean; } @@ -77,7 +75,6 @@ export function BeeTableBody({ lastColumnMinWidth, rowWrapper, isReadOnly, - evaluationHitsCountColumnIndex, supportsEvaluationHitsCount, }: BeeTableBodyProps) { const { evaluationHitsCountById } = useBoxedExpressionEditor(); @@ -92,15 +89,23 @@ export function BeeTableBody({ rowEvaluationHitsCount !== undefined && (supportsEvaluationHitsCount?.(row) ?? false); const rowClassName = `${rowKey}${canDisplayEvaluationHitsCountRowOverlay && rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : ""}`; + let evaluationHitsCountBadgeColumnIndex = -1; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); + const isColumnToRender = + (cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn; + if (evaluationHitsCountBadgeColumnIndex === -1 && isColumnToRender) { + // We store the index of the first column in the row + // We show evaluation hits count badge in this column + evaluationHitsCountBadgeColumnIndex = cellIndex; + } const canDisplayEvaluationHitsCountBadge = - canDisplayEvaluationHitsCountRowOverlay && cellIndex === evaluationHitsCountColumnIndex; + canDisplayEvaluationHitsCountRowOverlay && cellIndex === evaluationHitsCountBadgeColumnIndex; return ( - {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( + {isColumnToRender && ( resizerStopBehavior={resizerStopBehavior} shouldShowRowsInlineControls={shouldShowRowsInlineControls} @@ -147,7 +152,6 @@ export function BeeTableBody({ }, [ evaluationHitsCountById, - evaluationHitsCountColumnIndex, supportsEvaluationHitsCount, reactTableInstance, rowWrapper, From 7ce7cdc113b7f5b30207cf9fa2fb35f78dd64ba6 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Mon, 16 Dec 2024 10:53:47 +0100 Subject: [PATCH 22/22] Fix boxedExpressionStoriesWrapper.tsx --- .../stories/boxedExpressionStoriesWrapper.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx b/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx index 2b3e7e55ac0..20c1cea9f8d 100644 --- a/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx +++ b/packages/boxed-expression-component/stories/boxedExpressionStoriesWrapper.tsx @@ -87,7 +87,6 @@ type StorybookArgWidhtsById = Record; export type BoxedExpressionEditorStoryArgs = Omit & { widthsById?: Record; onWidthsChange?: React.Dispatch>>; - evaluationHitsCountById?: Map; }; export function BoxedExpressionEditorStory(props?: Partial) { @@ -96,7 +95,6 @@ export function BoxedExpressionEditorStory(props?: Partial | undefined>( args?.expression ?? props?.expression ); - const [evaluationHitsCountById, setEvaluationHitsCountById] = useState(props?.evaluationHitsCountById); const [widthsByIdState, setWidthsByIdState] = useState( args.widthsById ?? props?.widthsById ?? {} @@ -177,7 +175,7 @@ export function BoxedExpressionEditorStory(props?: Partial