WIP commit, now we are loading flowView node configs from plugins

src/main/ipc/invokes/getFileTypes.ts

@@ -1,10 +1,7 @@
 import { IpcMainInvokeEvent } from 'electron';
-import { PluginConfig } from 'shared/types/plugin';
+import { FileTypeMap } from 'shared/types';
 import project from 'main/project';
 
-// TODO move it to shared types with a better name, Replace similar types with shared one
-type FileTypeMap = { [name: string]: PluginConfig };
-
 export default async function getFileTypes(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   event: IpcMainInvokeEvent,

src/renderer/components/Tab/TabView.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
-import { ChannelsMain } from 'shared/types';
+import { ChannelsMain, FileTypeMap } from 'shared/types';
 
 import { useAppSelector, useAppDispatch } from 'renderer/state/store/index';
 import {
@@ -23,11 +23,11 @@ export interface TabViewProps {
 export default function TabView({ tabId }: TabViewProps) {
   const dispatch = useAppDispatch();
   // TODO use shard type for the state
-  const [fileTypes, setFileTypes] = React.useState<any | null>(null);
+  const [fileTypes, setFileTypes] = React.useState<FileTypeMap | null>(null);
 
   React.useEffect(() => {
     async function getFileTypes() {
-      const result: string[] = await window.electron.ipcRenderer.invoke(
+      const result: FileTypeMap = await window.electron.ipcRenderer.invoke(
         ChannelsMain.getFileTypes
       );
       setFileTypes(result);
@@ -49,10 +49,18 @@ export default function TabView({ tabId }: TabViewProps) {
     if (fileTypes) {
       const fileTypePlugin = fileTypes[tabData.extension];
       if (fileTypePlugin) {
-        return <FlowView tabId={tabId} setTabIsDirty={setTabIsDirty} />;
+        return (
+          <FlowView
+            tabId={tabId}
+            setTabIsDirty={setTabIsDirty}
+            config={fileTypePlugin.flowView}
+          />
+        );
       } else {
         return <DefaultFileView tabData={tabData} />;
       }
+    } else {
+      return undefined;
     }
   };
 

src/renderer/components/Tab/TabViews/FlowView.tsx

@@ -18,6 +18,7 @@ import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 
 import { ChannelsMain } from 'shared/types';
+import { FlowViewConfig } from 'shared/types/plugin';
 
 import { useAppSelector } from 'renderer/state/store/index';
 import { FileTabData } from 'renderer/state/types';
@@ -39,48 +40,10 @@ import ConversationNode from 'renderer/components/Nodes/ConversationNode';
 
 import 'reactflow/dist/style.css';
 
-const initialNodes = [
-  {
-    id: '1',
-    type: 'Plot',
-    data: { label: 'Node 1' },
-    position: { x: 0, y: 0 },
-  },
-  {
-    id: '2',
-    type: 'Plot',
-    data: { label: 'Node 2' },
-    position: { x: 400, y: 0 },
-  },
-];
-
 const edgeSharedSettings = {
   markerEnd: { type: MarkerType.ArrowClosed, width: 6 },
 };
 
-const initialEdges = [
-  {
-    id: 'e1',
-    source: '1',
-    target: '2',
-    ...edgeSharedSettings,
-  },
-];
-
-const nodeConfigs = [
-  {
-    type: 'Plot',
-    connections: [1, 1],
-  },
-  {
-    type: 'Note',
-  },
-  {
-    type: 'Conversation',
-    connections: [1, 1],
-  },
-];
-
 const nodeTypes = {
   Plot: PlotNode,
   Note: NoteNode,
@@ -131,9 +94,11 @@ type SetIsDirtyCallbackType = (isDirty: boolean) => void;
 export interface FlowProps {
   tabId: string;
   setTabIsDirty: SetIsDirtyCallbackType;
+  config: FlowViewConfig;
 }
 
-function Flow({ tabId, setTabIsDirty }: FlowProps) {
+function Flow({ tabId, setTabIsDirty, config }: FlowProps) {
+  const nodeConfigs = config.nodes;
   const tabState = useAppSelector((state) =>
     state.tabsState.tabs.find((tab) => tab.id === tabId)
   );
@@ -150,8 +115,9 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) {
     setIsDirty: setTabIsDirty,
     maxHistorySize: 100,
   });
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
   const [splash, setSplash] = React.useState<boolean>(true);
   const [contextMenu, setContextMenu] = React.useState<{
@@ -278,6 +244,7 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) {
       }
     },
     [
+      nodeConfigs,
       nodes,
       setNodes,
       setEdges,
@@ -392,6 +359,7 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) {
       if (!rclick) centerOnNode(newNode.id);
     },
     [
+      nodeConfigs,
       contextMenu,
       nodes,
       setNodes,
@@ -473,12 +441,17 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) {
 export interface FlowViewProps {
   tabId: string;
   setTabIsDirty: SetIsDirtyCallbackType;
+  config: FlowViewConfig;
 }
 
-export default function FlowView({ tabId, setTabIsDirty }: FlowViewProps) {
+export default function FlowView({
+  tabId,
+  setTabIsDirty,
+  config,
+}: FlowViewProps) {
   return (
     <ReactFlowProvider>
-      <Flow tabId={tabId} setTabIsDirty={setTabIsDirty} />
+      <Flow tabId={tabId} setTabIsDirty={setTabIsDirty} config={config} />
     </ReactFlowProvider>
   );
 }

src/shared/types/fileTypeMap.ts

@@ -0,0 +1,3 @@
+import { PluginConfig } from './plugin';
+
+export type FileTypeMap = { [name: string]: PluginConfig };

src/shared/types/index.ts

@@ -10,6 +10,7 @@ import { CreateNewProjectResult } from './createNewProjectResult';
 import { BrowseFileSystemResult } from './browseFileSystemResult';
 import { OpenProjectResult } from './openProjectResult';
 import { ProjectTreeNode, ProjectTree } from './projectTree';
+import { FileTypeMap } from './fileTypeMap';
 import Logger from './logger';
 import LogLevel from './logLevel';
 import LogMessage, { formatLog } from './logMessage';
@@ -35,6 +36,7 @@ export type {
   OpenProjectResult,
   ProjectTreeNode,
   ProjectTree,
+  FileTypeMap,
   Logger,
   LogMessage,
 };

src/shared/types/plugin/pluginConfig.ts

@@ -5,7 +5,7 @@ export type ConnectionInfo = {
 
 export type NodeInfo = {
   type: string;
-  connection: ConnectionInfo;
+  connections: ConnectionInfo;
 };
 
 export type FlowViewConfig = {