Add tslint and use single qmarks

README.md

@@ -3,11 +3,14 @@ The TGView System is a browser-based theory graph viewer developed at the [KWARC
 
 We value your feedback, please consult the [GitHub issues](issues/) for planned extensions and feel free to [open  a new issue](issues/new) if you have comments. 
 
+## Yarn Command
+- `yarn lint` -- Run linter
+
 ## Documentation
 There is a [MathUI-2017 paper](https://kwarc.info/kohlhase/papers/mathui17-tgview.pdf) that describes
 the system at a conceptual level. Technical information can be found in the [TGView Wiki](https://github.com/UniFormal/TGView/wiki)
 
 ## find help
 [Help Pages](https://github.com/UniFormal/TGView/wiki/Help-Pages)
 
-## Dependencies
+## Dependencies

entry.ts

@@ -4,7 +4,7 @@
  * The main entry point for the TGView standalone html file
  */
 
-import TGView from "./src";
+import TGView from './src';
 
 // Load all of the required CSS
 import './src/css/styles.css';

package.json

@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "start": "webpack-serve",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "lint": "tslint -p tsconfig.json"
   },
   "devDependencies": {
     "@types/jquery": "^3.3.29",
@@ -17,6 +18,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.3",
+    "tslint": "^5.12.1",
     "typescript": "^3.3.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.1",

src/Configuration.ts

@@ -10,7 +10,7 @@ import { getParameterByName } from './utils';
 export class Configuration {
 	constructor(preferences: Partial<ITGViewOptions>) {
 		this.preferences = {
-			serverBaseURL: preferences.serverBaseURL || "/",
+			serverBaseURL: preferences.serverBaseURL || '/',
 			serverUrl: preferences.serverUrl,
 
 			isMathhub: preferences.isMathhub === undefined ? true : preferences.isMathhub,
@@ -22,22 +22,22 @@ export class Configuration {
 
 			highlight: preferences.highlight || getParameterByName(Configuration.graphDataURLHighlightParameterNameTGView) || undefined,
 
-			mainContainer: preferences.mainContainer || "tgViewMainEle",
-			prefix: preferences.prefix || "custom-prefix-",
+			mainContainer: preferences.mainContainer || 'tgViewMainEle',
+			prefix: preferences.prefix || 'custom-prefix-',
 		}
 
 		/**
 		 * The base URL of all requests to the server
 		 * @type {string}
 		 */
-		this.serverBaseURL = this.preferences.serverBaseURL || "/";
+		this.serverBaseURL = this.preferences.serverBaseURL || '/';
 
 		/**
 		 * The url to items on the server
 		 * @todo: What exactly is this used for
 		 * @type {string} 
 		 */
-		this.serverUrl = this.serverBaseURL || (window.location.protocol == "file:" ? "/" : "/mh/mmt/");
+		this.serverUrl = this.serverBaseURL || (window.location.protocol == 'file:' ? '/' : '/mh/mmt/');
 
 		// if we have an external serverURL, use it
 		if (this.preferences.serverUrl !== undefined) {
@@ -53,11 +53,11 @@ export class Configuration {
 		 * URL for getting menu-entries in the side-menu
 		 * @type {string}
 		 */
-		this.menuEntriesURL = this.serverUrl + ":jgraph/menu?id=";
+		this.menuEntriesURL = this.serverUrl + ':jgraph/menu?id=';
 
 		// URL parts for getting graphdata, construction looks like:
 		// graphDataURL + graphDataURLTypeParameterName + concreteTypeValue + "&" + graphDataURLDataParameterName + concreteGraphdataValue
-		this.graphDataURL = this.serverUrl + ":jgraph/json?";
+		this.graphDataURL = this.serverUrl + ':jgraph/json?';
 	}
 
 	/** Options that were set externally */
@@ -83,18 +83,18 @@ export class Configuration {
 	 * @type {string[]}
 	 */
 	readonly colorizingNodesArray = [
-		"#CCCCFF",
-		"#FFFFCC",
-		"#FFCC99",
-		"#CCFFCC",
-		"#DDDDDD",
-		"#FFCCCC"
+		'#CCCCFF',
+		'#FFFFCC',
+		'#FFCC99',
+		'#CCFFCC',
+		'#DDDDDD',
+		'#FFCCCC'
 	];
 
 	/**
 	 * Color to used for highlighting nodes given by URI parameter
 	 */
-	readonly highlightColorByURI = "#ff8080";
+	readonly highlightColorByURI = '#ff8080';
 
 	/**
 	 * Options for the legend panel
@@ -140,7 +140,7 @@ export class Configuration {
 				smooth:
 				{
 					enabled: true,
-					type: "straightCross",
+					type: 'straightCross',
 					roundness: 0.3
 				}
 			},
@@ -152,7 +152,7 @@ export class Configuration {
 	readonly THEORY_GRAPH_OPTIONS: VOptions = {
 		physics: {
 			enabled: false,
-			solver: "barnesHut",
+			solver: 'barnesHut',
 			barnesHut: {
 				avoidOverlap: 1
 			},
@@ -174,7 +174,7 @@ export class Configuration {
 		edges: {
 			smooth: {
 				enabled: true,
-				type: "straightCross",
+				type: 'straightCross',
 				roundness: 0.3
 			}
 		},
@@ -200,70 +200,70 @@ export class Configuration {
      */
 	readonly ARROW_STYLES: { [id: string]: IArrowStyle } = {
 		include: {
-			color: "#cccccc",
-			colorHighlight: "#cccccc",
-			colorHover: "#cccccc",
+			color: '#cccccc',
+			colorHighlight: '#cccccc',
+			colorHover: '#cccccc',
 			dashes: false,
 			circle: false,
 			directed: true,
 			smoothEdge: true,
 			width: 1,
-			alias: "Include-Edges"
+			alias: 'Include-Edges'
 		},
 		modelinclude: {
-			color: "black",
-			colorHighlight: "black",
-			colorHover: "black",
+			color: 'black',
+			colorHighlight: 'black',
+			colorHover: 'black',
 			dashes: false,
 			circle: false,
 			directed: false,
 			smoothEdge: false,
 			width: 1,
-			alias: "Model Includes-Edges"
+			alias: 'Model Includes-Edges'
 		},
 		meta: {
-			color: "green",
-			colorHighlight: "green",
-			colorHover: "green",
+			color: 'green',
+			colorHighlight: 'green',
+			colorHover: 'green',
 			dashes: true,
 			circle: true,
 			directed: true,
 			smoothEdge: true,
 			width: 1,
-			alias: "Meta-Edges"
+			alias: 'Meta-Edges'
 		},
 		alignment: {
-			color: "red",
-			colorHighlight: "red",
-			colorHover: "red",
+			color: 'red',
+			colorHighlight: 'red',
+			colorHover: 'red',
 			dashes: true,
 			circle: false,
 			directed: false,
 			smoothEdge: true,
 			width: 1,
-			alias: "Alignment-Edges"
+			alias: 'Alignment-Edges'
 		},
 		view: {
-			color: "black",
-			colorHighlight: "black",
-			colorHover: "black",
+			color: 'black',
+			colorHighlight: 'black',
+			colorHover: 'black',
 			dashes: false,
 			circle: false,
 			directed: true,
 			smoothEdge: true,
 			width: 1,
-			alias: "View-Edges"
+			alias: 'View-Edges'
 		},
 		structure: {
-			color: "#cccccc",
-			colorHighlight: "#cccccc",
-			colorHover: "#cccccc",
+			color: '#cccccc',
+			colorHighlight: '#cccccc',
+			colorHover: '#cccccc',
 			dashes: true,
 			circle: false,
 			directed: true,
 			smoothEdge: true,
 			width: 1,
-			alias: "Structure-Edges"
+			alias: 'Structure-Edges'
 		}
 	};
 
@@ -272,40 +272,40 @@ export class Configuration {
 	 */
 	readonly NODE_STYLES: { [id: string]: INodeStyle } = {
 		model: {
-			shape: "square",
-			color: "#DDDDDD",
-			colorBorder: "#222222",
-			colorHighlightBorder: "#444444",
-			colorHighlight: "#EEEEEE",
+			shape: 'square',
+			color: '#DDDDDD',
+			colorBorder: '#222222',
+			colorHighlightBorder: '#444444',
+			colorHighlight: '#EEEEEE',
 			dashes: false,
-			alias: "Model-Nodes"
+			alias: 'Model-Nodes'
 		},
 		border: {
-			shape: "circle",
-			color: "#E8E8E8",
-			colorBorder: "#D8D8D8",
-			colorHighlightBorder: "#A8A8A8",
-			colorHighlight: "#D8D8D8",
+			shape: 'circle',
+			color: '#E8E8E8',
+			colorBorder: '#D8D8D8',
+			colorHighlightBorder: '#A8A8A8',
+			colorHighlight: '#D8D8D8',
 			dashes: false,
-			alias: "Border-Nodes"
+			alias: 'Border-Nodes'
 		},
 		theory: {
-			shape: "circle",
-			color: "#D2E5FF",
-			colorBorder: "#2B7CE9",
-			colorHighlightBorder: "#2B7CE9",
-			colorHighlight: "#D2E5FF",
+			shape: 'circle',
+			color: '#D2E5FF',
+			colorBorder: '#2B7CE9',
+			colorHighlightBorder: '#2B7CE9',
+			colorHighlight: '#D2E5FF',
 			dashes: false,
-			alias: "Theory-Nodes"
+			alias: 'Theory-Nodes'
 		},
 		boundarycondition: {
-			shape: "square",
-			color: "#EEEEEE",
-			colorBorder: "#DDDDDD",
-			colorHighlightBorder: "#CCCCCC",
-			colorHighlight: "#DDDDDD",
+			shape: 'square',
+			color: '#EEEEEE',
+			colorBorder: '#DDDDDD',
+			colorHighlightBorder: '#CCCCCC',
+			colorHighlight: '#DDDDDD',
 			dashes: true,
-			alias: "Boundary-Condition-Nodes"
+			alias: 'Boundary-Condition-Nodes'
 		}
 	};
 
@@ -314,42 +314,42 @@ export class Configuration {
 	 */
 	readonly GRAPH_TYPES: IGraphMenuEntry[] = [
 		{
-			id: "thgraph",
-			menuText: "Th. Graph",
-			tooltip: ""
+			id: 'thgraph',
+			menuText: 'Th. Graph',
+			tooltip: ''
 		},
 		{
-			id: "pgraph",
-			menuText: "P Graph",
-			tooltip: ""
+			id: 'pgraph',
+			menuText: 'P Graph',
+			tooltip: ''
 		},
 		{
-			id: "docgraph",
-			menuText: "Doc Graph",
-			tooltip: ""
+			id: 'docgraph',
+			menuText: 'Doc Graph',
+			tooltip: ''
 		},
 		{
-			id: "archivegraph",
-			menuText: "Archive Graph",
-			tooltip: ""
+			id: 'archivegraph',
+			menuText: 'Archive Graph',
+			tooltip: ''
 		},
 		{
-			id: "mpd",
-			menuText: "MPD Graph",
-			tooltip: "MPD Graph-Viewer"
+			id: 'mpd',
+			menuText: 'MPD Graph',
+			tooltip: 'MPD Graph-Viewer'
 		}
 	];
 
 	// For Backend
-	static readonly graphDataURLTypeParameterName = "key";
-	static readonly graphDataURLDataParameterName = "uri";
+	static readonly graphDataURLTypeParameterName = 'key';
+	static readonly graphDataURLDataParameterName = 'uri';
 
 	// For TGView
-	static readonly graphDataURLTypeParameterNameTGView = "type";
-	static readonly graphDataURLDataParameterNameTGView = "graphdata";
-	static readonly graphDataURLHighlightParameterNameTGView = "highlight";
-	static readonly graphDataURLSourceParameterNameTGView = "source";
-	static readonly graphDataURLDataSourceParameterNameTGView = "uri";
+	static readonly graphDataURLTypeParameterNameTGView = 'type';
+	static readonly graphDataURLDataParameterNameTGView = 'graphdata';
+	static readonly graphDataURLHighlightParameterNameTGView = 'highlight';
+	static readonly graphDataURLSourceParameterNameTGView = 'source';
+	static readonly graphDataURLDataSourceParameterNameTGView = 'uri';
 }
 
 
@@ -399,7 +399,7 @@ export interface IArrowStyle extends IStyleCommon {
  * A Style for a node
  */
 export interface INodeStyle extends IStyleCommon {
-	shape: "square" | "circle" | "ellipse";
+	shape: 'square' | 'circle' | 'ellipse';
 }
 
 /**