Add a simple history list for visited course graphs

package.json

@@ -13,7 +13,7 @@
     "react-d3-graph": "^2.5.0",
     "react-dom": "^16.13.1",
     "react-json-tree": "^0.11.2",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^3.4.3",
     "react-toggle-button": "^2.2.0"
   },
   "scripts": {

src/App.css

@@ -47,60 +47,6 @@ hr {
   }
 }
 
-/* The information panel, including the course code entry box */
-.infoPanel {
-  position: absolute;
-
-  width: 30rem;
-  padding: 2rem;
-
-  border-radius: 0 0 1rem 0;
-
-  background-color: rgba(236, 240, 241, 0);
-
-  pointer-events: none;
-}
-
-/* Box containing the course code entry box and course name */
-.titleBox {
-  padding: .5rem;
-}
-
-/* Plaintext information about the course's recommended/required knowledge, in full */
-.infoBox {
-  padding: .5rem;
-  margin-top: .5rem;
-}
-
-/* Course code input form */
-.courseInputForm {
-  width: 30rem;
-  max-width: 30rem;
-  margin: 0;
-
-  pointer-events: visible;
-}
-
-/* The actual text input */
-.courseInputTextArea {
-  max-height: 1.35em;
-  border: none;
-  resize: none;
-  padding: 0;
-
-  background-color: rgba(236, 240, 241, 0);
-  font-size: 2em;
-  font-weight: bold;
-
-  white-space: nowrap;
-}
-
-/* Course name */
-.infoTitleName {
-  font-style: italic;
-  color: #494949;
-}
-
 /* Bottom-right button for toggling between d3-graph and graphviz */
 .graphToggler {
   position: absolute;

src/App.js

@@ -2,8 +2,10 @@ import React from "react";
 import "./App.css";
 import InteractiveCourseGraph from "./components/InteractiveCourseGraph.js";
 import GVCourseGraph from "./components/GraphVizCourseGraph.js";
-import InfoPanel from "./components/InfoPanel.js";
+import InfoPanel from "./components/InfoPanel/InfoPanel.js";
+import HistoryPanel from "./components/HistoryPanel/HistoryPanel.js";
 import appConfig from "./config/emnestigen_config.json";
+import data from "./data/course_data.json";
 
 class App extends React.Component {
     constructor(props) {
@@ -13,38 +15,28 @@ class App extends React.Component {
             width: 0,
             height: 0,
             graphType: "D3G",
-            activeCourse: ""
+            activeCourse: "",
+            history: []
         };
 
         this.updateSize = this.updateSize.bind(this);
     }
 
     toggleGraphType() {
         const newType = (this.state.graphType === "D3G") ? "GV" : "D3G";
+
         this.setState({
-            width: this.state.width,
-            height: this.state.height,
-            graphType: newType,
-            activeCourse: this.state.activeCourse
+            graphType: newType
         })
     }
 
-    onSearchUpdate(event) {
-        this.setState({
-            width: this.state.width,
-            height: this.state.height,
-            graphType: this.state.graphType,
-            activeCourse: event.target.value.toUpperCase()
-        });
-    }
+    updateActiveCourse(courseID) {
+        courseID = courseID.toUpperCase();
 
-    onNodeSelected(nodeId) {
+        this.pushHistory(courseID);
         this.setState({
-            width: this.state.width,
-            height: this.state.height,
-            graphType: this.state.graphType,
-            activeCourse: nodeId
-        })
+            activeCourse: courseID
+        });
     }
 
     componentDidMount() {
@@ -60,40 +52,65 @@ class App extends React.Component {
         });
     }
 
