added some types in problematic points
This commit is contained in:
parent
1c74ad7a65
commit
d2c2fe6db0
10 changed files with 36 additions and 18 deletions
|
|
@ -1,5 +1,11 @@
|
||||||
import { cloneDeep } from "lodash";
|
import { cloneDeep } from "lodash";
|
||||||
import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
|
import React, {
|
||||||
|
ReactNode,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
import { Handle, Position, useUpdateNodeInternals } from "reactflow";
|
import { Handle, Position, useUpdateNodeInternals } from "reactflow";
|
||||||
import ShadTooltip from "../../../../components/ShadTooltipComponent";
|
import ShadTooltip from "../../../../components/ShadTooltipComponent";
|
||||||
import CodeAreaComponent from "../../../../components/codeAreaComponent";
|
import CodeAreaComponent from "../../../../components/codeAreaComponent";
|
||||||
|
|
@ -17,6 +23,7 @@ import { TOOLTIP_EMPTY } from "../../../../constants/constants";
|
||||||
import { TabsContext } from "../../../../contexts/tabsContext";
|
import { TabsContext } from "../../../../contexts/tabsContext";
|
||||||
import { typesContext } from "../../../../contexts/typesContext";
|
import { typesContext } from "../../../../contexts/typesContext";
|
||||||
import { ParameterComponentType } from "../../../../types/components";
|
import { ParameterComponentType } from "../../../../types/components";
|
||||||
|
import { TabsState } from "../../../../types/tabs";
|
||||||
import { isValidConnection } from "../../../../utils/reactflowUtils";
|
import { isValidConnection } from "../../../../utils/reactflowUtils";
|
||||||
import {
|
import {
|
||||||
nodeColors,
|
nodeColors,
|
||||||
|
|
@ -71,7 +78,8 @@ export default function ParameterComponent({
|
||||||
newData.node!.template[name].value = newValue;
|
newData.node!.template[name].value = newValue;
|
||||||
setData(newData);
|
setData(newData);
|
||||||
// Set state to pending
|
// Set state to pending
|
||||||
setTabsState((prev) => {
|
//@ts-ignore
|
||||||
|
setTabsState((prev: TabsState) => {
|
||||||
return {
|
return {
|
||||||
...prev,
|
...prev,
|
||||||
[tabId]: {
|
[tabId]: {
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import { FlowType } from "../../../types/flow";
|
||||||
|
|
||||||
import { TabsContext } from "../../../contexts/tabsContext";
|
import { TabsContext } from "../../../contexts/tabsContext";
|
||||||
import { parsedDataType } from "../../../types/components";
|
import { parsedDataType } from "../../../types/components";
|
||||||
|
import { TabsState } from "../../../types/tabs";
|
||||||
import { validateNodes } from "../../../utils/reactflowUtils";
|
import { validateNodes } from "../../../utils/reactflowUtils";
|
||||||
import RadialProgressComponent from "../../RadialProgress";
|
import RadialProgressComponent from "../../RadialProgress";
|
||||||
import IconComponent from "../../genericIconComponent";
|
import IconComponent from "../../genericIconComponent";
|
||||||
|
|
@ -90,7 +91,8 @@ export default function BuildTrigger({
|
||||||
// If the event is a log, log it
|
// If the event is a log, log it
|
||||||
setSuccessData({ title: parsedData.log });
|
setSuccessData({ title: parsedData.log });
|
||||||
} else if (parsedData.input_keys) {
|
} else if (parsedData.input_keys) {
|
||||||
setTabsState((old) => {
|
//@ts-ignore
|
||||||
|
setTabsState((old: TabsState) => {
|
||||||
return {
|
return {
|
||||||
...old,
|
...old,
|
||||||
[flowId]: {
|
[flowId]: {
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
|
||||||
|
|
||||||
function handleAddFlow() {
|
function handleAddFlow() {
|
||||||
try {
|
try {
|
||||||
addFlow(null, true).then((id) => {
|
addFlow(undefined, true).then((id) => {
|
||||||
navigate("/flow/" + id);
|
navigate("/flow/" + id);
|
||||||
});
|
});
|
||||||
// saveFlowStyleInDataBase();
|
// saveFlowStyleInDataBase();
|
||||||
|
|
@ -46,7 +46,9 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button asChild variant="primary" size="sm">
|
<Button asChild variant="primary" size="sm">
|
||||||
<div className="header-menu-bar-display">
|
<div className="header-menu-bar-display">
|
||||||
<div className="header-menu-flow-name">{current_flow!.name}</div>
|
<div className="header-menu-flow-name">
|
||||||
|
{current_flow!.name}
|
||||||
|
</div>
|
||||||
<IconComponent name="ChevronDown" className="h-4 w-4" />
|
<IconComponent name="ChevronDown" className="h-4 w-4" />
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { addEdge } from "reactflow";
|
import { Node, addEdge } from "reactflow";
|
||||||
import ShortUniqueId from "short-unique-id";
|
import ShortUniqueId from "short-unique-id";
|
||||||
import {
|
import {
|
||||||
deleteFlowFromDatabase,
|
deleteFlowFromDatabase,
|
||||||
|
|
@ -18,7 +18,7 @@ import {
|
||||||
uploadFlowsToDatabase,
|
uploadFlowsToDatabase,
|
||||||
} from "../controllers/API";
|
} from "../controllers/API";
|
||||||
import { APIClassType, APITemplateType } from "../types/api";
|
import { APIClassType, APITemplateType } from "../types/api";
|
||||||
import { FlowType, NodeType } from "../types/flow";
|
import { FlowType, NodeDataType, NodeType } from "../types/flow";
|
||||||
import { TabsContextType, TabsState } from "../types/tabs";
|
import { TabsContextType, TabsState } from "../types/tabs";
|
||||||
import {
|
import {
|
||||||
addVersionToDuplicates,
|
addVersionToDuplicates,
|
||||||
|
|
@ -73,7 +73,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
const [flows, setFlows] = useState<Array<FlowType>>([]);
|
const [flows, setFlows] = useState<Array<FlowType>>([]);
|
||||||
const [id, setId] = useState(uid());
|
const [id, setId] = useState(uid());
|
||||||
const { templates, reactFlowInstance } = useContext(typesContext);
|
const { templates, reactFlowInstance } = useContext(typesContext);
|
||||||
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
|
const [lastCopiedSelection, setLastCopiedSelection] = useState<{
|
||||||
|
nodes: any;
|
||||||
|
edges: any;
|
||||||
|
} | null>(null);
|
||||||
const [tabsState, setTabsState] = useState<TabsState>({});
|
const [tabsState, setTabsState] = useState<TabsState>({});
|
||||||
const [getTweak, setTweak] = useState([]);
|
const [getTweak, setTweak] = useState([]);
|
||||||
|
|
||||||
|
|
@ -318,7 +321,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
// add a change event listener to the file input
|
// add a change event listener to the file input
|
||||||
input.onchange = (e: Event) => {
|
input.onchange = (e: Event) => {
|
||||||
// check if the file type is application/json
|
// check if the file type is application/json
|
||||||
if ((e.target as HTMLInputElement).files![0].type === "application/json") {
|
if (
|
||||||
|
(e.target as HTMLInputElement).files![0].type === "application/json"
|
||||||
|
) {
|
||||||
// get the file from the file input
|
// get the file from the file input
|
||||||
const file = (e.target as HTMLInputElement).files![0];
|
const file = (e.target as HTMLInputElement).files![0];
|
||||||
// read the file as text
|
// read the file as text
|
||||||
|
|
@ -357,7 +362,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
let minimumX = Infinity;
|
let minimumX = Infinity;
|
||||||
let minimumY = Infinity;
|
let minimumY = Infinity;
|
||||||
let idsMap = {};
|
let idsMap = {};
|
||||||
let nodes = reactFlowInstance!.getNodes();
|
let nodes: Node<NodeDataType>[] = reactFlowInstance!.getNodes();
|
||||||
let edges = reactFlowInstance!.getEdges();
|
let edges = reactFlowInstance!.getEdges();
|
||||||
selectionInstance.nodes.forEach((n) => {
|
selectionInstance.nodes.forEach((n) => {
|
||||||
if (n.position.y < minimumY) {
|
if (n.position.y < minimumY) {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import { typesContextType } from "../types/typesContext";
|
||||||
|
|
||||||
const initialValue: typesContextType = {
|
const initialValue: typesContextType = {
|
||||||
reactFlowInstance: null,
|
reactFlowInstance: null,
|
||||||
setReactFlowInstance: () => {},
|
setReactFlowInstance: (newState: ReactFlowInstance) => {},
|
||||||
deleteNode: () => {},
|
deleteNode: () => {},
|
||||||
types: {},
|
types: {},
|
||||||
setTypes: () => {},
|
setTypes: () => {},
|
||||||
|
|
@ -22,7 +22,8 @@ export const typesContext = createContext<typesContextType>(initialValue);
|
||||||
|
|
||||||
export function TypesProvider({ children }: { children: ReactNode }) {
|
export function TypesProvider({ children }: { children: ReactNode }) {
|
||||||
const [types, setTypes] = useState({});
|
const [types, setTypes] = useState({});
|
||||||
const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
|
const [reactFlowInstance, setReactFlowInstance] =
|
||||||
|
useState<ReactFlowInstance | null>(null);
|
||||||
const [templates, setTemplates] = useState({});
|
const [templates, setTemplates] = useState({});
|
||||||
const [data, setData] = useState({});
|
const [data, setData] = useState({});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@ const ExportModal = forwardRef(
|
||||||
tabId={tabId}
|
tabId={tabId}
|
||||||
setName={setName}
|
setName={setName}
|
||||||
setDescription={setDescription}
|
setDescription={setDescription}
|
||||||
updateFlow={updateFlow}
|
|
||||||
/>
|
/>
|
||||||
<div className="mt-3 flex items-center space-x-2">
|
<div className="mt-3 flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
|
|
||||||
|
|
@ -180,7 +180,6 @@ export type InputProps = {
|
||||||
invalidName: boolean;
|
invalidName: boolean;
|
||||||
setName: (name: string) => void;
|
setName: (name: string) => void;
|
||||||
setDescription: (description: string) => void;
|
setDescription: (description: string) => void;
|
||||||
updateFlow: (flow: { id: string; name: string; }) => void;
|
|
||||||
setInvalidName: (invalidName: boolean) => void;
|
setInvalidName: (invalidName: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export type FlowType = {
|
||||||
export type NodeType = {
|
export type NodeType = {
|
||||||
id: string;
|
id: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
position: XYPosition | undefined;
|
position: XYPosition;
|
||||||
data: NodeDataType;
|
data: NodeDataType;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { Dispatch, SetStateAction } from "react";
|
|
||||||
import { FlowType, TweaksType } from "../flow";
|
import { FlowType, TweaksType } from "../flow";
|
||||||
|
|
||||||
export type TabsContextType = {
|
export type TabsContextType = {
|
||||||
|
|
@ -8,7 +7,10 @@ export type TabsContextType = {
|
||||||
setTabId: (index: string) => void;
|
setTabId: (index: string) => void;
|
||||||
flows: Array<FlowType>;
|
flows: Array<FlowType>;
|
||||||
removeFlow: (id: string) => void;
|
removeFlow: (id: string) => void;
|
||||||
addFlow: (flowData?: FlowType | undefined | null, newProject?: boolean) => Promise<String>;
|
addFlow: (
|
||||||
|
flow?: FlowType,
|
||||||
|
newProject?: Boolean
|
||||||
|
) => Promise<String | undefined>;
|
||||||
updateFlow: (newFlow: FlowType) => void;
|
updateFlow: (newFlow: FlowType) => void;
|
||||||
incrementNodeId: () => string;
|
incrementNodeId: () => string;
|
||||||
downloadFlow: (
|
downloadFlow: (
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ const data: { [char: string]: string } = {};
|
||||||
|
|
||||||
export type typesContextType = {
|
export type typesContextType = {
|
||||||
reactFlowInstance: ReactFlowInstance | null;
|
reactFlowInstance: ReactFlowInstance | null;
|
||||||
setReactFlowInstance: () => void;
|
setReactFlowInstance: (newState: ReactFlowInstance) => void;
|
||||||
deleteNode: (idx: string) => void;
|
deleteNode: (idx: string) => void;
|
||||||
types: typeof types;
|
types: typeof types;
|
||||||
setTypes: (newState: {}) => void;
|
setTypes: (newState: {}) => void;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue