-
- Physics enabled:
- setOptions(
- {
- ...options,
- physics: {
- ...options.physics,
- enabled: event.target.checked
- }
- })
- }/>
-
-
- Rounded edges:
- setOptions(
- {
- ...options,
- edges: {
- ...options.edges,
- smooth: !options.edges?.smooth
- }
- })
- }/>
-
-
- Edge length:
- setOptions(
- {
- ...options,
- physics: {
- ...options.physics,
- barnesHut: {
- springLength: Number(event.target.value)
- }
- }
- })
- }
- step="1"/>
-
+export const GraphOptionsControlPanel = ({
+ options,
+ setOptions,
+}: GraphOptionsControlPanelProps) => {
+ return (
+
+
+ Physics enabled:
+
+ setOptions({
+ ...options,
+ physics: {
+ ...options.physics,
+ enabled: event.target.checked,
+ },
+ })
+ }
+ />
+
+
+ Rounded edges:
+
+ setOptions({
+ ...options,
+ edges: {
+ ...options.edges,
+ smooth: !options.edges?.smooth,
+ },
+ })
+ }
+ />
+
+
+ Edge length:
+
+ setOptions({
+ ...options,
+ physics: {
+ ...options.physics,
+ barnesHut: {
+ springLength: Number(event.target.value),
+ },
+ },
+ })
+ }
+ step="1"
+ />
+
-}
\ No newline at end of file
+ );
+};
diff --git a/visualizer/src/graph/GraphService.ts b/visualizer/src/graph/GraphService.ts
index 04ba4a7..ef23b7b 100644
--- a/visualizer/src/graph/GraphService.ts
+++ b/visualizer/src/graph/GraphService.ts
@@ -1,189 +1,266 @@
-import {Edge, GraphData, Node} from "react-vis-graph-wrapper";
+import { Edge, GraphData, Node } from "react-vis-graph-wrapper";
export interface Stats {
- frequency: number;
- norm_frequency?: number;
- docs?: string[];
- first_occurrence?: string;
- last_occurrence?: string;
- alt_labels?: string[];
+ frequency: number;
+ norm_frequency?: number;
+ docs?: string[];
+ first_occurrence?: string;
+ last_occurrence?: string;
+ alt_labels?: string[];
}
export interface EnrichedNode extends Node {
- stats: Stats;
+ stats: Stats;
}
export interface EnrichedEdge extends Edge {
- stats: Stats;
+ stats: Stats;
+}
+
+export interface EdgeGroup extends EnrichedEdge {
+ group?: EnrichedEdge[];
}
export interface EnrichedGraphData extends GraphData {
- nodes: EnrichedNode[];
- edges: EnrichedEdge[];
+ nodes: EnrichedNode[];
+ edges: EdgeGroup[];
}
export class GraphFilter {
- minimumNodeFrequency: number;
- minimumEdgeFrequency: number;
- earliestDate?: Date;
- latestDate?: Date;
- showUnconnectedNodes: boolean = false;
-
- constructor(minimumNodeFrequency: number = 1, minimumEdgeFrequency: number = 1) {
- this.minimumNodeFrequency = minimumNodeFrequency;
- this.minimumEdgeFrequency = minimumEdgeFrequency;
- }
+ minimumPossibleNodeFrequency: number;
+ minimumNodeFrequency: number;
+ maximumNodeFrequency: number;
+ maximumPossibleNodeFrequency: number;
+ minimumPossibleEdgeFrequency: number;
+ minimumEdgeFrequency: number;
+ maximumEdgeFrequency: number;
+ maximumPossibleEdgeFrequency: number;
+ labelSearch: string = "";
+ earliestDate?: Date;
+ latestDate?: Date;
+ showUnconnectedNodes: boolean = false;
+
+ constructor(
+ minimumPossibleNodeFrequency: number,
+ minimumNodeFrequency: number,
+ maximumPossibleNodeFrequency: number,
+ minimumPossibleEdgeFrequency: number,
+ minimumEdgeFrequency: number,
+ maximumPossibleEdgeFrequency: number,
+ ) {
+ this.minimumPossibleNodeFrequency = minimumPossibleNodeFrequency;
+ this.minimumNodeFrequency = minimumNodeFrequency;
+ this.maximumNodeFrequency = maximumPossibleNodeFrequency;
+ this.maximumPossibleNodeFrequency = maximumPossibleNodeFrequency;
+ this.minimumPossibleEdgeFrequency = minimumPossibleEdgeFrequency;
+ this.minimumEdgeFrequency = minimumEdgeFrequency;
+ this.maximumEdgeFrequency = maximumPossibleEdgeFrequency;
+ this.maximumPossibleEdgeFrequency = maximumPossibleEdgeFrequency;
+ }
}
-function hasDateOverlap(node: EnrichedNode, filter: GraphFilter): boolean {
- if (!node.stats.first_occurrence || !node.stats.last_occurrence) {
- return true;
- }
- const first = new Date(node.stats.first_occurrence);
- const last = new Date(node.stats.last_occurrence);
- const afterEarliestDate = !filter.earliestDate
- || filter.earliestDate < first
- || filter.earliestDate < last;
+function hasDateOverlap(
+ nodeOrEdge: EnrichedNode | EnrichedEdge,
+ filter: GraphFilter,
+): boolean {
+ if (!nodeOrEdge.stats.first_occurrence || !nodeOrEdge.stats.last_occurrence) {
+ return true;
+ }
+ const first = new Date(nodeOrEdge.stats.first_occurrence);
+ const last = new Date(nodeOrEdge.stats.last_occurrence);
+ const afterEarliestDate =
+ !filter.earliestDate ||
+ filter.earliestDate < first ||
+ filter.earliestDate < last;
- const beforeLatestDate = !filter.latestDate
- || filter.latestDate > first || filter.latestDate > last;
+ const beforeLatestDate =
+ !filter.latestDate || filter.latestDate > first || filter.latestDate > last;
- return afterEarliestDate && beforeLatestDate;
+ return afterEarliestDate && beforeLatestDate;
}
-
-export function filter(filter: GraphFilter, graphData: EnrichedGraphData): EnrichedGraphData {
- let nodes = graphData.nodes.filter((node: EnrichedNode) =>
- node.stats.frequency >= filter.minimumNodeFrequency
- && hasDateOverlap(node, filter)
- );
- let filteredNodes = new Set(nodes.map(node => node.id));
- let edges = graphData.edges.filter((edge: EnrichedEdge) =>
+export function filter(
+ filter: GraphFilter,
+ graphData: EnrichedGraphData,
+): EnrichedGraphData {
+ let nodes = graphData.nodes.filter(
+ (node: EnrichedNode) =>
+ node.stats.frequency >= filter.minimumNodeFrequency &&
+ node.stats.frequency < filter.maximumNodeFrequency &&
+ hasDateOverlap(node, filter),
+ );
+ let filteredNodes = new Set(nodes.map((node) => node.id));
+ let groupedEdges = graphData.edges
+ .filter(
+ (edge: EnrichedEdge) =>
edge.stats.frequency >= filter.minimumEdgeFrequency &&
- filteredNodes.has(edge.from) && filteredNodes.has(edge.to)
+ edge.stats.frequency < filter.maximumEdgeFrequency &&
+ hasDateOverlap(edge, filter) &&
+ filteredNodes.has(edge.from) &&
+ filteredNodes.has(edge.to),
+ )
+ .reduce(
+ (acc, curr) => {
+ const key = curr.from + "->" + curr.to;
+ if (!acc[key]) {
+ acc[key] = [];
+ }
+ acc[key].push(curr);
+ return acc;
+ },
+ {} as Record
,
);
- let connectedNodes = new Set(edges.flatMap(edge => [edge.from, edge.to]));
- if (!filter.showUnconnectedNodes) {
- nodes = nodes.filter(node => connectedNodes.has(node.id));
- }
- return {nodes, edges}
+ let edges = Object.values(groupedEdges).map((group) => {
+ group.sort((edge1, edge2) => edge2.stats.frequency - edge1.stats.frequency);
+ const representative: EnrichedEdge = group.at(0)!;
+ return {
+ ...representative,
+ id: representative.from + "->" + representative.to,
+ label: group
+ .slice(0, 3)
+ .map((e) => e.label)
+ .join(", "),
+ width: Math.log(
+ group.map((e) => e.stats.frequency).reduce((a, b) => a + b),
+ ),
+ group: group,
+ };
+ });
+
+ let connectedNodes = new Set(edges.flatMap((edge) => [edge.from, edge.to]));
+ if (!filter.showUnconnectedNodes) {
+ nodes = nodes.filter((node) => connectedNodes.has(node.id));
+ }
+ nodes = nodes.map((node) => ({
+ ...node,
+ opacity: node.label?.toLowerCase().includes(filter.labelSearch) ? 1 : 0.2,
+ font: {
+ size: 14 + node.stats.frequency / 100,
+ },
+ }));
+
+ return { nodes, edges };
}
-export abstract class GraphService {
- private nodesMap: Map | null = null;
+export interface DataBounds {
+ minNodeFrequency: number;
+ maxNodeFrequency: number;
+ maxEdgeFrequency: number;
+}
- abstract getGraph(): EnrichedGraphData;
+export abstract class GraphService {
+ abstract getGraph(): EnrichedGraphData;
- getSubGraph(nodeIds: Set): EnrichedGraphData {
- return {
- nodes: this.getGraph().nodes.filter((n: EnrichedNode) => nodeIds.has(n.id!.toString())),
- edges: this.getGraph().edges
- }
- }
-
- getConnectedNodes(nodeId: string): Set {
- return new Set(this.getGraph().edges.filter(edge => edge.from === nodeId || edge.to === nodeId)
- .flatMap(edge => [edge.from!.toString(), edge.to!.toString()]))
- }
-
- getNode(nodeId: string): EnrichedNode | undefined {
- if (this.nodesMap === null) {
- this.nodesMap = new Map(
- this.getGraph().nodes.map(node => [node.id!.toString(), node])
- )
- }
+ getBounds(): DataBounds {
+ return {
+ minNodeFrequency: Math.min(
+ ...this.getGraph().nodes.map((n) => n.stats.frequency),
+ ),
+ maxNodeFrequency: Math.max(
+ ...this.getGraph().nodes.map((n) => n.stats.frequency),
+ ),
+ maxEdgeFrequency: Math.max(
+ ...this.getGraph().edges.map((n) => n.stats.frequency),
+ ),
+ };
+ }
- // highly inefficient linear search; overwrite for actual use
- for (let node of this.getGraph().nodes) {
- if (node.id === nodeId) {
- return node;
- }
- }
- return undefined;
- }
+ getSubGraph(nodeIds: Set): EnrichedGraphData {
+ return {
+ nodes: this.getGraph().nodes.filter((n: EnrichedNode) =>
+ nodeIds.has(n.id!.toString()),
+ ),
+ edges: this.getGraph().edges,
+ };
+ }
+ getConnectedNodes(nodeId: string): Set {
+ return new Set(
+ this.getGraph()
+ .edges.filter((edge) => edge.from === nodeId || edge.to === nodeId)
+ .flatMap((edge) => [edge.from!.toString(), edge.to!.toString()]),
+ );
+ }
}
-
export class SampleGraphService extends GraphService {
- readonly sampleGraphData: EnrichedGraphData = {
- nodes: [
- {
- id: "1",
- label: "node 1",
- stats: {
- frequency: 3,
- },
- },
- {
- id: "2",
- label: "node 2",
- stats: {
- frequency: 2,
- },
- },
- {
- id: "3",
- label: "node 3",
- stats: {
- frequency: 2,
- },
- },
- {
- id: "4",
- label: "node 4",
- stats: {
- frequency: 1,
- },
- },
- ],
- edges: [
- {
- from: "1",
- to: "2",
- stats: {
- frequency: 2,
- },
- },
- {
- from: "1",
- to: "3",
- stats: {
- frequency: 2,
- },
- },
- {
- from: "1",
- to: "4",
- stats: {
- frequency: 1,
- },
- },
- {
- from: "2",
- to: "3",
- stats: {
- frequency: 2,
- },
- },
- ],
- };
+ readonly sampleGraphData: EnrichedGraphData = {
+ nodes: [
+ {
+ id: "1",
+ label: "node 1",
+ stats: {
+ frequency: 3,
+ },
+ },
+ {
+ id: "2",
+ label: "node 2",
+ stats: {
+ frequency: 2,
+ },
+ },
+ {
+ id: "3",
+ label: "node 3",
+ stats: {
+ frequency: 2,
+ },
+ },
+ {
+ id: "4",
+ label: "node 4",
+ stats: {
+ frequency: 1,
+ },
+ },
+ ],
+ edges: [
+ {
+ from: "1",
+ to: "2",
+ stats: {
+ frequency: 2,
+ },
+ },
+ {
+ from: "1",
+ to: "3",
+ stats: {
+ frequency: 2,
+ },
+ },
+ {
+ from: "1",
+ to: "4",
+ stats: {
+ frequency: 1,
+ },
+ },
+ {
+ from: "2",
+ to: "3",
+ stats: {
+ frequency: 2,
+ },
+ },
+ ],
+ };
- getGraph(): EnrichedGraphData {
- return this.sampleGraphData;
- }
+ getGraph(): EnrichedGraphData {
+ return this.sampleGraphData;
+ }
}
export class FileGraphService extends GraphService {
- private readonly data: EnrichedGraphData = {nodes: [], edges: []};
-
- constructor(data: EnrichedGraphData) {
- super();
- this.data = data;
- }
+ private readonly data: EnrichedGraphData = { nodes: [], edges: [] };
- getGraph(): EnrichedGraphData {
- return this.data;
- }
+ constructor(data: EnrichedGraphData) {
+ super();
+ this.data = data;
+ }
+ getGraph(): EnrichedGraphData {
+ return this.data;
+ }
}
diff --git a/visualizer/src/graph/GraphViewer.tsx b/visualizer/src/graph/GraphViewer.tsx
index 478d0aa..333d4d0 100644
--- a/visualizer/src/graph/GraphViewer.tsx
+++ b/visualizer/src/graph/GraphViewer.tsx
@@ -1,132 +1,164 @@
-import React, {useEffect, useRef, useState} from "react";
-import {
- EnrichedGraphData,
- EnrichedNode,
- FileGraphService,
- filter,
- GraphFilter,
- GraphService,
- SampleGraphService,
-} from "./GraphService";
-import FileUploadComponent from "../datasources/FileUploadComp";
-import Graph, {GraphEvents, Options} from "react-vis-graph-wrapper";
-import {GraphFilterControlPanel} from "./GraphFilterControlPanel";
-import {GraphOptionsControlPanel} from "./GraphOptionsControlPanel";
-import {NodeInfo} from "./NodeInfo";
+import React, { useMemo, useState } from "react";
+import { EdgeGroup, EnrichedNode, filter, GraphFilter } from "./GraphService";
+import Graph, { GraphEvents, Options } from "react-vis-graph-wrapper";
+import { GraphFilterControlPanel } from "./GraphFilterControlPanel";
+import { GraphOptionsControlPanel } from "./GraphOptionsControlPanel";
+import { NodeInfo } from "../inspector/NodeInfo";
+import { EdgeInfo } from "../inspector/EdgeInfo";
+import { useServiceContext } from "../service/ServiceContextProvider";
+export interface GraphViewerProps {}
export const GraphViewer: React.FC = () => {
- let graphServiceRef = useRef(new SampleGraphService());
- const [graphData, setGraphData] = useState(
- graphServiceRef.current.getGraph()
- );
+ const { getGraphService } = useServiceContext();
- const handleFileLoaded = (data: any) => {
- graphServiceRef.current = new FileGraphService(data);
- setGraphData(filter(graphFilter, graphServiceRef.current.getGraph()));
- };
+ const top50 =
+ getGraphService()
+ .getGraph()
+ .nodes.map((n) => n.stats.frequency)
+ .sort((a, b) => b - a)
+ .at(100) || 1;
+ let { minNodeFrequency, maxNodeFrequency, maxEdgeFrequency } =
+ getGraphService().getBounds();
- const [graphFilter, setGraphFilter] = useState(new GraphFilter(5, 3))
- const [selected, setSelected] = useState(new Set())
- const [selectedNode, setSelectedNode] = useState(undefined)
+ const [graphFilter, setGraphFilter] = useState(
+ new GraphFilter(
+ minNodeFrequency,
+ top50,
+ maxNodeFrequency,
+ 1,
+ Math.floor(top50 / 10),
+ maxEdgeFrequency,
+ ),
+ );
+ const [subgraphNodes, setSubgraphNodes] = useState(new Set());
+ const [selectedNode, setSelectedNode] = useState(
+ undefined,
+ );
+ const [selectedEdge, setSelectedEdge] = useState(
+ undefined,
+ );
- useEffect(
- () => {
- let newGraphData: EnrichedGraphData;
- if (selected.size > 0) {
- newGraphData = graphServiceRef.current.getSubGraph(selected);
- } else {
- newGraphData = graphServiceRef.current.getGraph();
- }
- setGraphData(filter(graphFilter, newGraphData))
- },
- [graphFilter, selected]
- )
+ const filteredGraphData = useMemo(() => {
+ const baseGraphData =
+ subgraphNodes.size > 0
+ ? getGraphService().getSubGraph(subgraphNodes)
+ : getGraphService().getGraph();
+ return filter(graphFilter, baseGraphData);
+ }, [getGraphService, graphFilter, subgraphNodes]);
- let events: GraphEvents = {
- doubleClick: ({nodes}) => {
- const newSelected = new Set(selected);
- nodes.forEach((element: string) => {
- newSelected.delete(element);
- });
- setSelected(newSelected);
- },
- select: ({nodes}) => {
- let newSelected: Set;
- if (nodes.length > 1) {
- newSelected = new Set();
- nodes.forEach((element: string) => {
- newSelected.add(element);
- });
- setSelected(newSelected);
- }
- },
- hold: ({nodes}) => {
- const newSelected = new Set(selected);
- nodes.forEach((element: string) => {
- Array.from(graphServiceRef.current.getConnectedNodes(element)).forEach(c => newSelected.add(c))
- });
- setSelected(newSelected);
- },
- selectNode: ({nodes}) => {
- setSelectedNode(graphServiceRef.current.getNode(nodes[0]));
- },
- deselectNode: () => {
- setSelectedNode(undefined);
- }
+ const graphDataMaps = useMemo(() => {
+ return {
+ nodesMap: new Map(
+ filteredGraphData.nodes.map((node) => [node.id!.toString(), node]),
+ ),
+ edgeGroupMap: new Map(
+ filteredGraphData.edges.map((edgeGroup) => [edgeGroup.id, edgeGroup]),
+ ),
};
+ }, [filteredGraphData]);
- let [options, setOptions] = useState({
- physics: {
- enabled: true,
- barnesHut: {
- springLength: 200
- }
- },
- edges: {
- smooth: false,
- font: {
- align: 'top'
- }
- }
- })
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- Shift+select to show subgraph.
-
-
- Double-click node to remove it.
-
-
- Hold to expand from node.
-
-
-
-
+ let events: GraphEvents = {
+ hold: ({ nodes }) => {
+ const newSubgraphNodes = new Set(subgraphNodes);
+ nodes.forEach((element: string) => {
+ newSubgraphNodes.delete(element);
+ });
+ setSubgraphNodes(newSubgraphNodes);
+ },
+ select: ({ nodes }) => {
+ let newSelected: Set
;
+ if (nodes.length > 1) {
+ newSelected = new Set();
+ nodes.forEach((element: string) => {
+ newSelected.add(element);
+ });
+ setSubgraphNodes(newSelected);
+ }
+ },
+ doubleClick: ({ nodes }) => {
+ const newSelected = new Set(subgraphNodes);
+ nodes.forEach((element: string) => {
+ Array.from(getGraphService().getConnectedNodes(element)).forEach((c) =>
+ newSelected.add(c),
+ );
+ });
+ setSubgraphNodes(newSelected);
+ },
+ selectNode: ({ nodes, edges }) => {
+ setSelectedEdge(undefined);
+ setSelectedNode(graphDataMaps.nodesMap.get(nodes[0]));
+ },
+ selectEdge: ({ nodes, edges }) => {
+ if (nodes.length < 1) {
+ setSelectedNode(undefined);
+ setSelectedEdge(graphDataMaps.edgeGroupMap.get(edges[0]));
+ }
+ },
+ deselectNode: () => {
+ setSelectedNode(undefined);
+ },
+ deselectEdge: () => {
+ setSelectedEdge(undefined);
+ },
+ };
-
-
- {selectedNode && }
+ let [options, setOptions] = useState({
+ physics: {
+ enabled: true,
+ barnesHut: {
+ springLength: 200,
+ },
+ },
+ edges: {
+ smooth: false,
+ font: {
+ align: "top",
+ },
+ },
+ });
-
-
+ return (
+
+
+
+
+
+
+
+
+
+ Shift+mark multiple to make subgraph.
+
+
+
+
+ Hold node to remove it.
+
+
+
+
+ Double-click to expand from node.
+
+
+
- );
+
+
+ {selectedNode && }
+ {selectedEdge && }
+
+
+
+ );
};
diff --git a/visualizer/src/graph/NodeInfo.tsx b/visualizer/src/graph/NodeInfo.tsx
deleted file mode 100644
index 03189c4..0000000
--- a/visualizer/src/graph/NodeInfo.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {EnrichedNode} from "./GraphService";
-import React from "react";
-
-export interface NodeInfoProps {
- node: EnrichedNode
- className?: string;
-}
-
-export const NodeInfo: React.FC
= ({node, className}: NodeInfoProps) => {
- const stats = node.stats;
- return
-
{node.label}
-
-
-
Frequency: {stats.frequency}
-
Norm. frequency: {stats.norm_frequency?.toPrecision(3)}
- {stats.first_occurrence &&
Earliest date: {stats.first_occurrence}
}
- {stats.last_occurrence &&
Latest date: {stats.last_occurrence}
}
- {stats.alt_labels &&
-
- Labels:
-
{stats.alt_labels.map(l => - {l}
)}
-
- }
- {stats.docs &&
-
- Documents
- {stats.docs.map(d => - {d}
)}
-
- }
-
-
-
+
+ {document.id} {document.timestamp}
+
+
+
+ );
+};
diff --git a/visualizer/src/inspector/EdgeInfo.tsx b/visualizer/src/inspector/EdgeInfo.tsx
new file mode 100644
index 0000000..f73425c
--- /dev/null
+++ b/visualizer/src/inspector/EdgeInfo.tsx
@@ -0,0 +1,21 @@
+import { EdgeGroup } from "../graph/GraphService";
+import React from "react";
+import { StatsInfo } from "./StatsInfo";
+
+export interface EdgeInfoProps {
+ edges: EdgeGroup;
+ className?: string;
+}
+
+export const EdgeInfo: React.FC = ({ edges }: EdgeInfoProps) => {
+ return (
+
+ {edges.group!.map((e, i) => (
+
+ {e.label}
+
+
+ ))}
+
+ {node.label}
+
+
+
+ );
+};
diff --git a/visualizer/src/inspector/StatsInfo.tsx b/visualizer/src/inspector/StatsInfo.tsx
new file mode 100644
index 0000000..8676b8d
--- /dev/null
+++ b/visualizer/src/inspector/StatsInfo.tsx
@@ -0,0 +1,58 @@
+import { DocInfo } from "./DocInfo";
+import React from "react";
+import { Stats } from "../graph/GraphService";
+import { useServiceContext } from "../service/ServiceContextProvider";
+
+export interface StatsInfoProps {
+ label: string;
+ stats: Stats;
+}
+
+export const StatsInfo: React.FC = ({ label, stats }) => {
+ const { getDocService } = useServiceContext();
+
+ return (
+
+
Frequency: {stats.frequency}
+ {/*
Norm. frequency: {stats.norm_frequency?.toPrecision(3)}
*/}
+ {stats.first_occurrence &&
Earliest date: {stats.first_occurrence}
}
+ {stats.last_occurrence &&
Latest date: {stats.last_occurrence}
}
+ {stats.alt_labels && (
+
+ Alternative Labels:
+
+ {stats.alt_labels.map((l) => (
+ - {l}
+ ))}
+
+
+ )}
+ {stats.docs && (
+
+ Documents
+ {!getDocService() && (
+
+ {stats.docs.map((d) => (
+ - {d}
+ ))}
+
+ )}
+
+ {getDocService() && (
+
+ {getDocService()
+ .getDocs(stats.docs)
+ .map((d) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ Load graph:
+
+ Load documents:
+
+
+ );
+ }
+
+ return (
+ {children}
+ );
+};
+
+export const useServiceContext = (): Services => {
+ const context = useContext(ServiceContext);
+ if (!context) {
+ throw new Error("useServiceContext must be used within a ServiceProvider");
+ }
+ return context;
+};
diff --git a/visualizer/tsconfig.json b/visualizer/tsconfig.json
index a273b0c..9d379a3 100644
--- a/visualizer/tsconfig.json
+++ b/visualizer/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -20,7 +16,5 @@
"noEmit": true,
"jsx": "react-jsx"
},
- "include": [
- "src"
- ]
+ "include": ["src"]
}