caixanegra 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 002efa6f5c1a220426d102e5f055b50eff9fb55e5742d6c2c33d6474f890fd8a
-  data.tar.gz: 03c265dbfa950af4d043bfc56711593b2cb1661f76fc2ca40327fbc7a7f5e309
+  metadata.gz: 182cc119673359db756adcca903e137025ed5283bdae367d7d6c662fc5fdc061
+  data.tar.gz: f075d702d2f361678a7775d286cb7f3b9ec1cb556778b22c4180588efe32d830
 SHA512:
-  metadata.gz: da48c854b8646515af968b7c685cece267a5bed236f1f58d5331de39a2d75bded3f0896b84d09de7cbe70c0fad7f388ef5891684bc04f45995e0b1afdc9d1784
-  data.tar.gz: 28b98d23640368db0f32475c4cd6209fb39648e723e63d70ae2fd814e88c05ca6c9033dccc1accfa3c2c331413569fb54e1b52f115cc26841703019dec4fa0a2
+  metadata.gz: 29c0edd8fab4949cab99f6d513b987cda6c87b2fb29fbeb33e447616ff580c0a9fbd3413a2fe4281828f28a8ac1123942fcecbdbeedf7511c64cb000384bd797
+  data.tar.gz: 23e9e398d71b3900759d8a944f20ddf1920ac1f38bb5961d3e36a34d112e36a488301d3c4709de8c9cfc48a8a9f995869ebfea90ed20acf72915b6c61ac48345

data/app/assets/javascripts/caixanegra/api.js

@@ -66,4 +66,20 @@ window.Caixanegra.API = class {
       request.send(JSON.stringify(initialCarryOver));
     });
   }
+
+  evaluateRegex(expression, sample) {
+    return new Promise((resolve, reject) => {
+      const request = new XMLHttpRequest();
+
+      request.addEventListener("load", (event) => {
+        resolve(JSON.parse(event.target.response));
+      });
+      request.addEventListener("error", () => {
+        reject();
+      });
+
+      request.open("GET", `${this.mountedPath()}/api/designer/inputs/evaluate_regex?expression=${encodeURIComponent(expression)}&sample=${encodeURIComponent(sample)}`);
+      request.send();
+    });
+  }
 }

data/app/assets/javascripts/caixanegra/designer.js

