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
- }