feat: Status controls could have a way to have icons instead of the default letters #2177

Vaibhav91one · 2024-10-28T15:17:09Z

resolves #1157

…efault letters Avaiga#1157

FredLL-Avaiga

Tx @Vaibhav91one Looks good
need tests
what if

the dev does not want icons but wants to keep the initials ?
the dev wants to set its own icons ?

Vaibhav91one · 2024-10-29T16:07:21Z

Tx @Vaibhav91one Looks good need tests what if

the dev does not want icons but wants to keep the initials ?

the dev wants to set its own icons ?

So, the dev can use getInitials function which was being used before for the initials and if dev wants to set its own icons, just go to getStatusIcon function and change the icon which are being chosen according to the switch case. @FredLL-Avaiga

FredLL-Avaiga · 2024-10-29T16:10:48Z

Tx @Vaibhav91one Looks good need tests what if

the dev does not want icons but wants to keep the initials ?

the dev wants to set its own icons ?

So, the dev can use getInitials function which was being used before for the initials and if dev wants to set its own icons, just go to getStatusIcon function and change the icon which are being chosen according to the switch case. @FredLL-Avaiga

I suppose I was not clear enough.
The "dev" in this case is the person who writes a Taipy Application (he has no knowledge of js/ts or even how this works).
He just wants to show a status by writing some python/markdown that use the taipy components.

Vaibhav91one · 2024-10-29T16:20:22Z

Tx @Vaibhav91one Looks good need tests what if

the dev does not want icons but wants to keep the initials ?

the dev wants to set its own icons ?

So, the dev can use getInitials function which was being used before for the initials and if dev wants to set its own icons, just go to getStatusIcon function and change the icon which are being chosen according to the switch case. @FredLL-Avaiga

I suppose I was not clear enough. The "dev" in this case is the person who writes a Taipy Application (he has no knowledge of js/ts or even how this works. He just wants to show a status by writing some python/markdown that use the taipy components.

Oh, I thought a developer from taipy team, mb. So, for the intials ig a different component would be better and if we are talking about setting custom icons, rn there is no way to do that as the icons are according to status.

FredLL-Avaiga · 2024-10-30T22:48:28Z

Oh, I thought a developer from taipy team, mb. So, for the intials ig a different component would be better and if we are talking about setting custom icons, rn there is no way to do that as the icons are according to status.

A simple property could be used to define with_icons or not
svg files could be provided for each type of status ...

Vaibhav91one · 2024-10-31T04:30:25Z

Oh, I thought a developer from taipy team, mb. So, for the intials ig a different component would be better and if we are talking about setting custom icons, rn there is no way to do that as the icons are according to status.

A simple property could be used to define with_icons or not

svg files could be provided for each type of status ...

Hmm, Got it will look into it and update the PR.

…bug/Avaiga#1157-feat-improv-status-control

Vaibhav91one · 2024-11-04T04:11:52Z

Hey @FredLL-Avaiga , I was adding the requested changes and require some guidance, please look into the following,

In the statusProps I have added the following:

interface StatusProps extends TaipyBaseProps {
    value: StatusType;
    onClose?: (evt: MouseEvent) => void;
    icon?: ReactNode; // Custom delete icon
    withIcons?: boolean; 
    customSvg?: ReactNode; 
}

And then the function for choosing whether it will be initials, icon or customSvg

const getStatusIcon = (status: string, withIcons?: boolean, customSvg?: ReactNode) => {
    const color = status2Color(status);
    const iconProps = { 
        sx: { fontSize: 20, color: `${color}.main` } // Customize icon size and color
    };

    if (customSvg) {
        return <div style={{ color: `${color}.main` }}>{customSvg}</div>; // Render the custom SVG
    }

    if (withIcons) {
        switch (status2Color(status)) {
            case "success":
                return <CheckCircleIcon {...iconProps} />;
            case "warning":
                return <WarningIcon {...iconProps} />;
            case "error":
                return <ErrorIcon {...iconProps} />;
            default:
                return <InfoIcon {...iconProps} />;
        }
    } else {
        return getInitials(status); 
    }
};

Later in status component, I am taking the props and using them,

const Status = (props: StatusProps) => {
    const { value, id, withIcons = false, customSvg } = props;

    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);


    const chipProps = useMemo(() => {
        const cp: Record<string, unknown> = {};
        const statusColor = status2Color(value.status);
        cp.color = statusColor;
        cp.avatar = (
            <Avatar 
                sx={{ 
                    bgcolor: "transparent",
                    color: `${statusColor}.main`
                }}
            >
                {getStatusIcon(value.status, withIcons, customSvg)}
            </Avatar>
        );
        if (props.onClose) {
            cp.onDelete = props.onClose;
        }
        if (props.icon) {
            cp.deleteIcon = props.icon;
        }
        return cp;
    }, [value.status, props.onClose, props.icon, withIcons, customSvg]);

    return <Chip id={id} variant="outlined" {...chipProps} label={value.message} sx={chipSx} className={className} />;
};

