-
Notifications
You must be signed in to change notification settings - Fork 512
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
better icons support in operators #4373
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { Icon, IconProps } from "@mui/material"; | ||
import "material-icons/iconfont/material-icons.css"; | ||
import React from "react"; | ||
|
||
// Available Icons: https://github.com/marella/material-icons?tab=readme-ov-file#available-icons | ||
export default function MuiIconFont(props: MuiIconFontProps) { | ||
const { name, ...iconProps } = props; | ||
return <Icon {...iconProps}>{name}</Icon>; | ||
} | ||
|
||
type MuiIconFontProps = IconProps & { | ||
name: string; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { MuiIconFont, PillButton } from "@fiftyone/components"; | ||
import usePanelEvent from "@fiftyone/operators/src/usePanelEvent"; | ||
import { usePanelId } from "@fiftyone/spaces"; | ||
import { IconButton, Link } from "@mui/material"; | ||
import React, { useCallback } from "react"; | ||
import styled from "styled-components"; | ||
import { getComponentProps } from "../utils"; | ||
|
||
export default function IconButtonView(props) { | ||
const { schema } = props; | ||
const { view = {} } = schema; | ||
const { icon, operator, params = {}, prompt, variant, label } = view; | ||
const panelId = usePanelId(); | ||
const handleClick = usePanelEvent(); | ||
|
||
const Icon = icon ? ( | ||
<MuiIconFont | ||
name={icon} | ||
sx={ | ||
variant === "round" | ||
? {} | ||
: { color: (theme) => theme.palette.primary.main } | ||
} | ||
{...getComponentProps(props, "icon")} | ||
/> | ||
) : null; | ||
|
||
const onClick = useCallback(() => { | ||
handleClick(panelId, { params, operator, prompt }); | ||
}, [panelId, params, operator, prompt, handleClick]); | ||
|
||
if (variant === "round") { | ||
return ( | ||
<PillButton | ||
icon={Icon || label} | ||
title={label} | ||
highlight | ||
onClick={onClick} | ||
aria-label={`Button for ${icon}`} | ||
/> | ||
); | ||
} | ||
|
||
if (variant === "square") { | ||
return ( | ||
<SquareButton | ||
title={label} | ||
aria-label={`Button for ${icon}`} | ||
onClick={onClick} | ||
{...getComponentProps(props, "button")} | ||
> | ||
{Icon || label} | ||
</SquareButton> | ||
); | ||
} | ||
|
||
return ( | ||
<IconButton | ||
title={label} | ||
aria-label={`Button for ${icon}`} | ||
size="small" | ||
{...getComponentProps(props, "button")} | ||
onClick={onClick} | ||
> | ||
{Icon || label} | ||
</IconButton> | ||
); | ||
} | ||
|
||
const SquareButton = styled(Link)` | ||
display: flex; | ||
color: var(--fo-palette-primary-plainColor); | ||
align-items: center; | ||
cursor: pointer; | ||
border-bottom: 1px var(--fo-palette-primary-plainColor) solid; | ||
background: var(--fo-palette-neutral-softBg); | ||
border-top-left-radius: 3px; | ||
border-top-right-radius: 3px; | ||
padding: 0.25rem; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { PluginComponentType, registerComponent } from "@fiftyone/plugins"; | ||
import { defineCustomPanel } from "../CustomPanel"; | ||
import OperatorIcon from "../OperatorIcon"; | ||
import { ExecutionContext } from "../operators"; | ||
|
||
export default function registerPanel(ctx: ExecutionContext) { | ||
registerComponent({ | ||
type: PluginComponentType.Panel, | ||
name: ctx.params.panel_name, | ||
component: defineCustomPanel(ctx.params), | ||
label: ctx.params.panel_label, | ||
activator: () => true, | ||
Icon: () => { | ||
return ( | ||
<OperatorIcon | ||
icon={ctx.params.icon || "extension"} | ||
darkIcon={ctx.params.dark_icon} | ||
lightIcon={ctx.params.light_icon} | ||
iconProps={{ sx: { fontSize: 14, mr: "0.5rem" } }} | ||
/> | ||
); | ||
}, | ||
panelOptions: { | ||
allowDuplicates: ctx.params.allow_duplicates, | ||
}, | ||
}); | ||
} |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,7 +1,6 @@ | ||||||||||||||||||||
import { | ||||||||||||||||||||
Layout, | ||||||||||||||||||||
SpaceNode, | ||||||||||||||||||||
usePanel, | ||||||||||||||||||||
usePanelState, | ||||||||||||||||||||
usePanels, | ||||||||||||||||||||
useSetPanelStateById, | ||||||||||||||||||||
|
@@ -13,9 +12,11 @@ import * as types from "./types"; | |||||||||||||||||||
|
||||||||||||||||||||
import { toSlug } from "@fiftyone/utilities"; | ||||||||||||||||||||
import copyToClipboard from "copy-to-clipboard"; | ||||||||||||||||||||
import { merge } from "lodash"; | ||||||||||||||||||||
import { useSetRecoilState } from "recoil"; | ||||||||||||||||||||
import { useOperatorExecutor } from "."; | ||||||||||||||||||||
import useRefetchableSavedViews from "../../core/src/hooks/useRefetchableSavedViews"; | ||||||||||||||||||||
import registerPanel from "./Panel/register"; | ||||||||||||||||||||
import { | ||||||||||||||||||||
ExecutionContext, | ||||||||||||||||||||
Operator, | ||||||||||||||||||||
|
@@ -25,10 +26,7 @@ import { | |||||||||||||||||||
executeOperator, | ||||||||||||||||||||
listLocalAndRemoteOperators, | ||||||||||||||||||||
} from "./operators"; | ||||||||||||||||||||
import { usePromptOperatorInput, useShowOperatorIO } from "./state"; | ||||||||||||||||||||
import { merge } from "lodash"; | ||||||||||||||||||||
import { PluginComponentType, registerComponent } from "@fiftyone/plugins"; | ||||||||||||||||||||
import CustomPanel, { defineCustomPanel } from "./CustomPanel"; | ||||||||||||||||||||
import { useShowOperatorIO } from "./state"; | ||||||||||||||||||||
import usePanelEvent from "./usePanelEvent"; | ||||||||||||||||||||
|
||||||||||||||||||||
// | ||||||||||||||||||||
|
@@ -957,41 +955,27 @@ class RegisterPanel extends Operator { | |||||||||||||||||||
return new OperatorConfig({ | ||||||||||||||||||||
name: "register_panel", | ||||||||||||||||||||
label: "Register panel", | ||||||||||||||||||||
// unlisted: true, | ||||||||||||||||||||
unlisted: true, | ||||||||||||||||||||
}); | ||||||||||||||||||||
} | ||||||||||||||||||||
async resolveInput(ctx: ExecutionContext): Promise<types.Property> { | ||||||||||||||||||||
const inputs = new types.Object(); | ||||||||||||||||||||
inputs.str("panel_name", { label: "Panel name", required: true }); | ||||||||||||||||||||
inputs.str("panel_label", { label: "Panel label", required: true }); | ||||||||||||||||||||
inputs.str("on_load", { | ||||||||||||||||||||
label: "On load operator", | ||||||||||||||||||||
// required: true, | ||||||||||||||||||||
}); | ||||||||||||||||||||
inputs.str("on_change", { | ||||||||||||||||||||
label: "On change operator", | ||||||||||||||||||||
// required: true, | ||||||||||||||||||||
}); | ||||||||||||||||||||
inputs.str("on_unload", { | ||||||||||||||||||||
label: "On unload operator", | ||||||||||||||||||||
}); | ||||||||||||||||||||
inputs.str("icon", { label: "Icon" }); | ||||||||||||||||||||
inputs.str("dark_icon", { label: "Icon for dark mode" }); | ||||||||||||||||||||
inputs.str("light_icon", { label: "Icon for light mode" }); | ||||||||||||||||||||
inputs.str("on_load", { label: "On load operator" }); | ||||||||||||||||||||
inputs.str("on_change", { label: "On change operator" }); | ||||||||||||||||||||
inputs.str("on_unload", { label: "On unload operator" }); | ||||||||||||||||||||
inputs.bool("allow_duplicates", { | ||||||||||||||||||||
label: "Allow duplicates", | ||||||||||||||||||||
default: false, | ||||||||||||||||||||
}); | ||||||||||||||||||||
return new types.Property(inputs); | ||||||||||||||||||||
} | ||||||||||||||||||||
async execute(ctx: ExecutionContext): Promise<void> { | ||||||||||||||||||||
registerComponent({ | ||||||||||||||||||||
type: PluginComponentType.Panel, | ||||||||||||||||||||
name: ctx.params.panel_name, | ||||||||||||||||||||
component: defineCustomPanel(ctx.params), | ||||||||||||||||||||
label: ctx.params.panel_label, | ||||||||||||||||||||
activator: () => true, | ||||||||||||||||||||
panelOptions: { | ||||||||||||||||||||
allowDuplicates: ctx.params.allow_duplicates, | ||||||||||||||||||||
}, | ||||||||||||||||||||
}); | ||||||||||||||||||||
registerPanel(ctx); | ||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The use of - registerPanel(ctx);
+ registerPanel({
+ name: ctx.params.panel_name,
+ label: ctx.params.panel_label,
+ on_load: ctx.params.on_load,
+ on_change: ctx.params.on_change,
+ on_unload: ctx.params.on_unload,
+ allow_duplicates: ctx.params.allow_duplicates
+ }); Committable suggestion
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The parameters are extracted and used in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @imanjra, thank you for your patience. After reviewing the implementation of the I appreciate your clarification, and I'll remember this detail for future reviews. Analysis chainScripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for the implementation of the `registerPanel` function in TypeScript files
rg "function registerPanel" --type ts
Length of output: 130 Script: #!/bin/bash
# Fetch and display the content of register.tsx where registerPanel is defined
cat app/packages/operators/src/Panel/register.tsx
Length of output: 833 New Learnings Added
|
||||||||||||||||||||
} | ||||||||||||||||||||
} | ||||||||||||||||||||
|
||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆒