How do I rename I custom component that I adjusted?

[menzelma]

I created a custom component and I try to rename it. But after changing the name and display_name it still shows as "Custom Component" which makes it hard to differentiate from other custom components.

[dosubot[bot]]

Hey @menzelma! I'm here to assist you with any bugs, questions, or contributions you have. Just let me know how I can help! Dosu

To rename a custom component so that it no longer shows as "Custom Component" after changing the name and display_name, you need to ensure that the display_name attribute in your custom component class is set correctly. Here is an example:

from langflow.custom import CustomComponent
from langchain.schema import Document

class DocumentProcessor(CustomComponent):
    display_name = "Document Processor"
    description = "This component processes a document"

    def build_config(self) -> dict:
        options = ["Uppercase", "Lowercase", "Titlecase"]
        return {
            "function": {"options": options,
                         "value": options[0],
                         "display_name": "Function"},
            "document": {"display_name": "Document"}
        }

    def build(self, document: Document, function: str) -> Document:
        if isinstance(document, list):
            document = document[0]
        page_content = document.page_content
        if function == "Uppercase":
            page_content = page_content.upper()
        elif function == "Lowercase":
            page_content = page_content.lower()
        elif function == "Titlecase":
            page_content = page_content.title()
        self.repr_value = f"Result of {function} function: {page_content}"
        return Document(page_content=page_content)

Ensure that the display_name attribute is set to the desired name, such as "Document Processor" in this example. This name will appear on the canvas instead of "Custom Component" ^[1].

To continue talking to Dosu, mention @dosu.

[menzelma]

When applying your example to a custom component it still appears as "Custom Component" in the canvas. So I still don't know what I am doing wrong

[dosubot[bot]]

The reason your custom component still appears as "Custom Component" in the canvas even after setting the display_name attribute is likely because the display_name attribute is not being properly utilized or referenced in the code that renders the component on the canvas.

In the provided code, the display_name attribute is set correctly within the CustomComponent class:

class CustomComponent(Component):
    display_name = "Async Component"
    description = "Use as a template to create your own component."
    documentation: str = "http://docs.langflow.org/components/custom"
    icon = "custom_components"
    inputs = [
        StrInput(name="input_value", display_name="Input Value", value="Hello, World!", input_types=["Data"]),
    ]
    outputs = [
        Output(display_name="Output", name="output", method="build_output"),
    ]

However, the JSON configuration for the component still shows the display_name as "Custom Component":

{
    "id": "CustomComponent-aF0h1",
    "data": {
        "type": "CustomComponent",
        "node": {
            "template": {
                "_type": "Component",
                "code": {
                    "type": "code",
                    "required": true,
                    "placeholder": "",
                    "list": false,
                    "show": true,
                    "multiline": true,
                    "value": "# from langflow.field_typing import Data\nfrom langflow.custom import Component\nfrom langflow.io import StrInput\nfrom langflow.schema import Data\nfrom langflow.io import Output\nfrom pathlib import Path\nimport aiofiles\n\nclass CustomComponent(Component):\n    display_name = \"Async Component\"\n    description = \"Use as a template to create your own component.\"\n    documentation: str = \"http://docs.langflow.org/components/custom\"\n    icon = \"custom_components\"\n\n    inputs = [\n        StrInput(name=\"input_value\", display_name=\"Input Value\", value=\"Hello, World!\", input_types=[\"Data\"]),\n    ]\n\n    outputs = [\n        Output(display_name=\"Output\", name=\"output\", method=\"build_output\"),\n    ]\n\n    async def build_output(self) -> Data:\n        if isinstance(self.input_value, Data):\n            data = self.input_value\n        else:\n            data = Data(value=self.input_value)\n            \n        if \"path\" in data:\n            path = self.resolve_path(data.path)\n            path_obj = Path(path)\n            async with aiofiles.open(path, \"w\") as f:\n                await f.write(data.model_dump())\n        \n        self.status = data\n        return data",
                    "fileTypes": [],
                    "file_path": "",
                    "password": false,
                    "name": "code",
                    "advanced": true,
                    "dynamic": true,
                    "info": "",
                    "load_from_db": false,
                    "title_case": false
                },
                "input_value": {
                    "trace_as_metadata": true,
                    "load_from_db": false,
                    "list": false,
                    "required": false,
                    "placeholder": "",
                    "show": true,
                    "value": "Hello, World!",
                    "name": "input_value",
                    "display_name": "Input Value",
                    "advanced": false,
                    "input_types": [
                        "Data"
                    ],
                    "dynamic": false,
                    "info": "",
                    "title_case": false,
                    "type": "str"
                }
            },
            "description": "Use as a template to create your own component.",
            "icon": "custom_components",
            "base_classes": [
                "Data"
            ],
            "display_name": "Custom Component",
            "documentation": "http://docs.langflow.org/components/custom",
            "custom_fields": {},
            "output_types": [],
            "pinned": false,
            "conditional_paths": [],
            "frozen": false,
            "outputs": [
                {
                    "types": [
                        "Data"
                    ],
                    "selected": "Data",
                    "name": "output",
                    "display_name": "Output",
                    "method": "build_output",
                    "value": "__UNDEFINED__",
                    "cache": true,
                    "hidden": false
                }
            ],
            "field_order": [
                "input_value"
            ],
            "beta": false,
            "edited": false
        },
        "id": "CustomComponent-aF0h1",
        "description": "Use as a template to create your own component.",
        "display_name": "Custom Component"
    },
    "selected": false,
    "width": 384,
    "height": 337,
    "positionAbsolute": {
        "x": 888.0012384532345,
        "y": 272.41352212880344
    },
    "dragging": false
}

Ensure that the JSON configuration for the component is updated to reflect the correct display_name:

"display_name": "Async Component"

You may need to check the rendering logic in the UI code to ensure it correctly accesses and displays the display_name attribute from the component class ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[menzelma]

I adjusted the display_name and name property in the json after I exported the Component. Importing it again showed now the new name and solved my issue

[zcasanova]

You can double click the name in the UI to change it, which is simpler than export/import json.