+    pushHistory(courseID) {
+        // Only push to history if its a valid course and its one that isn't already in history
+        const { history } = this.state;
+        if (!data[courseID] || history.includes(courseID)) {
+            return;
+        }
+
+        let updatedHistory = this.state.history;
+        updatedHistory.push(courseID);
+
+        while(updatedHistory.length > appConfig["maxHistoryLength"]) {
+            updatedHistory.shift();
+        }
+
+        this.setState({
+            history: updatedHistory
+        })
+    }
+
     render() {
+        const { activeCourse, width, height, graphType, history } = this.state;
         let graphClass = "graphContainer";
         let graph;
 
-        if(this.state.graphType === "D3G") {
+        if(graphType === "D3G") {
             graph = (
                 <InteractiveCourseGraph
                     key="courseGraph"
                     className="d3gGraph"
-                    activeCourse={this.state.activeCourse}
-                    width={this.state.width}
-                    height={this.state.height}
-                    onClickNode={(id) => this.onNodeSelected(id)}
+                    activeCourse={activeCourse}
+                    width={width}
+                    height={height}
+                    onClickNode={(courseID) => this.updateActiveCourse(courseID)}
                 />
             );
-        } else if(this.state.graphType === "GV") {
+        } else if(graphType === "GV") {
             graphClass += " gvGraph";
             graph = (
                 <GVCourseGraph
                     key="courseGraph"
                     className="gvGraph"
-                    activeCourse={this.state.activeCourse}
-                    width={this.state.width}
-                    height={this.state.height * 0.95}
+                    activeCourse={activeCourse}
+                    width={width}
+                    height={height * 0.95}
                 />
             );
         }
 
         return (
             <div key="appContainer" className="appContainer">
+                <HistoryPanel
+                    history={history}
+                    onHistoryClick={(courseID) => this.updateActiveCourse(courseID)}
+                />
+
                 <InfoPanel
                     key="infoPanel"
-                    activeCourse={this.state.activeCourse}
-                    onSearch={(event) => this.onSearchUpdate(event)}
+                    activeCourse={activeCourse}
+                    onSearch={(courseID) => this.updateActiveCourse(courseID)}
                 />
 
                 <div className={graphClass}>
@@ -104,7 +121,7 @@ class App extends React.Component {
                     className="graphToggler"
                     onClick={() => this.toggleGraphType()}
                 >
-                    <p>{this.state.graphType}</p>
+                    <p>{graphType}</p>
                 </div>
 
                 <div className="about">

src/components/HistoryPanel/HistoryPanel.css

@@ -0,0 +1,63 @@
+.historyPanel {
+  position: absolute;
+  right: 0;
+
+  width: 10rem;
+  padding: 2rem;
+
+  border-radius: 0 0 1rem 0;
+
+  background-color: rgba(236, 240, 241, 0);
+}
+
+.historyTitle {
+  margin-bottom: .1rem;
+
+  text-align: center;
+  pointer-events: none;
+}
+
+.historyButtonList {
+  display: flex;
+
+  margin-top: .5rem;
+
+  width: 100%;
+  height: 100%;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+}
+
+.historyButton {
+  display: flex;
+
+  padding: .2rem;
+
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+
+  border: none;
+  background-color: rgba(236, 240, 241, 0);
+}
+
+.historyNode {
+  display: block;
+
+  width: 32px;
+  height: 32px;
+
+  margin-right: .5rem;
+
+  border: none;
+  border-radius: 32px;
+
+  color: #0094ff;
+  background-color: #0094ff;
+}
+
+.historyButton:hover {
+  cursor: pointer;
+}

src/components/HistoryPanel/HistoryPanel.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import './HistoryPanel.css';
+
+
+function HistoryPanel(props) {
+	const history = props.history;
+
+	if(!history.length) {
+		return null;
+	}
+
+	let historyButtons = [];
+	for(let i = 0; i < history.length; i++) {
+		const courseID = history[i];
+
+		historyButtons.push((
+			<button
+				key={"historyButton_" + courseID}
+				className="historyButton"
+				onClick={(event) => {props.onHistoryClick(courseID)}}
+			>
+				<div className="historyNode"></div>
+				{courseID}
+			</button>
+		));
+	}
+
+	return (
+		<div className="historyPanel">
+			<hr/>
+			<h2 className="historyTitle">Historikk</h2>
+			<hr/>
+			<div className="historyButtonList">
+				{historyButtons}
+			</div>
+		</div>
+	);
+}
+
+export default HistoryPanel;