facet options editor modal in GUI

explorerjs.html

@@ -60,6 +60,7 @@
 
   <link type="text/css" href="twitterAPI2/twitterlibs/tweet.light.ltr.css" rel="stylesheet"/>
   <link type="text/css" href="twitterAPI2/twitterlibs/custom.css" rel="stylesheet"/>
+  <link type="text/css" href="libs/css2/user_form.css" rel="stylesheet"/>
 
   <!-- JS -->
   <!-- <script src="script.js"></script> -->
@@ -331,7 +332,7 @@
               </li>
 
               <li>
-                  <a href="#savemodal" id="saveAs" class="zoombarbuttons" data-toggle="modal">
+                  <a href="#savemodal" id="saveAs" class="zoombarbuttons" data-toggle="modal" data-target="#savemodal">
                     <img style="width:28px" title="Save As..." src="libs/img2/save.png"></img>
                   </a>
               </li>
@@ -366,7 +367,14 @@
               <li>
                   <a href="#" id="noverlapButton" class="zoombarbuttons"
                      title="Disperse Overlapping Nodes">
-                    <img src="libs/img2/disperse.png" style="width:36px">
+                    <img src="libs/img2/disperse.png" style="width:32px">
+                  </a>
+              </li>
+
+
+              <li>
+                  <a href="#facet-options" id="facets" class="zoombarbuttons" data-toggle="modal" data-target="#facet-options">
+                    <img style="width:32px" title="Facets coloring options" src="libs/img2/facet_options.png"></img>
                   </a>
               </li>
 
@@ -578,6 +586,91 @@
     </div>
 
 
+    <div id="facet-options" class="modal fade">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h4 class="modal-title">Facet options</h4>
+          </div>
+          <div class="modal-body">
+            <div class="uform-white">
+              <form id="facet_options_form" onsubmit="console.info('submitted')">
+                 <h3 class="formcat">Edit attribute:</h3><br/>
+
+                   <div class="question">
+                     <div class="input-group">
+                       <label for="choose-attr" class="smlabel input-group-addon">Attribute</label>
+                       <select id="choose-attr" name="choose-attr"
+                               class="custom-select form-control">
+                               <option selected value="0"></option>
+                               <!-- filled by fillAttrsInForm() -->
+                       </select>
+                     </div>
+                   </div>
+
+                   <div class="question">
+                     <div class="input-group">
+                       <label for="attr-col" class="smlabel input-group-addon">Coloring function</label>
+                       <select id="attr-col" name="attr-col"
+                               class="custom-select form-control">
+                           <option selected value="0"></option>
+                           <option value="cluster">cluster</option>
+                           <option value="gradient">gradient</option>
+                           <option value="heatmap">heatmap</option>
+                       </select>
+                     </div>
+                   </div>
+
+                   <div class="question">
+                     <div class="input-group">
+                       <label for="attr-binmode" class="smlabel input-group-addon">Binning Mode</label>
+                       <select id="attr-binmode" name="attr-binmode"
+                               class="custom-select form-control" onchange="binmodeOpenNBins()">
+                           <option selected value="0"></option>
+                           <option value="off">No binning</option>
+                           <option value="samerange">Same range between ticks</option>
+                           <option value="samepop">Same population in each bin</option>
+                       </select>
+                     </div>
+                   </div>
+
+                   <div class="question conditional-q" id="attr-nbins-div">
+                     <div class="input-group">
+                       <label for="attr-nbins" class="smlabel input-group-addon">Number of bins</label>
+                       <input id="attr-nbins" name="attr-nbins" maxlength="2"
+                              type="text" class="form-control autocomp" placeholder="number of bins"
+                              onchange="let castint = parseInt(this.value) ; if (castint != this.value || castint < 2) {this.value = 2} else if(castint > 24) {this.value = 24}"
+                              >
+                      </div>
+                      <p class="legend">Please input an integer value between 2 and 24.</p>
+                   </div>
+
+                   <div class="question input-group">
+                     <label for="attr-translation" class="smlabel input-group-addon"> Title </label>
+                     <input id="attr-translation" name="attr-translation" maxlength="70"
+                            type="text" class="form-control autocomp" placeholder="a text for the color menu"
+                            >
+                   </div>
+
+              </form>
+
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-default" data-dismiss="modal">
+              Cancel
+            </button>
+            <button class="btn btn-primary"
+              type=button onclick="newAttrConf()" data-dismiss="modal">
+              Ok
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
     <div id="geomapmodal" class="modal fade">
 
         <!-- <div class="modal-content"> -->
