Simple functional prototype of notebook entry tagging #4820

akhenry · 2022-02-03T19:00:42Z

Build on #4711 and #4712 implement a simple functional prototype for adding tags to notebook entries, and showing existing tags against entries.

Phase 1

Exercise the data design
Start understanding the sort of API we will need to support tagging and annotations, even if we don't define it all yet.
JSON file with pre-determined tags (with colors)
Show existing tags against entries
V. SIMPLE UI for selecting a tag to add to an entry. Could just be a select box initially.
No new API, hack around it for now.

Phase 2

Add cross-notebook search. What does a VERY minimal UI that look like for that?
No new API, hack around it for now.

Phase 3

Aim is to start gathering feedback from users on our simple prototype.
Whatever UI finessing we need to put in front of users and get feedback.
Define whatever API we need to support tagging

Phase 4

Prepare for merge into master.
Any UI polishing needed for production
Code review
Add tests

akhenry · 2022-02-03T19:07:28Z

Discussion 02/03/2022

Once completed we could then roll tagging out to other tagging targets.

scottbell · 2022-02-03T19:24:20Z

tags will need a JSON config file to define dictionary, and will further need background color and foreground color for text

scottbell · 2022-03-04T16:13:16Z

Here's where I've gotten with the prototype:

Screen.Recording.2022-03-04.at.5.09.28.PM.mov

I'm loosely following the prototype @charlesh88 laid out, and plan to continue adding a few new features to search before working on tagging imagery:

scottbell · 2022-03-10T17:14:51Z

I've got some basic search working, along with basic tagging in notebook entries. I've been working on looking at tagging images, and also adding annotations to plots. For plots, I've been experimenting with rbush for determining which telemetry items are inside a user dragged marquee.

scottbell · 2022-03-11T13:20:25Z

@akhenry @charlesh88 Switched to using kdbush as it handles point better and is faster with static data. It's very fast to search, even with a ton of data (>100Hz). Below is a movie of the point selection:

Screen.Recording.2022-03-11.at.2.17.39.PM.mov

Note that though there are many data points within the x-axis of the marquee, the algorithm only returns points the three points within the bounding box. My next step is to actually save the annotation on the datapoints to the database, and then display the annotation on the plot.

Currently the gesture to enable annotation selection in plots is Alt+Shift, then drag. The pan action on plots is Alt + drag, so this seemed like an easy extension.

scottbell · 2022-03-11T14:15:22Z

@akhenry I think instead of storing the begin/end timestamps, we could instead just store the bounding box coordinates the operator drew. This would basically be storing the minY and maxY in addition to the minX and maxX we had already planned to store (the start/end timestamps). And it would also allow us to work with non-temporal based plots.

Note we can also just use the minX and maxX to work as the begin/end timestamp if we want to just go the linear approach.

scottbell · 2022-03-15T10:34:16Z

@charlesh88 @akhenry Just to show some more progress - I've got plot annotation selection working:

Screen.Recording.2022-03-15.at.12.13.34.PM.mov

The next step is add the annotations tab to the inspector so the user can add some text & tags.

scottbell · 2022-03-15T11:26:57Z

And it works well with very dense data too

Screen.Recording.2022-03-15.at.12.25.55.PM.mov

akhenry · 2022-03-25T22:10:19Z

Wowwwww, that's very impressive. Nice work!

scottbell · 2022-04-06T14:52:47Z

We've decided for the MVP of the notebook to:

not have an inspector
add paths to the search results, like in the inspector:

ensure search can work locally via generalized API
make tag editor component nicer and closer aligned to design. ensure the "X" to delete a tag is hoverable

charlesh88 · 2022-05-04T23:13:13Z

Notes

5/4/22: @charlesh88 is in progress styling the results dropdown, tags, etc. I'm doing the work in a forked branch mct4820-style that was originally created by Rukmini. Here's what it's looking like:

Todos

@scottbell

The location object isn't working properly, but not sure what's causing it to misbehave. Observe the folder structure, and resulting location paths, in the following screenshot

Note that the location path in the Inspector at right is correct. I'm seeing this behavior in both the latest mct4820 branch (shown above) as well as my mct4820-style branch which doesn't use Location.vue anymore. If there are fixes that effect that file, we should discuss because I'd like to switch to use the new ObjectPath.vue component instead.
We can't use the ObjectLabel.vue component in search results as is. It doesn't support the design's desired layout, and won't allow us to ultimately get what we want with the icon, which will be a combination of the resulting type and the search result "type". e.g. a result that's a Notebook annotation, or a Map location.
Currently, we only show the results menu when at least one thing is found - but if the user expects to find something but they're not, they're not getting any feedback to that effect. Instead, I think we're going to need to show the menu very quickly (500ms?) after a user starts typing in the input, and until we find something we need to show a message like 'No results found'.
Search input is case sensitive, but should not be.
Clicking anywhere off the results menu needs to dismiss it.
When adding a tag in a Notebook entry, clicking anywhere other than the dropdown needs to dismiss that menu.
The location path for tag results should show the parent Notebook at least, and ideally the section and page as well.

@charlesh88

Tag styling.
Better style for the search input when in the status area - way too dark for the Espresso theme.

- Significant changes and styling in AutoCompleteField component; - Remove old `autocomplete` CSS classes; - Effects new tag editor as well as Clock timezone selector - do regression testing!;

- Related to fixes for Clock properties autocomplete timezone selector. - Fix problem where `cssClass` property was not being applied properly in forms. - Refactored code to use new `reqClass` CSS, separate from `rowClass`. - IMPORTANT! ALL PROPERTIES FORMS SHOULD BE VIEWED FOR POSSIBLE REGRESSIONS!

- Styles for tags and tag application in Notebook entries; - Significant changes;

- New theme constants for menus.

charlesh88 · 2022-05-06T22:31:50Z

@scottbell Have pushed some significant style and code changes for search, tags and the autocomplete input.

scottbell · 2022-05-06T23:03:28Z

This looks fantastic! Good stuff @charlesh88 !

- Hover transitions added for remove buttons in tags in tag-applier. - Style sanding and shimming. - Removed unused theme constant `$colorInputPlaceholder`. - Removed uppercasing on search result tag labels.

- Fixed color in datepicker;

- Styling for search in the shell head area.

charlesh88 · 2022-05-07T18:05:21Z

Just pushed some more refinements to tags and the search input: remove buttons are now hidden until hovering over Notebook entries.

- CSS instead of inline opacity for non-matching tags. - CSS cleanups, indention fixes. - Search result tag layout sanding.

scottbell · 2022-05-17T17:22:55Z

To test:

Create a new notebook. Add some entries and tag them. Delete them. Refresh the page and ensure they stay.
Search for these tags using the new search bar
Delete some tags and add some new tags. Ensure search reflects deletion & addition
Add some Clocks with various names.
Search for these clocks using the new search bar
Delete some clocks, add some new clocks, and rename some clocks. Ensure search reflects deletion & addition & rename
Do all the above with CouchDB enabled too.

rukmini-bose · 2022-06-23T23:02:34Z

Testathon 6/23/2022 Comments: (NOTE: LOCALLY TESTED)

Tags are not saving when navigating away from the Notebook and coming back. I'm seeing two different behaviors:

(a) If I add a bunch of tags to the entry/entries, navigate away and come back, the entries are empty of their tags UNTIL I press "+Add Tag", and add another tag. Only then do the tags appear. (Video Included and apologies for the lagging)

Test.mov

(b) Another issue related to (a), if the tag has already been added, we have the option to add the tag again to the entry. We end up getting an entry that looks like this:

Then deleting one of the tags deletes all of them (which I think is okay, given its the same tag).

Adding a new tag, then immediately adding another tag will replace the newer tag with the older tag. (This behavior happens sporadically)
Clocks: When deleting a clock, it will disappear from the tree but will remain as a search result. It will disappear from the search results only if we refresh the page.

Delete.Clock.mov

scottbell · 2022-06-24T00:40:05Z

I think the PR should address these issues @rukmini-bose
#5361

michaelrogers · 2022-07-01T18:15:07Z

Blocked from verifying in testathon 07/01/2022 due to the absence of the Add Tag UI element. (We need to install the exampleTag plugin to test this)

.

rukmini-bose · 2022-07-06T18:47:00Z

Verified Testathon 7/6/2022– it functionally works and looks amazing :D
Just observing that it takes a little bit of time for the tags to appear on the entries when (1) Adding a tag (2) Loading the notebook view.

akhenry added the type:enhancement label Feb 3, 2022

akhenry assigned scottbell Feb 3, 2022

This was referenced Feb 21, 2022

Define object structure for annotations #4711

Closed

Prototype Annotation Object design #4712

Closed

akhenry added the Target:2.0.3 label Apr 14, 2022

unlikelyzero added Target:2.0.4 and removed Target:2.0.3 labels May 2, 2022

