Mouse on the canvas does not show

[pulkit21aug]

Bug Description

When as end user I try to drag and drop components and select. The mouse selector is in white color and so is the mouse cursor. You need to fix this so that mouse pointer shows on your canvas correctly. Due to this ease of use is not good experience for developers.

Reproduction

Just open any project on windows laptop. It is hard to see pointer on canvas while editing components

Expected behavior

Mouse should be seen correctly

Who can help?

@ogabrielluiz

Operating System

Windows 11

Langflow Version

1.0.16

Python Version

3.10

Screenshot

No response

Flow File

No response

[dosubot[bot]]

To fix the issue where the mouse pointer is not visible on the canvas while dragging and dropping components in Langflow version 1.0.16 on Windows 11, you can add the following CSS rule to ensure the cursor is visible during drag operations:

.react-flow__node-dragging {
  cursor: grabbing !important;
}

This CSS rule forces the cursor to display as "grabbing" when a node is being dragged, which should make the mouse pointer visible.

You can add this CSS rule to your global stylesheet or directly within the component's CSS file. If you are using a CSS-in-JS solution, you can add it as follows:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  .react-flow__node-dragging {
    cursor: grabbing !important;
  }
`;

export default function Page({
  flow,
  view,
}: {
  flow: FlowType;
  view?: boolean;
}): JSX.Element {
  // ... existing code ...

  return (
    <>
      <GlobalStyle />
      <div className="h-full w-full" ref={reactFlowWrapper}>
        {showCanvas ? (
          <div id="react-flow-id" className="h-full w-full">
            <ReactFlow
              // ... existing props ...
            >
              <Background className="" />
              {!view && (
                <Controls className="fill-foreground stroke-foreground text-primary [&>button]:border-b-border [&>button]:bg-muted hover:[&>button]:bg-border"></Controls>
              )}
              <SelectionMenu
                lastSelection={lastSelection}
                isVisible={selectionMenuVisible}
                nodes={lastSelection?.nodes}
                onClick={() => {
                  handleGroupNode();
                }}
              />
            </ReactFlow>
          </div>
        ) : (
          <></>
        )}
      </div>
    </>
  );
}

This should resolve the issue with the mouse pointer visibility during drag and drop operations ^[1].

To continue talking to Dosu, mention @dosu.

[anovazzi1]

hey @pulkit21aug I just tried in a windows machine and could not see the behavior you are describing, which browser are you using? can you provide screenshots?

[pulkit21aug]

@anovazzi1 the issue is first you see the hand icon , go to another tab do something come back to tab where langflow is running you will not see hand icon on mouse color changes to white which is hardly visible on canvas. I hope I am able to explain.

[pulkit21aug]

@anovazzi1 see the attached screenshot , mouse hand icon is not visible as the color is same as background. ![Uploading IMG20240918213126.jpg…]()

[anovazzi1]

hey @pulkit21aug unfortunally your image was not uploaded right: but if I understood correctly just a ping effect whith a color change when the canvas is visible is enough to solve the problem?

[PATILYASHH]

Please assign me to this issue

[anovazzi1]

hey @PATILYASHH, thanks for your help, can't wait for your contribution