Move some stuff to a separate config file

halworsen · Oct 31, 2019 · 01de17d · 01de17d
1 parent 53817d6
commit 01de17d
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 21 deletions.
diff --git a/data_generation/scraper.py b/data_generation/scraper.py
@@ -222,14 +222,14 @@ def dump_data(self, file_name):
         print("Scraping course list...")
         self.scrape_course_list()
         print(f"Successfully fetched {len(self.course_info)} courses.")
-        print("Scraping information about each course, this will take a while...")
+        print("Scraping information about each course. This will take a long time!")
 
         # Now scrape info from every single course
         progress = 0
         goal = len(self.course_info)
         for code in self.course_info.keys():
             progress += 1
-            print(f"Scraping info about {code} in ({round((progress / goal) * 100, 1)}%)")
+            print(f"Scraping info about {code} ({round((progress / goal) * 100, 1)}%)")
             self.scrape_course(code)
 
         # Store the scraped data in a JSON file

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,8 @@
 * {
   padding: 0;
   margin: 0;
+
+  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 html, body, #root {
@@ -36,12 +38,14 @@ hr {
 .infoPanel {
   position: absolute;
 
-  width: 30em;
+  width: 30rem;
   padding: 2rem;
 
   border-radius: 0 0 1rem 0;
 
   background-color: rgba(236, 240, 241, 0);
+
+  pointer-events: none;
 }
 
 .titleBox {
@@ -57,6 +61,8 @@ hr {
   width: 30rem;
   max-width: 30rem;
   margin: 0;
+
+  pointer-events: visible;
 }
 
 .courseInputTextArea {
@@ -66,7 +72,6 @@ hr {
   padding: 0;
 
   background-color: rgba(236, 240, 241, 0);
-  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 2em;
   font-weight: bold;
 
@@ -76,4 +81,26 @@ hr {
 .infoTitleName {
   font-style: italic;
   color: #494949;
+}
+
+.about {
+  position: absolute;
+  left: .5rem;
+  bottom: .5rem;
+
+  color: #494949;
+  font-size: .7em;
+
+  pointer-events: none;
+}
+
+.ghLink {
+  color: #494949;
+  text-decoration: none;
+
+  pointer-events: visible;
+}
+
+.ghLink:hover {
+  text-decoration: underline;
 }
diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,8 @@ import './App.css';
 import CourseGraph from "./components/CourseGraph.js"
 import InfoPanel from "./components/InfoPanel.js"
 
+import appConfig from "./config/emnestigen_config.json"
+
 class App extends React.Component {
     constructor(props) {
         super(props);
@@ -47,12 +49,36 @@ class App extends React.Component {
     }
 
     render() {
-        const graphWidth = this.state.width;
-
         return (
             <div key="appContainer" className="appContainer">
-                <InfoPanel key="infoPanel" activeCourse={this.state.activeCourse} onSearch={(event) => this.onSearchUpdate(event)}/>
-                <CourseGraph key="courseGraph" width={graphWidth} height={this.state.height} activeCourse={this.state.activeCourse} onClickNode={(node) => this.onNodeSelected(node)}/>
+                <InfoPanel
+                    key="infoPanel"
+                    activeCourse={this.state.activeCourse}
+                    onSearch={(event) => this.onSearchUpdate(event)}
+                />
+
+                <CourseGraph
+                    key="courseGraph"
+                    width={this.state.width}
+                    height={this.state.height}
+                    activeCourse={this.state.activeCourse}
+                    onClickNode={(node) => this.onNodeSelected(node)}
+                />
+
+                <div className="about">
+                    <p>
+                        {appConfig.aboutBlurb ? appConfig.aboutBlurb : "Appen ble ikke konfigurert riktig 😢"}
+                        <span> | </span>
+                        <a
+                            className="ghLink"
+                            href={appConfig.repository_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            GitHub
+                        </a>
+                    </p>
+                </div>
             </div>
         );
     }

diff --git a/src/components/CourseGraph.js b/src/components/CourseGraph.js
@@ -1,7 +1,9 @@
 import React from "react";
 import {Graph} from "react-d3-graph";
 import data from "../data/course_data.json"
+
 import graphConfig from "../config/graph_config.json"
+import appConfig from "../config/emnestigen_config.json"
 
 class CourseGraph extends React.Component {
 	constructor(props) {
@@ -11,16 +13,10 @@ class CourseGraph extends React.Component {
 			chosen_course: ""
 		};
 
-		// For both of these, any depth equal to or beyond the length of the list will use the last element
-		// Sizes for different "depths" of course dependencies
-		this.depthSize = [2000, 1200, 800, 400];
-		// Colors for different "depths" of course dependencies
-		this.depthColor = ["#0094FF", "#FFD800", "#FF0000", "#808080"];
-
 		// The depth at which the graph builder stops
 		// This is to prevent crashes when building cyclic graphs (they exist in the dataset!)
-		// I highly doubt any one course ultimately depends on more than 50 courses
-		this.depthCutoff = 50;
+		// I highly doubt any one course ultimately depends on more than 10 courses
+		this.depthCutoff = 10;
 
 		this.graph = React.createRef();
 	}
@@ -32,6 +28,9 @@ class CourseGraph extends React.Component {
 			links: []
 		};
 
+		const colors = appConfig.nodes.depthColors;
+		const sizes = appConfig.nodes.depthSizes;
+
 		let generated_data = [];
 		let recursiveBuild = function(graph_data, code, linking_data, depth=0) {
 			if(depth > this.depthCutoff) {
@@ -44,8 +43,8 @@ class CourseGraph extends React.Component {
 
 			// Add a node to the graph if it isn't already in the graph
 			if(!generated_data.includes(code)) {
-				const nodeSize = this.depthSize[Math.min(depth, this.depthSize.length-1)];
-				const nodeColor = this.depthColor[Math.min(depth, this.depthColor.length-1)];
+				const nodeSize = sizes[Math.min(depth, sizes.length-1)];
+				const nodeColor = colors[Math.min(depth, colors.length-1)];
 
 				graph_data.nodes.push({
 					id: code,
@@ -55,6 +54,9 @@ class CourseGraph extends React.Component {
 				generated_data.push(code);
 			}
 
+			// Go through each data key to build the graph by,
+			// recursively adding new nodes and links to the graph
+			// with the custom link configurations
 			for(var data_index in linking_data) {
 				const info = linking_data[data_index];
 
@@ -95,11 +97,11 @@ class CourseGraph extends React.Component {
 		const graphData = this.buildGraph(code, [
 			{
 				key: "required_courses",
-				custom_config: {color: "#ff0000"}
+				custom_config: {color: appConfig.link.requiredColor}
 			},
 			{
 				key: "recommended_courses",
-				custom_config: {}
+				custom_config: {color: appConfig.link.recommendedColor}
 			}
 		]);
 
@@ -110,6 +112,7 @@ class CourseGraph extends React.Component {
 
 		// Only display the graph if its graph data was generated (which it will be if the raw data exists)
 		if(data[code]) {
+			console.log("fugue!")
 			content = (<Graph ref={this.graph}
 				id="course-dependencies"
 				data={graphData}

diff --git a/src/config/.gitignore b/src/config/.gitignore
@@ -1 +1,2 @@
-!graph_config.json
+*.json
+!example/*
diff --git a/src/config/example/emnestigen_config.json b/src/config/example/emnestigen_config.json
@@ -0,0 +1,12 @@
+{
+	"repository_url": "https://github.com/halworsen/emnestigen",
+	"aboutBlurb": "Laga med ekte ❤️ av halworsen",
+	"nodes": {
+		"depthColors": ["#0094ff", "#ffd800", "#ff0000", "#808080"],
+		"depthSizes": [2000, 1200, 800, 400]
+	},
+	"link": {
+		"requiredColor": "#ff0000",
+		"recommendedColor": "#d3d3d3"
+	}
+}
diff --git a/src/config/example/graph_config.json b/src/config/example/graph_config.json
@@ -0,0 +1,46 @@
+{
+  "automaticRearrangeAfterDropNode": true,
+  "collapsible": false,
+  "directed": true,
+  "focusAnimationDuration": 0.75,
+  "focusZoom": 2.5,
+  "highlightDegree": 1,
+  "highlightOpacity": 1,
+  "linkHighlightBehavior": false,
+  "maxZoom": 4,
+  "minZoom": 0.7,
+  "nodeHighlightBehavior": false,
+  "panAndZoom": false,
+  "staticGraph": false,
+  "staticGraphWithDragAndDrop": false,
+  "d3": {
+    "alphaTarget": 0.05,
+    "gravity": -800,
+    "linkLength": 100,
+    "linkStrength": 1
+  },
+  "node": {
+    "color": "#d3d3d3",
+    "fontColor": "black",
+    "fontSize": 8,
+    "fontWeight": "normal",
+    "highlightColor": "SAME",
+    "highlightFontSize": 8,
+    "highlightFontWeight": "normal",
+    "highlightStrokeColor": "SAME",
+    "highlightStrokeWidth": "SAME",
+    "labelProperty": "id",
+    "mouseCursor": "pointer",
+    "opacity": 1,
+    "size": 800,
+    "renderLabel": true,
+    "symbolType": "circle"
+  },
+  "link": {
+    "opacity": 1,
+    "mouseCursor": "auto",
+    "renderLabel": false,
+    "semanticStrokeWidth": false,
+    "strokeWidth": 1.5
+  }
+}
diff --git a/src/data/.gitignore b/src/data/.gitignore
@@ -0,0 +1 @@
+*.json