refactor: fix linter warnings, use named exports

js/browser/classuse.ts

@@ -1,6 +1,6 @@
 /** Show the environment of a single node using a special layout.*/
 import * as sparql from "../sparql";
-import NODE from "../node";
+import { NODE } from "../node";
 import { Graph } from "./graph";
 import { View } from "./view";
 import { short } from "../rdf";

js/browser/colorschemeday.ts

@@ -1,5 +1,5 @@
 /** Standard dark mode Cytoscape color scheme.*/
-import EDGE from "../edge";
+import { EDGE } from "../edge";
 
 const colorschemeday = [
 	{

js/browser/colorschemenight.ts

@@ -1,5 +1,5 @@
 /** Standard dark mode Cytoscape color scheme.*/
-import EDGE from "../edge";
+import { EDGE } from "../edge";
 
 const colorschemenight = [
 	{

js/browser/contextmenuEdges.ts

@@ -1,7 +1,7 @@
 /** Creates the circular context menu that can be opened on top of an edge.*/
 import * as rdf from "../rdf";
 import * as util from "./util";
-import EDGE from "../edge";
+import { EDGE } from "../edge";
 import * as language from "../lang/language";
 import { Graph } from "./graph";
 import { ContextMenu, MenuItem } from "./contextmenu";

js/browser/contextmenuNodes.ts

@@ -1,7 +1,7 @@
 /** Creates the circular context menu that can be opened on top of a node.*/
 import { classUse } from "./classuse";
 import * as rdf from "../rdf";
-import NODE from "../node";
+import { NODE } from "../node";
 import * as util from "./util";
 import { Graph, Direction } from "./graph";
 import { ContextMenu, MenuItem } from "./contextmenu";

js/browser/filter.ts

@@ -4,7 +4,7 @@ Filters use the Cytoscape.js "display" attribute, while star operations (see gra
 This ensures that filters and star operations interact properly, for example that resetting the style does not show filtered nodes.
 See http://js.cytoscape.org/#style/visibility.
 */
-import NODE from "../node";
+import { NODE } from "../node";
 import { checkboxKeydownListener, checkboxClickableDiv } from "./util";
 import { View } from "./view";
 import log from "loglevel";

js/browser/graph.ts

@@ -3,12 +3,12 @@
 import { coloredEdgeStyle, style } from "./style";
 import { colorschemenight } from "./colorschemenight";
 import { colorschemeday } from "./colorschemeday";
-import timer from "../timer";
-import NODE from "../node";
+import { timer } from "../timer";
+import { NODE } from "../node";
 import * as sparql from "../sparql";
 import * as rdf from "../rdf";
 import * as language from "../lang/language";
-import progress from "./progress";
+import { progress } from "./progress";
 import { View } from "./view";
 import MicroModal from "micromodal";
 import cytoscape, { Collection, NodeCollection, EdgeCollection, NodeSingular } from "cytoscape";
@@ -380,7 +380,7 @@ export class Graph {
 	}
 	/** Inverts the screen colors in the canvas for day mode. Uses an inverted node js style file to keep node colors.
 	 * @param dayScheme - whether the canvas colors should be inverted.
-	 * @param coloredEdges Give every edge-type a certain color.
+	 * @param coloredEdges - Give every edge-type a certain color.
 	 */
 	applyStyle(dayScheme: boolean, coloredEdges: boolean): void {
 		let baseStyle = style.style as any;

js/browser/load.ts

@@ -1,7 +1,7 @@
 /** Module for loading files both locally from the server and via upload from the client.*/
 import { View } from "./view";
 import { ViewJson, Session } from "./save";
-import config from "../config";
+import { config } from "../config";
 import { fromJSON } from "./state";
 import { VERSION } from "./util";
 import log from "loglevel";

js/browser/log.ts

@@ -1,10 +1,10 @@
-import config from "../config";
+import { config } from "../config";
 import { Notyf } from "notyf";
 import "notyf/notyf.min.css";
 import log from "loglevel";
 
 /** Record log statements and show some to the user via overlays. */
-export default function initLog(): void {
+export function initLog(): void {
 	const notyf = new Notyf({
 		duration: 10000,
 		types: [

js/browser/main.ts

@@ -1,14 +1,14 @@
 /** Entry point.*/
-import loadGraphFromSparql from "../loadGraphFromSparql";
+import { loadGraphFromSparql } from "../loadGraphFromSparql";
 import { Menu } from "./menu";
-import Search from "./search";
+import { Search } from "./search";
 import { loadGraphFromJsonFile } from "./load";
 import { Graph } from "./graph";
 import * as layout from "../layout";
 import * as sparql from "../sparql";
-import progress from "./progress";
-import config from "../config";
-import initLog from "./log";
+import { progress } from "./progress";
+import { config } from "../config";
+import { initLog } from "./log";
 import * as util from "./util";
 import { addBenchmarkOverlay } from "./benchmark";
 import { initHelp } from "../help";

js/browser/menu.ts

@@ -1,11 +1,11 @@
 import * as save from "./save";
 import * as layout from "../layout";
-import NODE from "../node";
-import loadGraphFromSparql from "../loadGraphFromSparql";
+import { NODE } from "../node";
+import { loadGraphFromSparql } from "../loadGraphFromSparql";
 import * as language from "../lang/language";
 import * as util from "./util";
-import config from "../config";
-import progress from "./progress";
+import { config } from "../config";
+import { progress } from "./progress";
 import { showChapterSearch } from "./chaptersearch";
 import { Filter } from "./filter";
 import * as load from "./load";
@@ -37,6 +37,7 @@ export class Menu {
 		// bind this to the class instance instead of the event source
 		this.showCloseMatches = this.showCloseMatches.bind(this);
 		this.addMenu();
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		menu = this;
 	}
 

js/browser/progress.ts

@@ -51,4 +51,4 @@ async function progress(func: Function): Promise<void> {
 	}
 }
 /* eslint-enable */
-export default progress;
+export { progress };

js/browser/save.ts

@@ -1,5 +1,5 @@
 /** Lets the user save files generated from the loaded graph. */
-import config from "../config";
+import { config } from "../config";
 import { toJSON } from "./state";
 import { View } from "./view";
 import { VERSION } from "./util";

js/browser/search.ts

@@ -2,7 +2,7 @@
 import * as sparql from "../sparql";
 import * as util from "./util";
 import * as fuse from "../fuse";
-import progress from "./progress";
+import { progress } from "./progress";
 import { View } from "./view";
 import MicroModal from "micromodal";
 
@@ -12,7 +12,7 @@ import log from "loglevel";
 // const USE_BIF_CONTAINS = false;
 const SEARCH_LIMIT = 100;
 
-export default class Search {
+export class Search {
 	resultNodes = [];
 	/** Add search functionality to the form.
 	 *  @param form - a form with a search field named "query" */

js/browser/style.ts

@@ -4,10 +4,10 @@ Cytoscape style file, excluding color information, which is contained in the col
 @see colorSchemeDay
 @see colorSchemeNight
 */
-import NODE from "../node";
-import EDGE from "../edge";
+import { NODE } from "../node";
+import { EDGE } from "../edge";
 import * as language from "../lang/language";
-import config from "../config";
+import { config } from "../config";
 import { stringToColor } from "./util";
 // see https://docs.google.com/spreadsheets/d/1ZrWs4IPrTU--pcyNkKm-YAUHdGMOKjcMZuVKeB_t6wg/edit?usp=sharing
 

js/browser/util.ts

@@ -76,10 +76,10 @@ export function checkboxClickableDiv(box: HTMLInputElement, text: string, i18n:
 
 /**
  * Converts a color from hsv to a hex rgb value.
- * @param hue The hue in the range of 0 to 1.
- * @param saturation The saturation in the range 0 to 1.
- * @param value The value int the range 0 to 1.
- * @returns  A # leaded rgb hex color.
+ * @param hue - The hue in the range of 0 to 1.
+ * @param saturation - The saturation in the range 0 to 1.
+ * @param value - The value int the range 0 to 1.
+ * @returns an rgb hex color prefixed with '#'.
  */
 export function hsvToHexColor(hue: number, saturation: number, value: number): string {
 	const hDash = Math.floor(hue * 6);
@@ -119,7 +119,7 @@ export function hsvToHexColor(hue: number, saturation: number, value: number): s
 /**
  * Converts a string to a color depending on the hash value of the string.
  * So we get pseudo-randomized colors for different strings.
- * @param str The string to get a color for.
+ * @param str - The string to get a color for.
  * @returns A # leaded rgb hex color depending on the input string.
  */
 export function stringToColor(str: string): string {

js/config.dist.ts

@@ -4,7 +4,7 @@ Copy to js/config.ts after checkout and adapt to your preferences.
 
 import { LogLevelDesc } from "loglevel";
 
-const config = {
+export const config = {
 	defaultSubOntologies: ["meta", "bb", "ob", "ciox", "he", "it4it"],
 	allSubOntologies: ["meta", "bb", "ob", "ciox", "he", "he-unconsolidated", "it4it"],
 	color: new Map([
@@ -44,4 +44,3 @@ const config = {
 		warnOnSessionLoad: true,
 	},
 };
-export default config;

js/edge.ts

@@ -1,5 +1,5 @@
 /** Provides constants for node edge attributes.*/
-const EDGE = {
+export const EDGE = {
 	SOURCE: "source",
 	TARGET: "target",
 	ID: "id",
@@ -8,4 +8,3 @@ const EDGE = {
 	GRAPH: "g",
 	AXIOM: "ax",
 };
-export default EDGE;

js/fuse.ts

@@ -1,9 +1,9 @@
 /** Fuzzy search with fuse.js.*/
 import * as sparql from "./sparql";
-import config from "./config";
+import { config } from "./config";
 import Fuse from "fuse.js";
 import log from "loglevel";
-import timer from "./timer";
+import { timer } from "./timer";
 
 export interface Item {
 	uri: string;

js/lang/de.ts

@@ -1,4 +1,4 @@
-const de = {
+export const de = {
 	idStrings: {
 		// menu *******************************************************************
 		// file **********************************************
@@ -71,4 +71,3 @@ const de = {
 			"Bitte hier nur Feedback zur Ontologie hinterlassen! Bitte prüfen Sie vorher, ob es schon eine Issue mit diesem Thema gibt. Wenn nicht, bearbeiten wir Ihr Feedback so schnell wie möglich.",
 	},
 };
-export default de;

js/lang/en.ts

@@ -1,4 +1,4 @@
-const en = {
+export const en = {
 	idStrings: {
 		// menu *******************************************************************
 		// file **********************************************
@@ -72,4 +72,3 @@ const en = {
 			"Please note that this is only for feedback about the ontology! Please check if there is already an issue for your problem. If not, we will consider your feedback ASAP.",
 	},
 };
-export default en;

js/lang/language.ts

@@ -1,7 +1,7 @@
 /** Language dependend strings.*/
 
-import en from "./en";
-import de from "./de";
+import { en } from "./en";
+import { de } from "./de";
 import log from "loglevel";
 
 const strings = {

js/layout.ts

@@ -3,9 +3,9 @@ Due to JavaScript being a slow mostly single-threaded language with no really fa
 After the first time, the layout is cached and reused, until major changes occur in the graph.
 If a breakthrough occurs in JavaScript graph layouting, update here and possibly remove cache.
 */
-import timer from "./timer";
-import NODE from "./node";
-import config from "./config";
+import { timer } from "./timer";
+import { NODE } from "./node";
+import { config } from "./config";
 import log from "loglevel";
 import cytoscape, { ElementDefinition, LayoutOptions, NodeCollection } from "cytoscape";
 import cytoscapeeuler from "cytoscape-euler";

js/loadGraphFromSparql.ts

@@ -1,7 +1,7 @@
 /**Loads the graph from the SNIK SPARQL endpoint. No layouting. May use caching.*/
 import * as sparql from "./sparql";
-import timer from "./timer";
-import config from "./config";
+import { timer } from "./timer";
+import { config } from "./config";
 import log from "loglevel";
 import cytoscape, { ElementDefinition } from "cytoscape";
 
@@ -256,12 +256,7 @@ async function createNodes(from: string, instances: boolean): Promise<Array<cyto
   @example
   loadGraphFromSparql(cy,new Set(["meta","bb"]))
   */
-export default async function loadGraphFromSparql(
-	cy: cytoscape.Core,
-	graphs: Array<string>,
-	instances: boolean = false,
-	virtual: boolean = false
-): Promise<void> {
+export async function loadGraphFromSparql(cy: cytoscape.Core, graphs: Array<string>, instances: boolean = false, virtual: boolean = false): Promise<void> {
 	log.debug(`Loading graph from endpoint ${config.sparql.endpoint} with graphs ${graphs}.`);
 	const from = graphs.map((g) => `FROM <${g}>`).reduce((a, b) => a + "\n" + b, "");
 	const fromNamed = from.replace(/FROM/g, "FROM NAMED");

js/node.ts

@@ -1,6 +1,6 @@
 /** Provides constants for node data attributes.
 Not to be confused with the Node.js JavaScript runtime.*/
-const NODE = {
+export const NODE = {
 	ID: "id",
 	LABEL: "l",
 	LABEL_GERMAN: "de",
@@ -13,4 +13,3 @@ const NODE = {
 	SUBTOP_ROLE: "R",
 	SUBTOP_FUNCTION: "F",
 };
-export default NODE;

js/property.ts

@@ -1,6 +1,6 @@
 /**Helper functions for RDF properties.*/
 import * as rdf from "./rdf";
-import NODE from "./node";
+import { NODE } from "./node";
 import log from "loglevel";
 
 const propertyData = [

js/sparql.ts

@@ -1,5 +1,5 @@
 /** Functions for querying the SNIK SPARQL endpoint. */
-import config from "./config";
+import { config } from "./config";
 import log from "loglevel";
 
 export const SNIK = {

js/timer.ts

@@ -6,7 +6,7 @@ Call example: myTimer = timer("egg cooking"); cookEgg(); timer.stop("successfull
  * @param   name - identifies the timer
  * @returns the timer object with the stop(message) function. The message is optional.
  */
-export default function timer(name: string) {
+export function timer(name: string) {
 	const start = new Date();
 	return {
 		stop: function (message?: string) {

test/cytoscape.test.ts

@@ -1,5 +1,5 @@
 import * as layout from "../js/layout";
-import loadGraphFromSparql from "../js/loadGraphFromSparql";
+import { loadGraphFromSparql } from "../js/loadGraphFromSparql";
 import { SNIK } from "../js/sparql";
 import cytoscape from "cytoscape";
 import euler from "cytoscape-euler";