@@ -307,6 +307,11 @@ window.Caixanegra.Designer = {
       document.querySelector("#importFlow").addEventListener("click", this.#importFlow.bind(this));
       document.querySelector("#exportFlow").addEventListener("click", this.#exportFlow.bind(this));
       document.querySelector("#importFlowFile").addEventListener("change", this.#importFlowFileChanged.bind(this));
+      document.querySelector("#regexInput").addEventListener("keyup", this.#updateRegexInput.bind(this));
+      document.querySelector("#regexSample").addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+      document.querySelector("#addRegexVariables").addEventListener("click", this.#addRegexVariablesRow.bind(this))
+      document.querySelector("#regexEditorToggleVars").addEventListener("click", this.#toggleRegexVariables.bind(this));
+      document.querySelector("#dismissRegexEditor").addEventListener("click", this.#dismissRegexEditor.bind(this));
       this.toggleBlocker(true, "loading your flow");
       window.addEventListener("resize", this.#windowResized.bind(drawingSurface));
       drawingSurface.addEventListener("update_start", this.#engineUpdate.bind(this));
@@ -319,7 +324,6 @@ window.Caixanegra.Designer = {
 
       this.gre.disable();
       this.getUnits();
-      this.loadFlow();
       this.gre.enable();
     }
 
@@ -600,7 +604,7 @@ window.Caixanegra.Designer = {
         });
 
         this.#loadedComponents.catalog = true;
-        this.reveal();
+        this.loadFlow();
       });
     }
 
@@ -620,6 +624,10 @@ window.Caixanegra.Designer = {
       this.#units = [];
 
       (flowData?.units || []).forEach((unit) => {
+        const catalogUnit = this.#catalog.find((cUnit) => cUnit.class === unit.class);
+        if (catalogUnit) {
+          unit.color = catalogUnit.color;
+        }
         this.createUnit(unit);
       });
 
@@ -1278,9 +1286,10 @@ window.Caixanegra.Designer = {
           case "regex":
             {
               valueInput = document.createElement("input");
-              if(matrix.type === "regex") { valueInput.classList.add("-monospace")}
+              if(matrix.type === "regex") { valueInput.classList.add("-regex")}
               valueInput.value = unit.mappings[input]?.value || matrix.default || "";
               valueInput.addEventListener("change", this.#unitInputValueChanged.bind(this));
+              valueInput.addEventListener("click", this.#regexEditor.bind(this));
             }
             break;
           case "dataset":
@@ -1380,6 +1389,125 @@ window.Caixanegra.Designer = {
       this.selectedUnit.mappings[input].value = ev.target.value;
     }
 
+    #toggleRegexVariables() {
+      const target = document.querySelector("#blocker .regexEditor > div:last-child");
+      if(target.classList.contains("-visible")) {
+        target.classList.remove("-visible");
+      } else {
+        target.classList.add("-visible");
+      }
+    }
+
+    #updateRegexInput() {
+      this.blocker.editorListener.value = this.blocker.querySelector("#regexInput").value;
+
+      this.#startRegexEvaluation();
+    }
+
+    #startRegexEvaluation() {
+      window.clearTimeout(this.blocker.evalTimeout);
+      this.blocker.querySelector("#regexResults").innerHTML = "wating input end...";
+      this.blocker.evalTimeout = window.setTimeout(this.#evaluateRegex.bind(this), 1500);
+    }
+
+    #evaluateRegex() {
+      this.blocker.querySelector("#regexResults").innerHTML = "evaluating...";
+      let expression = this.blocker.querySelector("#regexInput").value;
+      const sample = this.blocker.querySelector("#regexSample").value;
+      document.querySelectorAll("#regexVariablesList .regex-variable-entry").forEach((pair) => {
+        const placeholder = pair.querySelector("input.placeholder").value;
+        const value = pair.querySelector("input.value").value;
+        expression = expression.replace(new RegExp(placeholder, "g"), value);
+      });
+
+      this.api.evaluateRegex(expression, sample).then((response) => {
+        const tableEntries = Object.keys(response).length - 2 > 0;
+
+        this.blocker.querySelector("#regexResults").innerHTML = "";
+        const expression = document.createElement("div");
+        const full_match = document.createElement("div");
+        expression.innerHTML = `<strong>Expression: </strong><code>${response["_expression"] || "unable to get expression"}</code>`;
+        full_match.innerHTML = `<strong>Full Match: </strong><code>${response["_full"] || "unable to get full match"}</code>`;
+        
+        this.blocker.querySelector("#regexResults").append(expression, full_match);
+
+        if (tableEntries) {
+          const table = document.createElement("table");
+          let tr = document.createElement("tr");
+          let th = document.createElement("th");
+          th.innerHTML = "capture";
+          tr.append(th);
+          th = document.createElement("th");
+          th.innerHTML = "match";
+          tr.append(th);
+          table.append(tr);
+
+          for (const key of Object.keys(response)) {
+            if (key.startsWith("_")) { continue; }
+
+            tr = document.createElement("tr");
+            let td = document.createElement("td");
+            td.innerHTML = key;
+            tr.append(td);
+            td = document.createElement("td");
+            td.innerHTML = response[key];
+            tr.append(td);
+
+            table.append(tr);
+          }
+
+          this.blocker.querySelector("#regexResults").append(table);
+        }
+      }).catch((error) => {
+        this.blocker.querySelector("#regexResults").innerHTML = "unable to evaluate";
+      });
+    }
+
+    #regexEditor(ev) {
+      this.blocker.classList.add("-in-regex-editor");
+      this.blocker.classList.remove("-released");
+      this.blocker.editorListener = ev.target;
+      this.blocker.querySelector("#regexInput").value = ev.target.value;
+
+      this.#startRegexEvaluation();
+    }
+
+    #dismissRegexEditor() {
+      this.blocker.classList.remove("-in-regex-editor");
+      this.blocker.classList.add("-released");
+    }
+
+    #removeRegexVariable() {
+      this.parentElement.remove();
+    }
+
+    #addRegexVariablesRow() {
+      const list = document.querySelector("#regexVariablesList");
+
+      const wrapper = document.createElement("div");
+      const name = document.createElement("input");
+      const value = document.createElement("input");
+      const remove = document.createElement("button");
+
+      name.placeholder = "placeholder";
+      name.classList.add("placeholder");
+      value.classList.add("value");
+      name.autocomplete=false;
+      value.autocomplete=false;
+      value.placeholder = "value";
+      remove.innerHTML = "-";
+
+      remove.addEventListener("click", this.#removeRegexVariable.bind(remove));
+
+      name.addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+      value.addEventListener("keyup", this.#startRegexEvaluation.bind(this));
+
+      wrapper.classList.add("regex-variable-entry");
+
+      wrapper.append(name, value, remove);
+      list.append(wrapper);
+    }
+
     #addUnitExitMapping(ev) {
       const unit = this.selectedUnit;
       const mapping = { use: "", as: "" };

data/app/assets/stylesheets/caixanegra/designer.scss

@@ -538,6 +538,7 @@ $accent-contrast-color: darken($accent-color, 20%);
     }
 
     input {
+      position: relative;
       width: 100%;
       box-sizing: border-box;
       background-color: $accent-highlight-color;
@@ -545,7 +546,7 @@ $accent-contrast-color: darken($accent-color, 20%);
       border: none;
       outline: none;
 
-      &.-monospace {
+      &.-regex {
         font-family: monospace;
       }
     }
@@ -790,7 +791,7 @@ $accent-contrast-color: darken($accent-color, 20%);
   left:0;
   right:0;
   bottom:0;
-  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0, .5);
   transition: opacity 250ms ease-in-out;
   opacity: 1;
 
@@ -817,6 +818,155 @@ $accent-contrast-color: darken($accent-color, 20%);
     }
   }
 
+  .regexEditor {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    min-width: 70%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    & > div {
+      background-color: $accent-color;
+      box-shadow: $accent-shadow;
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      position: relative;
+      font-size: 16px;
+
+      &:first-child {
+        margin-right: 15px;
+        width: 70%;
+        z-index: 10;
+        font-size: 0.8em;
+      }
+  
+      &:last-child {
+        font-size: 0.8em;
+        transform: translateX(-200%);
+        width: 0;
+        box-shadow: 0 0 0 rgba(0,0,0,0);
+        z-index: 9;
+        overflow: hidden;
+        transition: all 250ms ease-in-out;
+
+        &.-visible {
+          transform: translateX(0%);
+          width: 30%;
+        }
+      }
+    }
+
+    label {
+      margin-bottom: 4px;
+    }
+
+    input {
+      margin-bottom: 6px;
+      box-sizing: border-box;
+      background-color: #9c9c9c;
+      padding: 6px 4px;
+      border: none;
+      outline: none;
+    }
+
+    #regexInput {
+      font-family: monospace;
+      font-size: 1.1em;
+    }
+
+    #regexSample {
+      font-size: 0.8em;
+    }
+
+    #regexResults {
+      padding: 8px;
+      background-color:rgb(200, 200, 200);
+      color: black;
+      max-height: 50vh;
+      overflow: auto;
+      display: block;
+      margin-bottom: 30px;
+      font-size: 0.7em;
+
+      table {
+        margin-top: 15px;
+        width: 100%;
+        border-collapse: collapse;
+
+        th, td {
+          text-align: left;
+          border: 1px solid rgba(0,0,0,.3);
+          padding: 4px;
+        }
+
+        tr:nth-child(even) {
+          background-color: rgba(0,0,0,.15);
+        }
+      }
+    }
+
+    #regexVariables {
+      #regexVariablesList {
+        margin-bottom: 15px;
+      }
+
+      .regex-variable-entry {
+        display: flex;
+        flex-direction: row;
+        margin: 2px 0;
+        align-items: center;
+
+        input {
+          width: 100%;
+          margin-bottom: 0;
+
+          &:first-child {
+            margin-right: 5px;
+          }
+        }
+
+        button {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    button {
+      background-color: $accent-highlight-color;
+      border: 1px solid $accent-color;
+      color: black;
+      padding: 3px 6px;
+      cursor: pointer;
+      transition: all 250ms ease-in-out;
+
+      &:hover {
+        background-color: $accent-contrast-color;
+        color: $accent-highlight-color;
+      }
+    }
+
+    #regexEditorToggleVars {
+      float: right;
+    }
+  }
+
+  &.-in-regex-editor {
+    .information {
+      display: none;
+    }
+
+    .regexEditor {
+      display: flex;
+    }
+  }
+
   &.-released {
     pointer-events: none;
     opacity: 0;

data/app/controllers/caixanegra/api/designer/inputs_controller.rb

@@ -0,0 +1,32 @@
+module Caixanegra
+  module API
+    module Designer
+      class InputsController < ::Caixanegra::APIController
+        def evaluate_regex
+          full_match = sample.match(Regexp.new(expression, Regexp::IGNORECASE))
+          direct = { "_full": full_match.to_s, "_expression": expression }
+          captures = {}
+
+          (full_match&.captures || []).each_with_index do |capture, index|
+            captures["c#{index}"] = capture
+          end
+          named_captures = full_match&.named_captures || {}
+
+          render json: direct.merge(captures).merge(named_captures).symbolize_keys
+        rescue RegexpError
+          head 422
+        end
+
+        private
+
+        def expression
+          @expression ||= params[:expression]
+        end
+
+        def sample
+          @sample ||= params[:sample]
+        end
+      end
+    end
+  end
+end

data/app/views/caixanegra/designer/index.html.erb

@@ -108,6 +108,27 @@
     <div>caixa<span>negra</span></div>
     <div class="message">loading your flow</div>
   </div>
+  <div class="regexEditor">
+    <div>
+      <label for="regexInput">Regular Expression</label>
+      <input id="regexInput" type="text" />
+      <label for="regexSample" placeholder="type sample text here">Sample</label>
+      <input id="regexSample" type="text" /> 
+      <label for="regexResults">Result</label>  
+      <div id="regexResults"></div>
+      <div>
+        <button id="dismissRegexEditor">dismiss</button>
+        <button id="regexEditorToggleVars">vars</button>
+      </div>
+    </div>
+    <div>
+      <label for="regexVariables">Variables</label>
+      <div id="regexVariables">
+        <div id="regexVariablesList"></div>
+        <button id="addRegexVariables">add</button>
+      </div>
+    </div>
+  </div>
 </div>
 <div id="action_messenger">
   <div class="icon icon-error">

data/config/routes.rb

@@ -9,6 +9,9 @@ Caixanegra::Engine.routes.draw do
           patch :debug_run
         end
       end
+      namespace :inputs do
+        get :evaluate_regex
+      end
     end
   end
 end

data/lib/caixanegra/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Caixanegra
-  VERSION = '0.4.0'
+  VERSION = '0.4.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: caixanegra
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1
 platform: ruby
 authors:
 - sergiorribeiro
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-04 00:00:00.000000000 Z
+date: 2023-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -57,6 +57,7 @@ files:
 - app/assets/stylesheets/caixanegra/application.css
 - app/assets/stylesheets/caixanegra/designer.scss
 - app/controllers/caixanegra/api/designer/flows_controller.rb
+- app/controllers/caixanegra/api/designer/inputs_controller.rb
 - app/controllers/caixanegra/api/designer/units_controller.rb
 - app/controllers/caixanegra/api_controller.rb
 - app/controllers/caixanegra/application_controller.rb