@@ -641,8 +734,8 @@
   <script src="settings_explorerjs.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/enviroment.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/sigma.parseCustom.js" type="text/javascript" language="javascript"></script>
-  <script src="extras_explorerjs.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/sigmaUtils.js" type="text/javascript" language="javascript"></script>
+  <script src="extras_explorerjs.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/methods.js" type="text/javascript" language="javascript"></script>
   <!-- <script src="tinawebJS/asyncFA2.js" type="text/javascript" language="javascript"></script> -->
   <script src="tinawebJS/Tinaweb.js" type="text/javascript" language="javascript"></script>

extras_explorerjs.js

@@ -17,12 +17,6 @@ function changeGraphAppearanceByFacets( manualflag ) {
     if ( !isUndef(manualflag) && !TW.conf.colorByAtt ) TW.conf.colorByAtt = manualflag;
     if(!TW.conf.colorByAtt) return;
 
-    // for GUI html: if present, rename raw attribute key by a proper label
-    var AttsTranslations = {
-
-    }
-
-
     // settings to function name
     var colorFuns = {
       'heatmap': "heatmapColoring",
@@ -803,3 +797,96 @@ function activateModules() {
         }
     }
 }
+
+
+// Settings edition
+// =================
+function fillAttrsInForm() {
+  var actypes = getActivetypes()
+  for (let tid in actypes) {
+    let ty = actypes[tid]
+
+    let elChooser = document.getElementById('choose-attr')
+
+    // each facet family or clustering type was already prepared
+    for (let att in TW.Clusters[ty]) {
+      let opt = document.createElement('option')
+      opt.value = att
+      opt.innerText = att
+      elChooser.appendChild(opt)
+
+      console.log(opt)
+    }
+  }
+}
+
+
+function binmodeOpenNBins() {
+  let mainq = document.getElementById('attr-binmode')
+  let subq  = document.getElementById('attr-nbins-div')
+  if (mainq.value == "samepop" || mainq.value == "samerange") {
+    subq.style.display = 'block'
+  }
+  else {
+    subq.style.display = 'none'
+  }
+}
+
+function showAttrConf() {
+  let attrTitle = this.value
+  let settings = TW.conf.facetOptions[attrTitle]
+  if (settings) {
+    document.getElementById('attr-col').value = settings.col
+    document.getElementById('attr-binmode').value = settings.binmode
+    document.getElementById('attr-translation').value = settings.menutransl
+    if(settings.n) {
+      document.getElementById('attr-nbins-div').style.display = 'block'
+      document.getElementById('attr-nbins').value = settings.n
+    }
+  }
+}
+
+
+// writes new attribute configuration from user form AND recreates facet bins
+// processing time: ~~ 1.5 ms for 100 nodes
+function newAttrConf() {
+  let attrTitle = document.getElementById('choose-attr').value
+
+  // read values from GUI
+  TW.conf.facetOptions[attrTitle] = {
+     'col': document.getElementById('attr-col').value,
+     'binmode': document.getElementById('attr-binmode').value,
+     'n': document.getElementById('attr-nbins').value,
+     'menutransl': document.getElementById('attr-translation').value
+  }
+
+  // find the corresponding types
+  let relevantTypes = {}
+  for (let ty in TW.Clusters) {
+    if (TW.Clusters[ty][attrTitle]) {
+      relevantTypes[ty] = true
+    }
+  }
+
+  // reparse values (avoids keeping them in RAM since parseCustom)
+  tmpVals = {}
+  for (let nid in TW.Nodes) {
+    let n = TW.Nodes[nid]
+    if (relevantTypes[n.type]) {
+      tmpVals = updateValueFacets(tmpVals, n, attrTitle)
+    }
+  }
+
+  let newClustering = facetsBinning (tmpVals)
+
+  // write result to global TW.Clusters
+  for (let ty in newClustering) {
+    TW.Clusters[ty][attrTitle] = newClustering[ty][attrTitle]
+  }
+
+  // update the GUI menu
+  changeGraphAppearanceByFacets(true)
+
+  // console.log("reparse raw result", tmpVals)
+  // console.log("reparse binned result", newClustering)
+}

libs/css2/selection-panels.css

@@ -332,7 +332,7 @@
 
 
 /* small width or small height */
