feat/palette-json-generator-webapp #25

klown · 2024-10-28T13:57:30Z

A web-app for entering glosses, BCI AV IDs, and svg builder strings to produce and save a palette.

The main point is to make it easier than the previous way to make palettes by using text editor to edit the JSON description file directly. The previous way was time consuming and very error prone. The web-app approach allows most of the generation of the JSON to be automated, and allows the user to later tweak the JSON file as necessary.

This branch was originally created based on the code for PR #21, but incorporated @cindyli's script into user interface. It's not clear if this should be directly merged with the main branch or merged into the feat/palette-json-generator script branch first.

- uses `fetch()` to retrieve the blissay ID map, - uses `fetch()` to retrieve W3C's bliss gloss .json file, - UUID for each cell is prepended with the cell's label, - generates an "Unknown" cell for errors, to be fixed manually, - outputs a palette file with problem cells indicated as such.

- use local copy of `bliss_symbol_explanations.json`, - `String.include()` will sometimes match many glosses. The script now outputs all the matches found to the console and uses the first match in the generated palette - for no match found, outputs a cell with label "NOT FOUND" and Bliss word for "not found".

…palette buttons

cindyli · 2024-10-29T19:08:41Z

README.md

+## Utility Scripts
+
+- [Load a document into a vector databbase (`scripts/loadDocIntoVectorDb.js`)](./scripts/loadDocIntoVectorDb.js)
+- [Generate a palette JSON file (`scripts/paletteJsonGenerator.js`)](./scripts/loadDocIntoVectorDb.js)


"paletteJsonGenerator.js" is not in the "./scripts" directory. Did you forget to clean up this line after making the generator an app?

Yup. I'll remove it.

cindyli · 2024-10-29T19:11:49Z

apps/palette-generator/README.md

