233 add reductselect to builder by Marrii00 · Pull Request #246 · reductstore/web-console

Marrii00 · 2026-09-04T12:40:02Z

Closes #233

Please check if the PR fulfills these requirements

Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)
CHANGELOG.md has been updated (for bug fixes / features / docs)

What kind of change does this PR introduce?

Feature.

What was changed?

Added a "Process (Select)" step to the Data Explorer's Conditional Query builder, letting users configure a ReductSelect transform (SQL expression, output format, and label mapping) visually instead of hand-writing the #ext JSON.

New SelectStepEditor component with a unified "+ Add option" dropdown (Format / Protobuf / Export / As label), mirroring the existing ReductROS step's conventions: options stay visible but greyed out with a tooltip when unavailable instead of being hidden, and row-list options (Protobuf fields, As label) reuse the same button to add both the first row and subsequent ones.
CSV, JSON, and Parquet are grouped under a single "Format" option with a segmented control to switch between them, since they're mutually exclusive alternatives of the same slot; Protobuf (with a message name/schema pair and a dedicated 3-column field list for column/id/type) and Export (format/rows/duration) are separate, independently addable sections.
Generalized the internal TransformStepEntry type into a discriminated union (ros | select) so the builder can host either transform kind, with all existing ReductROS behavior and tests unchanged.
Extracted the shared key/value row-list UI (KeyValueRowList) out of the ReductROS editor so both transform kinds reuse it.
Fixed a pre-existing responsiveness bug where the Label filter's "Where" row could overflow its card on narrow viewports.
Various row-alignment and width tweaks across the builder so remove buttons and input columns line up consistently between sections.

Related issues

Closes #233.

Does this PR introduce a breaking change?

No. This only adds a new, optional step type to the builder; existing ReductROS steps and hand-written JSON queries are unaffected.

Other information:

None.

Copilot

🟡 Changes recommended

The Select payload parsing/building currently permits invalid/unsupported format combinations and protobuf field ids, which can produce inconsistent UI states and invalid #ext.select output.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a new “Process (Select)” transform step to the Conditional Query builder, enabling visual configuration of a ReductSelect #ext.select payload alongside the existing ROS transform.

Changes:

Introduces Select transform state, mutators, payload build/parse logic, and test coverage in transformStepBuilder.
Adds SelectStepEditor UI (plus reusable row-list components) and wires it into the builder/block list with new tests.
Tweaks row layout constants and fixes a narrow-viewport overflow in the label filter editor.

File summaries

File	Description
src/Helpers/transformStepBuilder.ts	Adds Select transform model/mutators plus build/parse handling for `#ext.select`.
src/Helpers/transformStepBuilder.test.ts	Expands unit tests to cover Select transform behavior and ROS/Select exclusivity.
src/Components/QueryConditionBuilder/TransformStepEditor.tsx	Extracts shared key/value row-list UI and improves export row wrapping.
src/Components/QueryConditionBuilder/stepRowLayout.ts	Adjusts shared widths and adds protobuf/export-specific width constants.
src/Components/QueryConditionBuilder/SelectStepEditor.tsx	New editor UI for Select transform configuration (SQL, format, protobuf, export, as_label).
src/Components/QueryConditionBuilder/SelectStepEditor.test.tsx	New component tests for SelectStepEditor interactions and menu behavior.
src/Components/QueryConditionBuilder/QueryConditionBuilder.tsx	Wires Select transform creation and mutation handlers into builder state updates.
src/Components/QueryConditionBuilder/QueryConditionBuilder.test.tsx	Adds integration tests for Process (Select) block behavior and `#ext` output.
src/Components/QueryConditionBuilder/QueryBlockList.tsx	Adds Process (Select) block rendering and add-step menu gating vs ROS.
src/Components/QueryConditionBuilder/QueryBlockList.test.tsx	Updates/adds tests for new Process (Select) menu and block behavior.
src/Components/QueryConditionBuilder/ProtobufFieldRowList.tsx	New UI for editing protobuf field mapping rows (column/id/type).
src/Components/QueryConditionBuilder/LabelConditionEditor.tsx	Fixes narrow-viewport overflow by allowing wrapping and simplifying sizing.
src/Components/QueryConditionBuilder/KeyValueRowList.tsx	New shared key/value row-list component reused by ROS + Select editors.

Review details

Files reviewed: 14/14 changed files
Comments generated: 4
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

…cting Select formats

AnthonyCvn

move steps to components folder

AnthonyCvn · 2026-09-07T15:05:17Z

+  interface Window {
+    __sqlCompletionProviderDisposable?: IDisposable;
+  }
+}


is it for vitest ?

Not related to vitest. It's there to handle Vite's hot reload in dev: without it, every time a file is saved, the module reloads and re-registers the autocomplete provider without removing the old one, so suggestions end up appearing duplicated. This bit of code just cleans up the old provider before registering a new one. In production this never happens, since the module only loads once.

yeah but it's not best practice in React. Please check implementation of JsonQueryEditor. It is the same, also with auto-complete.

Done, merged them into one QueryEditor component, used for both JSON and SQL now.

AnthonyCvn · 2026-09-07T15:09:41Z

+          <Button
+            aria-label={onlyRow ? sectionRemoveLabel : removeLabel}
+            type="text"
+            icon={<CloseOutlined style={{ transform: "scale(0.65)" }} />}


to check if we need a transform or fixed size here

it was already there since #243 (issue #238), in TransformStepEditor.tsx's icons. Since we're already moving/touching these files here, I fixed it everywhere it showed up (9 spots across 6 files) instead of leaving it inconsistent, and centralized the value into a new ROW_ICON_FONT_SIZE constant in stepRowLayout.ts, matching how the other shared sizing constants (ROW_LABEL_WIDTH, ROW_INPUT_WIDTH, etc.) already work there.

…ponents

AnthonyCvn

Combining ReductSelect with ReductROS should be possible from the builder:

{
  "$each_t": "$__interval",
  "#ext": {
    "ros": {
      "extract": {}
    },
    "select": {
      "sql": "SELECT * FROM ENTRY()"
    }
  }
}

AnthonyCvn · 2026-09-08T14:10:44Z

    "@dnd-kit/utilities": "^3.2.2",
    "@monaco-editor/react": "^4.7.0",
-    "@reductstore/reduct-query-monaco": "^1.0.1",
+    "@reductstore/reduct-query-monaco": "github:reductstore/reduct-query-monaco#feat/sql-completion-provider",


You should test locally with npm link without touching package.json. We can update the version here once reduct-query-monaco is published.

reverted the dependency

AnthonyCvn · 2026-09-08T14:27:19Z

+          SELECT * FROM ENTRY()
+        </div>
+      )}
+      <Editor


Would it make sense to reuse the JsonQueryEditor and make it universal as queryEditor so it can be used for JSON and SQL? it has more options to resize, format and so on which is missing here and would be great to have as an editor.

Yes good idea, i'll implement it

AnthonyCvn · 2026-09-08T14:33:42Z

Did you understand why i get "column_0" there ?

Marrii00 · 2026-09-08T15:04:07Z

Did you understand why i get "column_0" there ?

I implemented it because the ReductSelect docs say CSV files without a header get their columns named column_0, column_1, etc. It's specific to CSV, doesn't really apply to other formats. I show it as a reminder of that naming convention, not a real detected column, since the provider has no access to the actual data behind a query.

I wanted to stay close to what the docs describe and figured it'd be a useful hint, but maybe I'm wrong about that. If it's more confusing than helpful, I can just remove it from the suggestions?

…ocks

…d-editor border

… order

…ons, type-to-autocomplete

…ant request

AnthonyCvn

Can we also remove the "shadow" below an element when it moves ?

And unrelated but the button like we used to have was somehow nicer on the left =) if can move it back on this PR it would be great, otherwise next one.

AnthonyCvn · 2026-09-10T07:41:09Z

@@ -85,7 +118,7 @@ export default function QueryBlockList({
  blockOrder,


Too many pops, use composition instead.

Added a new file (builderReducer.ts) centralizing all state updates through a single useReducer.

AnthonyCvn · 2026-09-10T07:48:42Z

+  onChangeSelectExport,
+  onAddAsLabelRow,
+  onChangeAsLabelRow,
+  onRemoveAsLabelRow,


Here you can use useReducer hook from react to dispatch your changes.

Same as for QueryBlockList.tsx. Added a new file (builderReducer.ts) centralizing all state updates through a single useReducer.

AnthonyCvn · 2026-09-10T08:00:45Z

+  updateSelectExport,
+  updateSql,
  updateTopic,
 } from "../../Helpers/transformStepBuilder";


You can also use the useReducer hook for the QueryConditionBuilder

Same as for QueryBlockList.tsx. Added a new file (builderReducer.ts) centralizing all state updates through a single useReducer.

AnthonyCvn · 2026-09-10T08:04:30Z

-  );
-}
-
 interface TransformStepEditorProps {


TransformStepEditor can also use composition + useReducer hook

Done, TransformStepEditor now takes a single dispatch prop instead of the individual callbacks

…ucer

…ough dispatch

…assed via actions)

