Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: icon type auto-generation and normalization #696

Merged
merged 11 commits into from
Sep 6, 2024

Conversation

ethanalvizo
Copy link
Contributor

@ethanalvizo ethanalvizo commented Aug 2, 2024

Closes #601
Closes #784

Updated deephaven/ui README with instructions on how to run the script. Wasn't certain if it should run everytime the docker container is built?

@ethanalvizo ethanalvizo self-assigned this Aug 2, 2024
index = words.index(word)
if index < len(words) - 1:
next_word = words[index + 1]
if next_word == "IconDefinition;":
Copy link
Contributor

@bmingles bmingles Aug 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bender we should consider changing something in @deephaven/icons so that we have a separate types file that only includes the icon names. This would help with some .ts scenarios as well so we don't have to exclude the stuff at the end of the file.

...
// end of current icons/dist/index.d.ts
import { IconDefinition, IconLookup, IconName, IconPrefix, IconPack } from '@fortawesome/fontawesome-common-types';
export { IconDefinition, IconLookup, IconName, IconPrefix, IconPack } from '@fortawesome/fontawesome-common-types';
export const prefix: IconPrefix;
export const vs: IconPack;
export const dh: IconPack;

As-is, this is potentially brittle to changes.

@mattrunyon
Copy link
Collaborator

You could modify the build.js script in @deephaven/icons to output a separate d.ts file with just the icon names as a type. If you look at the dtsIndex, you'll see how to get the name from the files array in build.js.

I also think our d.ts file is slightly wrong. It doesn't look like we export a vs namespace of all the icons.

Another option would be to use Node and do import * as icons from '@deephaven/icons';. Then iterate the icons obj and do a check like if ('prefix' in icon && 'iconName' in icon)

@ethanalvizo
Copy link
Contributor Author

Can use the example below to validate snake case and camel case for icon names works.

For duplicate icons (ex. vsEye and dhEye) I default to the vsIcon if they enter the icon name with no prefix. So 'Eye' or 'eye' would render 'vsEye' but 'dhEye' or 'dh_eye' still renders 'dhEye'

from deephaven import ui


@ui.component
def ui_button_group():
    actionGroupWithItems = ui.action_group(
        ui.item(ui.icon("dhRefresh"), aria_label="Restart"),
        ui.item(ui.icon("vsRefresh"), aria_label="Record"),
        ui.item(ui.icon("vs_refresh"), aria_label="Play"),
        ui.item(ui.icon("dh_refresh"), aria_label="Pause"),
        ui.item(ui.icon("dhRefresh"), aria_label="Edit"),
        ui.item(ui.icon("Refresh"), aria_label="Configure"),
    )
    return [actionGroupWithItems]


my_action_buttons = ui_button_group()

@ethanalvizo ethanalvizo marked this pull request as ready for review August 16, 2024 18:22
@ethanalvizo ethanalvizo changed the title fix: icon type auto-generation fix: icon type auto-generation and normalization Aug 16, 2024
plugins/ui/README.md Outdated Show resolved Hide resolved
plugins/ui/README.md Show resolved Hide resolved
plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
plugins/ui/make_icon_types.py Show resolved Hide resolved
plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
Copy link
Member

@mofojed mofojed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double check with @dsmmcken that we do want to include dh_refresh and other icons that conflict with the VS counterpart similarly.

plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
plugins/ui/src/deephaven/ui/components/types/icon_types.py Outdated Show resolved Hide resolved
@dsmmcken dsmmcken mentioned this pull request Aug 29, 2024
"dh_new_circle_large_filled",
"dh_new_square_filled",
"dh_organization_add",
"dh_pandas",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dsmmcken I want to make sure we get this right...
So we have a dhPandas icon, and no vsPandas icon. Do we want the Literal IconTypes to only contain pandas and it points to dhPandas icon? And not have a dh_pandas? And then for something like refresh where we have vsRefresh and dhRefresh, we should just have refresh => vsRefresh and dh_refresh => dhRefresh?
Only concern is if we just have pandas => dhPandas and no dh_pandas, then if we update VS Code icons and then they add a vsPandas, then we'd have pandas => vsPandas, and dh_pandas => dhPandas. Meaning we'd be changing that icon. Would that be an issue?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or should we just always prefix our dh icons with dh_ and then we can avoid any conflicts altogether?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see arguments for both now that you lay it out that way. I guess I am good with always prefixing dh_ to handle potential future conflicts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also added this change now but leaving this unresolved so it can be seen during review.

@mattrunyon
Copy link
Collaborator

Why use Python and regex to parse the icons instead of just importing all the icons in JS and iterating the actual objects? The output file is written line by line and not using anything specific from Python to create the types.

It works, but IMO it makes a lot more sense to use Node and import * as Icons from '@deephaven/icons'; then iterate that to create your list. No regex and doesn't rely on specifics of the d.ts file.

@mattrunyon
Copy link
Collaborator

Also, why do we list multiple variants of some things in the icon mappings? Specifically we have things like Add and add as options. Add never worked previously. Neither did vs_add. So why are we adding those if we don't want people to use them and they've never worked? It should only be add and vsAdd since vsAdd previously worked.

Or only accept the allowed icon names and mark it as breaking that some icon names changed. I think that's fine since this is still pre-release/beta/whatever, but I know others on the team don't share my view.

Final note, this should not be a fix. Probably a feat

@mofojed
Copy link
Member

mofojed commented Aug 30, 2024

@mattrunyon it's Python as in theory this should be part of the Python build process. Still manually generated right now so that's kind of a moot point. We also don't add icons very frequently.
True we probably don't need to be adding vs_add, but I don't mind adding them to the IconMapping if they do map to valid icons, only that they're not polluting the IconTypes literal.
I'm fine with fix or build, we're just being more specific with the types here. I guess you could argue a "feature" as now the user has the literal types for icons; that being said, you can't really autocomplete the literals from our IDE anyway so it's not really a feature that does a lot for them right now.

@ethanalvizo see @dsmmcken 's comment about dh icons, they should just be dh_, don't do a prefixless version of them in the types: #696 (comment)

Copy link
Member

@mofojed mofojed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor cleanup looks good overall

plugins/ui/make_icon_types.py Outdated Show resolved Hide resolved
@ethanalvizo ethanalvizo merged commit ef4bb29 into deephaven:main Sep 6, 2024
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Normalize icon names Auto-generate Icon literal types
6 participants