Add option select for rendering verifier

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js

@@ -29,26 +29,96 @@ function getVerifications() {
         console.log('successful dmn verification request:');
         console.log(data);
         verifierResults = data;
+        // sort the list 1. classification, 2. size of entries
+        verifierResults.verifier.sort(function (
+            /** VerifierResult */ firstEl, /** VerifierResult */ secondEl) {
+          if (firstEl.type.classification.name
+              === secondEl.type.classification.name) {
+            if (firstEl.size === secondEl.size) {
+              return firstEl.type.name < secondEl.type.name ? -1 : 1;
+            } else if (firstEl.size < secondEl.size) {
+              return 1;
+            } else {
+              return -1;
+            }
+          } else if (firstEl.type.classification.name
+              < secondEl.type.classification.name) {
+            return -1;
+          } else {
+            return 1;
+          }
+        });
         renderDmnVerifierOptions();
       }
     });
   });
 }
 
-var i = 0;
-
 function renderDmnVerifierOptions() {
   // reset div
-  let root = $('#root-dmn-verifier');
-  root.html('verifier' + i++);
+  let $root = $('#root-dmn-verifier');
+  let $select = $(`
+    <select name="verifier" id="verifier" onchange="renderVerifierResult(this)">
+  `);
+  $select.append($(`<option>Select a verifier</option>`));
+  let currentOpt = '';
+  let $curGroup;
   for (let i = 0; i < verifierResults.verifier.length; i++) {
-    console.log(verifierResults.verifier[i]);
-    let verifier = verifierResults.verifier[i];
-    let verifierTab = $(`
-      <button class="but-verifier">
-        ${verifier.type.name}
-      </button>
+    let bolNewGroup = currentOpt
+        !== verifierResults.verifier[i].type.classification.name;
+    if (bolNewGroup) {
+      if (currentOpt === currentOpt) {
+        $select.append($curGroup);
+      }
+      $curGroup = ($(
+          `<optgroup label="${verifierResults.verifier[i].type.classification.name}">
+      `));
+      currentOpt = verifierResults.verifier[i].type.classification.name;
+    }
+    $curGroup.append(renderSelectEntry(verifierResults.verifier[i]));
+  }
+  $root.html($select);
+  $root.append($(`<div id="verifier-entries">`));
+}
+
+/**
+ *
+ * @param verifier
+ * @type VerifierResult
+ */
+function renderSelectEntry(verifier) {
+  return $(`
+      <option value="${verifier.type.name}">${verifier.type.name} (${verifier.size})</option>
     `);
-    root.append(verifierTab);
+}
+
+/**
+ *
+ * @param verifierSelect
+ * @Type option
+ */
+function renderVerifierResult(verifierSelect) {
+  let verifier = findVerifierByName(verifierSelect.value);
+  let $verifierEntries = $('#verifier-entries');
+  $verifierEntries.empty();
+  if (verifier !== undefined) {
+    $verifierEntries.append($(`
+    <div>${verifier.type.name}: ${verifier.type.description}</div>
+  `));
+  }
+}
+
+/**
+ *
+ * @param verifierName
+ * @type string
+ * @return VerifierResult
+ */
+function findVerifierByName(verifierName) {
+  for (let i = 0; i < verifierResults.verifier.length; i++) {
+    if (verifierResults.verifier[i].type.name === verifierName) {
+      return verifierResults.verifier[i];
+    }
   }
+  return undefined;
 }

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js

@@ -18,7 +18,7 @@ $tabs.delegate('.tab', 'click', function (e) {
  */
 let dmnModeler = new DmnJS({
   container: $container,
-  height: 600,
+  height: 450,
   width: '100%',
   keyboard: {
     bindTo: window