Skip to content

Commit e804b9d

Browse files
committed
add config and info texts
1 parent a5c5f1a commit e804b9d

3 files changed

Lines changed: 81 additions & 2 deletions

File tree

src/components/Selections.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@ import {
99
HStack,
1010
Button,
1111
Text,
12+
useDisclosure,
1213
} from "@chakra-ui/react";
1314
import * as React from "react";
1415
import { useState, Dispatch, SetStateAction, useEffect } from "react";
1516
import { createGraph, rdfGraphToNodes, removeNonConnectedNodes, groups } from "../utils";
1617
import FilterSwitch from "./FilterSwitch.tsx";
1718
import { GraphData, LinkObject } from "react-force-graph-3d";
1819
import LoadingSpinner from "./LoadingSpinner.tsx";
20+
import ConfigModal from "./TextModal.tsx";
21+
22+
import yaml from "js-yaml";
23+
import configFile from "/config.yml?raw";
1924

2025
const parseRDF = (rdfData: string, baseUrl: string): GraphData => {
2126
const store = createGraph(rdfData, baseUrl);
@@ -39,6 +44,10 @@ const Selections: React.FC<SelectionsProps> = ({
3944
const [loading, setLoading] = useState<boolean>(false);
4045
const [baseUrl, setBaseUrl] = useState<string>("http://schema.org/");
4146
const [groupCounts, setGroupCounts] = useState<Record<string, number>>({});
47+
const { isOpen, onOpen, onClose } = useDisclosure();
48+
const [modalText, setModalText] = useState<string>("");
49+
50+
const yamlContent = yaml.dump(yaml.load(configFile));
4251

4352
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
4453
const selectedFile = event.target.files?.[0] || null;
@@ -138,6 +147,21 @@ const Selections: React.FC<SelectionsProps> = ({
138147
return <LoadingSpinner />;
139148
}
140149

150+
const handleConfigClick = () => {
151+
setModalText(yamlContent);
152+
onOpen();
153+
};
154+
155+
const handleInfoClick = () => {
156+
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.
157+
158+
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.
159+
160+
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.`;
161+
setModalText(info);
162+
onOpen();
163+
};
164+
141165
return (
142166
<Box p={4} width="100%" mx="auto">
143167
<VStack spacing={4} alignItems="flex-start">
@@ -171,6 +195,14 @@ const Selections: React.FC<SelectionsProps> = ({
171195
</Text>
172196
)}
173197
</FormControl>
198+
<VStack>
199+
<FormControl>
200+
<Button onClick={handleInfoClick}>Show Info</Button>
201+
</FormControl>
202+
<FormControl>
203+
<Button onClick={handleConfigClick}>Show Config</Button>
204+
</FormControl>
205+
</VStack>
174206
</HStack>
175207

176208
<VStack spacing={1} alignItems="flex-start">
@@ -203,6 +235,7 @@ const Selections: React.FC<SelectionsProps> = ({
203235
/>
204236
</HStack>
205237
</VStack>
238+
<ConfigModal isOpen={isOpen} onClose={onClose} text={modalText} />
206239
</Box>
207240
);
208241
};

src/components/TextModal.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {
2+
Modal,
3+
ModalOverlay,
4+
ModalContent,
5+
ModalHeader,
6+
ModalBody,
7+
ModalCloseButton,
8+
Text,
9+
Box,
10+
} from "@chakra-ui/react";
11+
12+
type TextModalProps = {
13+
isOpen: boolean;
14+
onClose: () => void;
15+
text: string;
16+
};
17+
18+
const TextModal = ({ isOpen, onClose, text }: TextModalProps) => {
19+
return (
20+
<Modal isOpen={isOpen} onClose={onClose} size="xl">
21+
<ModalOverlay />
22+
<ModalContent>
23+
<ModalHeader>YAML Config File</ModalHeader>
24+
<ModalCloseButton />
25+
<ModalBody>
26+
<Box
27+
bg="gray.50"
28+
p={4}
29+
borderRadius="md"
30+
whiteSpace="pre-wrap"
31+
fontFamily="monospace"
32+
overflow="auto"
33+
maxH="75vh"
34+
>
35+
<Text>{text}</Text>
36+
</Box>
37+
</ModalBody>
38+
</ModalContent>
39+
</Modal>
40+
);
41+
};
42+
43+
export default TextModal;

src/utils.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,13 @@ const rdfGraphToNodes = (store: rdflib.Store): GraphData => {
6161
const obj = statement.object.value;
6262

6363
// If the predicate is in the ignored list, skip this statement
64+
6465
if (
6566
!(
66-
CONFIG.relevantProperties.has(pred) ||
67-
pred === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
67+
CONFIG.relevantProperties &&
68+
CONFIG.relevantProperties.size > 0 &&
69+
(CONFIG.relevantProperties.has(pred) ||
70+
pred === "http://www.w3.org/1999/02/22-rdf-syntax-ns#type")
6871
)
6972
) {
7073
return; // Skip this statement

0 commit comments

Comments
 (0)