Spaces:
Configuration error
Configuration error
zack
commited on
Commit
•
f0575b8
1
Parent(s):
66d4b6d
:fire: Remove EmbedNode component
Browse files
frontend/src/components/Nodes/EmbedNode.js
DELETED
@@ -1,123 +0,0 @@
|
|
1 |
-
import React, { useCallback, useEffect, useRef, useState } from "react"
|
2 |
-
import { Modal, Message } from 'semantic-ui-react';
|
3 |
-
import { useFetch } from '../../hooks/useFetch';
|
4 |
-
import Debug from '../../utilities/Debug';
|
5 |
-
|
6 |
-
/**
|
7 |
-
* Custom hook to check iframe reachability.
|
8 |
-
* @param {string} url - The URL to check for reachability.
|
9 |
-
* @returns {boolean} - True if reachable, false otherwise.
|
10 |
-
*/
|
11 |
-
const useCheckReachability = (url) => {
|
12 |
-
const { data, error } = useFetch(url);
|
13 |
-
Debug.log('Checking reachability for:', url);
|
14 |
-
return { isReachable: !!data, error };
|
15 |
-
};
|
16 |
-
|
17 |
-
/**
|
18 |
-
* A component to render a debug message.
|
19 |
-
* @param {string} message - The debug message to display.
|
20 |
-
*/
|
21 |
-
const DebugMessage = ({ message }) => {
|
22 |
-
useEffect(() => {
|
23 |
-
Debug.log(message);
|
24 |
-
}, [message]);
|
25 |
-
|
26 |
-
return null; // This component does not render anything.
|
27 |
-
};
|
28 |
-
|
29 |
-
/**
|
30 |
-
* A function to create a one-purpose utility.
|
31 |
-
* @param {Function} fn - The function to execute.
|
32 |
-
* @param {Array} args - The arguments to pass to the function.
|
33 |
-
* @returns {any} - The result of the function execution.
|
34 |
-
*/
|
35 |
-
const executeUtility = (fn, ...args) => {
|
36 |
-
Debug.log('Executing utility function with args:', args);
|
37 |
-
return fn(...args);
|
38 |
-
};
|
39 |
-
|
40 |
-
import {TbResize} from 'react-icons/tb'
|
41 |
-
import {BiCube, BiRefresh} from 'react-icons/bi'
|
42 |
-
import {BsTrash} from 'react-icons/bs'
|
43 |
-
import {CgLayoutGridSmall} from 'react-icons/cg'
|
44 |
-
import {useDrag} from '@use-gesture/react'
|
45 |
-
import { useSpring, animated } from 'react-spring'
|
46 |
-
|
47 |
-
const MINIMUM_HEIGHT = 600;
|
48 |
-
const MINIMUM_WIDTH = 540;
|
49 |
-
|
50 |
-
export default function CustomNodeIframe({id, data}){
|
51 |
-
const [collapsed, setCollapsible] = useState(true)
|
52 |
-
const [{width, height}, api] = useSpring(() => ({width: MINIMUM_WIDTH, height: MINIMUM_HEIGHT }))
|
53 |
-
const [sizeAdjuster, setSizeAdjuster] = useState(false)
|
54 |
-
const [reachable ,setReachable] = useState(false)
|
55 |
-
const [refresh, setRefresh] = useState(0)
|
56 |
-
const dragElement = useRef()
|
57 |
-
|
58 |
-
const bind = useDrag((state) => {
|
59 |
-
const isResizing = (state?.event.target === dragElement.current);
|
60 |
-
if (isResizing) {
|
61 |
-
api.set({
|
62 |
-
width: state.offset[0],
|
63 |
-
height: state.offset[1],
|
64 |
-
|
65 |
-
});
|
66 |
-
}
|
67 |
-
}, {
|
68 |
-
from: (event) => {
|
69 |
-
const isResizing = (event.target === dragElement.current);
|
70 |
-
if (isResizing) {
|
71 |
-
return [width.get(), height.get()];
|
72 |
-
}
|
73 |
-
},
|
74 |
-
});
|
75 |
-
|
76 |
-
useEffect(() => {
|
77 |
-
const fetched = setInterval(
|
78 |
-
async () => {
|
79 |
-
setReachable(true)
|
80 |
-
clearInterval(fetched)
|
81 |
-
},1000)
|
82 |
-
},[])
|
83 |
-
|
84 |
-
|
85 |
-
return (
|
86 |
-
<div className="w-10 h-10">
|
87 |
-
|
88 |
-
<div id={'draggable'}className=" flex w-full h-10 top-0 cursor-pointer" onClick={() => {}}>
|
89 |
-
<div id={'draggable'} title={collapsed ? "Collaspse Node" : "Expand Node"} className=" flex-none duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={() => {setCollapsible((clps) => !clps)}}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
|
90 |
-
|
91 |
-
<div className={` flex ${!collapsed ? '' : 'w-0 hidden'}`}>
|
92 |
-
<div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={() => {setSizeAdjuster((size) => !size)}}><TbResize className="h-full w-full text-white p-1"/></div>
|
93 |
-
<a href={data.url} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
|
94 |
-
<div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => {data.delete([{id}])}}><BsTrash className="h-full w-full text-white p-1"/></div>
|
95 |
-
<div title="Refresh Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Orange rounded-xl" onClick={() => {setRefresh((old) => old++)}}><BiRefresh className="h-full w-full text-white p-1"/></div>
|
96 |
-
</div>
|
97 |
-
</div>
|
98 |
-
|
99 |
-
{ !collapsed && reachable && <>
|
100 |
-
<animated.div className={`border-dashed ${sizeAdjuster ? 'border-4 border-white' : ''} relative top-0 left-0 z-[1000] touch-none shadow-lg rounded-xl`} style={{width, height }} {...bind()}>
|
101 |
-
<div id="draggable" className={`absolute h-full w-full ${data.colour} shadow-2xl rounded-xl -z-20`}></div>
|
102 |
-
<iframe id="iframe"
|
103 |
-
key={refresh}
|
104 |
-
src={data.url}
|
105 |
-
title={data.label}
|
106 |
-
frameBorder="0"
|
107 |
-
className=" p-[0.6rem] -z-10 h-full w-full ml-auto mr-auto overflow-y-scroll"/>
|
108 |
-
<div className={` ${sizeAdjuster ? '' : 'hidden'} rounded-full border-2 absolute -bottom-4 -right-4 w-7 h-7 bg-Blue-Royal cursor-nwse-resize touch-none shadow-lg`} ref={dragElement}>
|
109 |
-
</div>
|
110 |
-
</animated.div>
|
111 |
-
</>
|
112 |
-
}
|
113 |
-
|
114 |
-
{ collapsed &&
|
115 |
-
<div id={`draggable`}
|
116 |
-
className={` w-[340px] h-[140px] text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
|
117 |
-
p-5 px-2 rounded-md break-all -z-20 ${data.colour} hover:opacity-70 duration-300`} onClick={() => setCollapsible(collapsed => !collapsed)}>
|
118 |
-
<div className="absolute text-6xl opacity-60 z-10 pt-8 ">{data.emoji}</div>
|
119 |
-
<h2 className={`max-w-full font-sans text-blue-50 leading-tight font-bold text-3xl flex-1 z-20 pt-10`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{data.label}</h2>
|
120 |
-
</div >
|
121 |
-
}
|
122 |
-
</div>)
|
123 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|