Visual clue for Data Viewer substring search

[ronglums]

VS Code 1.61.0-insider + Jupyter extension v2021.9.1001261101

1. Open a list in the Data Viewer
2. In the filter box, type in a substring of a value in the list

expected: Any value that contains the typed-in string shows up
actual: no value shows up unless an asterisk is added. This is quite confusing. I understand why we added the "*" support but it would be nice to give users visual clues that an asterisk is required if they want to perform substring search

[greazer]

Related to #7090

[rchiodo]

What if I just changed it to always include * on the end? That's essentially what it used to do. Instead of exact match it was 'includes'

[rchiodo]

That would probably match the wanted behavior for most people.

[miguelsolorio]

also found filtering to be odd. my expectation is that filtering via text would filter results for whatever characters it contains and not an exact match. Other spreadsheets apps filter slightly different but aren't exact matches:

[rchiodo]

@misolori what do you think of the changes here:

microsoft/vscode-docs#4869

Essentially what will happen is:

• If user types a string without any regex escapable chars in it, we'll turn the match in to ^.*{user text}.*$. This means any row that contains the text (case insensitive) the user typed will match
• If user types a string beginning with '=', we'll do this instead ^{user text}$. Meaning any row that exactly matches the string will match
• If user types something with regex chars in it (like '.' or '*' or '+' or ')'), we'll just use the user text as the regex. All rows matching the regex will be returned.

An example.

• User types 'ar' in your list of rows above. Airfare would match, Car Rental would match, Fee Interest/Charge etc.
• User types '.*ar ' in your list of rows above. Only Car rental would match (because of the space)
• User types '=Airfare', then only Airfare would match.

[miguelsolorio]

That maps to what I expected 👏 👍

[ronglums]

Thanks @rchiodo! I like the change. The only question I have is how do we let users know about using "=" for exact match? Maybe a placeholder text "Use "=" for exact match" when they click into the filter box?

[rchiodo]

The idea is documentation (see the PR I linked above). We all chatted about it and thought it wouldn't fit. Filter box is usually only 5 to 10 chars wide.

[rchiodo]

Here's the text from that pr:

Filtering rows

Filtering rows in the data viewer can be done by typing in the textbox at the top of each column. Type a string you want to search for and any row that has that string in the column will be found:

If you want to find an exact match, prefix your filter with '=':

More complex filtering can be done by typing a regular expression:

[miguelsolorio]

Another thing to add, which we use in the search input, is to show the syntax when the user is focused on the input only so it's not always busy:

[ronglums]

@misolori yep that's what I was thinking but our filter box is too short to fit in the text I guess..

[rchiodo]

Yeah this is the default for me when opening the titanic data set

Probably enough for 5 characters

[rchiodo]

We could put a hover tooltip though. Something like:

Type to search.
Use =<text> for an exact match.
Regular expressions also supported.

[rchiodo]

Hover is turning out to be more difficult than I thought. We're using this fluent-ui here and they don't have a convenient way to add a tooltip

[rchiodo]

After discussing at standup, we probably need something that makes this work like other search inside of VS code. So an explicit button for

• Case match
• Whole world
• Regex or not

[burkeholland]

Noting that I ran into this in the Golden Scenario this week and I could not figure out how to do an exact match filter.

filter-exact-match.mp4

[justindorsey75]

I have been looking around for some documentation regarding the use of regex flags with the data viewer but could not find anything. Is this supported and if so what is the proper syntax for using in the data viewer? For say a case insensitive regex search for example which is the /i flag.

[rchiodo]

Documentation for the filtering is here:
https://code.visualstudio.com/docs/datascience/jupyter-notebooks#_filtering-rows

You should be able to enter anything that you can put into a javascript regex but you can't control the global options (like multiline or insensitive). So case insensitivity requires more complex expressions. You basically have to use | on both flavors of the character you're looking for.

[justindorsey75]

Thank you for the quick response. I looked over the documentation as well as the JavaScript documentation that you sent over. Thank you for sending that. Based on what I read it looks like JavaScript does not support inline mode modifiers such as "(?I)sometext(?-i).*" This is a mode modifier for a case and sensitive search that is inline.

I was thinking this could be used as an alternative to global flags. Can you confirm if that is the case? If so are there any feature requests currently for either global modifiers support or inline mode modifier support? If not I will likely put any feature request for it or whatever you would suggest is the best route for requesting this feature. Thank you again for your assistance.

[rchiodo]

Javascript doesn't support inline mode modifiers AFAIK. But you can create sets of characters that should match.

You can enter a feature request either in the discussions forum:
https://github.com/microsoft/vscode-jupyter/discussions/categories/new-ideas

Or by just entering a new issue.