Add search and tag to metadata #985

marthacryan · 2020-10-20T21:08:00Z

Using the code from https://github.com/jupytercalpoly/jupyterlab-code-snippets as a basis to add ability to search / filter by tags in metadata explorer.

Add search bar and tag viewer
Add ability to search by name of metadata
Add ability to add a tag in the metadata editor
Add ability to filter by tags

Fixes #277

This is the new feature:

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

Siteproxy

elyra-bot · 2020-10-20T21:08:05Z

Thanks for making a pull request to Elyra!

To try out this branch on binder, follow this link:

marthacryan · 2020-10-22T20:51:32Z

[EDIT: bug is fixed now]
Found a bug:
When searching, if a snippet is hidden because it doesn't match the search, when it reappears after erasing the search, the code area is blank. So for example, this is the code snippets before search "is":

After removing search "is":

marthacryan · 2020-10-22T22:24:22Z

Fixed bug mentioned above - should be fully ready to play around with if anyone has time.

ptitzler · 2020-10-23T18:31:40Z

Will test today

ptitzler · 2020-10-23T18:59:04Z

Is cell tags a good label? Not really sure what it means in this context

Perhaps we should auto-create tags for the snippet's language, since that is likely a commonly used filter criterion? (the current free text search doesn't cover the snippet language)

Edit 1: If language tags are implicitly defined (e.g. are automatically derived from the language property) they probably don't need to be displayed in the editor (like shown below), just in the selection dialog in the snippet management widget.

ptitzler · 2020-10-23T19:02:57Z

I'm running into an issue where a newly created code snippet isn't displayed in the list on the left hand side unless the screen is manually refreshed.

ptitzler · 2020-10-23T19:14:36Z

What happened to drag-and-drop?

Edit 1: If this is delivered in another PR (aka out of scope for this one) please ignore.

ptitzler · 2020-10-23T19:20:06Z

Would be great if the list could be sorted alphabetically

ptitzler · 2020-10-23T19:28:54Z

Unlike other pop-up messages, this one looks like a default alert window.
The duplicate tag error message text should probably be a bit more formal, such as A tag with this label already exists.
Perhaps we can just ignore the tag silently in this case, since it's already included in the set?

ptitzler · 2020-10-23T19:31:10Z

Not sure tags should be case sensitive from a conceptual point of view. For example, what's the difference between "MARKDOWN" and "markdown" as far as the user is concerned?

ptitzler · 2020-10-23T19:55:35Z

Based on set of randomly created snippets, I'm not sure I understand the tag filter principle

snippets.tar.gz

Initially all (?) tags are displayed
Choose a tag - in this case only one snippet is matched (note that the python tag is no longer displayed)
Choose a second tag from the list; now more snippets are shown and more tags are displayed

My suggestion would be to make the behavior more predictable:

display all tags by default
option A: if a tag is selected only snippets referencing the tag are displayed; the list of tags is updated to only include the ones that are referenced in the snippets that meet the currently selected tag(s) => tags are ANDed: tag_a AND tag_b ...
option B: if a tag is selected only snippets referencing the tag are displayed; the list of tags is not updated => tags are ORed: tag_a OR tag_b

ptitzler

See earlier review comments.

packages/metadata-common/src/MetadataWidget.tsx

ajbozarth

I have not yet reviewed the new FilterTools or Tags files, and have not played with the features locally yet, but here's a handful of review comments on current changes

packages/code-snippet/src/CodeSnippetWidget.tsx

packages/metadata-common/src/MetadataWidget.tsx

ajbozarth · 2020-11-03T19:38:42Z

packages/metadata-common/src/MetadataWidget.tsx