My py script is the following:

from taipy.gui import Gui
from taipy.gui.icon import Icon

status = [
    ("warning", "Task is launched."),
    ("warning", "Taks is waiting."),
    ("error", "Task timeout."),
    ("info", "Process was cancelled.")
]

without_close = True
withIcons = True
icon = Icon("./halloween-clown.png", "Charles")

page = """
<|{status}|status|{withIcons}|customSvg={icon}|>
"""

if __name__ == "__main__":
    Gui(page).run(title="Status")

The issue here is I am not able to read the props being passed, I don't seem to get what I am doing wrong.

FredLL-Avaiga · 2024-11-04T08:44:13Z

Why don't you update your PR with this changes so that we can discuss on something concrete ?
You'll have to define new properties in the status declaration block in

taipy/taipy/gui/_renderers/factory.py

Line 543 in 3621961

("without_close", PropertyType.boolean, False),

you cannot pass a ReactNode typed property, but you can pass an URL or a svg string, like it's done in the image component.

taipy/frontend/taipy-gui/src/components/Taipy/Image.tsx

Line 55 in 8379661

const svgFile = p.substring(p.length - 4).toLowerCase() === ".svg";

Vaibhav91one · 2024-11-04T10:16:41Z

Why don't you update your PR with this changes so that we can discuss on something concrete ? You'll have to define new properties in the status declaration block in

taipy/taipy/gui/_renderers/factory.py

Line 543 in 3621961

("without_close", PropertyType.boolean, False),

you cannot pass a ReactNode typed property, but you can pass an URL or a svg string, like it's done in the image component.

taipy/frontend/taipy-gui/src/components/Taipy/Image.tsx

Line 55 in 8379661

const svgFile = p.substring(p.length - 4).toLowerCase() === ".svg";

Will do this and update the PR.

Vaibhav91one · 2024-11-06T09:43:43Z

Why don't you update your PR with this changes so that we can discuss on something concrete ? You'll have to define new properties in the status declaration block in

taipy/taipy/gui/_renderers/factory.py

Line 543 in 3621961

("without_close", PropertyType.boolean, False),

you cannot pass a ReactNode typed property, but you can pass an URL or a svg string, like it's done in the image component.

taipy/frontend/taipy-gui/src/components/Taipy/Image.tsx

Line 55 in 8379661

const svgFile = p.substring(p.length - 4).toLowerCase() === ".svg";

Will do this and update the PR.

Hi @FredLL-Avaiga , sorry for disturbing again, but after making changes in factory.py, do I need to do anything else besides running npm run build:dev in taipy-gui. Also, I tried to run factory.py but it showed the following error.

    from ..types import PropertyType
ImportError: attempted relative import with no known parent package

FredLL-Avaiga · 2024-11-06T09:52:44Z

Why don't you update your PR with this changes so that we can discuss on something concrete ? You'll have to define new properties in the status declaration block in

taipy/taipy/gui/_renderers/factory.py

Line 543 in 3621961

("without_close", PropertyType.boolean, False),

you cannot pass a ReactNode typed property, but you can pass an URL or a svg string, like it's done in the image component.

taipy/frontend/taipy-gui/src/components/Taipy/Image.tsx

Line 55 in 8379661

const svgFile = p.substring(p.length - 4).toLowerCase() === ".svg";

Will do this and update the PR.

