Trying high-level tasks

Author: keiono

create-network/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@cytoscape-web/create-network",
+  "description": "An example app to create a network in workspace",
+  "version": "1.0.0",
+  "private": "true",
+  "type": "module",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "webpack serve --open /remoteEntry.js --mode development"
+  }
+}

create-network/src/CreateNetworkApp.tsx

@@ -0,0 +1,13 @@
+import { ComponentType, CyApp } from '@cytoscape-web/types'
+
+export const CreateNetworkApp: CyApp = {
+  id: 'createNetwork',
+  name: 'Create Network App',
+  url: '',
+  components: [
+    {
+      id: 'SimplePanel',
+      type: ComponentType.Panel,
+    },
+  ],
+}

create-network/src/components/CreateNetworkPanel.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+
+// Dynamic import from the host app
+import { useWorkspaceStore } from 'cyweb/WorkspaceStore'
+
+import { IdType } from '@cytoscape-web/types'
+
+const CreateNetworkPanel = (): JSX.Element => {
+  const workspace = useWorkspaceStore((state: any) => state.workspace)
+
+  const ids: IdType[] = workspace.networkIds
+
+  useEffect(() => {
+    console.log('Create Network Panel initialized', workspace)
+  }, [])
+
+  return (
+    <div>
+      <h4>Create a network</h4>
+      <p>Current Network ID: {workspace.currentNetworkId}</p>
+      <h5>Networks:</h5>
+    </div>
+  )
+}
+
+export default CreateNetworkPanel

create-network/src/index.ts

@@ -0,0 +1 @@
+export { CreateNetworkApp as default } from './CreateNetworkApp'

create-network/src/remotes.d.ts

@@ -0,0 +1 @@
+declare module 'cyweb/WorkspaceStore'

create-network/src/utils/useNetworkBuilder.tsx

@@ -0,0 +1,3 @@
+export const useNetworkBuilder = (): any => {
+  
+}

create-network/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "baseUrl": "."
+  }
+}

create-network/webpack.config.js

@@ -0,0 +1,71 @@
+import path from 'path'
+import url from 'url'
+import webpack from 'webpack'
+import packageJson from '../package.json' assert { type: 'json' }
+
+const { ModuleFederationPlugin } = webpack.container
+
+// Extract some properties from the package.json file to avoid duplication
+const deps = packageJson.peerDependencies
+
+const __filename = url.fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const DEV_SERVER_PORT = 4001
+
+export default {
+  mode: 'development',
+  devtool: false,
+  target: 'web',
+  optimization: {
+    minimize: false,
+    runtimeChunk: false,
+    splitChunks: {
+      chunks: 'async',
+      name: false,
+    },
+  },
+  entry: './src/index.ts',
+  output: {
+    clean: true,
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: 'auto',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'createNetwork',
+      filename: 'remoteEntry.js',
+      remotes: {
+        // Import some data providers from the host application
+        cyweb: 'cyweb@http://localhost:5500/remoteEntry.js',
+      },
+      exposes: {
+        './CreateNetworkApp': './src/CreateNetworkApp',
+        './CreateNetworkPanel': './src/components/CreateNetworkPanel.tsx',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: deps.react },
+        'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devServer: {
+    hot: true,
+    port: DEV_SERVER_PORT,
+    headers: {
+      'Access-Control-Allow-Origin': '*', // allow access from any origin
+    },
+  },
+}

hello-world/src/HelloApp.tsx