+    props: IMetadataDisplayProps,
+    state: IMetadataDisplayState
+  ): IMetadataDisplayState {
+    if (state.searchValue === '' && state.filterTags.length === 0) {


Echoing @kevin-bates comment, why are these if statements needed, it seems like we could remove this if block and the if wrapping around the next section and get the same results

packages/metadata-common/src/MetadataWidget.tsx

ajbozarth

A few comments on the new files, otherwise no big issues with them

packages/metadata-common/src/Tags.tsx

packages/metadata-common/src/FilterTools.tsx

ajbozarth · 2020-11-03T20:26:29Z

UI/UX review comments:

Clicking the icon in a tag, the check mark or plus, doesn't "click" the tag as I would expect it to (in fact only the text in the tag is clickable)
Odd css happening with the down arrow icon:

might be caused by using css instead of LabIcon

If you filter on tags then close the filter on tags section there is no way to determine that it's still filtering on tags, this may confuse users who filter then leave the snippet UI and come back a long time later

marthacryan · 2020-11-05T22:52:00Z

Updated the "Filter by Tags" area to use a labicon of the caret up icon rather than the css it was using before. I added the behavior that when the "Filter by Tags" area is closed, it doesn't filter by any tags. I also changed the button to be completely "clickable", and not just the text.

It looks good except there's some weird css stuff going on in safari due to these changes - @ajbozarth maybe you could check it out? I'm not really finding anything to fix it (see below)

ajbozarth · 2020-11-06T00:00:33Z

I've pushed a fix for the safari css you found.

As for the "carrot" icon under Filter By Tags, I think we should move it next to the text and have it swap between a up and down carrot depending on if the tags display is open, making it more clear that its a dropdown. Also I would suggest we use the carrot icons already in lab rather than adding our own.

As for the disabling of the filter when it's closed, I think a better implementation might be to let the user close it and still be filtered, but to highlight the Filter By Tags text to indicate whether filtering is being applied.

ajbozarth · 2020-11-06T00:10:49Z

while testing my above fix I noticed some really odd behavior with the tags that should be further looked into as well, including a screen capture gif below to show it

marthacryan · 2020-11-06T16:31:11Z

If we're changing the design of the "filter by tags" button, what are your thoughts on having a tag button like the ToC uses? (see below)

marthacryan · 2020-11-07T00:10:06Z

Here's the updated filter button:

marthacryan · 2020-11-07T01:34:44Z

Small update to the size of the gray box that appears on hover (makes it tighter around the icon):

marthacryan · 2020-11-07T01:49:14Z

Fixed safari bug.

marthacryan · 2020-11-07T02:17:39Z

Thoughts on this indicator for when filtering by tags and the tag area is closed?

ajbozarth

LGTM

lresende

LGTM

Add the ability to search/filter by tags to the metadata explorer. Co-authored-by: Alex Bozarth <ajbozart@us.ibm.com> Co-authored-by: Ai-Vy Dang <aivyndang@gmail.com> Co-authored-by: Jay Ahn <aju960219@gmail.com> Co-authored-by: Karla Spuldaro <karla.spuldaro@ibm.com> Co-authored-by: Kiran Pinnipati <kpinnipati@gmail.com>

Martha Cryan added 3 commits October 20, 2020 13:42

Fix jest build error

f5298eb

Add basic search bar (doesn't work)

769d41b

Add ability to search

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.

Learn about vigilant mode

a530940

marthacryan marked this pull request as draft October 20, 2020 21:08

Martha Cryan added 5 commits October 22, 2020 14:11

Add ability to tag in editor

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.

Learn about vigilant mode

00f518e

Fix tag issue

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

55c85cf

Add tags file

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

446d6be

Add correct CSS

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

3f31653

Fix filter bug

5511727

marthacryan added the component:code-snippets label Oct 22, 2020

marthacryan requested review from ajbozarth, lresende and kevin-bates October 22, 2020 20:32

marthacryan marked this pull request as ready for review October 22, 2020 20:32

Remove debug line

31d15d7

marthacryan changed the title ~~[WIP] Add search and tag to code snippets~~ Add search and tag to code snippets Oct 22, 2020

marthacryan requested a review from ptitzler October 22, 2020 20:51

Fix search bugs

0136bab

ptitzler requested changes Oct 23, 2020

View reviewed changes

fixed turnary that was reversed

c256065

karlaspuldaro reviewed Nov 2, 2020

View reviewed changes

packages/metadata-common/src/MetadataWidget.tsx Outdated Show resolved Hide resolved

marthacryan added the Hacktoberfest label Nov 2, 2020

ajbozarth reviewed Nov 3, 2020

View reviewed changes

packages/metadata-common/src/Tags.tsx Outdated Show resolved Hide resolved

packages/metadata-common/src/Tags.tsx Outdated Show resolved Hide resolved

packages/metadata-common/src/FilterTools.tsx Outdated Show resolved Hide resolved

Martha Cryan added 4 commits November 4, 2020 10:26

Address review

58db681

Address review

cfd6173

Address review

a260bd7

Only filter when search by tags open

a6de804

fixed safari css bug

cfebc9a

Change tag icon

439c12d

Make tag css tighter

cb3fdc6

fix safari bug

705c69a

ajbozarth approved these changes Nov 9, 2020

View reviewed changes

lresende approved these changes Nov 9, 2020

View reviewed changes

lresende merged commit 63dd334 into elyra-ai:master Nov 9, 2020

lresende mentioned this pull request Nov 9, 2020

Code snippet search should search "language" fields #1019

Closed

lresende mentioned this pull request Nov 10, 2020

Enable searching for code-snippets #277

Closed

karlaspuldaro mentioned this pull request Nov 25, 2020

Update docs with search and tags feature #1113

Closed

marthacryan deleted the add-search branch April 23, 2021 15:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add search and tag to metadata #985

Add search and tag to metadata #985

marthacryan commented Oct 20, 2020 •

edited by lresende

Loading

Siteproxy

搜索引擎

常用网站

新闻网站

海外论坛

elyra-bot bot commented Oct 20, 2020

marthacryan commented Oct 22, 2020 •

edited

Loading

marthacryan commented Oct 22, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 •

edited

Loading

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 •

edited

Loading

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 •

edited

Loading

ptitzler left a comment

ajbozarth left a comment

ajbozarth Nov 3, 2020

ajbozarth left a comment

ajbozarth commented Nov 3, 2020

marthacryan commented Nov 5, 2020

ajbozarth commented Nov 6, 2020

ajbozarth commented Nov 6, 2020

marthacryan commented Nov 6, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

ajbozarth left a comment

lresende left a comment

Add search and tag to metadata #985

Add search and tag to metadata #985

Conversation

marthacryan commented Oct 20, 2020 • edited by lresende Loading

Siteproxy

搜索引擎

常用网站

新闻网站

海外论坛

elyra-bot bot commented Oct 20, 2020

marthacryan commented Oct 22, 2020 • edited Loading

marthacryan commented Oct 22, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 • edited Loading

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 • edited Loading

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020

ptitzler commented Oct 23, 2020 • edited Loading

ptitzler left a comment

Choose a reason for hiding this comment

ajbozarth left a comment

Choose a reason for hiding this comment

ajbozarth Nov 3, 2020

Choose a reason for hiding this comment

ajbozarth left a comment

Choose a reason for hiding this comment

ajbozarth commented Nov 3, 2020

marthacryan commented Nov 5, 2020

ajbozarth commented Nov 6, 2020

ajbozarth commented Nov 6, 2020

marthacryan commented Nov 6, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

marthacryan commented Nov 7, 2020

ajbozarth left a comment

Choose a reason for hiding this comment

lresende left a comment

Choose a reason for hiding this comment

marthacryan commented Oct 20, 2020 •

edited by lresende

Loading

marthacryan commented Oct 22, 2020 •

edited

Loading

ptitzler commented Oct 23, 2020 •

edited

Loading

ptitzler commented Oct 23, 2020 •

edited

Loading

ptitzler commented Oct 23, 2020 •

edited

Loading