charlesh88 added a commit that referenced this issue May 6, 2022

#4820 Styling for new search

6209e82

- Styles for tags and tag application in Notebook entries; - Significant changes;

charlesh88 added a commit that referenced this issue May 6, 2022

#4820 Styling for new search

914a70b

- New theme constants for menus.

charlesh88 added a commit that referenced this issue May 6, 2022

#4820 Merge latest from mct4820.

a3925c2

charlesh88 added a commit that referenced this issue May 7, 2022

#4820 Styling for new search

7ec64c7

- Fixed color in datepicker;

charlesh88 added a commit that referenced this issue May 7, 2022

#4820 Styling for new search

ab4deb6

- Styling for search in the shell head area.

charlesh88 added a commit that referenced this issue May 11, 2022

#4820 Styling for new search

a6fd5cb

- CSS instead of inline opacity for non-matching tags. - CSS cleanups, indention fixes. - Search result tag layout sanding.

scottbell mentioned this issue May 13, 2022

Search & Notebook Tagging - Mct4820 #5203

Merged

15 tasks

akhenry closed this as completed in #5203 Jun 3, 2022

akhenry added the unverified label Jun 3, 2022

unlikelyzero unassigned scottbell Jun 9, 2022

unlikelyzero mentioned this issue Jun 23, 2022

Tags not persisting locally #5361

Closed

7 tasks

rukmini-bose assigned rukmini-bose and unassigned rukmini-bose Jun 27, 2022

shefalijoshi added the Target:2.0.6 label Jul 1, 2022

shefalijoshi assigned akhenry Jul 1, 2022

akhenry removed the unverified label Jul 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple functional prototype of notebook entry tagging #4820

Simple functional prototype of notebook entry tagging #4820

akhenry commented Feb 3, 2022 •

edited

akhenry commented Feb 3, 2022

scottbell commented Feb 3, 2022

scottbell commented Mar 4, 2022 •

edited

scottbell commented Mar 10, 2022

scottbell commented Mar 11, 2022 •

edited

scottbell commented Mar 11, 2022 •

edited

scottbell commented Mar 15, 2022 •

edited

scottbell commented Mar 15, 2022

akhenry commented Mar 25, 2022

scottbell commented Apr 6, 2022 •

edited

charlesh88 commented May 4, 2022 •

edited

charlesh88 commented May 6, 2022

scottbell commented May 6, 2022

charlesh88 commented May 7, 2022

scottbell commented May 17, 2022

rukmini-bose commented Jun 23, 2022 •

edited

scottbell commented Jun 24, 2022 •

edited

michaelrogers commented Jul 1, 2022 •

edited by shefalijoshi

rukmini-bose commented Jul 6, 2022 •

edited

Simple functional prototype of notebook entry tagging #4820

Simple functional prototype of notebook entry tagging #4820

Comments

akhenry commented Feb 3, 2022 • edited

Phase 1

Phase 2

Phase 3

Phase 4

akhenry commented Feb 3, 2022

scottbell commented Feb 3, 2022

scottbell commented Mar 4, 2022 • edited

scottbell commented Mar 10, 2022

scottbell commented Mar 11, 2022 • edited

scottbell commented Mar 11, 2022 • edited

scottbell commented Mar 15, 2022 • edited

scottbell commented Mar 15, 2022

akhenry commented Mar 25, 2022

scottbell commented Apr 6, 2022 • edited

charlesh88 commented May 4, 2022 • edited

Notes

Todos

charlesh88 commented May 6, 2022

scottbell commented May 6, 2022

charlesh88 commented May 7, 2022

scottbell commented May 17, 2022

rukmini-bose commented Jun 23, 2022 • edited

scottbell commented Jun 24, 2022 • edited

michaelrogers commented Jul 1, 2022 • edited by shefalijoshi

rukmini-bose commented Jul 6, 2022 • edited

akhenry commented Feb 3, 2022 •

edited

scottbell commented Mar 4, 2022 •

edited

scottbell commented Mar 11, 2022 •

edited

scottbell commented Mar 11, 2022 •

edited

scottbell commented Mar 15, 2022 •

edited

scottbell commented Apr 6, 2022 •

edited

charlesh88 commented May 4, 2022 •

edited

rukmini-bose commented Jun 23, 2022 •

edited

scottbell commented Jun 24, 2022 •

edited

michaelrogers commented Jul 1, 2022 •

edited by shefalijoshi

rukmini-bose commented Jul 6, 2022 •

edited