Merge pull request #15 from gnpis/develop

Release 2.2.0

.gitattributes

@@ -0,0 +1,2 @@
+dist filter=lfs diff=lfs merge=lfs -text
+dist/* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -55,6 +55,7 @@ The latest release of this widget is accessible on the [:link: Ephesis ontology
 
 Development tools:
 * **browserify**: used to bundle the widget source with its dependencies
+* **babel**: used to compile from latest JavaScript syntax to compatible older JavaScript syntax
 * **uglifyjs**: used to minify the JavasSript after bundling
 * **less**: a CSS preprocessor used to bundle the widget styles with jstree's styles
 * **clean-css**: used to minify the CSS after bundling

build.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
+set -e
 
+SOURCE_FOLDER="./src"
 BUILD_FOLDER="./dist"
 MODULES="./node_modules"
 
@@ -8,40 +10,45 @@ MODULES="./node_modules"
   exit 1;
 }
 
-[ -d "${BUILD_FOLDER}" ] && rm -rf "${BUILD_FOLDER}"
-mkdir "${BUILD_FOLDER}"
+build() {
+  [ -d "${BUILD_FOLDER}" ] && rm -rf "${BUILD_FOLDER}"/*
+  mkdir -p "${BUILD_FOLDER}"
 
-JS_FILES="./src/js/main.js"
-LESS_FILES="$(ls ./src/less/*.less)"
+  JS_FILES=${SOURCE_FOLDER}"/js/main.js"
+  LESS_FILES="$(ls ${SOURCE_FOLDER}/less/*.less)"
 
-# Run browserify => Bundle widget and its dependencies into one file
-echo "Bundling:"
-DEST_FILE="${BUILD_FOLDER}/cropOntologyWidget"
+  # Run browserify => Bundle widget and its dependencies into one file
+  echo "Bundling:"
+  DEST_FILE="${BUILD_FOLDER}/cropOntologyWidget"
 
-echo -ne "[JS]\t"
-echo " ${JS_FILES} => ${DEST_FILE}.js "
-"${MODULES}/browserify/bin/cmd.js" "${JS_FILES}" --debug -o "${DEST_FILE}.js"
-# the '--debug' option adds source mapping for easier debugging in web inspector
+  echo -ne "[JS]\t"
+  echo " ${JS_FILES} => ${DEST_FILE}.js "
+  "${MODULES}/browserify/bin/cmd.js" "${JS_FILES}" -t babelify --debug -o "${DEST_FILE}.js" &
+  # the '--debug' option adds source mapping for easier debugging in web inspector
 
-echo -ne "[CSS]\t"
-echo " ${LESS_FILES} => ${DEST_FILE}.css "
-#"${MODULES}/npm-css/bin/npm-css" "${LESS_FILES}" -o "${DEST_FILE}.css"
-"${MODULES}/less/bin/lessc" "${LESS_FILES}" "${DEST_FILE}.css"
+  echo -ne "[CSS]\t"
+  echo " ${LESS_FILES} => ${DEST_FILE}.css "
+  #"${MODULES}/npm-css/bin/npm-css" "${LESS_FILES}" -o "${DEST_FILE}.css"
+  "${MODULES}/less/bin/lessc" "${LESS_FILES}" "${DEST_FILE}.css" &
+  wait
 
-echo ""
+  echo ""
 
-# Run uglify => Reduce file size
-echo "Minifying:"
-DEST_MIN_FILE="${BUILD_FOLDER}/cropOntologyWidget.min"
+  # Run uglify => Reduce file size
+  echo "Minifying:"
+  DEST_MIN_FILE="${BUILD_FOLDER}/cropOntologyWidget.min"
 
-echo -ne "[JS]\t"
-echo " ${DEST_FILE}.js => ${DEST_MIN_FILE}.js "
-"${MODULES}/.bin/uglifyjs" "${DEST_FILE}.js" -o "${DEST_MIN_FILE}.js"
+  echo -ne "[JS]\t"
+  echo " ${DEST_FILE}.js => ${DEST_MIN_FILE}.js "
+  "${MODULES}/.bin/uglifyjs" "${DEST_FILE}.js" -o "${DEST_MIN_FILE}.js" &
 
-echo -ne "[CSS]\t"
-echo " ${DEST_FILE}.css => ${DEST_MIN_FILE}.css "
-"${MODULES}/.bin/cleancss" "${DEST_FILE}.css" -o "${DEST_MIN_FILE}.css"
+  echo -ne "[CSS]\t"
+  echo " ${DEST_FILE}.css => ${DEST_MIN_FILE}.css "
+  "${MODULES}/.bin/cleancss" "${DEST_FILE}.css" -o "${DEST_MIN_FILE}.css" &
+  wait
 
-echo ""
+  echo ""
 
-cp -R ./demo/* "${BUILD_FOLDER}"
+  cp -R ./demo/* "${BUILD_FOLDER}"
+}
+build

demo/index.html

@@ -19,27 +19,33 @@
     <script type="text/javascript">
       var widget = new CropOntologyWidget("#trait-ontology-widget", {
         // Breeding API server
-        "breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/",
+        //"breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/",
+        //"breedingAPIEndpoint": "http://urgi.versailles.inra.fr/gnpis-core-srv/brapi/v1/",
+        "breedingAPIEndpoint": "http://urgi148:8080/gnpis-core-srv/brapi/v1/",
         // options
         "showCheckBoxes": true, "useSearchField": true
       });
+      widget.setHeight(700)
     </script>
 
     <!-- Example JS interactions with the widget -->
     <button onclick="getIds()">Get selected node IDs</button>
+    <button onclick="showSelected()">Show only selected</button>
     <button onclick="widget.showAll()">Show all</button>
     <button onclick="widget.hideAll()">Hide all</button>
     <button onclick="widget.reset()">Reset</button>
     <button onclick="widget.resetSelection()">Reset selection</button>
     <button onclick="emptyOutput()">Clear output below</button>
+    <button onclick="widget.setHeight(600)">Set height 600px</button>
+    <button onclick="widget.setHeight(1000)">Set height 1000px</button>
 
     <div id="output"></div>
     <script type="text/javascript">
       var output = document.getElementById("output");
       function emptyOutput() {
         output.querySelectorAll("div").forEach(function(element) {
-	  element.remove();
-	});
+          element.remove();
+        });
       }
       function logOutput(action, message) {
         var div = document.createElement('div');
@@ -52,16 +58,21 @@
         output.prepend(div);
       }
 
+      function showSelected() {
+        widget.showOnly(widget.getSelectedLeafIds())
+      }
+
       function getIds() {
         var ids = widget.getSelectedNodeIds();
         if (!ids.length) ids = "No node selected";
-	logOutput("Get selected leaf node ids:", ids.join(", "));
+        else ids = ids.join(", ")
+        logOutput("Get selected leaf node ids:", ids);
       }
 
       // Display selection change
       widget.addSelectionChangeHandler(function(el, node) {
         logOutput("Node selection:", node.id);
-	getIds();
+        getIds();
       });
     </script>
     <style>