lee-janice / wikigraph

A graph-based approach to exploring Wikipedia clickstream data; built with Neo4j, neovis.js, and React

WikiGraph

A non-linear, graph-based approach to exploring the depths of Wikipedia

Component structure

Index
└── App
    ├── Wikigraph
    |   ├── Canvas
    |   |   └── Graph visualization
    |   |   └── Expand visualization button
    |   |   └── *Mobile context menu button*
    |   |   └── Stabilize button
    |   |   └── Center button
    |   |   └── *Context menu*
    ├── Sidebar
    |   └── Home tab
    |   └── About tab
    |   └── User manual tab
    └── Theme toggler

TODOs

Low-lift adjustments

• Add how-to-use tab on sidebar
• Add info tab on sidebar
• Move "Update graph with selection" option to context menu
• Add ability to full-screen the visualization
• Add dark mode
• Recenter visualization when graph rerenders
• Fix formatting on mobile
• Add alternative to context menu on mobile
• Add link to Wikipedia page on the summaries
• Allow user to double click node to expand the links
• Allow user to add nodes to existing graph
• Delete all unconnected nodes
• Notify user when article is not found in the database
• Add keep selected nodes to context menu
• Add expand selected nodes to context menu
• Add "find path between two nodes" option
• Indicate when there are no nodes in the expansion when the user double-clicks a node
• Make the buttons reusable instead of having one component for each button type
• Make alert for no additional nodes more accurate—alert when there are no new nodes in the graph as a result of the query (currently breaks on Find path between nodes)
• Maybe change the color of in-going and out-going links when selecting a node? Have to think about case where two connected nodes are selected; maybe only allows this when one node is selected

Clean up code

• Refactor component/file structure
• Use styled components instead of css file for one-offs
• Figure out how to test deploy build to catch errors before Netlify attempts to deploy

Longer-term modifications

• holy crap the performance for expanding a node is awful
• Make the physics not so wonky and prone to flying off the screen; something like Neo4j Browser
• Add filters for nodes: keep only incoming nodes, keep only outgoing nodes, keep nodes above a certain size, keep links above a certain size, keep top n nodes, etc.
• Allow user to click and drag a node and make it stick
• Implement cache for summaries and links
• Add something like Elastic Search to Wikipedia articles
• Allow user to save/export and load graphs
• Allow user to click and drag to select all nodes inside an area
• Make an excerpt of the summary (first sentence) appear on hovering over a node
• Aggregate more months of data
• Host the whole database on a server
• Explore possibility of using the whole Wikipedia data dump with groupings by properties instead of clickstream data

Build

This project was bootstrapped with Create React App and deployed with Netlify. The visualization was created with neovis.js.

wikigraph's Issues

Summary tabs area should be scrollable

More tabs are hidden on the right

Some questions and suggestions

1. Consider using React.memo on static components since contextMenuState updates often, which causes unnecessary re-rendering. Below is an example
   

   wikigraph/src/components/wikigraph.tsx

   Lines 247 to 257 in f2f1751

   	<input
   	type="submit"
   	value="Stabilize"
   	id="stabilize-button"
   	onClick={() => {
   	vis?.stabilize();
   	}}
   	/>
   	<input type="submit" value="Center" id="center-button" onClick={() => visNetwork?.fit()} />
   	{/* Move the alert logic to the APP.tsx since it's part of the global state */}
   	<Alert state={alertState}></Alert>

2. Let's move these handlers in useEffect to a util function. It can make the file look a lot cleaner
   

   wikigraph/src/components/wikigraph.tsx

   Line 103 in f2f1751

   visNetwork.onSelect((e, nodeIds) => {

3. Is this line doing anything else other than initializing an empty array?
   

   wikigraph/src/components/wikigraph.tsx

   Lines 75 to 77 in f2f1751

   	// get reference to selection so that we can use the current value in the vis event listeners
   	// otherwise, the value lags behind
   	const selectionRef = useRef(selection);

4. Following on the above point, correct me if I'm wrong - selection is not being used for any re-rendering purpose, maybe we don't need to juggle between selection and its ref. Keeping the ref only is fine.

Right-click should not select multiple nodes

I'm not a fan of this user experience 🤔 Conventionally ctrl + left click multi-selects things, which is the current behaviour in the app. Right-click to multi-select is confusing as it's hard to find a way to deselect a node.

wikigraph/src/components/wikigraph.tsx

Line 154 in f2f1751

visNetwork.selectNodes([...selectionRef.current, nodeId]);

We should try our best not to disable strict mode rendering in React

I'd like to call out the implications of disabling the React strict mode. Referencing to this excerpt on React official website.

React offers a “Strict Mode” in which it calls each component’s function twice during development. By calling the component functions twice, Strict Mode helps find components that break these rules.

That's said, if you've noticed bugs due to strict-mode rendering, it indicates that you have impure components causing unpredictable bugs. We should make sure the glitch is only stemmed from the vis API itself (which I doubt), not the code we wrote.

wikigraph/src/index.tsx

Lines 9 to 11 in 88c1329

	// React.StrictMode double-invokes renders, so this causes a glitch in the graph visualization
	// https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice
	// <React.StrictMode>