On a component box, it is not clear that the red "X" will re-run the component unless you hover over or click

[Nate McCall]

See attached images. On a failed step, the component will outline in red, which is helpful. However the "Play" triangle is lost, and only a red "X" appears. It is not clear that this "X" will rerun until you mouse-over or click on it. See attached pictures.

Version:

Starting Langflow v1.0.0a33...

[dosubot]

To address the confusion caused by the "X" icon for rerunning a component in Langflow, consider replacing it with a more intuitive icon, such as RefreshCw from "lucide-react", which is commonly associated with refresh or retry actions. This change can make the UI more user-friendly by clearly indicating the rerun functionality. Here's how you could implement this in your code:

import { RefreshCw } from "lucide-react"; // Import the RefreshCw icon

// In the CardHeader, replace the XCircle icon with RefreshCw
<CardHeader>
  <div className="m-auto">
    <RefreshCw strokeWidth={1.5} className="h-16 w-16" /> // Changed icon
  </div>
  <div>
    <p className="mb-4 text-xl text-foreground">
      Sorry, we found an unexpected error!
    </p>
  </div>
</CardHeader>

This modification replaces the XCircle icon with a RefreshCw icon, making it clearer that the button is meant to rerun the failed component. Ensure to test these changes in a development branch before merging them into the main project to maintain stability and follow best practices.

Details

Sources

• src/frontend/src/components/crashErrorComponent/index.tsx
• CONTRIBUTING.md
• src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
• src/frontend/src/utils/styleUtils.ts
• src/frontend/src/components/fetchErrorComponent/index.tsx
• src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
• src/frontend/run-tests.sh
• src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
• src/frontend/tests/onlyFront/dragAndDrop.spec.ts
• src/frontend/package.json
• src/frontend/package.json
• pyproject.toml
• pyproject.toml
• docs/docs/whats-new/a-new-chapter-langflow.mdx
• docs/docs/contributing/community.md
• docs/docs/contributing/github-issues.md

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.