add config and info texts

Author: mustafasoylu

src/components/Selections.tsx

@@ -9,13 +9,18 @@ import {
   HStack,
   Button,
   Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 import * as React from "react";
 import { useState, Dispatch, SetStateAction, useEffect } from "react";
 import { createGraph, rdfGraphToNodes, removeNonConnectedNodes, groups } from "../utils";
 import FilterSwitch from "./FilterSwitch.tsx";
 import { GraphData, LinkObject } from "react-force-graph-3d";
 import LoadingSpinner from "./LoadingSpinner.tsx";
+import ConfigModal from "./TextModal.tsx";
+
+import yaml from "js-yaml";
+import configFile from "/config.yml?raw";
 
 const parseRDF = (rdfData: string, baseUrl: string): GraphData => {
   const store = createGraph(rdfData, baseUrl);
@@ -39,6 +44,10 @@ const Selections: React.FC<SelectionsProps> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const [baseUrl, setBaseUrl] = useState<string>("http://schema.org/");
   const [groupCounts, setGroupCounts] = useState<Record<string, number>>({});
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [modalText, setModalText] = useState<string>("");
+
+  const yamlContent = yaml.dump(yaml.load(configFile));
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = event.target.files?.[0] || null;
@@ -138,6 +147,21 @@ const Selections: React.FC<SelectionsProps> = ({
     return <LoadingSpinner />;
   }
 
+  const handleConfigClick = () => {
+    setModalText(yamlContent);
+    onOpen();
+  };
+
+  const handleInfoClick = () => {
+    const info = `This is a simple RDF visualizer that allows you to upload a turtle file and visualize the graph. Check examples in the repository for sample config and turtle files.
+    
+You can filter the nodes by group and remove nodes that are not linked. The config file is loaded from a YAML file and you can check it by clicking 'Show config' button.
+
+If your graph has more than 2000 nodes, it might take a while to load. Please wait until graph elements are rendered (stops spinning) before interacting with the graph.`;
+    setModalText(info);
+    onOpen();
+  };
+
   return (
     <Box p={4} width="100%" mx="auto">
       <VStack spacing={4} alignItems="flex-start">
@@ -171,6 +195,14 @@ const Selections: React.FC<SelectionsProps> = ({
               </Text>
             )}
           </FormControl>
+          <VStack>
+            <FormControl>
+              <Button onClick={handleInfoClick}>Show Info</Button>
+            </FormControl>
+            <FormControl>
+              <Button onClick={handleConfigClick}>Show Config</Button>
+            </FormControl>
+          </VStack>
         </HStack>
 
         <VStack spacing={1} alignItems="flex-start">
@@ -203,6 +235,7 @@ const Selections: React.FC<SelectionsProps> = ({
           />
         </HStack>
       </VStack>
+      <ConfigModal isOpen={isOpen} onClose={onClose} text={modalText} />
     </Box>
   );
 };

src/components/TextModal.tsx

@@ -0,0 +1,43 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Text,
+  Box,
+} from "@chakra-ui/react";
+
+type TextModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  text: string;
+};
+
+const TextModal = ({ isOpen, onClose, text }: TextModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>YAML Config File</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box
+            bg="gray.50"
+            p={4}
+            borderRadius="md"
+            whiteSpace="pre-wrap"
+            fontFamily="monospace"
+            overflow="auto"
+            maxH="75vh"
+          >
+            <Text>{text}</Text>
+          </Box>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default TextModal;

src/utils.ts

@@ -61,10 +61,13 @@ const rdfGraphToNodes = (store: rdflib.Store): GraphData => {
     const obj = statement.object.value;
 
     // If the predicate is in the ignored list, skip this statement
+
     if (
       !(
-        CONFIG.relevantProperties.has(pred) ||
-        pred === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+        CONFIG.relevantProperties &&
+        CONFIG.relevantProperties.size > 0 &&
+        (CONFIG.relevantProperties.has(pred) ||
+          pred === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type")
       )
     ) {
       return; // Skip this statement