-@media(max-width:768px), (max-height:500px) {
+@media(max-width:768px), (max-height:550px) {
 
   /* zoombar reduction */
   .zoombarbuttons img {

libs/css2/user_form.css

+/* ================= MAIN COMEX SERVICES STYLESHEET ================= */
+
+
+@media all {
+/* form content for reg, profile, login, etc.... */
+div.uform {
+  /*padding: 15px 30px 53px 30px;*/
+  padding: 0px 5px 3px 5px;
+  margin: 7px auto 3px auto;
+  background-color: #ddd;
+}
+
+/* form content for reg, profile, login, etc.... */
+div.uform-white {
+  padding: 0px 5px 3px 5px;
+  margin: 7px auto 3px auto;
+  background-color: #fff;
+  border-radius: 5px;
+}
+
+
+
+div.uform-white .ccsection-heading,
+div.uform-white .ccsection-uform-body {
+    background-color: #fff;
+}
+
+/*div.uform::before {
+    content: "F O R M";
+    font-family: monospace;
+    font-size: 1em;
+    float: right;
+    color: #000;
+}*/
+
+
+button.clean-btn
+
+/* not used at present but could be useful for autompleted inputs */
+.autocomp {
+}
+
+/* a "subpage" container UNUSED */
+.subpage {
+  width: 100%;
+  max-width: 65em;
+  display: none ;  /*switching page <=> displaying it */
+}
+
+
+.cartouche {
+  border: .2em dotted #988 ;
+  border-radius: 2em;
+  padding: 1em 3em;
+  text-align: center;
+  /*max-width: 40em;*/
+}
+
+/* ex: profile overview in readonly */
+.readonly.panel-body {
+    background-color: #ddd;
+}
+
+/* a fixed div for validation messages */
+.menu-left-fixed {
+    position: fixed;
+    top: 4em;
+    left: 0;
+    display:block;
+    z-index: 4;
+    opacity: .8;
+}
+
+
+/* ==> a question + input block <== */
+.question {
+  padding: 0 1em;
+  margin-bottom: 2em;
+  max-width: 57em !important;           /* FORMWIDTH */
+}
+
+/* we center the questions
+    when there is a visible wrapping */
+div.uform .question,
+.ccsection-wrap .question {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+.conditional-q {
+  display: none;
+}
+
+/* small label inside addon group*/
+.smlabel {
+  min-width: 7.5em;
+}
+
+/* the question's additional legend or caption */
+.legend {
+  font-family: Cambria, serif;
+  color: #554 ;
+  font-style: italic;
+  text-align:right;
+  padding: .5em 0 .5em .5em ;
+  margin: 0;
+}
+
+/* floats on the right of the question if set after it */
+.legend-float {
+  float:right;
+  text-align:center;
+  font-size: 70%;
+  padding-right: 2.1em;
+}
+
+.legend-alone {
+  font-family: Cambria, serif;
+  color: #554 ;
+  font-style: italic;
+  text-align: center;
+  font-size: 120%;
+  padding-bottom: 1em;
+  font-weight: 500;
+}
+
+/* for code blocks or urls */
+.code {
+  font-family: "Fira Mono", "Droid Sans Mono", monospace;
+  font-weight: 500;
+  font-size: 75% ;
+  background-color: #ACA;
+  padding: .2em;
+  border-radius: .2em;
+}
+
+/* form categories: like form sections etc. */
+h3.formcat {
+  font-size: 16px;
+  padding-top: 1em;
+  font-weight: bold;
+  color: #910;
+}
+
+h3.formcatfirst {
+  font-size: 16px;
+  margin-top: .2em;
+  font-weight: bold;
+  color: #910;
+}
+
+.debug-info {
+  font-family: monospace ;
+  max-width: 55em;
+  font-size: 80%;
+  line-height: 90% ;
+  background-color: #555;
+  color: #fff;
+
+  /* to stay invisible when no debug message */
+  padding: 0 ;
+  min-height: 0px;
+}
+
+
+/* md and smaller */
+@media(max-width:991px){
+    div.uform, div.uform-nobg {
+        padding: 0;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
+
+    .menu-left-fixed {
+        top: 11em;
+    }
+
+    .question {
+      padding: 0;
+    }
+
+    #main_message {
+      font-size: 110%;
+      line-height: 1em;
+      padding: .1em .3em ;
+      margin: 0;
+    }
+}

libs/img2/disperse.svg → libs/img2/buttons_work.svg

@@ -16,7 +16,7 @@
    id="svg2"
    version="1.1"
    inkscape:version="0.91 r13725"
-   sodipodi:docname="button_bg_disperse.svg">
+   sodipodi:docname="disperse.svg">
   <defs
      id="defs4">
     <marker
@@ -206,6 +206,66 @@
          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
          transform="matrix(-0.3,0,0,-0.3,0.69,0)" />
     </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker10552-3"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="TriangleOutM">
+      <path
+         inkscape:connector-curvature="0"
+         transform="scale(0.4,0.4)"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         id="path10554-6" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker10542-3"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="TriangleOutM">
+      <path
+         inkscape:connector-curvature="0"
+         transform="scale(0.4,0.4)"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         id="path10544-5" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker10460-6"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="TriangleOutM">
+      <path
+         inkscape:connector-curvature="0"
+         transform="scale(0.4,0.4)"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         id="path10462-2" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker10384-9"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="TriangleOutM">
+      <path
+         inkscape:connector-curvature="0"
+         transform="scale(0.4,0.4)"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         id="path10386-1" />
+    </marker>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -214,9 +274,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="233.39899"
-     inkscape:cy="585.91057"
+     inkscape:zoom="1.4"
+     inkscape:cx="352.17199"
+     inkscape:cy="419.29157"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -224,7 +284,9 @@
      inkscape:window-height="833"
      inkscape:window-x="0"
      inkscape:window-y="27"
-     inkscape:window-maximized="1" />
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true" />
   <metadata
      id="metadata7">
     <rdf:RDF>
@@ -233,7 +295,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -245,30 +307,7 @@
        y="460.98569"
        x="234.47551"
        id="image4166"
-       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
-WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QUQCykzfvardAAABHZJREFUWMPtmL2OXEUQhb++u6yE
-BaElAkxKtBGESE6Rn4HAAU9gR/gJnBCQIBEQIREhIREi5MwZARGSI0SAIwsJyWBrblcdgq7+uT+z
-s3ZEwER3Zufe/vrUqdM1C/+xV9r78Nmjzy6QXwLIMyCQI3fAQfFeDnKQlWs32j3j57J+vwx5fvHu
-Jz/9ehLo2aMHl6AvkX90PRjr1xXGDsTFCiaDNMK+kPxb5Pdv3X381wbo2aMHt0E/Ir94PRhHlq8L
-M6r7RJY/fO/Tn58DTF0ffd5h5l0YeY6HDgstYIR83oexQ7yf+yZkyPL7oHuVYgrP3ET+QYdhCePW
-d9dAy0JLmFDI5wVwKWOBZaOokOePK9B5LP7OCFO+6PHwQd5TMFUZQDajuhEEnpE8PLK5760F0HU6
-qUGFCqNiC2+0TrKAE3iBA5HeuIHnl+W+oQGWCh2D8fBB/L3sUgGlK2ByAES5LYOK/yy/ZLp4G/eh
-AdxZl+w4jEbjll2uS7iAsWrqDOkMuSMZDGrYiz8hTWF8bRU6WqZqwj3jxnfBtzDV1DLAynsUm6Sp
-S1t3rdAaxnN5WDPw2isez/W2Q4Vpie9obXqLRjg7h3wAElImpdQbqJdsGXjlwX7cuFLsYzS4lTJR
-/p5ShYjykyAlyC+BhHtmmiYkI/eKjV1GC7OFMstULeVJIDfS0G3Nc67WZaplp5dJctxhmtRgvG5w
-NPUiY9JZlHENowZT8skW6ilUTdVXPpdNejGvEF6fIWGecAnrFatHxyrwlEnnb5bSyDbKMGTMUiEr
-/rPqKSvGVVHHLeMCNzVlzMHFXtsP6ZszcGimlfpZltBGmR4VObruEM8ifOWYqcC4SKnAuFL7bOuh
-8TRGyOah6wpEam2/gony4pFbqo1S2n3OZcEKk02QOsyOQtp2FOpxwHLY6r5S6zDVEK0WSCBPmIsp
-gV0BM3rofH/C2x4FXAXjJZlTTXMJxaQ1TcKtSFBhsnVVzHdK9uowFh1l/YRvZ1JRh2j3HKJdBbNT
-sqOz7z6M1ZYP0w73IIdpQuplmo0NTPWV1RNkUbLrj5txXtUTP4KQAQbHZseZcM9EtRqMFGrtwCwU
-2oybq+kxxs2AmXtQthO/wNSdZxeuadHyx2DynofauHmkrQtMPTy7x9r9UjPnbCUmXELiJIy012Un
-YOoYuoCpMSHijBIWi7uEDyl8FczW1FfCzP33VkvtwS+mvvsE2RPu3hY6ljcjzH5Sn4KBOJtsxy+Q
-zm9gLsz/KWJGl6ldx8Si7qcrkno/8Pr5xDBubv0CkA9/l0W8JLU5uzD9updx6yH54RRMN3Gop74z
-99Evrw8zdtkfyEzuZ2uYWjbaoNVLZQaijxApgXlqsNeFcfHbYh66dffxc7l/cwpGMuYsUkpkL1Op
-ecztkb610/ZgsmkDU/JKX68GNEB2X55/aQa3OX5XdZg6VM3DYXkqY6p647ExwgBf3Hn49Ifdf8f8
-/tXlBeieLN8Gv9l+j2k74dXuOBV4607qcaAnwHd3Hj79nv9fr/D6F7FERJvBF7CeAAAAAElFTkSu
-QmCC
-"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QUQCykzfvardAAABHZJREFUWMPtmL2OXEUQhb++u6yE BaElAkxKtBGESE6Rn4HAAU9gR/gJnBCQIBEQIREhIREi5MwZARGSI0SAIwsJyWBrblcdgq7+uT+z s3ZEwER3Zufe/vrUqdM1C/+xV9r78Nmjzy6QXwLIMyCQI3fAQfFeDnKQlWs32j3j57J+vwx5fvHu Jz/9ehLo2aMHl6AvkX90PRjr1xXGDsTFCiaDNMK+kPxb5Pdv3X381wbo2aMHt0E/Ir94PRhHlq8L M6r7RJY/fO/Tn58DTF0ffd5h5l0YeY6HDgstYIR83oexQ7yf+yZkyPL7oHuVYgrP3ET+QYdhCePW d9dAy0JLmFDI5wVwKWOBZaOokOePK9B5LP7OCFO+6PHwQd5TMFUZQDajuhEEnpE8PLK5760F0HU6 qUGFCqNiC2+0TrKAE3iBA5HeuIHnl+W+oQGWCh2D8fBB/L3sUgGlK2ByAES5LYOK/yy/ZLp4G/eh AdxZl+w4jEbjll2uS7iAsWrqDOkMuSMZDGrYiz8hTWF8bRU6WqZqwj3jxnfBtzDV1DLAynsUm6Sp S1t3rdAaxnN5WDPw2isez/W2Q4Vpie9obXqLRjg7h3wAElImpdQbqJdsGXjlwX7cuFLsYzS4lTJR /p5ShYjykyAlyC+BhHtmmiYkI/eKjV1GC7OFMstULeVJIDfS0G3Nc67WZaplp5dJctxhmtRgvG5w NPUiY9JZlHENowZT8skW6ilUTdVXPpdNejGvEF6fIWGecAnrFatHxyrwlEnnb5bSyDbKMGTMUiEr /rPqKSvGVVHHLeMCNzVlzMHFXtsP6ZszcGimlfpZltBGmR4VObruEM8ifOWYqcC4SKnAuFL7bOuh 8TRGyOah6wpEam2/gony4pFbqo1S2n3OZcEKk02QOsyOQtp2FOpxwHLY6r5S6zDVEK0WSCBPmIsp gV0BM3rofH/C2x4FXAXjJZlTTXMJxaQ1TcKtSFBhsnVVzHdK9uowFh1l/YRvZ1JRh2j3HKJdBbNT sqOz7z6M1ZYP0w73IIdpQuplmo0NTPWV1RNkUbLrj5txXtUTP4KQAQbHZseZcM9EtRqMFGrtwCwU 2oybq+kxxs2AmXtQthO/wNSdZxeuadHyx2DynofauHmkrQtMPTy7x9r9UjPnbCUmXELiJIy012Un YOoYuoCpMSHijBIWi7uEDyl8FczW1FfCzP33VkvtwS+mvvsE2RPu3hY6ljcjzH5Sn4KBOJtsxy+Q zm9gLsz/KWJGl6ldx8Si7qcrkno/8Pr5xDBubv0CkA9/l0W8JLU5uzD9updx6yH54RRMN3Gop74z 99Evrw8zdtkfyEzuZ2uYWjbaoNVLZQaijxApgXlqsNeFcfHbYh66dffxc7l/cwpGMuYsUkpkL1Op ecztkb610/ZgsmkDU/JKX68GNEB2X55/aQa3OX5XdZg6VM3DYXkqY6p647ExwgBf3Hn49Ifdf8f8 /tXlBeieLN8Gv9l+j2k74dXuOBV4607qcaAnwHd3Hj79nv9fr/D6F7FERJvBF7CeAAAAAElFTkSu QmCC "
        preserveAspectRatio="none"
        height="45"
        width="45"
@@ -336,5 +375,59 @@ QmCC
        id="path4371-2"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
+    <image
+       y="506.19733"
+       x="312.82123"
+       id="image4166-2"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QUQCykzfvardAAABHZJREFUWMPtmL2OXEUQhb++u6yE BaElAkxKtBGESE6Rn4HAAU9gR/gJnBCQIBEQIREhIREi5MwZARGSI0SAIwsJyWBrblcdgq7+uT+z s3ZEwER3Zufe/vrUqdM1C/+xV9r78Nmjzy6QXwLIMyCQI3fAQfFeDnKQlWs32j3j57J+vwx5fvHu Jz/9ehLo2aMHl6AvkX90PRjr1xXGDsTFCiaDNMK+kPxb5Pdv3X381wbo2aMHt0E/Ir94PRhHlq8L M6r7RJY/fO/Tn58DTF0ffd5h5l0YeY6HDgstYIR83oexQ7yf+yZkyPL7oHuVYgrP3ET+QYdhCePW d9dAy0JLmFDI5wVwKWOBZaOokOePK9B5LP7OCFO+6PHwQd5TMFUZQDajuhEEnpE8PLK5760F0HU6 qUGFCqNiC2+0TrKAE3iBA5HeuIHnl+W+oQGWCh2D8fBB/L3sUgGlK2ByAES5LYOK/yy/ZLp4G/eh AdxZl+w4jEbjll2uS7iAsWrqDOkMuSMZDGrYiz8hTWF8bRU6WqZqwj3jxnfBtzDV1DLAynsUm6Sp S1t3rdAaxnN5WDPw2isez/W2Q4Vpie9obXqLRjg7h3wAElImpdQbqJdsGXjlwX7cuFLsYzS4lTJR /p5ShYjykyAlyC+BhHtmmiYkI/eKjV1GC7OFMstULeVJIDfS0G3Nc67WZaplp5dJctxhmtRgvG5w NPUiY9JZlHENowZT8skW6ilUTdVXPpdNejGvEF6fIWGecAnrFatHxyrwlEnnb5bSyDbKMGTMUiEr /rPqKSvGVVHHLeMCNzVlzMHFXtsP6ZszcGimlfpZltBGmR4VObruEM8ifOWYqcC4SKnAuFL7bOuh 8TRGyOah6wpEam2/gony4pFbqo1S2n3OZcEKk02QOsyOQtp2FOpxwHLY6r5S6zDVEK0WSCBPmIsp gV0BM3rofH/C2x4FXAXjJZlTTXMJxaQ1TcKtSFBhsnVVzHdK9uowFh1l/YRvZ1JRh2j3HKJdBbNT sqOz7z6M1ZYP0w73IIdpQuplmo0NTPWV1RNkUbLrj5txXtUTP4KQAQbHZseZcM9EtRqMFGrtwCwU 2oybq+kxxs2AmXtQthO/wNSdZxeuadHyx2DynofauHmkrQtMPTy7x9r9UjPnbCUmXELiJIy012Un YOoYuoCpMSHijBIWi7uEDyl8FczW1FfCzP33VkvtwS+mvvsE2RPu3hY6ljcjzH5Sn4KBOJtsxy+Q zm9gLsz/KWJGl6ldx8Si7qcrkno/8Pr5xDBubv0CkA9/l0W8JLU5uzD9updx6yH54RRMN3Gop74z 99Evrw8zdtkfyEzuZ2uYWjbaoNVLZQaijxApgXlqsNeFcfHbYh66dffxc7l/cwpGMuYsUkpkL1Op ecztkb610/ZgsmkDU/JKX68GNEB2X55/aQa3OX5XdZg6VM3DYXkqY6p647ExwgBf3Hn49Ifdf8f8 /tXlBeieLN8Gv9l+j2k74dXuOBV4607qcaAnwHd3Hj79nv9fr/D6F7FERJvBF7CeAAAAAElFTkSu QmCC "
+       preserveAspectRatio="none"
+       height="45"
+       width="45"
+       inkscape:export-xdpi="72.000046"
+       inkscape:export-ydpi="72.000046" />
+    <g
+       id="g4288"
+       transform="translate(-0.50507628,0)">
+      <path
+         id="path4743"
+         d="m 350.7982,530.61981 c -0.10476,0.13691 -0.2398,0.21819 -0.41034,0.24412 l -3.57534,0.547 c -0.19525,0.62518 -0.46258,1.26334 -0.80122,1.91466 0.23413,0.32566 0.58588,0.78466 1.05468,1.37746 0.46885,0.59283 0.80098,1.02565 0.99646,1.29931 0.10453,0.14366 0.15609,0.29306 0.15609,0.44941 0,0.18228 -0.0454,0.32542 -0.13665,0.42975 -0.46882,0.66451 -1.54342,1.77145 -3.22374,3.32161 -0.15582,0.13015 -0.31896,0.19523 -0.48805,0.19523 -0.19552,0 -0.35179,-0.0583 -0.46907,-0.17551 l -2.77416,-2.09067 c -0.5343,0.27351 -1.12037,0.51463 -1.75851,0.72422 l -0.54697,3.59478 c -0.0162,0.16959 -0.088,0.30934 -0.22496,0.42013 -0.13689,0.11073 -0.29617,0.16609 -0.47888,0.16609 l -4.3382,0 c -0.3777,0 -0.61223,-0.18229 -0.70335,-0.547 -0.16958,-0.65108 -0.3583,-1.86239 -0.56671,-3.63314 -0.61225,-0.19578 -1.20385,-0.4432 -1.77797,-0.74274 l -2.69616,2.09071 c -0.16932,0.13043 -0.33864,0.19551 -0.50792,0.19551 -0.2866,0 -0.90195,-0.46547 -1.84634,-1.39691 -0.94437,-0.9314 -1.58561,-1.63143 -1.92568,-2.10026 -0.1172,-0.16957 -0.1758,-0.31919 -0.1758,-0.44939 0,-0.15637 0.0648,-0.31275 0.19524,-0.46886 0.87265,-1.05514 1.56954,-1.95371 2.09064,-2.69643 -0.32566,-0.59904 -0.57964,-1.19832 -0.76187,-1.79735 l -3.63312,-0.54703 c -0.14313,-0.0243 -0.2668,-0.11072 -0.37123,-0.25438 -0.10453,-0.14312 -0.15636,-0.29305 -0.15636,-0.44914 l 0,-4.33818 c 0,-0.16932 0.0521,-0.32234 0.15636,-0.45903 0.10452,-0.13691 0.23979,-0.21873 0.4103,-0.24439 l 3.57558,-0.5276 c 0.18228,-0.63817 0.44917,-1.2828 0.80096,-1.9329 -0.2344,-0.32564 -0.58608,-0.78466 -1.05493,-1.37745 -0.46882,-0.59283 -0.80119,-1.02569 -0.99641,-1.29932 -0.10452,-0.14366 -0.15635,-0.29308 -0.15635,-0.44943 0,-0.16958 0.0457,-0.31893 0.13664,-0.44912 0.5079,-0.70364 1.58251,-1.79791 3.22375,-3.28255 0.14366,-0.14368 0.30626,-0.21496 0.48854,-0.21496 0.19524,0 0.35827,0.0583 0.48848,0.17552 l 2.75495,2.0909 c 0.53434,-0.2735 1.12042,-0.51462 1.75855,-0.72421 l 0.54699,-3.59479 c 0.0162,-0.16957 0.088,-0.30935 0.22496,-0.42013 0.13663,-0.11126 0.29639,-0.16607 0.47865,-0.16607 l 4.33819,0 c 0.37819,0 0.61247,0.18228 0.70381,0.547 0.16904,0.65131 0.35783,1.86238 0.56624,3.63315 0.6122,0.19552 1.2062,0.44318 1.77794,0.74271 l 2.69642,-2.11036 c 0.18228,-0.1172 0.35184,-0.17554 0.50794,-0.17554 0.28634,0 0.89861,0.4621 1.83625,1.38709 0.93816,0.9247 1.58275,1.6283 1.93285,2.11033 0.1172,0.13043 0.17581,0.27987 0.17581,0.44917 0,0.16958 -0.0648,0.3326 -0.19552,0.48847 -0.93765,1.14634 -1.63453,2.04491 -2.09067,2.69623 0.26032,0.48202 0.51465,1.07458 0.76214,1.77794 l 3.61396,0.5468 c 0.15608,0.0243 0.28679,0.11098 0.39092,0.25439 0.10419,0.14366 0.15581,0.29331 0.15581,0.44942 l 0,4.33819 c 3e-5,0.1696 -0.0516,0.32205 -0.15608,0.45902 m -11.31192,-6.12503 c -0.97674,-0.97702 -2.15565,-1.4655 -3.53649,-1.4655 -1.38084,0 -2.55953,0.48848 -3.53651,1.4655 -0.97677,0.97671 -1.46526,2.15539 -1.46526,3.53624 0,1.38083 0.48827,2.55947 1.46526,3.5365 0.97698,0.97676 2.15592,1.46527 3.53651,1.46527 1.38084,0 2.55975,-0.48851 3.53649,-1.46527 0.97674,-0.97703 1.46522,-2.15567 1.46522,-3.5365 0,-1.38085 -0.48848,-2.55953 -1.46522,-3.53624"
+         style="fill:#2e3436"
+         inkscape:connector-curvature="0" />
+      <ellipse
+         ry="3.6664243"
+         rx="3.7761569"
+         cy="529.46655"
+         cx="340.18372"
+         id="path4334-70"
+         style="opacity:1;fill:#edd400;fill-opacity:1;stroke:none;stroke-width:1.38967896;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <ellipse
+         ry="3.5636182"
+         rx="3.6113756"
+         cy="524.31335"
+         cx="332.07925"
+         id="path4334-70-9"
+         style="opacity:1;fill:#204a87;fill-opacity:1;stroke:none;stroke-width:1.38967896;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <ellipse
+         ry="4.0690217"
+         rx="3.1435039"
+         cy="532.69592"
+         cx="335.59827"
+         id="path4334-70-9-7"
+         style="opacity:1;fill:#eeeeec;fill-opacity:1;stroke:none;stroke-width:1.38967896;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <ellipse
+         ry="4.0546579"
+         rx="3.904331"
+         cy="524.30634"
+         cx="337.68524"
+         id="path4334-70-3-5"
+         style="opacity:1;fill:#cc0000;fill-opacity:1;stroke:none;stroke-width:1.38967896;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <ellipse
+         ry="3.5745056"
+         rx="4.2937813"
+         cy="529.55334"
+         cx="332.8093"
+         id="path4334-70-9-7-3"
+         style="opacity:1;fill:#4e9a06;fill-opacity:1;stroke:none;stroke-width:1.38967896;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
   </g>
 </svg>

tinawebJS/Tinaweb.js

@@ -1010,6 +1010,11 @@ var TinaWebJS = function ( sigmacanvas ) {
         }
       }
 
+
+      // attributes' facet-options init & handler
+      fillAttrsInForm()
+      document.getElementById('choose-attr').onchange = showAttrConf
+
       // cancelSelection(false);
     }
 

tinawebJS/sigma.parseCustom.js

@@ -274,7 +274,7 @@ function sortNodeTypes(observedTypesDict) {
 
 function facetsBinning (valuesIdx) {
 
-  console.debug("facetsBinning: valuesIdx", valuesIdx)
+  // console.debug("facetsBinning: valuesIdx", valuesIdx)
 
   let facetIdx = {}
 
@@ -921,7 +921,7 @@ function updateRelations(typedRelations, edgeCateg, srcId, tgtId){
 
 
 // To fill the reverse map: values => nodeids of a given type
-function updateValueFacets(facetIdx, aNode) {
+function updateValueFacets(facetIdx, aNode, optionalFilter) {
 
   if (!facetIdx[aNode.type])      facetIdx[aNode.type]={}
   for (var at in aNode.attributes) {
@@ -930,6 +930,8 @@ function updateValueFacets(facetIdx, aNode) {
     if (at == 'category')
       continue
 
+    // attribute filter  undef or str: acceptedAttrName
+    if (isUndef(optionalFilter) || at == optionalFilter) {
       let val = aNode.attributes[at]
 
       if (!facetIdx[aNode.type][at])  facetIdx[aNode.type][at]={'vals':{'vstr':[], 'vnum':[]},'map':{}}
@@ -962,7 +964,9 @@ function updateValueFacets(facetIdx, aNode) {
       //     which would be useful (eg country, affiliation, etc.) !!!
 
     }
+  }
   return facetIdx
+
 }
 
 

tinawebJS/sigmaUtils.js

@@ -915,8 +915,9 @@ function heatmapColoring(daclass) {
   var tickThresholds = TW.Clusters[ty][daclass]
 
   // verifications
-  if (tickThresholds.length != nColors) {
-    console.warn (`heatmapColoring setup mismatch: TW.Clusters ticks ${tickThresholds} from scanClusters should == nColors ${nColors}`)
+  if (tickThresholds.length - 1 != nColors) {
+    console.warn (`heatmapColoring setup mismatch: TW.Clusters ticks ${tickThresholds.length} - 1 non_numeric from scanClusters should == nColors ${nColors}`)
+    nColors = tickThresholds.length - 1
   }
 
   binColors = getHeatmapColors(nColors)
@@ -964,7 +965,7 @@ function heatmapColoring(daclass) {
     }
   }
 
-  console.info('coloring distribution per tick thresholds' , totalsPerBinMin)
+  // console.info('coloring distribution per tick thresholds' , totalsPerBinMin)
 
   // Edge precompute alt_rgb by new source-target nodes-colours combination
   repaintEdges()