jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed handle tooltip being on the wrong place

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-19 15:46:17 -03:00
commit c31cf6fd1e
2 changed files with 58 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
View file

@ -39,77 +39,65 @@ export default function HandleRenderComponent({
unstyled unstyled
className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted" className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
> >
<div className="flex"> <ShadTooltip
<ShadTooltip styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
styleClasses={"tooltip-fixed-width custom-scroll nowheel"} delayDuration={1000}
delayDuration={1000} content={
content={ <HandleTooltips
<HandleTooltips left={left}
left={left} nodes={nodes}
nodes={nodes} tooltipTitle={tooltipTitle!}
tooltipTitle={tooltipTitle!} />
/> }
side={left ? "left" : "right"}
>
<Handle
data-test-id={`handle-${title.toLowerCase()}-${
!showNode ? (left ? "target" : "source") : left ? "left" : "right"
}`}
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
isValidConnection={(connection) =>
isValidConnection(connection, nodes, edges)
} }
side={left ? "left" : "right"} className={classNames(
> left ? "-ml-0.5" : "-mr-0.5",
<div> "z-20 h-3 w-3 rounded-full border-none bg-background",
<Handle )}
data-test-id={`handle-${title.toLowerCase()}-${ style={{
!showNode background:
? left "conic-gradient(" +
? "target" colors
: "source" .concat(colors[0])
: left .map(
? "left" (color, index) =>
: "right" color +
}`} " " +
type={left ? "target" : "source"} ((360 / colors.length) * index -
position={left ? Position.Left : Position.Right} 360 / (colors.length * 4)) +
key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)} "deg " +
id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)} ((360 / colors.length) * index +
isValidConnection={(connection) => 360 / (colors.length * 4)) +
isValidConnection(connection, nodes, edges) "deg",
} )
className={classNames( .join(" ,") +
left ? "-ml-0.5" : "-mr-0.5", ")",
"z-20 h-3 w-3 rounded-full border-none bg-background", WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
)} maskImage: "radial-gradient(transparent 40%, black 44%)",
style={{ }}
background: onClick={() => {
"conic-gradient(" + setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
colors }}
.concat(colors[0]) />
.map( </ShadTooltip>
(color, index) => <div
color + className={cn(
" " + "absolute top-[50%] z-10 h-3 w-3 translate-y-[-50%] rounded-full bg-background",
((360 / colors.length) * index - left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
360 / (colors.length * 4)) + )}
"deg " + />
((360 / colors.length) * index +
360 / (colors.length * 4)) +
"deg",
)
.join(" ,") +
")",
WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
maskImage: "radial-gradient(transparent 40%, black 44%)",
}}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
/>
<div
className={cn(
"absolute top-[50%] z-10 h-3 w-3 translate-y-[-50%] rounded-full bg-background",
left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
)}
/>
</div>
</ShadTooltip>
</div>
</Button> </Button>
); );
} }

7
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -35,20 +35,17 @@ import {
convertObjToArray, convertObjToArray,
convertValuesToNumbers, convertValuesToNumbers,
hasDuplicateKeys, hasDuplicateKeys,
isValidConnection,
scapedJSONStringfy, scapedJSONStringfy,
} from "../../../../utils/reactflowUtils"; } from "../../../../utils/reactflowUtils";
import { import {
classNames, classNames,
cn, cn,
groupByFamily,
isThereModal, isThereModal,
} from "../../../../utils/utils"; } from "../../../../utils/utils";
import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount"; import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
import useHandleOnNewValue from "../../../hooks/use-handle-new-value"; import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
import useHandleNodeClass from "../../../hooks/use-handle-node-class"; import useHandleNodeClass from "../../../hooks/use-handle-node-class";
import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons"; import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
import HandleTooltips from "../HandleTooltipComponent";
import OutputComponent from "../OutputComponent"; import OutputComponent from "../OutputComponent";
import HandleRenderComponent from "../handleRenderComponent"; import HandleRenderComponent from "../handleRenderComponent";
import OutputModal from "../outputModal"; import OutputModal from "../outputModal";
@ -74,9 +71,7 @@ export default function ParameterComponent({
outputProxy, outputProxy,
}: ParameterComponentType): JSX.Element { }: ParameterComponentType): JSX.Element {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef<HTMLDivElement & ReactNode>(null);
const infoHtml = useRef<HTMLDivElement & ReactNode>(null); const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
@ -85,8 +80,6 @@ export default function ParameterComponent({
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
const flow = currentFlow?.data?.nodes ?? null;
const groupedEdge = useRef(null);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const [openOutputModal, setOpenOutputModal] = useState(false); const [openOutputModal, setOpenOutputModal] = useState(false);
const flowPool = useFlowStore((state) => state.flowPool); const flowPool = useFlowStore((state) => state.flowPool);