Hi @FredLL-Avaiga , sorry for disturbing again, but after making changes in factory.py, do I need to do anything else besides running npm run build:dev in taipy-gui. Also, I tried to run factory.py but it showed the following error.
    from ..types import PropertyType
ImportError: attempted relative import with no known parent package

You need to create a python script and run it to show your component on a page
there are examples in doc/gui/examples

Vaibhav91one · 2024-11-06T11:39:23Z

Why don't you update your PR with this changes so that we can discuss on something concrete ? You'll have to define new properties in the status declaration block in

taipy/taipy/gui/_renderers/factory.py

Line 543 in 3621961

("without_close", PropertyType.boolean, False),

you cannot pass a ReactNode typed property, but you can pass an URL or a svg string, like it's done in the image component.

taipy/frontend/taipy-gui/src/components/Taipy/Image.tsx

Line 55 in 8379661

const svgFile = p.substring(p.length - 4).toLowerCase() === ".svg";

Will do this and update the PR.

Hi @FredLL-Avaiga , sorry for disturbing again, but after making changes in factory.py, do I need to do anything else besides running npm run build:dev in taipy-gui. Also, I tried to run factory.py but it showed the following error.
    from ..types import PropertyType
ImportError: attempted relative import with no known parent package
You need to create a python script and run it to show your component on a page there are examples in doc/gui/examples

Oh, that's clear to me, the python script is working. The only thing I am not understanding is the property. As you guided I created a with_icons property same as without_close which will be False by default and similar to without_close I am using that in python script but the Status component is showing undefined for the prop which is withIcons.

taipy/taipy/gui/_renderers/factory.py:

 .set_attributes(
            [
                ("without_close", PropertyType.boolean, False),
                ("with_icons", PropertyType.boolean, False),
                ("hover_text", PropertyType.dynamic_string),
            ]
        ),

Python Script:

with_icons = True
content = "./halloween-clown.png"

page = """
<|{status}|status|{with_icons}|>
<|{content}|image|label=This is an image|on_action=function_name|>
"""

if __name__ == "__main__":
    Gui(page).run(title="Status")

Status Component:

interface StatusProps extends TaipyBaseProps {
    value: StatusType;
    onClose?: (evt: MouseEvent) => void;
    icon?: ReactNode; // Custom delete icon
    withIcons?: boolean; 
    content?: string; 
}

FredLL-Avaiga · 2024-11-06T12:18:24Z

<|{status}|status|{with_icons}|>

<|{status}|status|with_icons|> or <|{status}|status|with_icons=True|>

Vaibhav91one · 2024-11-06T15:22:00Z

<|{status}|status|{with_icons}|>

<|{status}|status|with_icons|> or <|{status}|status|with_icons=True|>

Tried the above, still not working.

FredLL-Avaiga · 2024-11-06T16:07:56Z

Here you see the frontend component

taipy/taipy/gui/_renderers/factory.py

Line 538 in 3621961

attributes=attrs,
Here you can find the front end association

taipy/frontend/taipy-gui/src/components/Taipy/index.ts

Line 79 in 3621961

Status: StatusList,
That means that you need to add your withIcons property to the StatusList Component

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 88 in 8379661

defaultValue?: string;
and forward it to the Status component

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 162 in 8379661

<Status id={props.id} value={getGlobalStatus(values)} className={`${className} ${getComponentClassName(props.children)}`} {...globalProps} />

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 171 in 8379661

key={getId(props.id, idx)}

Vaibhav91one · 2024-11-06T16:47:43Z

Here you see the frontend component

taipy/taipy/gui/_renderers/factory.py

Line 538 in 3621961

attributes=attrs,

Here you can find the front end association

taipy/frontend/taipy-gui/src/components/Taipy/index.ts

Line 79 in 3621961

Status: StatusList,

That means that you need to add your withIcons property to the StatusList Component

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 88 in 8379661

defaultValue?: string;

and forward it to the Status component

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 162 in 8379661

<Status id={props.id} value={getGlobalStatus(values)} className={`${className} ${getComponentClassName(props.children)}`} {...globalProps} />

taipy/frontend/taipy-gui/src/components/Taipy/StatusList.tsx

Line 171 in 8379661

key={getId(props.id, idx)}

