VT-23. Create layout for all necessary components; start working on e…

…xpanding nodes

src/App.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import '../style/layout.css';
+import { OntologyWidgetComponent } from './OntologyWidget';
+import TreeViewComponent from './components/TreeView';
+import SeachBarComponent from './components/SearchBar';
+import InfoBoxComponent from './components/InfoBox';
+import WorkspaceComponent from './components/Workspace';
+
+interface IAppProps {
+  fetchData: () => Promise<any>;
+}
+
+const App: React.FC<IAppProps> = ({ fetchData }) => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const fetchAndSetData = async () => {
+      try {
+        const result = await fetchData();
+        setData(result);
+        console.log(data);
+      } catch (error) {
+        console.error('Failed to fetch data:', error);
+      }
+    };
+
+    fetchAndSetData();
+  }, [fetchData]);
+
+  return (
+    <div className="layout">
+      <SeachBarComponent />
+      <TreeViewComponent />
+      <InfoBoxComponent />
+      <WorkspaceComponent />
+      <OntologyWidgetComponent fetchData={fetchData} />
+    </div>
+  );
+};
+export default App;

src/AppWidget.tsx

@@ -0,0 +1,16 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import React from 'react';
+import App from './App';
+
+export class AppWidget extends ReactWidget {
+  fetchData: () => Promise<any>;
+  constructor(fetchData: () => Promise<any>) {
+    super();
+    this.addClass('tvbo-AppWidget');
+    this.fetchData = fetchData;
+  }
+
+  render(): React.ReactElement {
+    return <App fetchData={this.fetchData} />;
+  }
+}

src/OntologyWidget.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ForceGraph2D from 'react-force-graph-2d';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { fetchNodeConnections } from './handler';
 
 interface IOntologyWidgetProps {
   fetchData: () => Promise<any>;
@@ -24,32 +25,40 @@ export const OntologyWidgetComponent: React.FC<IOntologyWidgetProps> = ({
     fetchAndSetData();
   }, [fetchData]);
 
+  const handleNodeClick = (node: any) => {
+    console.log('Node clicked');
+    const connections = fetchNodeConnections(node.label);
+    console.log(connections);
+  };
+
   return (
-    <div className="ontologyGraph">
-      {data ? (
-        <ForceGraph2D
-          graphData={data}
-          // nodeLabel="label"
-          linkCurvature={0.25}
-          nodeCanvasObject={(node, ctx, globalScale) => {
-            const label = node.label;
-            const fontSize = 12 / globalScale;
-            ctx.font = `${fontSize}px Sans-Serif`;
-            ctx.fillStyle = 'black';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'top';
+    <div className="ontology-graph">
+      <div>
+        {data ? (
+          <ForceGraph2D
+            graphData={data}
+            onNodeClick={handleNodeClick}
+            linkCurvature={0.25}
+            nodeCanvasObject={(node, ctx, globalScale) => {
+              const label = node.label;
+              const fontSize = 12 / globalScale;
+              ctx.font = `${fontSize}px Sans-Serif`;
+              ctx.fillStyle = 'black';
+              ctx.textAlign = 'center';
+              ctx.textBaseline = 'top';
 
-            const xCoord = node.x as number;
-            const yCoord = node.y as number;
-            ctx.fillText(label, xCoord, yCoord + 5);
-          }}
-          nodeCanvasObjectMode={() => 'after'}
-          linkDirectionalArrowLength={3.5}
-          linkDirectionalArrowRelPos={1}
-        />
-      ) : (
-        <div>Loading...</div>
-      )}
+              const xCoord = node.x as number;
+              const yCoord = node.y as number;
+              ctx.fillText(label, xCoord, yCoord + 5);
+            }}
+            nodeCanvasObjectMode={() => 'after'}
+            linkDirectionalArrowLength={3.5}
+            linkDirectionalArrowRelPos={1}
+          />
+        ) : (
+          <div>Loading...</div>
+        )}
+      </div>
     </div>
   );
 };

src/components/InfoBox.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const InfoBoxComponent: React.FC = () => {
+  return <div className="info-box">Info Box</div>;
+};
+
+export default InfoBoxComponent;

src/components/SearchBar.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SeachBarComponent: React.FC = () => {
+  return <div className="search-bar">Search Bar</div>;
+};
+
+export default SeachBarComponent;

src/components/TreeView.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TreeViewComponent: React.FC = () => {
+  return <div className="tree-view">Tree View</div>;
+};
+
+export default TreeViewComponent;

src/components/Workspace.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WorkspaceComponent: React.FC = () => {
+  return <div className="workspace">Workspace</div>;
+};
+
+export default WorkspaceComponent;

src/handler.ts

@@ -48,6 +48,16 @@ export async function requestAPI<T>(
 export async function fetchNodeByLabel(label: string): Promise<void> {
   try {
     const response = await requestAPI<any>(`node?label=${label}`);
+    return response;
+  } catch (error) {
+    console.error(`Error fetching node data: ${error}`);
+  }
+}
+
+export async function fetchNodeConnections(label: string): Promise<void> {
+  try {
+    const response = await requestAPI<any>(`node-connections?label=${label}`);
+    console.log('Label from handler.ts: ', label);
     console.log('Response from handlers.ts: ', response);
     console.log(typeof response);
     return response;

src/index.ts

@@ -3,12 +3,12 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { fetchNodeByLabel } from './handler';
-import { OntologyWidget } from './OntologyWidget';
+import { fetchNodeByLabel, fetchNodeConnections } from './handler';
 import { ILauncher } from '@jupyterlab/launcher';
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import ontologyIconSVG from '../style/tvbo_favicon.svg';
+import { AppWidget } from './AppWidget';
 
 const ontologyIcon = new LabIcon({
   name: 'custom:ontology-icon',
@@ -32,9 +32,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       label: 'Ontology Widget',
       icon: ontologyIcon,
       execute: () => {
-        const widget = new OntologyWidget(() =>
-          fetchNodeByLabel('example-label')
-        );
+        // const widget = new OntologyWidget(() =>
+        const widget = new AppWidget(() => fetchNodeByLabel('JansenRit'));
         widget.id = 'tvb-ext-ontology-widget';
         widget.title.label = 'Ontology Graph';
         widget.title.closable = true;

style/layout.css

@@ -0,0 +1,50 @@
+.layout {
+  display: grid;
+  grid-template:
+    'search-bar tree-view info-box' auto
+    'ontology-graph ontology-graph info-box' 1fr
+    'ontology-graph ontology-graph workspace' 1fr / 1fr 1fr 1fr;
+  height: 90vh;
+  gap: 10px;
+  background-color: white;
+}
+
+.search-bar {
+  grid-area: search-bar;
+  border: 1px solid #ddd;
+  padding: 10px;
+  overflow: auto;
+  background-color: whitesmoke;
+}
+
+.tree-view {
+  grid-area: tree-view;
+  border: 1px solid #ddd;
+  padding: 10px;
+  overflow: auto;
+  background-color: whitesmoke;
+}
+
+.ontology-graph {
+  grid-area: ontology-graph;
+  border: 1px solid #ddd;
+  padding: 10px;
+  overflow: auto;
+  background-color: whitesmoke;
+}
+
+.info-box {
+  grid-area: info-box;
+  border: 1px solid #ddd;
+  padding: 10px;
+  overflow: auto;
+  background-color: whitesmoke;
+}
+
+.workspace {
+  grid-area: workspace;
+  border: 1px solid #ddd;
+  padding: 10px;
+  overflow: auto;
+  background-color: whitesmoke;
+}

tsconfig.json

@@ -17,7 +17,7 @@
     "rootDir": "src",
     "strict": true,
     "strictNullChecks": true,
-    "target": "ES2018"
+    "target": "es2019"
   },
-  "include": ["src/*"]
+  "include": ["src/**/*", "custom.d.ts"]
 }

tvb_ext_ontology/handlers.py

@@ -27,7 +27,27 @@ def get(self):
             return
 
         onto_api = OntologyAPI()
-        node_data = onto_api.get_node_by_label(label)
+        node_data = onto_api.query_nodes(label)
+        if not node_data:
+            self.set_status(404)
+            self.finish(json.dumps({"error": f"No data found for label: {label}"}))
+            return
+
+        self.set_header("Content-Type", "application/json")
+        self.finish(json.dumps(node_data))
+
+
+class NodeConnectionsHandler(APIHandler):
+    @tornado.web.authenticated
+    def get(self):
+        label = self.get_argument('label', None)
+        if not label:
+            self.set_status(400)
+            self.finish(json.dumps({"error": "Missing 'label' parameter"}))
+            return
+
+        onto_api = OntologyAPI()
+        node_data = onto_api.expand_node_relationships(label)
         if not node_data:
             self.set_status(404)
             self.finish(json.dumps({"error": f"No data found for label: {label}"}))
@@ -43,9 +63,11 @@ def setup_handlers(web_app):
     base_url = web_app.settings["base_url"]
     route_pattern = url_path_join(base_url, "tvb-ext-ontology", "get-example")
     node_pattern = url_path_join(base_url, "tvb-ext-ontology", "node")
+    node_connections_pattern = url_path_join(base_url, "tvb-ext-ontology", "node-connections")
 
     handlers = [
         (route_pattern, RouteHandler),
-        (node_pattern, NodeHandler)
+        (node_pattern, NodeHandler),
+        (node_connections_pattern, NodeConnectionsHandler)
     ]
     web_app.add_handlers(host_pattern, handlers)