Migrated to WebPack, toasts module integration, fixes to seed string specify

Author: nikitaeverywhere

gulpfile.babel.js

@@ -1,11 +1,8 @@
 import gulp from "gulp";
 import rimraf from "gulp-rimraf";
+import webpack from "webpack";
 import preprocess from "gulp-preprocess";
 import cssMin from "gulp-cssmin";
-import browserify from "browserify";
-import to5ify from "6to5ify";
-import streamify from "gulp-streamify";
-import source from "vinyl-source-stream";
 import scss from "gulp-sass";
 import fs from "fs";
 import mime from "mime-types";
@@ -18,6 +15,28 @@ const
     STATIC_DATA_FILE = `${ SOURCE_DIR }/cls/${ APP_NAME }/StaticData.cls`,
     context = {
         package: pkg
+    },
+    webpackConfig = {
+        context: `${ __dirname }`,
+        entry: {
+            "index": `${ SOURCE_DIR }/static/js/index.js`
+        },
+        output: {
+            path: `${ BUILD_DIR }/static/js`,
+            filename: `[name].js`
+        },
+        module: {
+            loaders: [
+                {
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    loader: `babel-loader`,
+                    query: {
+                        presets: [`es2015`]
+                    }
+                }
+            ]
+        }
     };
 
 function getAllFiles (dir) {
@@ -66,14 +85,12 @@ gulp.task("etc", ["clean"], () => {
         .pipe(gulp.dest(BUILD_DIR + "/static"));
 });
 
-gulp.task("js", ["clean"], () => {
-    return browserify(`${ SOURCE_DIR }/static/js/index.js`, { debug: true })
-        .transform(to5ify)
-        .bundle()
-        .on(`error`, (err) => { console.error(err); })
-        .pipe(source("index.js"))
-        .pipe(streamify(preprocess({ context: context })))
-        .pipe(gulp.dest(`${ BUILD_DIR }/static/js`));
+gulp.task("js", ["clean"], (done) => {
+    webpack(webpackConfig, (err, stats) => {
+        if (err) throw new Error(err);
+        console.log(stats.toString());
+        done(err);
+    });
 });
 
 gulp.task("css", ["clean"], () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {
@@ -14,18 +14,17 @@
   "author": "ZitRo",
   "license": "MIT",
   "devDependencies": {
-    "6to5ify": "^4.1.1",
     "babel": "^6.23.0",
     "babel-core": "^6.23.1",
+    "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.22.0",
-    "browserify": "^14.1.0",
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
     "gulp-preprocess": "^2.0.0",
     "gulp-rimraf": "^0.2.0",
     "gulp-sass": "^3.1.0",
-    "gulp-streamify": "^1.0.2",
     "mime-types": "^2.1.15",
-    "vinyl-source-stream": "^1.1.0"
+    "toaster-js": "^1.0.4",
+    "webpack": "^2.3.2"
   }
 }

src/static/index.html

@@ -194,7 +194,8 @@ <h1>Tabular View Settings</h1>
             <button id="settings.resetSettings">Reset Settings</button>
         </div>
         <div class="footer">
-            iKnow Entity Browser v<!-- @echo package.version -->
+            iKnow Entity Browser v<!-- @echo package.version --> by
+            <a target="_blank" href="https://zitros.tk">Nikita</a>
         </div>
     </div>
     <div id="preservedToolbar">

src/static/js/model/index.js

@@ -3,6 +3,7 @@ import { getData } from "../source";
 import { getOption } from "../settings/values";
 import { toggleLoader } from "../utils";
 import * as history from "./history";
+import { Toast } from "toaster-js";
 
 let SIZE_CRITERIA = "frequency",
     FOLDING_CRITERIA = "frequency",
@@ -119,7 +120,7 @@ export function update () {
     getData(data => {
         toggleLoader(false);
         if (data.error || !data.graph) {
-            alert(data.error || `No graph data returned`);
+            new Toast(data.error || `No graph data returned`, Toast.TYPE_ERROR);
         } else {
             graph = preprocess(data.graph);
             dataUpdated(true);
@@ -304,7 +305,7 @@ export function dropNodes (nodes) {
             if (i === -1) {
                 console.error(
                     `There is a mess occurred with the tree model structure while dropping nodes: `
-                    `node's parent is pointing to a node which doesn't have this node as a child.`
+                    + `node's parent is pointing to a node which doesn't have this node as a child.`
                 );
                 continue;
             }

src/static/js/settings/values.js

@@ -106,12 +106,16 @@ export function setOption (options, value) {
 let preservedToolbarElement = null,
     querySettingElement = null,
     seedSettingElement = null,
-    uiState = null;
+    uiState = null,
+    lastApply = "";
 export function applyFixedClasses () {
-    let queryParent = !uiState.settingsToggled && settings["keepQueryTypeInView"]
-            ? preservedToolbarElement : querySettingElement,
-        seedParent = !uiState.settingsToggled && settings["keepSeedInView"]
-            ? preservedToolbarElement : seedSettingElement;
+    let qt = !uiState.settingsToggled && settings["keepQueryTypeInView"],
+        s = !uiState.settingsToggled && settings["keepSeedInView"],
+        queryParent = qt ? preservedToolbarElement : querySettingElement,
+        seedParent = s ? preservedToolbarElement : seedSettingElement;
+    if (`${ qt }|${ s }` === lastApply)
+        return;
+    lastApply = `${ qt }|${ s }`;
     queryParent.appendChild(document.getElementById("settings.queryType"));
     seedParent.appendChild(document.getElementById("settings.seed"));
 }

src/static/scss/index.scss

@@ -35,4 +35,5 @@ html, body {
 @import "settings";
 @import "interface";
 @import "tooltip";
-@import "preservedToolbar";
+@import "preservedToolbar";
+@import "../../../node_modules/toaster-js/default.scss";

src/static/scss/settings.scss

@@ -18,10 +18,17 @@
     }
 
     .footer {
+
         text-align: right;
         font-size: 8pt;
         color: gray;
         padding: 0 2px;
+
+        a {
+            color: gray;
+            text-decoration: underline;
+        }
+
     }
 
 }