#262 Interaction Panel Implementation #290

SaqAsh · 2025-06-09T19:42:21Z

Summary

Implementing the rest of the remaining tickets inside of the interaction panel, with the associated stories for appropriate testing

see tickets: #273 and #274 for details on current blocked items

Issues

Description of Changes

Most changes were just porting over the components from stage however there are some components that are incomplete/blocked due to requirements that are not yet possible from the present functionality of lectern.

Readiness Checklist

Self Review
- I have performed a self review of code
- I have run the application locally and manually tested the feature
- I have checked all updates to correct typos and misspellings
Formatting
- Code follows the project style guide
- Autmated code formatters (ie. Prettier) have been run
Local Testing
- Successfully built all packages locally
- Successfully ran all test suites, all unit and integration tests pass
Updated Tests
- Unit and integration tests have been added that describe the bug that was fixed or the features that were added
Documentation
- All new environment variables added to .env.schema file and documented in the README
- All changes to server HTTP endpoints have open-api documentation
- All new functions exported from their module have TSDoc comment documentation

…ma design

…use it for action items

…button

…ributes

…tents and update the stories

…r-dropdown Fix naming for list comopnent

… better organization

merge dictionary component

merge pr suggestions

…ction-panel

merge pr changes from header component

ciaranschutte

couple of small changes to start with.

I'll take a look if there's a cleaner way to do the disabled state being passed in as props everywhere. a context provider might make sense, but adds some complexity.

There's also maybe a slightly cleaner way to compose css with emotion that I will verify.
Because emotion serializes to classNames, you basically create css.. fragments and conditionally apply them using https://www.npmjs.com/package/clsx

packages/ui/src/viewer-table/InteractionPanel/AttributeFilterDropdown.tsx

packages/ui/src/viewer-table/InteractionPanel/DictionaryVersionSwitcher.tsx

packages/ui/src/viewer-table/InteractionPanel/InteractionPanel.tsx

…ropdown.tsx Co-authored-by: Ciarán Schütte <[email protected]>

ciaranschutte

looking good. requesting changes because I'll have to re-approve anyway ;)

ciaranschutte · 2025-06-26T19:06:20Z

packages/ui/stories/viewer-table/interaction-panel/InteractionPanel.stories.tsx

+// When we are at multiple versions, then the version switcher is now rendered, this is to test that behavior
+export const Default: Story = {
+	args: {
+		...mockProps,
+		dictionaryConfig: {
+			...mockProps.dictionaryConfig,
+			dictionaryData: MultipleDictionaryData,
+		},
+	},
+};
+
+// The reason why this story exists is to test the behavior when the dictionary version switcher button is not rendered
+export const WithSingleVersion: Story = {
+	args: {
+		...mockProps,
+		dictionaryConfig: {
+			...mockProps.dictionaryConfig,
+			dictionaryData: SingleDictionaryData,


For the stories, there should be a straightforward way to style the display window, so that an open dropdown is visible. Don't worry about making it full size or anything, just set is as a larger fixed height so we can at least see some of the dropdown items when open

it'll be storybook decorator likely

packages/ui/src/common/Dropdown/Dropdown.tsx

SaqAsh added 30 commits June 4, 2025 11:25

finish up code cleanup and make sure that all styling is close to fig…

5b09c2e

…ma design

type theme appropriately instead of settling for any

0fa14d9

fix styling and add comments for fonts

62b5ec4

add some permuations of testing and reduce the threshold constants

376f887

final cleanup before pr, remove uneccesary styling

afe4e16

fix logic flaw

8e7cc5e

add minor spacing

296af83

remove tacky v

b123752

port over the button implementation from stage into here in order to …

532260f

…use it for action items

fix minor css styling

28a164f

add more configuations to the story

8d86be9

finish adding all neccasry components for expansion and collapseable …

ed90b72

…button

fix horizontal scrolling issue with css

cc05e97

initialize the table of contents component

c0b3dc4

handle logic for the actual scrolling into view for scheams

8d9f78d

clean up the table of contents, add the relevant functions

ee3a2c9

cleanup css styling such that it is uniform and has no unessesary att…

9f2bd1d

…ributes

fix subpar styling for dropdown

5414669

code cleanup

c10619c

add an advanced.json to better facilitate visualation of table of con…

ffa06e0

…tents and update the stories

port over the attribute filter from stage

3f5549e

fix naming issue with list

ce91494

Merge branch 'feature/Table-of-contents' into feature/attribute-filte…

6c065a5

…r-dropdown Fix naming for list comopnent

finish up attribute filter dropdown implementation

6a68b7a

relocate all interaction panel based things in a different folder for…

eab689f

… better organization

moving dropdown into the interaction panel

edc0902

initial commit, initializing the component

2b1c714

use theme context instead of individually importing the icon

41baefa

complete implementation of the dictionary download button

24aeabd

make the download template button actually interactive

7011532

SaqAsh linked an issue Jun 18, 2025 that may be closed by this pull request

2C. Attribute Filter (Filter By) #272

Open

4 tasks

SaqAsh added 13 commits June 19, 2025 11:39

fix cross referencing issues

6a5a487

Merge branch 'feature/header-component' into feature/interaction-panel

f9568ce

merge dictionary component

remove set timeout used for debugging purposes

8ae8b69

remove classname

92fce9e

address pr feedback

b7f3225

address pr feedback

acce16f

Merge branch 'feature/Table-of-contents' into feature/interaction-panel

19e4079

merge pr suggestions

Merge branch 'feature/expand-collapse-all-button' into feature/intera…

0feb97b

…ction-panel

Merge branch 'feature/header-component' into feature/interaction-panel

cd9ede9

merge pr changes from header component

remove the side effects inside of the TableOfContentsDropdown

b39af9b

Merge branch 'main' into feature/interaction-panel

e9fd874

naming consistency fixes and fix any css

f76e907

revert some cleanup since its messed up some stuff

d0db70d

SaqAsh marked this pull request as ready for review June 25, 2025 14:25

SaqAsh requested review from ciaranschutte and joneubank June 25, 2025 14:25

This was linked to issues Jun 25, 2025

2D. Version Switcher #273

Open

2E. Download Templates #274

Open

This was unlinked from issues Jun 25, 2025

2D. Version Switcher #273

Open

2E. Download Templates #274

Open

ciaranschutte requested changes Jun 26, 2025

View reviewed changes

SaqAsh and others added 2 commits June 26, 2025 07:41

Update packages/ui/src/viewer-table/InteractionPanel/AttributeFilterD…

12816e0

…ropdown.tsx Co-authored-by: Ciarán Schütte <[email protected]>

fix naming

ea3c104

SaqAsh requested a review from ciaranschutte June 26, 2025 11:52

format the imports

e3c6c68

ciaranschutte requested changes Jun 26, 2025

View reviewed changes

SaqAsh added 2 commits June 27, 2025 09:04

get the interaction panel to grow on storybook

1e4ef85

apply feedback from pr

be0af93

SaqAsh requested a review from ciaranschutte June 27, 2025 13:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

#262 Interaction Panel Implementation #290

#262 Interaction Panel Implementation #290

SaqAsh commented Jun 9, 2025 •

edited

Loading

Uh oh!

ciaranschutte left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ciaranschutte left a comment

Uh oh!

ciaranschutte Jun 26, 2025

Uh oh!

ciaranschutte Jun 26, 2025

Uh oh!

Uh oh!

Uh oh!

#262 Interaction Panel Implementation #290

Are you sure you want to change the base?

#262 Interaction Panel Implementation #290

Conversation

SaqAsh commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Issues

Description of Changes

Readiness Checklist

Uh oh!

ciaranschutte left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ciaranschutte left a comment

Choose a reason for hiding this comment

Uh oh!

ciaranschutte Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

ciaranschutte Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

SaqAsh commented Jun 9, 2025 •

edited

Loading

ciaranschutte left a comment •

edited

Loading