Oh, will do that. Thanks @FredLL-Avaiga.

…bug/Avaiga#1157-feat-improv-status-control

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

Vaibhav91one · 2024-11-08T19:15:09Z

Hi @FredLL-Avaiga, did the requested changes PFA, screenshots and python script for testing.

Default behaviour :
with_icons property:
custom_icon property:

Python Script for debugging:

from taipy.gui import Gui

status = [
    ("warning", "Task is launched."),
    ("warning", "Taks is waiting."),
    ("error", "Task timeout."),
    ("info", "Process was cancelled.")
]

with_icons = True

// For SVG url
custom_icon = "https://www.svgrepo.com/show/530594/pants.svg;https://www.svgrepo.com/show/530595/hotel.svg;https://www.svgrepo.com/show/530596/diving-goggles.svg;https://www.svgrepo.com/show/530597/hat.svg;https://www.svgrepo.com/show/530598/building.svg"

// for Local SVG Icons
custom_icon = "./mickey-and-goofy-halloween.svg;./mickey-and-goofy-halloween.svg;./mickey-and-goofy-halloween.svg;./mickey-and-goofy-halloween.svg;./mickey-and-goofy-halloween.svg"



page = """
<|{status}|status|{custom_icon}|>
<|{status}|status|{with_icons}|>
<|{status}|status|>
"""

if __name__ == "__main__":
    Gui(page).run(title="Status")

FredLL-Avaiga · 2024-11-13T09:22:02Z

can you fix the linter issues ?

Vaibhav91one · 2024-11-13T09:33:29Z

can you fix the linter issues ?

Yeah will do that, It was in factory.py file right?

…bug/Avaiga#1157-feat-improv-status-control

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

Vaibhav91one · 2024-11-17T09:22:44Z

@FredLL-Avaiga Did the requested changes and added few test cases.

FredLL-Avaiga · 2024-11-18T08:26:22Z

front end test fails

…bug/Avaiga#1157-feat-improv-status-control

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

Vaibhav91one · 2024-11-18T19:51:11Z

front end test fails

Hi @FredLL-Avaiga , it was useMemo Hooks that were causing the issue. All Tests passed for StatusList component.

jrobinAV · 2024-11-19T12:31:52Z

Thank you @Vaibhav91one !

Vaibhav91one · 2024-11-19T12:59:09Z

Thank you @jrobinAV and @FredLL-Avaiga thank you for the guidance, learned a lot.

RymMichaut · 2024-11-19T14:35:42Z

hey @Vaibhav91one congratulations!
Please reach out to me at [email protected] to prepare your swag shipping

Vaibhav91one and others added 2 commits October 28, 2024 20:44

feat: Status controls could have a way to have icons instead of the d…

7dd6e74

…efault letters Avaiga#1157

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

cfc492f

FredLL-Avaiga requested changes Oct 29, 2024

View reviewed changes

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

eed40a2

Vaibhav91one and others added 2 commits November 1, 2024 22:19

Merge branch 'develop' of https://github.com/Vaibhav91one/taipy into …

1408a08

…bug/Avaiga#1157-feat-improv-status-control

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

7f1d6e4

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

dc8806d

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

cae31b4

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

1d0793f

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

789f010

Vaibhav91one added 4 commits November 9, 2024 00:35

Merge branch 'develop' of https://github.com/Vaibhav91one/taipy into …

5e3b9cd

…bug/Avaiga#1157-feat-improv-status-control

Changes: options to have intials or icons, option to add a svg

39fa332

Merge branch 'bug/Avaiga#1157-feat-improv-status-control' of https://…

abed48c

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

Removing console.log used for debugging

acf3fb1

FredLL-Avaiga and others added 7 commits November 13, 2024 11:07

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

29d453a

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

bb9dc9c

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

0160b2a

Merge branch 'develop' of https://github.com/Vaibhav91one/taipy into …

3f0235b

…bug/Avaiga#1157-feat-improv-status-control

Merge branch 'develop' of https://github.com/Vaibhav91one/taipy into …

e6bc154

…bug/Avaiga#1157-feat-improv-status-control

Request Changes + Test cases + Linter Issue

945241c

Merge branch 'bug/Avaiga#1157-feat-improv-status-control' of https://…