+
+Once the development server is running, open this `localhost` url from within a
+browser:
+[`http://localhost:5173/apps/palette-generator/palette-generator.html`](http://localhost:5173/apps/palette-generator/palette-generator.html)


What do you think about renaming "palette-generator.html" to "index.html" so that accessing "http://localhost:5173/apps/palette-generator/" will automatically load the index page?

Since the entry page has been renamed to "index.html", the link and text should be changed to remove "palette-generator.html".

cindyli · 2024-10-29T19:13:26Z

apps/palette-generator/README.md

+row of the palette cells.  Spaces are used for separate cells so the text used
+to specify a cell cannot contain any spaces.
+
+There are three types of input allowed here:


You listed four types below. Change "three types" to "four types" in this line?

cindyli · 2024-10-29T19:21:25Z

apps/palette-generator/README.md

+the label "cross hatches"; and "23641LABEL:ruin" will give "ruin" as the label
+instead of the official gloss "ruin,wreck,wreckage\_(building)\_(1)".
+
+The SVG string is marked by "SVG:" at the beginning of the string and ":SVG" at


Provide an example of using the SVG string.

I've added two examples. But, I am not going to explain the full syntax of svg builder strings. That should be in the svg-builder project, but there is no documentation there. And, I don't know the full specification. :-(

cindyli · 2024-10-29T19:24:47Z

apps/palette-generator/README.md

+### Save Palette
+
+Clicking the "Save palette" button will export a palette definition JSON file
+and save it into the user's "Downloads" folder.  The name of the file will be


What if the user's computer doesn't hae a "Downloads" folder. Is this a browser specific configuration?

Good question. The code itself does not include the name "Downloads" or the name of any other folder. An url is created that the browser understands, but is meaningless to me. The file ends up in the folder that has been set as the browser's download folder. Users can set this to something other than "Downloads", in which case the palette will be saved based on that browser setting.

I will reword it to say, '.. and saved to disk where the browser saves file downloads, typically the "Downloads" folder.'

cindyli · 2024-10-29T19:48:50Z

apps/palette-generator/palette-generator.ts

+// Initialize any globals used elsewhere in the code.
+await initAdaptivePaletteGlobals("paletteDisplay");
+await fetchBlissGlossJson();
+let currentPaletteName = "";


The hook for currentPaletteName is probably wrong. The save button doesn't save the given palette name. The clear button doesn't clear the palette name too.

I found a bug here and fixed it, but I have not addressed your comment fully:

The save button doesn't save the given palette name.

It does after the fix, but there is still an edge case where (1) the palette is generated, (2) the user changes the name in the text field, and then (3) clicks the "Save" button. In that case, the file is saved according the name in the text field when the palette was generated, not the just-changed text field For this case, there needs to be an event handler for watching changes in the text field and adjusting various objects. I'm working on that.

The clear button doesn't clear the palette name too.

I don't think it should clear the name in the text field. If a palette has been generated, but there are mistakes, and all the user wants to do is clear it, fix the mistake(s), and re-generate, then they should not have to re-enter the name. Their intent is to change the contents of the palette, not the name. When they do want to change the name, then it's relatively simple to click on the text field and give it a new name.

I don't think it should clear the name in the text field.

Thanks for the clarification, and I agree.

cindyli · 2024-10-29T19:55:47Z

apps/palette-generator/paletteJsonGenerator.ts

+const LABEL_MARKER = "LABEL:";
+
+// Configurable options -- ideally provided by the UI
+const palette_name = "No name Palette";


The default palette name on the UI is "palette". Would be nice to sync up the default value of palette_name variable and the one on the UI.

Good idea. I will get the contents of the name text field and pass it into the generator function.

cindyli · 2024-10-29T19:56:57Z

apps/palette-generator/paletteJsonGenerator.ts

+const type = "ActionBmwCodeCell";
+
+// Special encodings for labels that don't follow the standard mapping
+const specialEncodings = {


README probably should include the usage of this specialEncodings. Or, with introducing the LABEL: feature, this handling can be removed from the code?

I'm inclined to remove it now. But, just in case, what did you intend it for? Do the SVG: and LABEL: features cover that purpose?

I agree this special handling can be removed.

Remove the definition and the use of specialEncodings?

cindyli · 2024-10-29T20:05:02Z

apps/palette-generator/palette-generator.html

+      List the items in each row, one line per row.  Each row consists of a set
+      of glosses separated by a space.
+    </p>
+      <label for="glossInput">Glosses:</label><br>


The label for the text area to receive BCI-AV-ID, glosses, SVGs etc should no longer be "Glosses" since it accepts a lot more than glosses.

Right, I'll come up with a better name.

cindyli · 2024-10-29T20:06:55Z

apps/palette-generator/paletteJsonGenerator.ts

+const BLANK_CELL_LABEL = "BLANK";
+const SVG_PREFIX = "SVG:";
+const SVG_SUFFIX = ":SVG";
+const LABEL_MARKER = "LABEL:";


When I input this line in the "Glosses" text area:

BLANK 18267LABEL:aaa induction

to alter the label for a symbol. I got this error in the error section: "BciAvId not found for label: induction". Moving the "LABEL:" marker to the last "induction" gloss reports the same error.

That string specifies three cells: a blank one, one for a plus sign labelled "aaa" and a cell whose gloss is "induction" or contains the word induction. "Induction" does not match any gloss and that is why there is an error. Checking blissary.com with "induction" gives "No results found." The result is as expected. Moving the LABEL marker won't change the result.

There was some text in the README explaining that spaces are used as a separator to indicate the string to use for a cell. I've added more warnings to that effect including that LABEL: strings cannot contain spaces and to use an underscore if a space is desired. Specifically, if the label for the plus sign was supposed to be "aaa induction", then you write it this way:

BLANK 18267LABEL:aaa_induction

That gives two cells, a blank and a plus with the label "aaa induction".

You are right. The error is reported correctly. I mistakenly thought it was related to the "LABEL" marker.

…w-data

- also renamed a number of variables that used python underscore_case to used camelCase.

cindyli · 2024-10-31T13:29:04Z

apps/palette-generator/README.md

+strings that are parsed by the svg builder.  If the string "LABEL:*label\_text"
+occurs immediately before the closing ":SVG" marker, it will be used as the
+label for the cell, and is truncated from the rest of the string before the
+remainder is sent to the builder.  The rules for the syntax of this "LABEL" is


I tried with using "LABEL" with "SVG" marker. This string SVG:14183,"/",25777,"/","W8W:0,8":SVGLABEL:aaa leads to an error: "BciAvId not found for label: SVG:14183,"/",25777,"/","W8W:0,8":SVG". Did I combine the "SVG" and "LABEL" correctly?

Quoting from the README with emphasis:

If the string "LABEL:*label_text" occurs immediately before the closing ":SVG" marker,

So your example should be SVG:14183,"/",25777,"/","W8W:0,8","LABEL:aaa":SVG

However, that's different from the two other cases of an ID or a gloss-string, where the LABEL: is appended to the ID or string. I think it should be the same regardless of the input. I have re-written the processing so that your example works, and the old way is now illegal.

cindyli · 2024-10-31T13:36:45Z

It would be helpful for users if you could add a small helper section next to the "Glosses" text field on the app interface. This area could provide quick explanations or examples of available markers like SVG, LABEL, and BLANK. I found I often doubt if I'm using these markers correctly and have to check README frequently.

…eport

klown · 2024-11-04T21:40:57Z

@cindyli wrote:

It would be helpful for users if you could add a small helper section next to the "Glosses" text field on the app interface. This area could provide quick explanations or examples of available markers like SVG, LABEL, and BLANK. I found I often doubt if I'm using these markers correctly and have to check README frequently.

I added one but in a way that allows users to pop it open as needed and then hide it. I used the details/summary technique. I have written and re-written the text for it, and am still not satisfied. But, I have to stop at some point, so here it is.

I think I addressed all of your comments -- ready for another review, thanks.

cindyli · 2024-11-04T23:12:26Z

apps/palette-generator/README.md

+
+Once the development server is running, open this `localhost` url from within a
+browser:
+[`http://localhost:5173/apps/palette-generator/palette-generator.html`](http://localhost:5173/apps/palette-generator/palette-generator.html)


Since the entry page has been renamed to "index.html", the link and text should be changed to remove "palette-generator.html".

cindyli · 2024-11-04T23:27:29Z

apps/palette-generator/palette-generator.ts

+      //       dd = document.createElement("dd");
+      //       dl.append(dd);
+      //       dd.innerText = match.label;


Remove the commented code?

Yes, no longer needed.

cindyli · 2024-11-04T23:29:08Z

apps/palette-generator/paletteJsonGenerator.ts

+const type = "ActionBmwCodeCell";
+
+// Special encodings for labels that don't follow the standard mapping
+const specialEncodings = {


Remove the definition and the use of specialEncodings?

cindyli · 2024-11-04T23:31:09Z

apps/palette-generator/paletteJsonGenerator.ts

+  if (matches.length === 0) {
+    throw new Error(`BciAvId not found for label: ${label}`);
+  }
+  console.log("");


Shall this line be removed?

It was meant to output a blank line to separate the matches logged on the console. But in FF it insists on printing <empty string> which is not a blank line. I switched it to console.log("\n"); and that does print a blank line. Then I took it out completely, and the logged matches are readable even without a separating blank line. So, I ended up simply removing it.

klown · 2024-11-06T15:26:58Z

@cindyli, I've addressed you last comments. I also added a new <select> element to allow users to choose the cell type. However one type, the ContentBmwEncoding cell type, does not render well. I am investigating.

Nonetheless, ready for another review.

cindyli · 2024-11-06T16:05:50Z

The pull request looks great. I will wait for the fix of the rendering of the ContentBmwEncoding cell type.

klown · 2024-11-06T17:06:48Z

I did manage to render ContentBmwEncoding by setting up the changeEncodingContents signal correctly. However, since the display area is a palette and not an content area, each cell is treated as a content area and all of the bliss symbols are shown in every cell. It looks bizarre.

Then I realized that the palette json file to be saved should never have cells of type ContentBmwEncoding. So, since this is about palette generation and not content generation, the select is set up so that ContentBmwEncoding is unavailable.

Let me know what you think.

cindyli · 2024-11-06T19:00:10Z

Then I realized that the palette json file to be saved should never have cells of type ContentBmwEncoding. So, since this is about palette generation and not content generation, the select is set up so that ContentBmwEncoding is unavailable.

I agree this is fine.

cindyli and others added 23 commits August 3, 2023 13:45

feat: convert the BMW encoding to JSON

6a55ff6

feat: add an utility script for generating palette JSON files

9da461c

fix: linted

d9a885d

feat: use fetch to retrieve the bliss gloss from github

c06187b

fix: lint errors

d00c84b

feat: move all code into the apps/palette-generator directory

d07a959

feat: add ability to enter BCI AV identfiers as well as partial glosses.

ed0d596

feat: add function for locating the gloss entry with the given BCI AV ID

35b9aac

feat: report all matches on the web page

f3bf9d0

feat: use exact or word matches when searching the gloss

7329597

fix: add html page

29bc751

feat: include ability to add empty cells in the palette

08448f4

chore: fix documentation (comments in the code)

2f355b9

fix: make errors array a local rather than a global

0692291

feat: convert svg builder strings to the proper format of a cell

76fbf59

fix: save palette to json file with indents

1e4fb52

feat: add a specific label to the svg builder strings

929befa

feat: handle label specification for single BCI AV IDs and single words

a8d91ef

fix: bug where clearing a palette no longer allows displaying new ones

8eb23c0

fix: disable/enable save button as appropriate and styles on all non-…

df56976

…palette buttons

feat: add README for palette generator web app

4d98bd0

klown requested a review from cindyli October 28, 2024 13:57

cindyli requested changes Oct 29, 2024

View reviewed changes

klown added 3 commits October 29, 2024 17:33

fix: bug in detecting the LABEL marker in svg builder strings

c8252fd

Merge remote-tracking branch 'baby-bliss-bot/feat/bmw' into import-bm…

8971c39

…w-data

feat: address review comments

e798893

- also renamed a number of variables that used python underscore_case to used camelCase.

cindyli reviewed Oct 31, 2024

View reviewed changes

klown added 4 commits October 31, 2024 15:44

feat: handle change events when the name input text field changes

92c6250

feat: improve presentation of bci av ids and glosses in the matches r…

0af0905

…eport

feat: make LABEL: processing consistent for all inputs

50131c6

feat: add instructions on the main index.html page

5ac37a4

cindyli requested changes Nov 4, 2024

View reviewed changes

klown added 3 commits November 5, 2024 15:53

fix: address review comments

a7cbeb1

fix: bug: replace *all* underscores when parsing LABEL:input_string

2a70484

feat: allow user to choose the cell type

175793a

fix: ignore ContentBmwEncoding since it is not a cell type of palettes

de321a4

fix: spelling

70e1a21

cindyli approved these changes Nov 6, 2024

View reviewed changes

cindyli merged commit a94b8c4 into inclusive-design:main Nov 6, 2024
3 checks passed

cindyli mentioned this pull request Nov 6, 2024

feat: web app for previewing svg markup returned by BlissSVGBuilder #22

Closed

klown mentioned this pull request Dec 6, 2024

Feat: add Bliss symbol composition ids and Bliss-character info the main bliss json data file #26

Merged

feat/palette-json-generator-webapp #25

feat/palette-json-generator-webapp #25

Conversation

klown commented Oct 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

klown Oct 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cindyli commented Oct 31, 2024

klown commented Nov 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

klown Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

klown commented Nov 6, 2024

cindyli commented Nov 6, 2024

klown commented Nov 6, 2024 • edited Loading

cindyli commented Nov 6, 2024

klown Oct 30, 2024 •

edited

Loading

klown Nov 5, 2024 •

edited

Loading

klown commented Nov 6, 2024 •

edited

Loading