add styling

Author: mustafasoylu

src/App.css

@@ -1,13 +1,11 @@
-import "./App.css";
-import Graph from "./Graph.tsx";
-import { ChakraProvider } from '@chakra-ui/react'
+import Graph from "./components/Graph.tsx";
+import Layout from "./components/Layout.tsx";
 
 function App() {
   return (
-    <ChakraProvider>
-      <h1>RDF Graph Visualization</h1>
+    <Layout>
       <Graph />
-    </ChakraProvider>
+    </Layout>
   );
 }
 

src/App.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 import ForceGraph3D from "react-force-graph-3d";
-import * as THREE from 'three';
-import { GraphData, Node } from "./graph";
-import { createGraph, rdfGraphToNodes } from "./utils.ts";
+import * as THREE from "three";
+import { GraphData, Node } from "./Graph.tsx";
+import { createGraph, rdfGraphToNodes } from "../utils.ts";
 
 const Graph: React.FC = () => {
   const [graphData, setGraphData] = useState<GraphData>({ nodes: [], links: [] });
@@ -17,29 +17,18 @@ const Graph: React.FC = () => {
   };
 
   const getGroupColor = (group: string) => {
-    // const colors: { [key: string]: number } = {
-    //   person: 0,
-    //   dataset: 1,
-    //   organization: 2,
-    //   software: 3,
-    //   document: 4,
-    //   article: 5,
-    //   creativeWork: 6,
-    //   service: 7,
-    //   "": 8, // Default group
-    // };
     const colors: { [key: string]: string } = {
-      person: 'red',
-      dataset: 'blue',
-      organization: 'green',
-      software: 'yellow',
-      document: 'orange',
-      article: 'indigo',
-      creativeWork: 'violet',
-      service: 'cyan',
-      "": 'gray', // Default group
+      person: "red",
+      dataset: "blue",
+      organization: "green",
+      software: "yellow",
+      document: "orange",
+      article: "indigo",
+      creativeWork: "violet",
+      service: "cyan",
+      "": "gray", // Default group
     };
-    return colors[group] || 'gray'; // Default to 3 if group not found
+    return colors[group] || "gray"; // Default to 3 if group not found
   };
 
   useEffect(() => {
@@ -70,7 +59,7 @@ const Graph: React.FC = () => {
         const geometry =
           group === ""
             ? new THREE.BoxGeometry(8, 8, 8) // Box for nodes with empty group
-            : new THREE.SphereGeometry(5);    // Sphere for other nodes
+            : new THREE.SphereGeometry(5); // Sphere for other nodes
 
         const material = new THREE.MeshStandardMaterial({
           color: getGroupColor(group),

src/Graph.tsx src/components/Graph.tsxsrc/Graph.tsx renamed to src/components/Graph.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
+import { ReactNode } from "react";
+import Navbar from "./Navbar";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  const contentWidth = useBreakpointValue({
+    base: "95%", // for screens smaller than 720px
+    md: "85%", // for screens between 720px and 1080px
+    xl: "75%", // for screens larger than 1080px
+  });
+
+  return (
+    <Flex minHeight="100vh" display="flex" flexDirection="column" width="100vw">
+      <Navbar />
+      <Box flex="1" width={contentWidth} mx="auto" justifyContent="center">
+        {/* Ensure the child component takes the full available space */}
+        <Box height="100%" width="100%" display="flex" justifyContent="center" alignItems="center">
+          {children}
+        </Box>
+      </Box>
+      {/*<Footer />*/}
+    </Flex>
+  );
+}

src/components/Layout.tsx

@@ -0,0 +1,14 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+const Navbar = () => {
+  return (
+    <Box bg={"green.100"} px={4} mb={5}>
+      <Flex h={16} alignItems={"center"} justifyContent={"center"}>
+        <Text fontSize="xl" fontWeight="bold" color="green.800">
+          RDF Graph Visualization
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+export default Navbar;

src/components/Navbar.tsx

@@ -3,7 +3,6 @@ interface Node {
   id: string;
   label?: string;
   group?: string;
-  // type?: string;
 }
 
 interface Link {

src/graph.d.ts

@@ -1,10 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import { ChakraProvider } from "@chakra-ui/react";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
+  </StrictMode>
+);

src/index.css

@@ -1,5 +1,5 @@
 import * as rdflib from "rdflib";
-import { Node, Link, GraphData } from "./graph";
+import { Node, Link, GraphData } from "./components/Graph.tsx";
 
 const createGraph = (rdfData: string, baseUrl: string): rdflib.Store => {
   const store = rdflib.graph();
@@ -15,7 +15,7 @@ const createGraph = (rdfData: string, baseUrl: string): rdflib.Store => {
   return store;
 };
 
-const rdfGraphToNodes = (store: rdflib.Store): GraphData => {
+const rdfGraphToNodes = (store: rdflib.Store, removeUnconnectedNodes: boolean): GraphData => {
   const nodesMap = new Map<string, Node>();
   const edges: Link[] = [];
 
@@ -76,8 +76,8 @@ const rdfGraphToNodes = (store: rdflib.Store): GraphData => {
       if (pred.includes("affiliation")) {
         safeUpdateElement(obj, undefined, "organization");
       }
-      if (pred.includes('author') || pred.includes('creator')){
-        safeUpdateElement(obj,undefined, 'person')
+      if (pred.includes("author") || pred.includes("creator")) {
+        safeUpdateElement(obj, undefined, "person");
       }
       if (!nodesMap.has(subj)) {
         nodesMap.set(subj, { id: subj, label: subj, group: "" });
@@ -92,7 +92,8 @@ const rdfGraphToNodes = (store: rdflib.Store): GraphData => {
   // return graphData;
   const connectedNodes = removeNonConnectedNodes(graphData);
   console.log("only connected nodes", connectedNodes);
-  return { nodes: connectedNodes, links: edges };
+  if (removeUnconnectedNodes) return { nodes: connectedNodes, links: edges };
+  else return graphData;
 };
 
 const removeNonConnectedNodes = (graphData: GraphData): Node[] => {