4ca02fb

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

FredLL-Avaiga self-requested a review November 18, 2024 08:26

FredLL-Avaiga and others added 4 commits November 18, 2024 19:31

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

314748c

Merge branch 'develop' of https://github.com/Vaibhav91one/taipy into …

58ed355

…bug/Avaiga#1157-feat-improv-status-control

frontend test fix: useMemo hook inside another hook

4cd8d46

Merge branch 'bug/Avaiga#1157-feat-improv-status-control' of https://…

d607b42

…github.com/Vaibhav91one/taipy into bug/Avaiga#1157-feat-improv-status-control

FredLL-Avaiga approved these changes Nov 18, 2024

View reviewed changes

FredLL-Avaiga assigned Vaibhav91one Nov 19, 2024

FredLL-Avaiga added 📈 Improvement Improvement of a feature. 🖰 GUI Related to GUI 🟨 Priority: Medium Not blocking but should be addressed hacktoberfest hacktoberfest issues labels Nov 19, 2024

Merge branch 'develop' into bug/Avaiga#1157-feat-improv-status-control

6e65f6f

FredLL-Avaiga added the ✅ hacktoberfest: approved An approved PR for Hacktoberfest rewarding label Nov 19, 2024

jrobinAV added the hacktoberfest - 200💎💎 Issues rewarded by 200 points label Nov 19, 2024

jrobinAV merged commit f080490 into Avaiga:develop Nov 19, 2024
132 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Status controls could have a way to have icons instead of the default letters #2177

feat: Status controls could have a way to have icons instead of the default letters #2177

Vaibhav91one commented Oct 28, 2024 •

edited by FredLL-Avaiga

Loading

FredLL-Avaiga left a comment

Vaibhav91one commented Oct 29, 2024

FredLL-Avaiga commented Oct 29, 2024 •

edited

Loading

Vaibhav91one commented Oct 29, 2024

FredLL-Avaiga commented Oct 30, 2024

Vaibhav91one commented Oct 31, 2024

Vaibhav91one commented Nov 4, 2024

FredLL-Avaiga commented Nov 4, 2024

Vaibhav91one commented Nov 4, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024 •

edited

Loading

Vaibhav91one commented Nov 6, 2024

Vaibhav91one commented Nov 8, 2024

FredLL-Avaiga commented Nov 13, 2024

Vaibhav91one commented Nov 13, 2024

Vaibhav91one commented Nov 17, 2024

FredLL-Avaiga commented Nov 18, 2024

Vaibhav91one commented Nov 18, 2024

jrobinAV commented Nov 19, 2024

Vaibhav91one commented Nov 19, 2024

RymMichaut commented Nov 19, 2024

feat: Status controls could have a way to have icons instead of the default letters #2177

feat: Status controls could have a way to have icons instead of the default letters #2177

Conversation

Vaibhav91one commented Oct 28, 2024 • edited by FredLL-Avaiga Loading

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

Vaibhav91one commented Oct 29, 2024

FredLL-Avaiga commented Oct 29, 2024 • edited Loading

Vaibhav91one commented Oct 29, 2024

FredLL-Avaiga commented Oct 30, 2024

Vaibhav91one commented Oct 31, 2024

Vaibhav91one commented Nov 4, 2024

FredLL-Avaiga commented Nov 4, 2024

Vaibhav91one commented Nov 4, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024

Vaibhav91one commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024 • edited Loading

Vaibhav91one commented Nov 6, 2024

Vaibhav91one commented Nov 8, 2024

FredLL-Avaiga commented Nov 13, 2024

Vaibhav91one commented Nov 13, 2024

Vaibhav91one commented Nov 17, 2024

FredLL-Avaiga commented Nov 18, 2024

Vaibhav91one commented Nov 18, 2024

jrobinAV commented Nov 19, 2024

Vaibhav91one commented Nov 19, 2024

RymMichaut commented Nov 19, 2024

Vaibhav91one commented Oct 28, 2024 •

edited by FredLL-Avaiga

Loading

FredLL-Avaiga commented Oct 29, 2024 •

edited

Loading

FredLL-Avaiga commented Nov 6, 2024 •

edited

Loading