Skip to content

FE-1558: Fuzzy-search prototypes for the ad-hoc scenario form - #9453

Draft
kube wants to merge 2 commits into
cf/fe-1518-optimization-constraintsfrom
cf/fe-1558-form-search-prototypes
Draft

FE-1558: Fuzzy-search prototypes for the ad-hoc scenario form#9453
kube wants to merge 2 commits into
cf/fe-1518-optimization-constraintsfrom
cf/fe-1558-form-search-prototypes

Conversation

@kube

@kube kube commented Aug 30, 2026

Copy link
Copy Markdown
Collaborator

🌟 What is the purpose of this PR?

Stacked on #9371. Four playable Storybook prototypes for fuzzy-finding parameters, Variables, and places in the ad-hoc scenario form, layered over the real form with a large generated fixture, so the interaction patterns can be compared and one picked.

🔗 Related links

🔍 What does this change?

Everything lives under src/ui/dev/form-search-prototypes/ (Storybook-only, nothing ships; see its README). Open Dev / Form Search Prototypes:

  • A · Command palette — ⌘K overlay with a ranked, kind-chipped, match-highlighted list; Enter jumps: scroll, focus (focus is selection in the worksheet model), amber flash on the landing trigger.
  • B · Filter in place — a persistent box that dims every non-matching row, keeping matches in their spatial context, with an honest "n of m names match" count.
  • C · Quickfind/ opens a browser-find bar; Enter/Shift+Enter cycle the focus flash through matches while the bar keeps the keyboard; Escape hands focus to the current match.
  • D · Outline rail — a permanent grouped index beside the form with a filter on top; doubles as a map of the model.
  • Shared, unit-tested core: an fzf-style fuzzy scorer (word-start/consecutive bonuses, with a feasibility guard so a camelCase anchor cannot strand the rest of the query) and a name index whose entries carry the form's real adHocTargetLabel aria-labels, so jumps resolve against the actual triggers.
  • The harness mounts the REAL AdHocScenarioForm (live LSP + Monaco) with a generated bottling-plant fixture: 18 parameters, 12 Variables, 12 places, per-place variables.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

Files sit inside @hashintel/petrinaut but are Storybook-only (no shipped entry point imports them).

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph

⚠️ Known issues

  • B's dimming is painted onto the rendered rows from outside the form (prototype-grade); a shipped filter would thread through the form's rendering instead.
  • Jumps cannot enter collapsed places (the worksheet skips collapsed members); the fixture renders expanded, and a shipped version would expand on jump.

🐾 Next steps

  • Pick a pattern (A and B compose well: one index, palette + in-place dimming) and decide where it ships — the form itself vs each host panel.

🛡 What tests cover this?

  • fuzzy.test.ts (11 tests): subsequence matching, word-start preference and its feasibility guard, positions for highlighting, ranking, and the index's aria-label conventions against the big fixture.

❓ How to test this?

  1. yarn exec turbo run dev --filter @hashintel/petrinaut and open Storybook (port 6006).
  2. Open Dev / Form Search Prototypes, stories A–D.
  3. A: ⌘K, type a fragment ("filltime", "breakroom"), Enter — the form scrolls and the landing cell flashes. B: type "rate" and watch non-matches dim. C: press /, type, Enter repeatedly. D: filter and click in the rail.

📹 Demo

Screenshots pending — placeholder for drag-drop.

@vercel

vercel Bot commented Aug 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview Aug 30, 2026 6:08pm
petrinaut Ready Ready Preview Aug 30, 2026 6:08pm
petrinaut-docs Ready Ready Preview Aug 30, 2026 6:08pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
hashdotdesign-tokens Ignored Ignored Preview Aug 30, 2026 6:08pm

Request Review

@github-actions github-actions Bot added area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps > hash.design Affects the `hash.design` design site (app) labels Aug 30, 2026
Comment on lines +25 to +29
const current = haystack[index]!;
if (/[\s_\-›./]/.test(previous)) {
return true;
}
return /[a-z]/.test(previous) && /[A-Z]/.test(current);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Semgrep identified an issue in your code:
Ensure that the regex used to compare with user supplied input is safe from regular expression denial of service.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

  • /fp <comment> for false positive
  • /ar <comment> for acceptable risk
  • /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by regex_dos.

You can view more details about this finding in the Semgrep AppSec Platform.

Comment on lines +24 to +29
const previous = haystack[index - 1]!;
const current = haystack[index]!;
if (/[\s_\-›./]/.test(previous)) {
return true;
}
return /[a-z]/.test(previous) && /[A-Z]/.test(current);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Semgrep identified an issue in your code:
Ensure that the regex used to compare with user supplied input is safe from regular expression denial of service.

To resolve this comment:

🔧 No guidance has been designated for this issue. Fix according to your organization's approved methods.

💬 Ignore this finding

Reply with Semgrep commands to ignore this finding.

  • /fp <comment> for false positive
  • /ar <comment> for acceptable risk
  • /other <comment> for all other reasons

Alternatively, triage in Semgrep AppSec Platform to ignore the finding created by regex_dos.

You can view more details about this finding in the Semgrep AppSec Platform.

Comment on lines +24 to +29
const previous = haystack[index - 1]!;
const current = haystack[index]!;
if (/[\s_\-›./]/.test(previous)) {
return true;
}
return /[a-z]/.test(previous) && /[A-Z]/.test(current);
Comment on lines +25 to +29
const current = haystack[index]!;
if (/[\s_\-›./]/.test(previous)) {
return true;
}
return /[a-z]/.test(previous) && /[A-Z]/.test(current);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

2 participants