Skip to content

feat(frontend): let the user define a join in the preview step - #190

Open
tonio wants to merge 1 commit into
feat/GSMEL-1255from
feat/GSMEL-1223
Open

tonio wants to merge 1 commit into
feat/GSMEL-1255from
feat/GSMEL-1223

Conversation

@tonio

@tonio tonio commented Oct 14, 2026

Copy link
Copy Markdown
Contributor

GSMEL-1223: define a join in the preview step

Based on #185 (backend: join config, LEFT JOIN in preview, joinable tables/columns endpoints). Merge that one first.

What

  • A Join toggle next to the dataset title opens a section to pick:
    • a reference table (dataset title, table name as subtitle);
    • the source join key, then the reference join key;
    • the columns to add (chips, hover to remove).
  • Joined columns appear read-only, on a green background, after the source columns in the preview. The table scrolls to the right on each addition.
  • A red marker on the toggle shows that columns are joined.

Rules

  • The join is saved only once a column is added. Changing the table resets the reference key and the columns.
  • A joined column named like an output column is flagged like a duplicate rename. Validation is blocked and the column is left out of the saved join. This mirrors the backend rules: excluded columns do not count, and geom is taken when the point is built from X/Y.
  • The join is restored from the saved metadata on reload.

Notes

  • The wizard now renders a single preview table (instead of one per geographic branch), so adding a joined geom no longer recreates it and loses the scroll.
  • The join toggle is projected into app-dataset-title to stay aligned with the title field, with or without a validation error.
  • Translations: EN and FR only, other languages left empty as usual.

Test

  1. Import a CSV with a key matching a published dataset (e.g. INSEE codes).
  2. Open Join, pick the table and both keys, then add a few columns and geom. The preview fills the green columns and the map tab becomes available.
  3. Add a column with an existing name. The header shows an error and Validate is disabled.
  4. Reload. The join is restored.

A "Join" toggle next to the dataset title opens a section to pick a
reference table (dataset title, table name as subtitle), the source and
reference join keys, then the columns to add. Changing the table resets
the reference key and the added columns. The toggle shows a marker while
columns are added.

The join is saved in the transformation only once a column is added.
Joined columns are shown read-only and in green after the source columns
of the preview, which scrolls to the right on each addition. A joined
column named like an output column of the preview is flagged like a
duplicate rename: it blocks validation and is left out of the saved join.
As in the backend, excluded columns do not count, and geom is taken when
the point is built from X/Y. Failing to load the joinable tables or
columns shows an error above the step.

The wizard now renders a single preview table instead of one per
geographic branch, so adding a joined geom no longer recreates it.

GSMEL-1223
@tonio
tonio marked this pull request as ready for review October 14, 2026 13:03

@tkohr tkohr left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @tonio, nice feature with clear UX ! The code LGTM, just left some minor comments inline.

Works mostly flawless, the only things I noticed testing:

  • Couldn't change the column name of a column with a naming conflict as the input is not editable (see screenshot below)
  • Keyboard arrow navigation on dataset selection does not seem to work
  • Our gn-ui dropdowns do not seem to support selecting an option by typing its value, which can be practical in long lists (not related to this PR though)
Image

<gn-ui-button
data-test="join-toggle"
type="outline"
extraClass="h-14"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could also be achieved via the css var approach I think:

Suggested change
extraClass="h-14"
[style.--gn-ui-button-height]="'3.5rem'"

this.saveConfigAndRefresh()
}

async toggleJoin(): Promise<void> {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've noticed that there is a lot of join logic in the wizard component now and was wondering if there'd be a way to move some of it out of there!?

<gn-ui-button
data-table-select
type="outline"
extraClass="bg-background flex flex-row w-full"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could probably also be achieved in the style binding if it's not already part of the gn-ui-button style.

}
</div>

<ng-template

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we use a gn-ui-dropdown-selector for the first dropdown? I've noticed that I can't navigate with the keyboard arrows in this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants