feat: find symbols by searching the gloss, and enter symbols using svg builder strings by klown · Pull Request #44 · inclusive-design/adaptive-palette

klown · 2026-01-18T21:49:52Z

This pull request has been tested by running npm test without errors
This pull request has been built by running npm run dev without errors
This isn't a duplicate of an existing pull request

Description

This pull request adds two dialogs to the adaptive-palette:

SVG Entry:

Expand/collapse the dialog by clicking the triangle.
Enter an SVG builder string in the "Builder string:" text entry field,
Enter a label in the "Label:" text entry field,
Activate the "Add Symbol" button to render the symbol and label in the symbol input area.
Note: if the SVG builder string is invalid, no symbol is rendered in the input area, but any label text is rendered.

Search gloss:

Enter either a word or a single BCI AV ID to search for bliss symbols in the BCI authorized vocabulary.
Some of the glosses in the BCI are words separated by an underscore ("_"). Include the underscore as part of the search text, e.g., "clothing_shop", not "clothing shop".
Activate the "Search" button. All matches found are displayed in a "matches palette".
Activate the "Clear" button to clear any matches palette and the search string..

In addition, a palette of matches found is produced for each successful search:

Each cell in this palette is live and pressing it will add the symbol and its gloss to the symbol input area.
The top of a cell shows the matching Bliss-word,
The text immediately below shows the Bliss-word's BCI AV ID and the text used to search for that symbol. For BCI AV ID searches, all Bliss-words that contain that ID are shown,
The text entry field on each cell allows users to change the label of the symbol that is added to the symbol input field,
The full decomposition of the Bliss-word is shown just below the text entry field as an SVG builder string.

Steps to test

See the "Description" above for how to use the dialogs.

…arate file

Also, add `stream` (`true` or `false`) parameter to `queryChat()` function.

…pi-with-palette

- `CommandTeletgraphicCompletions` is component that calls ollama with a "bag of words" and a prompt to provide sentence completions - Introduced `sentenceCompletionsSignal` that will eventually handle changes to the completions.

…entry

…esting

- removed all `console.debug()` statements

The palette of found symbols is a collection of cells that permit: - ediingt a label for each symbol - adding the symbol and its label to the input area

…ay decomposition svg builder string

…pi-with-palette

…by-gloss

- compromise was part of the ISAAC demo branch: - feat/find-by-gloss-plus-modifiers

cindyli · 2026-01-21T23:07:37Z

apps/ollama/ollama.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * Copyright 2024-2025 Inclusive Design Research Centre, OCAD University


Copyright can use 2026 now. :)

:-) This is updated in PR #42. If I update it here too, what happens? I guess there is no diff so it shouldn't matter?

On closer review, the version of ollama.js here is wrong. It is the same version as in the feat/integrate-ollama-api-with-palette from PR #42 where the UI and the ollama API were factored into separate files (ollama.js and ollamaApi.ts). I have restored the correct version for this branch.

cindyli · 2026-01-22T00:02:40Z

src/client/ActionGlossSearchCell.ts

+  options: BlissSymbolInfoType & LayoutInfoType
+};
+
+export function ActionGlossSearchCell (props: ActionGlossSearchCellPropsType): VNode {


I just noticed this component doesn't seem to be used anywhere except in its test. Can you double check? Thanks.

It's used in GlossSearchPalette -- that's what the cells are in that palette. They are created by the makeMatchesPalette() in that file.

cindyli · 2026-01-22T00:16:59Z

src/client/ActionRemoveIndicatorCell.ts

+ */
+function indexOfIndicatorSuffix (gloss: string): number {
+  let index = -1;
+  for (let i = 0; i < INDICATOR_SUFFIXES.length; i++) {


Regex might be more efficient than a loop:

const suffix_regex = new RegExp(`(${INDICATOR_SUFFIXES.join('|')})$`, 'i'); const match = gloss.match(suffix_regex); return match ? match.index : -1;

The use of compromise() and NLP for adjusting the gloss is not part of this PR. I have removed the compromise package and all related code. I will create a separate issue for NLP processing.

The issues is #50.

cindyli · 2026-01-22T00:23:50Z

src/client/ActionSearchGloss.ts

+
+  return html`
+    <form onSubmit=${searchGloss} class="actionSearchGloss">
+      <label for=${GLOSS_ENTRY_FIELD_ID} style="color: white;">Search gloss: </label>


The inline style should go into .scss. Moreover, setting color explicitly may affect the auto-adaptation on various browser color theme settings.

This and other styles have been either removed or moved to an appropriate .sccs file. Regarding being responsive to browser or system-wide colour themes: the palette has never had this capacity. It is showing up here because the new dialogs are using standard web controls. As a stop-gap, @jobara provided a patch that disables dark-mode, and the problem of vanishing text when switching to dark-mode not long occurs. That is not satisfactory in the long run since it means that if a user prefers dark-mode, it will not be available.

What should happen is that the entire palette, not just the new dialogs, adapt to changes in colour themes. That is a complex enough problem that it deserves its own issue and PR. I have created an issue for that work.

cindyli · 2026-01-22T00:24:31Z

src/client/ActionSvgEntryField.scss

+
+.actionSvgEntryField {
+  width: 25rem;
+  background: white


Again, setting background color explicitly may affect the adaptation to browser color theme settings.

cindyli · 2026-01-22T23:48:43Z

src/client/GlobalUtils.ts

+    else {
+      // If removing a verb indicator, try turning the word back into a "noun"
+      // (gerund), e.g. "walk" -> "walking".
+      result = doc.verbs().toGerund().text();


Why does removing a verb indicator turning the word back to a noun? Shouldn't "to walk" be "walk" now rather than "walking"?

Why does removing a verb indicator turning the word back to a noun?

In Bliss, to make a verb, add the action indicator to a symbol that is typically a noun. The removal of the indicator will turn the word back into a noun, in most cases.

Shouldn't "to walk" be "walk" now rather than "walking"?

Yes, it should be. (Note that "walk" is a noun, in this case), But I could find no way using compromise to do that. The closest was to use toGerund() which worked sometimes.

All of this shows that the NLP used for the ISAAC demo was barely good enough for that demo, but only for that demo. As noted above, all of the NLP has been removed from this PR.

cindyli · 2026-01-22T23:53:47Z

src/client/GlossSearchPalette.ts

+
+    // Update rows, columns, etc.
+    colIndex++;
+    if (colIndex > numCols) {


If numCols is 4, this allows colIndex to be 0, 1, 2, 3, 4. Probably use if (colIndex >= numCols - 1).

Thank you, thank you, thank you! This little fix improves the layout immensely. I have also changed the maximum number of columns, numCols to 5 with this new check and that works.

cindyli · 2026-01-22T23:59:41Z

src/client/GlossSearchPalette.ts

+        columnSpan: 1
+      }
+    };
+    jsonPalette.cells[`${match.label}-${uuidv4()}`] = cell;


If makeMatchesPalette is called during a re-render, every cell will get a brand new ID with the use of uuidv4(). Every re-render will recreate the cell palette from scratch. What do you think about using bciAvId instead of calling uuidv4() so every cell palette will have a fixed key.

That's a good idea. I was concerned mainly with having a unique ID here. BCI AV IDs are unique and thus are sufficient. And, they have the added benefit of supporting a DOM query.

cindyli · 2026-01-23T00:01:23Z

src/client/GlossSearchPalette.ts

+    return html``;
+  }
+  else if (matches.length === 0) {
+    return html`<p style="color: white;">No matches found</p>`;


Move the inline style into scss. Add a aria-live="polite" and an aria status to announce "No matches found."

For now, I have removed the inline style since I don't think it's necessary to begin with. Regarding the use of aria, I'm not against it, but in this case it will only matter if someone is using an AT like a screen reader. It won't cause the adaptive-palette to change its behaviour.

Having thought about it a bit more, adding role="status" here is a good idea. There is another case in the SVG entry dialog where it reports an "Invalid builder string". In both cases, I have added the status role to the markkup. FYI, adding aria-live=polite is unnecessary since the status role is automatically polite, (and atomic).

cindyli · 2026-01-23T00:01:52Z

src/client/GlossSearchPalette.ts

+ * Create a JsonPaletteType from an array of matches based on a gloss search.
+ *
+ * @param {Array} glossMatches - Array of Bliss symbol information objects whose
+ *                               glass matches the search term.


Typo: "glass" -> "gloss".

You have eagle eyes. Thanks.

cindyli · 2026-01-23T00:03:09Z

The same issue with the color contrast issue in the browser dark theme as mentioned in the pull request #42.

cindyli · 2026-01-23T00:05:03Z

One concern is about pushing the binary navigate.mp3 into the repository which will remain in the repo from now on even when it's removed in the future. Is it confirmed that we need this sound for navigation? I also feel there should be a better place to access binary files from the code repo.

The `compromise` library was used in the ISAAC demo to adjust the gloss of symbols when indicators were added or removed to better reflect the grammatical change. But, it was superficial and the issue needs a deeper investigation and implementation to properly make these kinds of transformations.

The version of `ollama.js` in this branch was mistakenly copied from the `feat/integrate-ollama-api-with-palette` branch. It should be the version just before factoring it into ui vs. ollama api calls. For the latter see `.../src/client/ollamaApi.ts` in the ollama integration branch.

…lts palette

klown · 2026-02-06T22:13:50Z

One concern is about pushing the binary navigate.mp3 into the repository which will remain in the repo from now on even when it's removed in the future. Is it confirmed that we need this sound for navigation? I also feel there should be a better place to access binary files from the code repo.

Yes, this was experimental based on a recommendation at one of the language development meetings. I'm reverting back to speaking the label of the button.

… builder strings

…ette

…ield

fix: disable dark mode

- Changed "SVG Entry" title to "SVG Builder String", - `ActionGlossSearchCell`: added label to text input field, - `ActionGlossSearchCell`: added main BCI AV ID as a prefix for the SVG Builder string.

klown · 2026-03-02T20:30:17Z

I have addressed all of your review comments, @cindyli. Ready for more reviews. By the way, I believe this PR should be merged first, before the ollama-api integration, PR #42.

klown added 30 commits March 28, 2025 11:06

feat: refactor ollama app to separate out ollama api calls into a sep…

b836ae5

…arate file

feat: move ollamaApi.ts to src/client for use by adpative-palette

8bf9fb4

feat: add types for the typescript version of the ollama api

2fc8ec1

Also, add `stream` (`true` or `false`) parameter to `queryChat()` function.

Merge branch 'feat/standard-bliss-board' into feat/integrate-ollama-a…

4369d09

…pi-with-palette

feat: add dynamic sentence completions palette

c1e2ddc

feat: actually commit the SentenceCompletionsPalette component

63058c7

feat: add dialog for changing the system prompt for querying ollama

aa726b8

feat: improve dialog for system prompt and add dialog for svg string …

2faf0f0

…entry

fix: insure that stream constant is actually a boolean

94fb28f

feat: properly update the prompt dialog when a new prompt is added

a30918c

feat: move styles of dialogs to their own .scss files

fb33aa3

feat: add some unit tests for the new prompt dialog

b670284

chore: use constants for form control ids and values

14227d4

fix: indent typo

fc50c27

feat: add tests for ActionSvgEntryField component

ef019df

feat: add a way to follow the typing restrictions of ollama.ts when t…

1e6ac7f

…esting

feat: add tests for ollama api

64be8a7

- removed all `console.debug()` statements

feat: add dialog to search gloss for symbols and present as a palette

3c66ff4

The palette of found symbols is a collection of cells that permit: - ediingt a label for each symbol - adding the symbol and its label to the input area

feat: correct markup and styles for ActionGlossSearchCell and displ…

3243ad6

…ay decomposition svg builder string

chore: move ActionGlossSearchCell style to an .scss file

f16a927

fix: convert compostion to a string cleanly

dbadfbd

feat: add search by single BCI AV ID

b37f1d7

fix: lint error

e599112

fix: check for array type in findCompositionsUsingId()

79f310e

feat: add tests for findCompositionsUsingId()

a3e1c5b

Merge branch 'feat/standard-bliss-board' into feat/integrate-ollama-a…

e0b7d2d

…pi-with-palette

Merge branch 'feat/integrate-ollama-api-with-palette' into feat/find-…

57e8760

…by-gloss

fix: add ActionGlossSearchCell styles file

13a766a

Merge branch 'main' into feat/integrate-ollama-api-with-palette

07d5318

klown added 6 commits January 16, 2026 15:57

feat: add more unit tests re: gloss search components

4219675

feat: remove hiding of svg entry and search dialogs

44d2ad5

feat: remove compromise package from package.json

69ecee5

- compromise was part of the ISAAC demo branch: - feat/find-by-gloss-plus-modifiers

fix: actually add the unit test files

538e198

Merge branch 'main' into feat/find-by-gloss-CLONE

7e02130

feat: clear search text entry field when "clear" button is clicked

ac89212

klown requested a review from cindyli January 19, 2026 15:33

klown mentioned this pull request Jan 22, 2026

feat: integrate ollama api with palette #42

Open

4 tasks

cindyli requested changes Jan 23, 2026

View reviewed changes

klown added 5 commits February 6, 2026 10:47

feat: address review comments

123b1e5

feat: fix column calculation for the display of the gloss search resu…

07cbdb1

…lts palette

feat; remove button click sound and restore speaking the go-back button

30b6f91

klown and others added 12 commits February 6, 2026 18:09

feat: use malformed state in ActionSvgEntryFieldto report invalid…

402e4f6

… builder strings

feat: modify styles to partially support dark-based colour schemes.

48a70f1

fix: miscalcuation of the number of columns in the search results pal…

19d6a05

…ette

feat: improve name and placeholder text for search vocabulary entry f…

e494c4a

…ield

fix: disable dark mode

48a1d78

Merge pull request #2 from jobara/fix/contrast

6068ac7

fix: disable dark mode

feat: add role="status" to two dialog messages

11968bd

Merge branch 'main' into feat/find-by-gloss-CLONE

eea9d90

feat: improve labels and static text for dialogs and search results

8735016

- Changed "SVG Entry" title to "SVG Builder String", - `ActionGlossSearchCell`: added label to text input field, - `ActionGlossSearchCell`: added main BCI AV ID as a prefix for the SVG Builder string.

feat: put symbol itself as the first result when searching by ID

56baad4

fix: update copyright date

04bab7e

Conversation

klown commented Jan 18, 2026

Description

Steps to test

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!

klown Jan 30, 2026 • 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!

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!

klown Feb 12, 2026 • 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!

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!

klown Feb 6, 2026 • 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!

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!

cindyli commented Jan 23, 2026

Uh oh!

cindyli commented Jan 23, 2026

Uh oh!

klown commented Feb 6, 2026

Uh oh!

klown commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

klown Jan 30, 2026 •

edited

Loading

klown Feb 12, 2026 •

edited

Loading

klown Feb 6, 2026 •

edited

Loading