@finos/legend-extension-dsl-data-quality 2.1.34 → 2.1.35

package/src/components/DataQualityRelationComparisonEditor.tsx

@@ -0,0 +1,795 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useMemo } from 'react';
+import {
+  BlankPanelContent,
+  CaretDownIcon,
+  clsx,
+  ControlledDropdownMenu,
+  CustomSelectorInput,
+  Dialog,
+  ExclamationTriangleIcon,
+  MenuContent,
+  MenuContentItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalFooterStatus,
+  ModalHeader,
+  Panel,
+  PanelContent,
+  PanelFormBooleanField,
+  PanelFormSection,
+  PanelLoadingIndicator,
+  PauseCircleIcon,
+  PlayIcon,
+  RefreshIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import { MD5HashStrategy } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
+import {
+  DataQualityRelationComparisonConfigurationState,
+  DEFAULT_LIMIT,
+  RECONCILIATION_EXECUTION_TYPE,
+} from './states/DataQualityRelationComparisonConfigurationState.js';
+import { useEditorStore } from '@finos/legend-application-studio';
+import {
+  DEFAULT_TAB_SIZE,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  BasicValueSpecificationEditor,
+  LambdaEditor,
+  LambdaParameterValuesEditor,
+  type LambdaParameterState,
+  getTDSColumnCustomizations,
+  getFilterTDSColumnCustomizations,
+} from '@finos/legend-query-builder';
+import { flowResult } from 'mobx';
+import { DataQualityMultiCustomSelector } from './DataQualityCustomSelector.js';
+import {
+  type ExecutionResult,
+  type ObserverContext,
+  PrimitiveType,
+  type PureModel,
+  TDSExecutionResult,
+  RawExecutionResult,
+  type ValueSpecification,
+  extractExecutionResultValues,
+} from '@finos/legend-graph';
+import {
+  guaranteeType,
+  prettyDuration,
+  prettyCONSTName,
+  returnUndefOnError,
+} from '@finos/legend-shared';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+import {
+  DataQualityResultCellRenderer,
+  getRowDataFromExecutionResult,
+} from './DataQualityRelationGridResult.js';
+import {
+  type DataGridColumnDefinition,
+  DataGrid,
+} from '@finos/legend-lego/data-grid';
+
+const ComparisonParameterSection = observer(
+  (props: {
+    title: string;
+    graph: PureModel;
+    observerContext: ObserverContext;
+    parameterStates: LambdaParameterState[];
+  }) => {
+    const { title, graph, observerContext, parameterStates } = props;
+
+    if (!parameterStates.length) {
+      return null;
+    }
+
+    return (
+      <div className="data-quality-relation-comparison-editor__parameters-modal__section">
+        <div className="data-quality-relation-comparison-editor__parameters-modal__section__title">
+          {title}
+        </div>
+        <div className="data-quality-relation-comparison-editor__parameters-modal__section__body">
+          {parameterStates.map((paramState) => {
+            const variableType =
+              paramState.variableType ?? PrimitiveType.STRING;
+            return (
+              <div
+                key={paramState.uuid}
+                className="panel__content__form__section"
+              >
+                <div className="lambda-parameter-values__value__label">
+                  <div className="lambda-parameter-values__value__label__name">
+                    {paramState.parameter.name}
+                  </div>
+                  <div className="lambda-parameter-values__value__label__type">
+                    {variableType.name}
+                  </div>
+                </div>
+                {paramState.value && (
+                  <BasicValueSpecificationEditor
+                    valueSpecification={paramState.value}
+                    setValueSpecification={(val: ValueSpecification): void => {
+                      paramState.setValue(val);
+                    }}
+                    graph={graph}
+                    observerContext={observerContext}
+                    typeCheckOption={{
+                      expectedType: variableType,
+                      match: variableType === PrimitiveType.DATETIME,
+                    }}
+                    className="query-builder__parameters__value__editor"
+                    resetValue={(): void => undefined}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+
+const DataQualityRelationComparisonParametersEditor = observer(
+  (props: { state: DataQualityRelationComparisonConfigurationState }) => {
+    const { state } = props;
+    const applicationStore = useApplicationStore();
+    const [isSubmitAction, setIsSubmitAction] = React.useState(false);
+    const [isClosingAction, setIsClosingAction] = React.useState(false);
+    const valuesEditorState = state.comparisonParametersEditorState;
+    const submitAction = valuesEditorState.submitAction;
+
+    const close = (): void => {
+      setIsClosingAction(true);
+      valuesEditorState.close();
+    };
+
+    const submit = applicationStore.guardUnhandledError(async () => {
+      if (submitAction) {
+        setIsSubmitAction(true);
+        close();
+        await submitAction.handler();
+      }
+    });
+
+    return (
+      <Dialog
+        open={Boolean(valuesEditorState.showModal)}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal lambda-parameter-values__modal data-quality-relation-comparison-editor__parameters-modal"
+        >
+          <ModalHeader title="Set Comparison Parameter Values" />
+          <ModalBody className="lambda-parameter-values__modal__body data-quality-relation-comparison-editor__parameters-modal__body">
+            <div className="data-quality-relation-comparison-editor__parameters-modal__description">
+              Source and target parameters are submitted independently for the
+              reconciliation run.
+            </div>
+            <div className="data-quality-relation-comparison-editor__parameters-modal__sections">
+              <ComparisonParameterSection
+                title="Source Query"
+                graph={state.editorStore.graphManagerState.graph}
+                observerContext={
+                  state.editorStore.changeDetectionState.observerContext
+                }
+                parameterStates={state.sourceParametersState.parameterStates}
+              />
+              <ComparisonParameterSection
+                title="Target Query"
+                graph={state.editorStore.graphManagerState.graph}
+                observerContext={
+                  state.editorStore.changeDetectionState.observerContext
+                }
+                parameterStates={state.targetParametersState.parameterStates}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            {isClosingAction && (
+              <ModalFooterStatus>Closing...</ModalFooterStatus>
+            )}
+            {submitAction && (
+              <ModalFooterButton
+                inProgressText={
+                  isSubmitAction ? `${submitAction.label}...` : undefined
+                }
+                onClick={submit}
+                text={prettyCONSTName(submitAction.label)}
+              />
+            )}
+            <ModalFooterButton
+              inProgressText={isClosingAction ? 'Closing...' : undefined}
+              onClick={close}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+export const DataQualityRelationComparisonEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const state = editorStore.tabManagerState.getCurrentEditorState(
+    DataQualityRelationComparisonConfigurationState,
+  );
+
+  const comparison = state.element;
+  const md5Strategy = guaranteeType(comparison.strategy, MD5HashStrategy);
+
+  const sourceColumnOptions = state.sourceColumnOptions;
+  const targetColumnOptions = state.targetColumnOptions;
+  const combinedColumnOptions = state.combinedColumnOptions;
+
+  const isRunning = state.isRunning;
+  const executionResult = state.executionResult;
+  const isFetchingColumns = state.fetchColumnsState.isInProgress;
+  const hasColumnFetchError = state.hasColumnFetchError;
+  const columnFetchError = state.columnFetchError;
+  const hasNoOverlappingColumns = state.hasNoOverlappingColumns;
+  const columnsDisabled = hasColumnFetchError || isFetchingColumns;
+
+  // Execution handlers
+  const cancelRun = applicationStore.guardUnhandledError(() =>
+    flowResult(state.cancelRun()),
+  );
+
+  const runReconciliation = applicationStore.guardUnhandledError(() =>
+    flowResult(state.handleRun(RECONCILIATION_EXECUTION_TYPE.RECONCILIATION)),
+  );
+
+  const runSourceQuery = applicationStore.guardUnhandledError(() =>
+    flowResult(state.handleRun(RECONCILIATION_EXECUTION_TYPE.SOURCE_QUERY)),
+  );
+
+  const runTargetQuery = applicationStore.guardUnhandledError(() =>
+    flowResult(state.handleRun(RECONCILIATION_EXECUTION_TYPE.TARGET_QUERY)),
+  );
+
+  const retryFetchColumns = applicationStore.guardUnhandledError(() =>
+    flowResult(state.retryFetchColumns()),
+  );
+
+  const getResultSetDescription = (
+    _executionResult: ExecutionResult,
+  ): string | undefined => {
+    const queryDuration = state.executionDuration
+      ? prettyDuration(state.executionDuration)
+      : undefined;
+    if (!queryDuration) {
+      return undefined;
+    }
+    const executionName =
+      state.lastExecutionType === RECONCILIATION_EXECUTION_TYPE.RECONCILIATION
+        ? 'Data Comparison'
+        : state.lastExecutionType === RECONCILIATION_EXECUTION_TYPE.SOURCE_QUERY
+          ? 'Source Query'
+          : 'Target Query';
+    return `${executionName} ran in ${queryDuration}`;
+  };
+
+  const resultDescription =
+    !isRunning && executionResult
+      ? getResultSetDescription(executionResult)
+      : undefined;
+
+  const darkMode =
+    !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+  const [limitValue, setLimitValue] = React.useState(state.limit);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const changeLimit: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    setLimitValue(parseInt(event.target.value, 10));
+  };
+
+  const getLimit = (): void => {
+    if (isNaN(limitValue) || limitValue === 0) {
+      setLimitValue(1000);
+      state.setLimit(1000);
+    } else {
+      state.setLimit(limitValue);
+    }
+  };
+
+  const onLimitKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    if (event.code === 'Enter') {
+      getLimit();
+      inputRef.current?.focus();
+    } else if (event.code === 'Escape') {
+      setLimitValue(state.limit);
+      inputRef.current?.select();
+    }
+  };
+
+  useEffect(() => {
+    setLimitValue(state.limit);
+  }, [state.limit]);
+
+  const renderResult = (): React.ReactNode => {
+    if (executionResult instanceof TDSExecutionResult) {
+      const colDefs = executionResult.result.columns.map(
+        (colName) =>
+          ({
+            minWidth: 50,
+            sortable: true,
+            resizable: true,
+            field: colName,
+            flex: 1,
+            ...getTDSColumnCustomizations(executionResult, colName),
+            ...getFilterTDSColumnCustomizations(executionResult, colName),
+            cellRenderer: DataQualityResultCellRenderer,
+          }) as DataGridColumnDefinition,
+      );
+      return (
+        <div className="data-quality-validation__result__values__table">
+          <div
+            className={clsx('data-quality-validation__result__tds-grid', {
+              'ag-theme-balham': !darkMode,
+              'ag-theme-balham-dark': darkMode,
+            })}
+          >
+            <DataGrid
+              rowData={getRowDataFromExecutionResult(executionResult)}
+              gridOptions={{
+                suppressScrollOnNewData: true,
+                getRowId: (data) => `${data.data.rowNumber}`,
+                rowSelection: {
+                  mode: 'multiRow',
+                  checkboxes: false,
+                  headerCheckbox: false,
+                },
+              }}
+              onRowDataUpdated={(params) => {
+                params.api.refreshCells({ force: true });
+              }}
+              suppressFieldDotNotation={true}
+              suppressContextMenu={false}
+              columnDefs={colDefs}
+            />
+          </div>
+        </div>
+      );
+    }
+    if (executionResult instanceof RawExecutionResult) {
+      const val =
+        executionResult.value === null
+          ? 'null'
+          : executionResult.value.toString();
+      return (
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.TEXT}
+          inputValue={val}
+          isReadOnly={true}
+        />
+      );
+    } else if (executionResult !== undefined) {
+      const json =
+        returnUndefOnError(() =>
+          JSON.stringify(
+            extractExecutionResultValues(executionResult),
+            null,
+            DEFAULT_TAB_SIZE,
+          ),
+        ) ?? JSON.stringify(executionResult);
+      return (
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.JSON}
+          inputValue={json}
+          isReadOnly={true}
+        />
+      );
+    }
+    return <BlankPanelContent>No Data to Display</BlankPanelContent>;
+  };
+
+  useEffect(() => {
+    flowResult(
+      state.sourceLambdaEditorState.convertLambdaObjectToGrammarString({
+        pretty: true,
+        firstLoad: true,
+      }),
+    ).catch(applicationStore.alertUnhandledError);
+    flowResult(
+      state.targetLambdaEditorState.convertLambdaObjectToGrammarString({
+        pretty: true,
+        firstLoad: true,
+      }),
+    ).catch(applicationStore.alertUnhandledError);
+  }, [
+    applicationStore,
+    state.sourceLambdaEditorState,
+    state.targetLambdaEditorState,
+  ]);
+
+  const sourceHashColumnValue = md5Strategy.sourceHashColumn
+    ? {
+        value: md5Strategy.sourceHashColumn,
+        label: md5Strategy.sourceHashColumn,
+      }
+    : undefined;
+
+  const targetHashColumnValue = md5Strategy.targetHashColumn
+    ? {
+        value: md5Strategy.targetHashColumn,
+        label: md5Strategy.targetHashColumn,
+      }
+    : undefined;
+
+  const selectedKeyOptions = useMemo(() => {
+    const selectedKeys = new Set(comparison.keys);
+    return combinedColumnOptions.filter(({ value }) => selectedKeys.has(value));
+  }, [combinedColumnOptions, comparison.keys]);
+
+  const selectedColumnsToCompareOptions = useMemo(() => {
+    const selectedColumns = new Set(comparison.columnsToCompare);
+    return combinedColumnOptions.filter(({ value }) =>
+      selectedColumns.has(value),
+    );
+  }, [combinedColumnOptions, comparison.columnsToCompare]);
+
+  return (
+    <div className="data-quality-relation-comparison-editor">
+      <Panel>
+        <PanelLoadingIndicator isLoading={isRunning} />
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">
+              dataQualityRelationComparison
+            </div>
+            <div className="panel__header__title__content">
+              {comparison.name}
+            </div>
+          </div>
+        </div>
+        <div className="data-quality-relation-comparison-editor__actions-bar">
+          <div className="data-quality-relation-comparison-editor__actions-bar__limit">
+            <div className="data-quality-relation-comparison-editor__actions-bar__limit__label">
+              preview row limit
+            </div>
+            <input
+              ref={inputRef}
+              className="input--dark data-quality-relation-comparison-editor__actions-bar__limit__input"
+              spellCheck={false}
+              type="number"
+              value={Number.isNaN(limitValue) ? '' : limitValue}
+              min={1}
+              placeholder={DEFAULT_LIMIT.toString()}
+              onChange={changeLimit}
+              onBlur={getLimit}
+              onKeyDown={onLimitKeyDown}
+            />
+          </div>
+          <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+            {state.isRunning ? (
+              <button
+                className="btn__dropdown-combo__canceler data-quality-relation-comparison-editor__actions-bar__cancel-btn"
+                onClick={cancelRun}
+                tabIndex={-1}
+              >
+                <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label data-quality-relation-comparison-editor__actions-bar__cancel-label">
+                  <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                  <div className="btn__dropdown-combo__canceler__label__title">
+                    Stop
+                  </div>
+                </div>
+              </button>
+            ) : (
+              <div className="data-quality-relation-comparison-editor__actions-bar__run-group">
+                <button
+                  className="btn__dropdown-combo__label data-quality-relation-comparison-editor__actions-bar__run-btn"
+                  onClick={runReconciliation}
+                  title="Run Data Comparison"
+                  disabled={isRunning}
+                  tabIndex={-1}
+                >
+                  <PlayIcon className="btn__dropdown-combo__label__icon" />
+                  <div className="btn__dropdown-combo__label__title">
+                    Run Data Comparison
+                  </div>
+                </button>
+                <ControlledDropdownMenu
+                  className="btn__dropdown-combo__dropdown-btn data-quality-relation-comparison-editor__actions-bar__dropdown-btn"
+                  disabled={isRunning}
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={runSourceQuery}
+                      >
+                        Run Source Query
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="btn__dropdown-combo__option"
+                        onClick={runTargetQuery}
+                      >
+                        Run Target Query
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: {
+                      vertical: 'bottom',
+                      horizontal: 'right',
+                    },
+                    transformOrigin: {
+                      vertical: 'top',
+                      horizontal: 'right',
+                    },
+                  }}
+                >
+                  <CaretDownIcon />
+                </ControlledDropdownMenu>
+              </div>
+            )}
+          </div>
+        </div>
+        <PanelContent>
+          <div className="data-quality-relation-comparison-editor__queries">
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel minSize={200}>
+                <div className="data-quality-relation-comparison-editor__query-panel">
+                  <div className="data-quality-relation-comparison-editor__query-panel__header">
+                    <div className="data-quality-relation-comparison-editor__query-panel__title">
+                      SOURCE QUERY
+                    </div>
+                  </div>
+                  <div
+                    className={clsx(
+                      'data-quality-relation-comparison-editor__query-panel__content',
+                      {
+                        backdrop__element: Boolean(
+                          state.sourceLambdaEditorState.parserError,
+                        ),
+                      },
+                    )}
+                  >
+                    <LambdaEditor
+                      className="data-quality-relation-comparison-editor__lambda-editor lambda-editor--dark"
+                      disabled={
+                        state.sourceLambdaEditorState
+                          .isConvertingFunctionBodyToString
+                      }
+                      lambdaEditorState={state.sourceLambdaEditorState}
+                      forceBackdrop={false}
+                      autoFocus={false}
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine color="var(--color-dark-grey-250)" />
+              </ResizablePanelSplitter>
+              <ResizablePanel minSize={200}>
+                <div className="data-quality-relation-comparison-editor__query-panel">
+                  <div className="data-quality-relation-comparison-editor__query-panel__header">
+                    <div className="data-quality-relation-comparison-editor__query-panel__title">
+                      TARGET QUERY
+                    </div>
+                  </div>
+                  <div
+                    className={clsx(
+                      'data-quality-relation-comparison-editor__query-panel__content',
+                      {
+                        backdrop__element: Boolean(
+                          state.targetLambdaEditorState.parserError,
+                        ),
+                      },
+                    )}
+                  >
+                    <LambdaEditor
+                      className="data-quality-relation-comparison-editor__lambda-editor lambda-editor--dark"
+                      disabled={
+                        state.targetLambdaEditorState
+                          .isConvertingFunctionBodyToString
+                      }
+                      lambdaEditorState={state.targetLambdaEditorState}
+                      forceBackdrop={false}
+                      autoFocus={false}
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          <div className="data-quality-relation-comparison-editor__panel__content__form">
+            {hasColumnFetchError && (
+              <div className="data-quality-relation-comparison-editor__column-fetch-error">
+                <ExclamationTriangleIcon className="data-quality-relation-comparison-editor__column-fetch-error__icon" />
+                <span className="data-quality-relation-comparison-editor__column-fetch-error__message">
+                  {columnFetchError}
+                </span>
+                <button
+                  className="data-quality-relation-comparison-editor__column-fetch-error__retry-btn btn--dark btn--sm"
+                  onClick={retryFetchColumns}
+                  disabled={isFetchingColumns}
+                  tabIndex={-1}
+                >
+                  <RefreshIcon />
+                  <span>Retry</span>
+                </button>
+              </div>
+            )}
+            {hasNoOverlappingColumns && (
+              <div className="data-quality-relation-comparison-editor__column-overlap-warning">
+                <ExclamationTriangleIcon className="data-quality-relation-comparison-editor__column-overlap-warning__icon" />
+                <span className="data-quality-relation-comparison-editor__column-overlap-warning__message">
+                  No overlapping columns found between source and target
+                  queries. The Keys and Columns to Compare selectors require at
+                  least one common column name across both queries.
+                </span>
+              </div>
+            )}
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Keys
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Columns used as join keys between source and target
+              </div>
+              <DataQualityMultiCustomSelector
+                value={selectedKeyOptions}
+                onChange={(values) =>
+                  state.setKeys(values.map((option) => option.value))
+                }
+                options={combinedColumnOptions}
+                placeholder="Select keys..."
+                disabled={columnsDisabled}
+                darkMode={darkMode}
+              />
+            </PanelFormSection>
+
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Columns to Compare
+              </div>
+              <DataQualityMultiCustomSelector
+                value={selectedColumnsToCompareOptions}
+                onChange={(values) =>
+                  state.setColumnsToCompare(
+                    values.map((option) => option.value),
+                  )
+                }
+                options={combinedColumnOptions}
+                placeholder="Select columns to compare..."
+                disabled={columnsDisabled}
+                darkMode={darkMode}
+              />
+            </PanelFormSection>
+
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Source Hash Column
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                If a source hash column already exists you can specify it here
+                (optional)
+              </div>
+              <CustomSelectorInput
+                value={sourceHashColumnValue ?? null}
+                options={sourceColumnOptions}
+                onChange={(opt: { value: string; label: string } | null) => {
+                  state.setSourceHashColumn(opt?.value);
+                }}
+                placeholder="Select source hash column..."
+                isClearable={true}
+                darkMode={darkMode}
+                disabled={columnsDisabled}
+              />
+            </PanelFormSection>
+            <PanelFormSection>
+              <div className="panel__content__form__section__header__label">
+                Target Hash Column
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                If a target hash column already exists you can specify it here
+                (optional)
+              </div>
+              <CustomSelectorInput
+                value={targetHashColumnValue ?? null}
+                options={targetColumnOptions}
+                onChange={(opt: { value: string; label: string } | null) => {
+                  state.setTargetHashColumn(opt?.value);
+                }}
+                placeholder="Select target hash column..."
+                isClearable={true}
+                darkMode={darkMode}
+                disabled={columnsDisabled}
+              />
+            </PanelFormSection>
+            <PanelFormBooleanField
+              name="Aggregated Hash"
+              prompt="Compare data at a group level using keys, or compare entire datasets as a whole when no keys are provided."
+              value={md5Strategy.aggregatedHash}
+              isReadOnly={false}
+              update={(value) => state.setAggregatedHash(value)}
+            />
+          </div>
+
+          <div className="data-quality-relation-comparison-editor__result">
+            <div className="data-quality-relation-comparison-editor__result__header">
+              <div className="data-quality-relation-comparison-editor__result__header-group">
+                <div className="data-quality-relation-comparison-editor__result__title">
+                  RESULT
+                </div>
+                {isRunning && (
+                  <div className="data-quality-relation-comparison-editor__result__status">
+                    {state.currentExecutionType ===
+                    RECONCILIATION_EXECUTION_TYPE.RECONCILIATION
+                      ? 'Running Data Comparison...'
+                      : state.currentExecutionType ===
+                          RECONCILIATION_EXECUTION_TYPE.SOURCE_QUERY
+                        ? 'Running Source Query...'
+                        : 'Running Target Query...'}
+                  </div>
+                )}
+                <div className="data-quality-relation-comparison-editor__result__analytics">
+                  {resultDescription ?? ''}
+                </div>
+              </div>
+            </div>
+            <div className="data-quality-relation-comparison-editor__result__content">
+              <div className="data-quality-relation-comparison-editor__result__viewer">
+                {renderResult()}
+              </div>
+            </div>
+          </div>
+        </PanelContent>
+      </Panel>
+      {state.sourceParametersState.parameterValuesEditorState.showModal && (
+        <LambdaParameterValuesEditor
+          graph={editorStore.graphManagerState.graph}
+          observerContext={editorStore.changeDetectionState.observerContext}
+          lambdaParametersState={state.sourceParametersState}
+        />
+      )}
+      {state.targetParametersState.parameterValuesEditorState.showModal && (
+        <LambdaParameterValuesEditor
+          graph={editorStore.graphManagerState.graph}
+          observerContext={editorStore.changeDetectionState.observerContext}
+          lambdaParametersState={state.targetParametersState}
+        />
+      )}
+      {state.comparisonParametersEditorState.showModal && (
+        <DataQualityRelationComparisonParametersEditor state={state} />
+      )}
+    </div>
+  );
+});