@@ -3,6 +3,7 @@ import { ComponentType, CyApp } from '@cytoscape-web/types'
 export const HelloApp: CyApp = {
   id: 'hello',
   name: 'Hello Cy World App',
+  description: 'Hello-world example app for Cytoscape Web',
   url: '',
   components: [
     {

hello-world/src/components/MenuExample.tsx

@@ -1,11 +1,25 @@
+import { Network, NetworkWithView } from '@cytoscape-web/types'
 import { MenuItem } from '@mui/material'
+import {
+  createEmptyNetwork,
+  useCreateNetworkWithView,
+} from 'cyweb/CreateNetwork'
 
 const MenuExample = (): JSX.Element => {
+  // Get the function to create a network with a view
+  const createNetworkWithView = useCreateNetworkWithView()
+
   const handleClick = (): void => {
-    alert('Hello from the external app!')
+    // const newNet: Network = createEmptyNetwork()
+    const newNetwork: NetworkWithView = createNetworkWithView({
+      name: 'Empty Network1',
+    })
+    console.log('Empty network created', newNetwork)
+    const network: Network = newNetwork.network
+    alert(`Network Created: ${network.id}`)
   }
 
-  return <MenuItem onClick={handleClick}>Example Menu from App</MenuItem>
+  return <MenuItem onClick={handleClick}>Create empty network</MenuItem>
 }
 
 export default MenuExample

hello-world/src/remotes.d.ts

@@ -2,3 +2,4 @@ declare module 'cyweb/useDataStore'
 declare module 'cyweb/WorkspaceStore'
 declare module 'cyweb/NetworkStore'
 declare module 'cyweb/Network'
+declare module 'cyweb/CreateNetwork'

hello-world/webpack.config.js

@@ -54,6 +54,10 @@ export default {
       shared: {
         react: { singleton: true, requiredVersion: deps.react },
         'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+        '@mui/material': {
+          singleton: true,
+          requiredVersion: deps['@mui/material'],
+        },
       },
     }),
   ],

package-lock.json

@@ -50,6 +50,10 @@ export default {
       shared: {
         react: { singleton: true, requiredVersion: deps.react },
         'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+        '@mui/material': {
+          singleton: true,
+          requiredVersion: deps['@mui/material'],
+        },
       },
     }),
   ],

simple-menu/webpack.config.js

@@ -2,15 +2,27 @@ import { useEffect } from 'react'
 
 // Dynamic import from the host app
 import { useWorkspaceStore } from 'cyweb/WorkspaceStore'
+import { useNetworkStore } from 'cyweb/NetworkStore'
 
-import { Network, IdType } from '@cytoscape-web/types'
+import { IdType, Network, Workspace, Node, Edge } from '@cytoscape-web/types'
 
 interface HelloPanelProps {
   message: string
 }
 
 const SimplePanel = ({ message }: HelloPanelProps): JSX.Element => {
-  const workspace = useWorkspaceStore((state: any) => state.workspace)
+  const workspace: Workspace = useWorkspaceStore(
+    (state: any) => state.workspace,
+  )
+
+  const { currentNetworkId } = workspace
+
+  const networks: Map<IdType, Network> = useNetworkStore(
+    (state: any) => state.networks,
+  )
+  const curNetwork: Network | undefined = networks.get(currentNetworkId)
+  const nodes: Node[] = curNetwork?.nodes ?? []
+  const edges: Edge[] = curNetwork?.edges ?? []
 
   const ids: IdType[] = workspace.networkIds
 
@@ -22,12 +34,8 @@ const SimplePanel = ({ message }: HelloPanelProps): JSX.Element => {
     <div>
       <h4>Simple panel example {message}</h4>
       <p>Current Network ID: {workspace.currentNetworkId}</p>
-      <h5>Networks:</h5>
-      <ul>
-        {ids.map((id: IdType) => (
-          <li key={id}>{id}</li>
-        ))}
-      </ul>
+      <h5>Num. nodes: {nodes.length}</h5>
+      <h5>Num. edges: {edges.length}</h5>
     </div>
   )
 }

simple-panel/src/components/SimplePanel.tsx

@@ -1,4 +1,2 @@
-declare module 'cyweb/useDataStore'
 declare module 'cyweb/WorkspaceStore'
 declare module 'cyweb/NetworkStore'
-declare module 'cyweb/Network'

simple-panel/src/remotes.d.ts

@@ -49,6 +49,10 @@ export default {
       shared: {
         react: { singleton: true, requiredVersion: deps.react },
         'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+        '@mui/material': {
+          singleton: true,
+          requiredVersion: deps['@mui/material'],
+        },
       },
     }),
   ],