Marrii00 added 5 commits September 4, 2026 09:32

Add ReductSelect csv/json/parquet/protobuf/export data model

dda34e1

Extract shared row-list UI and add a protobuf field row list

6c4706f

Fix the Label filter row overflowing on narrow cards

2938804

Simplify the select payload parsing and rebalance shared row widths

05ddfac

Wire ReductSelect into the Conditional Query builder

dfe96ff

Copilot AI lite review requested due to automatic review settings September 4, 2026 12:40

Marrii00 linked an issue Sep 4, 2026 that may be closed by this pull request

Add ReductSelect to builder #233

Open

Copilot started reviewing on behalf of Marrii00 September 4, 2026 12:40 View session

Update CHANGELOG for PR #246

04773da

Copilot AI reviewed Sep 4, 2026

View reviewed changes

Comment thread src/Components/QueryConditionBuilder/ProtobufFieldRowList.tsx

Comment thread src/Components/QueryConditionBuilder/SelectStepEditor.tsx Outdated

Comment thread src/Helpers/transformStepBuilder.ts Outdated

Comment thread src/Helpers/transformStepBuilder.ts

Marrii00 added 3 commits September 4, 2026 13:00

Address Copilot review: validate protobuf field ids and reject confli…

7f7fbf3

…cting Select formats

Default a new Select step's SQL to SELECT * FROM ENTRY()

8742c71

Add a Monaco SQL editor and fold Protobuf into the Format switch

927cdb4

Copilot stopped work on behalf of Marrii00 due to an error September 7, 2026 13:50
The session was cancelled by the user.

AnthonyCvn requested changes Sep 7, 2026

View reviewed changes

Marrii00 added 3 commits September 8, 2026 11:13

Move step editors and their shared helpers into src/Components/Steps

e878c9e

Replace icon scale transforms with a shared fixed font size

0e72bcf

Deduplicate step editor layout: shared wrap-row style and section com…

e7038da

…ponents

Marrii00 requested a review from AnthonyCvn September 8, 2026 12:43

AnthonyCvn requested changes Sep 8, 2026

View reviewed changes

Revert git dependency on reduct-query-monaco

dbbe304

Marrii00 added 6 commits September 8, 2026 16:40

Allow ReductSelect and ReductROS to coexist as independent Process bl…

0fce163

…ocks

Stop mounting a live Monaco editor inside the drag overlay clone

1eab2c9

Generalize JsonQueryEditor into a universal QueryEditor for JSON and SQL

ee4d76b

Wire the generalized QueryEditor into its consumers and fix the neste…

aac8d85

…d-editor border

Contain query builder crashes with an error boundary

9275e68

Always emit ros before select in the ext payload, regardless of block…

7832014

… order

Marrii00 requested a review from AnthonyCvn September 9, 2026 12:41

Marrii00 added 2 commits September 9, 2026 13:35

Align SQL editor with JSON editor: default height, right-aligned acti…

5d1da72

…ons, type-to-autocomplete

Revert: render full content in the drag overlay clone again, per mand…

0ee5dcc

…ant request

AnthonyCvn requested changes Sep 10, 2026

View reviewed changes

Marrii00 added 5 commits September 10, 2026 08:34

Move the Run Query button to the left with the status label after it

615699e

Hide the original card entirely while dragging instead of a faint ghost

1bd319c

Replace QueryConditionBuilder's 4 useState calls with a single useRed…

0b6d8d3

…ucer

Simplify QueryBlockList to generic composition, wire step editors thr…

b06156b

…ough dispatch

Clean up builder refactor redundancy and make the reducer pure (ids p…

8183079

…assed via actions)

Marrii00 requested a review from AnthonyCvn September 10, 2026 12:28

		@@ -85,7 +118,7 @@ export default function QueryBlockList({
		blockOrder,

Uh oh!

Conversation

Marrii00 commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Please check if the PR fulfills these requirements

What kind of change does this PR introduce?

What was changed?

Related issues

Does this PR introduce a breaking change?

Other information:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AnthonyCvn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnthonyCvn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnthonyCvn commented Sep 8, 2026

Uh oh!

Marrii00 commented Sep 8, 2026

Uh oh!

AnthonyCvn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Marrii00 commented Sep 4, 2026 •

edited

Loading