spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

SQL Playground: Cross-pane keyword highlighting between lesson instructions and Data Sources #142

New Issue
Closed
opened 2026-05-15 14:10:40 +00:00 by spikerj · 0 comments
spikerj commented 2026-05-15 14:10:40 +00:00
Owner
Copy Link
Copy Source

Summary

When a student hovers a backtick-wrapped keyword (table name, column name) in the SQL lesson instructions, the corresponding entry in the Data Sources pane now highlights with an accent glow, auto-expands if collapsed, and smooth-scrolls into view. This creates an instant visual link between "the word in the prose" and "that table/column over there" — helping students understand the relationship between instruction text and the database schema.

What was implemented

New files

  • libraries/shared/lesson-panes/src/lib/_shared/keyword-highlight-handler.ts — shared KeywordHighlightHandler interface + KEYWORD_HIGHLIGHT_HANDLER DI token
  • libraries/features/dev-tools-sql-runner/src/lib/sql-highlight.service.ts — SQL playground's signal-based implementation

Modified files

  • libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.ts — @Optional() injection of the handler + onKeywordHover/onKeywordLeave methods
  • libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.html — (mouseenter)/(mouseleave) on code.inline-code chips in both instructions and hints
  • libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.scss — cursor: help + soft hover ring on inline-code chips for discoverability
  • libraries/features/dev-tools-sql-runner/src/lib/sql-data-sources-pane.component.ts — reads highlight signal, exposes isTableHighlighted/isColumnHighlighted, force-opens matching <details>, smooth-scrolls into view
  • libraries/features/dev-tools-sql-runner/src/lib/sql-data-sources-pane.component.scss — accent glow + 1.6s pulse animation on .highlighted table sections and column rows
  • libraries/features/dev-tools-sql-runner/src/lib/sql-runner.ts — provides SqlHighlightService + binds to KEYWORD_HIGHLIGHT_HANDLER at component level
  • libraries/shared/lesson-panes/src/index.ts — exports the new token/interface
  • libraries/features/dev-tools-sql-runner/src/index.ts — exports SqlHighlightService
  • libraries/features/dev-tools-sql-runner/package.json — added @spikersoft/shared-lesson-panes peer dep

Bonus cleanup

  • Removed the redundant Data Sources / Curriculum segmented-control footer from the left pane (already accessible via the View menu)
  • Fixed horizontal scrollbar overflow on the Data Sources pane

Architecture

Uses an optional DI token (KEYWORD_HIGHLIGHT_HANDLER) so the shared LessonPane component stays free of feature-library dependencies. Only the SQL playground provides the handler; C#, Python, and JavaScript playgrounds silently ignore hover events. The SqlHighlightService holds a single Angular signal (highlightedToken) that the Data Sources pane reads reactively — zero changes to the LanguageRunner intermediary.

Key behaviors

  • Case-insensitive matching (travelers, TRAVELERS, Travelers all match)
  • Non-schema keywords (e.g. SELECT, *) silently no-op — no jarring scroll
  • Theme-aware: highlights match the active theme's table/column names
  • Column names like id that appear in multiple tables highlight all matches
## Summary When a student hovers a backtick-wrapped keyword (table name, column name) in the SQL lesson instructions, the corresponding entry in the Data Sources pane now highlights with an accent glow, auto-expands if collapsed, and smooth-scrolls into view. This creates an instant visual link between "the word in the prose" and "that table/column over there" — helping students understand the relationship between instruction text and the database schema. ## What was implemented ### New files - `libraries/shared/lesson-panes/src/lib/_shared/keyword-highlight-handler.ts` — shared `KeywordHighlightHandler` interface + `KEYWORD_HIGHLIGHT_HANDLER` DI token - `libraries/features/dev-tools-sql-runner/src/lib/sql-highlight.service.ts` — SQL playground's signal-based implementation ### Modified files - `libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.ts` — `@Optional()` injection of the handler + `onKeywordHover`/`onKeywordLeave` methods - `libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.html` — `(mouseenter)`/`(mouseleave)` on `code.inline-code` chips in both instructions and hints - `libraries/shared/lesson-panes/src/lib/lesson-pane/lesson-pane.scss` — `cursor: help` + soft hover ring on inline-code chips for discoverability - `libraries/features/dev-tools-sql-runner/src/lib/sql-data-sources-pane.component.ts` — reads highlight signal, exposes `isTableHighlighted`/`isColumnHighlighted`, force-opens matching `<details>`, smooth-scrolls into view - `libraries/features/dev-tools-sql-runner/src/lib/sql-data-sources-pane.component.scss` — accent glow + 1.6s pulse animation on `.highlighted` table sections and column rows - `libraries/features/dev-tools-sql-runner/src/lib/sql-runner.ts` — provides `SqlHighlightService` + binds to `KEYWORD_HIGHLIGHT_HANDLER` at component level - `libraries/shared/lesson-panes/src/index.ts` — exports the new token/interface - `libraries/features/dev-tools-sql-runner/src/index.ts` — exports `SqlHighlightService` - `libraries/features/dev-tools-sql-runner/package.json` — added `@spikersoft/shared-lesson-panes` peer dep ### Bonus cleanup - Removed the redundant Data Sources / Curriculum segmented-control footer from the left pane (already accessible via the View menu) - Fixed horizontal scrollbar overflow on the Data Sources pane ## Architecture Uses an optional DI token (`KEYWORD_HIGHLIGHT_HANDLER`) so the shared `LessonPane` component stays free of feature-library dependencies. Only the SQL playground provides the handler; C#, Python, and JavaScript playgrounds silently ignore hover events. The `SqlHighlightService` holds a single Angular signal (`highlightedToken`) that the Data Sources pane reads reactively — zero changes to the `LanguageRunner` intermediary. ## Key behaviors - Case-insensitive matching (`travelers`, `TRAVELERS`, `Travelers` all match) - Non-schema keywords (e.g. `SELECT`, `*`) silently no-op — no jarring scroll - Theme-aware: highlights match the active theme's table/column names - Column names like `id` that appear in multiple tables highlight all matches
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#142