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

refactor: improve displayOutputPreview logic in ParameterComponent

Browse source
This commit is contained in:
anovazzi1 2024-06-04 15:14:32 -03:00
commit 885712ac06
1 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -82,10 +82,11 @@ export default function ParameterComponent({
const [openOutputModal, setOpenOutputModal] = useState(false); const [openOutputModal, setOpenOutputModal] = useState(false);
const flowPool = useFlowStore((state) => state.flowPool); const flowPool = useFlowStore((state) => state.flowPool);
const displayOutputPreview = !!( const displayOutputPreview = !!flowPool[data.id];
flowPool[data.id] &&
flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type !== const unknownOutput = !!(
"unknown" flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type ===
"unknown"
); );
const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue( const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
@ -96,7 +97,7 @@ export default function ParameterComponent({
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading setIsLoading,
); );
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -105,7 +106,7 @@ export default function ParameterComponent({
takeSnapshot, takeSnapshot,
setNode, setNode,
updateNodeInternals, updateNodeInternals,
renderTooltips renderTooltips,
); );
const { handleRefreshButtonPress: handleRefreshButtonPressHook } = const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -114,7 +115,7 @@ export default function ParameterComponent({
let disabled = let disabled =
edges.some( edges.some(
(edge) => (edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id) edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false; ) ?? false;
const handleRefreshButtonPress = async (name, data) => { const handleRefreshButtonPress = async (name, data) => {
@ -127,12 +128,12 @@ export default function ParameterComponent({
handleUpdateValues, handleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading setIsLoading,
); );
const handleOnNewValue = async ( const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[], newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false skipSnapshot: boolean | undefined = false,
): Promise<void> => { ): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot); handleOnNewValueHook(newValue, skipSnapshot);
}; };
@ -214,7 +215,7 @@ export default function ParameterComponent({
className={classNames( className={classNames(
left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background", "h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : "" !showNode ? "mt-0" : "",
)} )}
style={{ style={{
borderColor: color ?? nodeColors.unknown, borderColor: color ?? nodeColors.unknown,
@ -266,19 +267,21 @@ export default function ParameterComponent({
<ShadTooltip <ShadTooltip
content={ content={
displayOutputPreview displayOutputPreview
? "Inspect Output" ? unknownOutput
? "Output can't be displayed"
: "Inspect Output"
: "Please build the component first" : "Please build the component first"
} }
> >
<button <button
disabled={!displayOutputPreview} disabled={!displayOutputPreview || unknownOutput}
onClick={() => setOpenOutputModal(true)} onClick={() => setOpenOutputModal(true)}
data-testid={`output-inspection-${title.toLowerCase()}`} data-testid={`output-inspection-${title.toLowerCase()}`}
> >
<IconComponent <IconComponent
className={classNames( className={classNames(
"h-5 w-5 rounded-md", "h-5 w-5 rounded-md",
displayOutputPreview displayOutputPreview && !unknownOutput
? " hover:bg-secondary-foreground/5 hover:text-medium-indigo" ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground", : " cursor-not-allowed text-muted-foreground",
)} )}
@ -330,7 +333,7 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5" : "-mr-0.5", left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background" "h-3 w-3 rounded-full border-2 bg-background",
)} )}
style={{ borderColor: color ?? nodeColors.unknown }} style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => setFilterEdge(groupedEdge.current)} onClick={() => setFilterEdge(groupedEdge.current)}