Merge branch 'dev' (bipartite colors)

00.DOCUMENTATION/C-advanced/old_heatmapColors_with_binning.js

-
-// KEPT FOR REFERENCE, BINNING NOW PRECOMPUTED in parseCustom
-// rewrite of gradientColors with binning and for attributes that can have negative float values
-// /!\ age and growth_rate attributes referred to by name
-function colorsRelByBins_old(daclass) {
-  cancelSelection(false);
-
-  var binColors
-  var doModifyLabel = false
-
-  TW.handpickedcolor = true
-
-  // for debug of heatmapColoring
-  var totalsPerBinMin = {}
-
-
-  // should be = binColors.length
-  var nTicksParam = (daclass == 'age') ? 8 : 12
-  // do first loop entirely to get percentiles => bins, then modify alt_color
-
-  // estimating ticks
-  let tickThresholds = []
-  let valArray = []
-  for (var j=0 ; j < TW.nNodes ; j++) {
-    let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
-
-    if (
-        !n.hidden
-        && n.attributes
-        && n.attributes.category == 'terms'
-        && n.attributes[daclass] != undefined
-      ) {
-          valArray.push(Number(n.attributes[daclass]))
-    }
-  }
-
-  var len = valArray.length
-
-  valArray.sort(function(a, b) {return a - b;}) // important :)
-
-  for (var l=0 ; l < nTicksParam ; l++) {
-    let nthVal = Math.floor(len * l / nTicksParam)
-
-    tickThresholds.push(valArray[nthVal])
-  }
-
-  // also always add the max+1 as last tick (excluded upper bound of last bin)
-  tickThresholds.push((valArray[len-1])+1)
-
-  console.info(`[|===|=== ${nTicksParam} color ticks ===|===|]\n`, tickThresholds)
-
-
-  cancelSelection(false);
-
-  if (daclass == 'age') {
-    // 9 colors
-    binColors = TW.gui.getHeatmapColors(9)
-    }
-    else if (daclass == 'growth_rate') {
-
-      doModifyLabel = true
-
-      // 12 colors
-      binColors = TW.gui.getHeatmapColors(12)
-
-    }
-
-    // verification
-    if (nTicksParam != binColors.length) {
-      console.warn (`heatmapColoring setup mismatch: nTicksParam ${nTicksParam} should == nColors ${binColors.length}`)
-    }
-
-
-    // get the nodes
-    for (var j=0 ; j < TW.nNodes ; j++) {
-      let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
-      if (! n.hidden
-        && n.attributes
-        && n.attributes.category == 'terms'
-        && ! isUndef(n.attributes[daclass])
-      ) {
-
-        var valSt = n.attributes[daclass]
-
-        var originalLabel = TW.Nodes[n.id].label
-        if (doModifyLabel) {
-          n.label = `(${valSt}) ${originalLabel}`
-        }
-        else {
-          n.label = originalLabel
-        }
-
-        var theVal = parseFloat(valSt)
-        var foundBin = false
-        // console.log('theVal:',theVal)
-
-        if( !isNaN(theVal) ) { //is float
-          // iterate over bins
-          for(var k=0 ; k < tickThresholds.length-1; k++) {
-            var binMin = tickThresholds[k]
-            var binMax = tickThresholds[(k+1)]
-            if((theVal >= binMin) && (theVal < binMax)) {
-                // TW.partialGraph._core.graph.nodesIndex[n.id].binMin = binMin
-                // TW.partialGraph._core.graph.nodesIndex[n.id].color = binColors[j]
-
-                n.binMin = binMin
-                n.color = binColors[k]
-                n.customAttrs.alt_color = binColors[k]
-                n.customAttrs.altgrey_color = false
-                foundBin = true
-                // console.log(`theVal ${theVal} => found its bin ${binMin} ... ${binColors[k]}`)
-
-                if (!totalsPerBinMin[binMin]) {
-                  totalsPerBinMin[binMin] = 1
-                }
-                else {
-                  totalsPerBinMin[binMin]++
-                }
-                break
-            }
-          }
-
-          // case no bin after loop (perhaps more ticks than colors-1 ??)
-          if (!foundBin) {
-            console.warn('no bin for theVal', theVal, n.id)
-            n.binMin = null
-            n.color = '#000'
-            n.customAttrs.alt_color = '#000'
-          }
-        }
-        else {
-          // case no val
-          // console.log('no val for', n.id)
-          n.binMin = null
-          n.color = '#555'
-          n.customAttrs.alt_color = '#555'
-        }
-
-      }
-    }
-
-    // console.debug(valArray)
-
-    console.info('coloring distribution per tick thresholds' , totalsPerBinMin)
-
-    // Edge precompute alt_rgb by new source-target nodes-colours combination
-    repaintEdges()
-
-    // set_ClustersLegend ( daclass )
-
-    TW.partialGraph.render();
-}

explorerjs.html

@@ -159,8 +159,8 @@
             <li>
                <a>
                 <select id="aselector" onchange="console.log('salut monde')" class="selectpicker"  data-style="btn btn-success btn-sm"  data-width="auto">
-                  <option value="Document" selected>Scholars</option>
-                  <option value="NGram">Keywords</option>
+                  <option value="Scholars" selected>Scholars</option>
+                  <option value="Keywords">Keywords</option>
                 </select>
                </a>
             </li>
@@ -430,9 +430,9 @@
         </div><!-- /row -->
       </div>
 
-
-      <!-- class="my-legend" (absolute position bottom left) -->
-      <div id="legend-for-clusters" class="over-panels"></div>
+      <!-- attributes' legends (absolute position bottom left)
+           (contains one div of class "my-legend" per colored nodetype) -->
+      <div id="legend-for-facets" class="over-panels"></div>
 
       <!-- to reopen the panel -->
       <div id="sideunfold">

settings_explorerjs.js

@@ -21,7 +21,7 @@ TW.conf = (function(TW){
 
   // ...or remote bridge to default source api ajax queries
   TWConf.sourceAPI={}
-  TWConf.sourceAPI["nodetypes"] = {"node0": "NGram", "node1": "Document" }
+  TWConf.sourceAPI["nodetypes"] = {"node0": "Keywords", "node1": "Scholars" }
   TWConf.sourceAPI["forNormalQuery"] = "services/api/graph"
   TWConf.sourceAPI["forFilteredQuery"] = "services/api/graph"
 
@@ -114,8 +114,8 @@ TW.conf = (function(TW){
   // =============
 
   // Node typology: categories (resp. 0 and 1) will get these default labels
-  TWConf.catSem = "NGram";
-  TWConf.catSoc = "Document";
+  TWConf.catSem = "Keywords";
+  TWConf.catSoc = "Scholars";
   // NB: these labels may be superseded by:
   //   - the input data's node types values cf. sortNodeTypes()
   //   - in servermenu mode, by the node0 & node1 properties

twlibs/css/selection-panels-mobile.css

@@ -49,8 +49,8 @@
   }
 
   /* legend re-positioned */
-  .my-legend {
-    bottom: calc(40% - 105px);
+  #legend-for-facets {
+    bottom: calc(40% - 100px);
     /* bot just above #sidebar which has top at calc(105px + 60%); */
   }
 
@@ -97,17 +97,20 @@
   }
 
   /* legend reduction */
+  #legend-for-facets {
+    max-width: 25%;
+  }
+
   .my-legend {
-    max-width: 27%;
     max-height: 25%;
-    padding: 0 2px;
     font-size: 85%;
-    margin: 0 0 5px 0;
+    margin: 0;
+    padding: 0 1px 3px 1px;
   }
 
   .my-legend .legend-title {
       margin-bottom: 0;
-      font-size: 90%;
+      font-size: 85%;
    }
   .my-legend .legend-scale ul {
     margin-bottom: 0;

twlibs/css/selection-panels.css

@@ -33,44 +33,55 @@
 }
 
 /* LEGEND PANEL */
-.my-legend {
-    position:fixed;
-    /* width: we set it equal or smaller than #lefttopbox width */
-    max-width:20%;
-    max-height: 30%;
-    padding: 0 5px;
-    overflow-y:scroll;
-    bottom:18px;
+#legend-for-facets {
+  bottom: 10px;
   left:0;
-    border:solid 1px black;
-    background-color:white;
-    opacity: 0.8;
-    color:#250587;
-    margin: 7px;
+  position:fixed;
+  /* width: we set it a bit more than #lefttopbox width */
+  max-width: 20%;
+  max-height: 40%;
   font-size:120%;
   cursor: default;
+  overflow-y:auto;
+  overflow-x: hidden;
+}
+
+.my-legend {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0 5px 5px 5px;
+    opacity:1;
+    background-color: white;
+    color:#250587;
+    overflow: hidden;
+    z-index: 5;
 }
 
 .my-legend .legend-title {
     text-align: left;
     margin-bottom: 5px;
     font-weight: bold;
-    font-size: 90%;
-    }
+    font-size: 75%;
+}
+
 .my-legend .legend-scale ul {
   margin: 0;
   margin-bottom: 5px;
   padding: 0;
   float: left;
   list-style: none;
-  }
+}
+
 .my-legend .legend-scale ul li {
   font-size: 80%;
   list-style: none;
   margin-left: 0;
   line-height: 16px;
   margin-bottom: 2px;
-  }
+}
+
 .my-legend ul.legend-labels li span.lgdcol {
   display: block;
   float: left;

twlibs/css/twjs.css

@@ -165,6 +165,13 @@ html.waiting {
   display: none;      /* initial display off but turned on if bipartite */
 }
 
+.pseudo-optgroup {
+  color: #555;
+  text-align: center;
+  font-size: 90%;
+  padding: 1.5em 0 .5em 0;
+}
+
 .tagcloud-item{
     display:inline-block;
     border:solid 1px;

twmain/Tinaweb.js

@@ -1161,7 +1161,7 @@ var TinaWebJS = function ( sigmacanvas ) {
       }
       // otherwise, set the default legend
       if (! madeDefaultColor) {
-        set_ClustersLegend ( "clust_default" )
+        updateColorsLegend ( "clust_default" )
       }
 
       // select currently active sliders

twmain/enviroment.js

@@ -23,11 +23,20 @@ TW.gui.checkBox=false;
 TW.gui.shiftKey=false;
 TW.gui.foldedSide=false;
 TW.gui.manuallyChecked = false;
-TW.gui.handpickedcolor = false;     // <= changes edge rendering strategy
-TW.gui.lastFilters = {}
+TW.gui.lastFilters = {}             // <= last values, by slider id
 TW.gui.reldocTabs = [{}, {}]        // <= by nodetype and then dbtype
 
 TW.gui.sizeRatios = [1,1]           // sizeRatios per nodetype
+TW.gui.handpickedcolors = {};        // <= changes rendering, by nodetype
+TW.gui.handpickedcolorsReset = function (forTypes = TW.categories) {
+  TW.gui.handpickedcolors = {}
+  for (var k in forTypes) {
+    TW.gui.handpickedcolors[forTypes[k]] = {
+      'alton': false,
+      'altattr': null
+    }
+  }
+}
 
 TW.gui.noverlapConf = {
   nodeMargin: .4,
@@ -517,15 +526,37 @@ function changeType(optionaltypeFlag) {
       updateSearchLabels(nid,allNodes[nid].label,allNodes[nid].type);
     }
 
-
-    // update the gui (POSS could be handled by TW.pushGUIState)
-    TW.gui.handpickedcolor = false
+    // update the gui (TODO handle by TW.pushGUIState) =========================
     updateDynamicFacets()
+
+    // console.log("outgoing.activetypes", outgoing.activetypes)
+    // console.log("newActivetypes", newActivetypes)
+
     changeGraphAppearanceByFacets( getActivetypesNames() )
 
-    if (typeFlag != 'all') {
-      graphResetLabelsAndSizes()
+    // turn off the altcolors for outgoing types
+    for (var tyId in TW.categories) {
+      let ty = TW.categories[tyId]
+      if (outgoing.activetypes[tyId] && ! newActivetypes[tyId]) {
+        if (TW.gui.handpickedcolors[ty].alton) {
+          clearColorLegend([ty])
+          TW.gui.handpickedcolors[ty].alton = false
+        }
+      }
+      else if (!outgoing.activetypes[tyId] && newActivetypes[tyId]) {
+        if (TW.gui.handpickedcolors[ty].altattr) {
+          TW.gui.handpickedcolors[ty].alton = true
+
+          // this re-coloring can be avoided if "hidden" was used in changeLevel and sliders
+          let recolorMethod = getColorFunction(TW.gui.handpickedcolors[ty].altattr)
+          window[recolorMethod](TW.gui.handpickedcolors[ty].altattr)
+
+          // without re-coloring step, we would only need to recreate legend box
+          // updateColorsLegend(TW.gui.handpickedcolors[ty].altattr, [ty])
+        }
       }
+    }
+
     TW.partialGraph.settings('labelThreshold', getSizeFactor())
     fillAttrsInForm('choose-attr')
     fillAttrsInForm('attr-titling-metric', 'num')
@@ -537,6 +568,8 @@ function changeType(optionaltypeFlag) {
         sigma_utils.smartForceAtlas()
       }
     })
+
+    // end update the gui ======================================================
 }
 
 
@@ -623,6 +656,13 @@ function changeLevel(optionalTgtState) {
         activereltypes = present.activereltypes;
       }
 
+      let activetypesDict = {}
+      for (var i in activetypes) {
+        if (activetypes[i]) {
+          activetypesDict[TW.categories[i]] = true
+        }
+      }
+
       TW.partialGraph.graph.clear();
 
       var voisinage = {}
@@ -683,10 +723,11 @@ function changeLevel(optionalTgtState) {
 
           // var t0 = performance.now()
           for(var nid in TW.Nodes) {
-              if(activetypes[TW.catDict[TW.Nodes[nid].type]])
-                  // we add 1 by 1
+            if (activetypesDict[TW.Nodes[nid].type]) {
+              // we add 1 by 1 (POSS: use hidden instead)
               add1Elem(nid)
             }
+          }
           for(var eid in TW.Edges) {
             for (var k in activereltypes) {
               let activereltype = activereltypes[k]
@@ -715,6 +756,16 @@ function changeLevel(optionalTgtState) {
       updateDynamicFacets()
       changeGraphAppearanceByFacets( getActivetypesNames() )
 
+      // going back to global: recolor nodes that were out of scope
+      if(futurelevel) {
+        for (var ty in activetypesDict) {
+          if (TW.gui.handpickedcolors[ty].alton) {
+            let recolorMethod = getColorFunction(TW.gui.handpickedcolors[ty].altattr)
+            window[recolorMethod](TW.gui.handpickedcolors[ty].altattr)
+          }
+        }
+      }
+
       // recreate FA2 nodes array after you change the nodes
       reInitFa2({
         useSoftMethod: false,

twmain/extras_explorerjs.js

@@ -68,29 +68,29 @@ function changeGraphAppearanceByFacets(actypes) {
 
     if (!actypes)            actypes = getActivetypesNames()
 
-    let currentNbNodes = TW.partialGraph.graph.nNodes()
-
-    // create colormenu and 1st default entry
-    var color_menu_info = '<li><a href="#" onclick="TW.gui.handpickedcolor = false ; graphResetLabelsAndSizes() ; TW.partialGraph.refresh()">By Default</a></li>';
-
+    let colorsMeta = {}
+    let allNbNodes = TW.partialGraph.graph.nNodes()
     let gotPreviousLouvain = false
-    if( $( "#colorgraph-menu" ).length>0 ) {
-      for (var tid in actypes) {
-        let ty = actypes[tid]
 
+    let currentNbNodes = {}
+    for (var k in actypes) {
+      currentNbNodes[actypes[k]] = TW.partialGraph.graph.getNodesByType(TW.catDict[actypes[k]]).length
+    }
+
+    // 1st loop: census on [colors <=> types] and involved nb Nodes
+    for (var k in actypes) {
+      let ty = actypes[k]
+      let attNbNodes = currentNbNodes[ty]
 
       // each facet family or clustering type was already prepared
       for (var attTitle in TW.Facets[ty]) {
-
-          // console.warn('changeGraphAppearanceByFacets:', ty, attTitle)
-
-          // note any previous louvains
-          if (attTitle == 'clust_louvain')  gotPreviousLouvain = true
+        if (! colorsMeta[attTitle]) {
+          colorsMeta[attTitle] = []
+        }
 
         // attribute counts: nb of classes
         // POSS here distinguish [ty][attTitle].classes.length and ranges.length
-          var attNbClasses = TW.Facets[ty][attTitle].invIdx.length
-          var attNbNodes = currentNbNodes
+        let attNbClasses = TW.Facets[ty][attTitle].invIdx.length
 
         if (attNbClasses) {
           let lastClass = TW.Facets[ty][attTitle].invIdx[attNbClasses-1]
@@ -104,24 +104,57 @@ function changeGraphAppearanceByFacets(actypes) {
           }
         }
 
-          // coloringFunction
-          var colMethod
+        // note any previous louvains
+        if (attTitle == 'clust_louvain')  gotPreviousLouvain = true
 
-          // read from user settings
-          if (TW.facetOptions[attTitle] && TW.facetOptions[attTitle]['col']) {
-            colMethod = TW.gui.colorFuns[TW.facetOptions[attTitle]['col']]
+        // save relevant info
+        colorsMeta[attTitle].push({
+          'type': ty,
+          'nbDomain': attNbNodes,
+          'nbOutput': attNbClasses
+        })
       }
-
-          // fallback guess-values
-          if (! colMethod) {
-            if(attTitle.indexOf("clust")>-1||attTitle.indexOf("class")>-1) {
-              // for classes and clusters
-              colMethod = "clusterColoring"
     }
+    console.log(colorsMeta)
+
+    // sorted by type and how many types (one type x by alpha, one type y by alpha, two types xy by alpha)
+    let colorsList = Object.keys(colorsMeta)
+    colorsList.sort(function (a, b) {
+      let cmp = colorsMeta[a].length - colorsMeta[b].length
+      if (cmp == 0) {
+        cmp = (a in TW.sigmaAttributes) - (b in TW.sigmaAttributes)
+        if (cmp == 0) {
+          if (colorsMeta[a][0].type < colorsMeta[b][0].type) cmp = -1
+          else if (colorsMeta[a][0].type > colorsMeta[b][0].type) cmp = 1
           else {
-              colMethod = "gradientColoring"
+            if (a < b) cmp = -1
+            else if (a > b) cmp = 1
+          }
+        }
       }
+      return cmp
+    })
+
+    // 2nd loop: create colormenu and 1st default entry
+    var color_menu_info = '<li><a href="#" onclick="graphResetAllColors() ; TW.partialGraph.refresh()">By Default</a></li>';
+
+    let lastGroup = null
+    if( $( "#colorgraph-menu" ).length>0 ) {
+
+      for (var l in colorsList) {
+        var attTitle = colorsList[l]
+
+        // which concerned types and how many concerned nodes and output classes
+        let attNbNodes = 0
+        let forTypes = []
+        for (var i in colorsMeta[attTitle]) {
+          forTypes.push(colorsMeta[attTitle][i].type)
+          attNbNodes += colorsMeta[attTitle][i].nbDomain
         }
+        let attNbClasses = colorsMeta[attTitle][0].nbOutput
+
+        // coloring function
+        let colMethod = getColorFunction(attTitle)
 
         // family label :)
         var attLabel ;
@@ -130,15 +163,30 @@ function changeGraphAppearanceByFacets(actypes) {
         }
         else attLabel = attTitle
 
-          color_menu_info += `<li><a href="#" onclick='${colMethod}("${attTitle}")'>By ${attLabel} (${attNbClasses} | ${attNbNodes})</a></li>`
+        if (actypes.length == 1) {
+          color_menu_info += `
+            <li><a href="#" onclick='${colMethod}("${attTitle}")'>
+                By ${attLabel} (${attNbClasses} | ${attNbNodes})
+            </a></li>
+            `
+        }
+        else {
+          groupName = `${forTypes}`
+          if (groupName != lastGroup) {
+            color_menu_info += `<li class="pseudo-optgroup">${groupName}</li>`
+          }
+          color_menu_info += `
+            <li><a href="#" onclick='${colMethod}("${attTitle}",${JSON.stringify(forTypes)})'>
+                By ${attLabel} (${attNbClasses} | ${attNbNodes})
+            </a></li>
+            `
+          lastGroup = groupName
         }
-
-        // POSS add cumulated degree via TW.partialGraph.graph.degree(nid)
       }
 
       // we also add clust_louvain if not already there
       if (!gotPreviousLouvain) {
-        color_menu_info += `<li><a href="#" onclick='clusterColoring("clust_louvain")'>By Louvain clustering ( <span id="louvainN">?</span> | ${currentNbNodes})</a></li>`
+        color_menu_info += `<li><a href="#" onclick='clusterColoring("clust_louvain")'>By Louvain clustering ( <span id="louvainN">?</span> | ${allNbNodes})</a></li>`
       }
 
       // for debug
@@ -148,11 +196,33 @@ function changeGraphAppearanceByFacets(actypes) {
     }
 
     // Legend slots were prepared in TW.Facets
-
 }
 
+function getColorFunction(attTitle) {
+  // coloringFunction name as str
+  var colMethod
+
+  // read from user settings
+  if (TW.facetOptions[attTitle] && TW.facetOptions[attTitle]['col']) {
+    colMethod = TW.gui.colorFuns[TW.facetOptions[attTitle]['col']]
+  }
+
+  // fallback guess-values
+  if (! colMethod) {
+    if(attTitle.indexOf("clust")>-1||attTitle.indexOf("class")>-1) {
+      // for classes and clusters
+      colMethod = "clusterColoring"
+    }
+    else {
+      colMethod = "gradientColoring"
+    }
+  }
 
-function RunLouvain() {
+  return colMethod
+}
+
+// @cb: optional callback
+function RunLouvain(cb) {
 
   var node_realdata = []
   var nodesV = getVisibleNodes()
@@ -216,6 +286,11 @@ function RunLouvain() {
       TW.facetOptions['clust_louvain'] = {'col': 'cluster'}
     }
     // NB the LouvainFait flag is updated by caller fun
+
+    // callback
+    if (cb && typeof cb == 'function') {
+      cb()
+    }
 }
 
 
@@ -269,25 +344,47 @@ function graphResetLabelsAndSizes(){
       n.size = TW.Nodes[n.id].size
     }
   }
-  set_ClustersLegend()
 }
 
-// @daclass: the name of a numeric/categorical attribute from node.attributes
-// @groupingTicks: an optional threshold's array expressing ranges with their low/up bounds label and ref to matchin nodeIds
-function set_ClustersLegend ( daclass, groupedByTicks ) {
-    $("#legend-for-clusters").removeClass( "my-legend" )
-    $("#legend-for-clusters").html("")
-    if(daclass==null) return;
+function graphResetAllColors() {
+  graphResetLabelsAndSizes()
+  TW.gui.handpickedcolorsReset()
+  updateColorsLegend()
+}
+
+// removes selectively for an array of nodetypes
+function clearColorLegend (forTypes) {
+  // console.log('clearColorLegend', forTypes)
+  for (var ty of forTypes) {
+    let legTy = document.getElementById("legend-for-"+ty)
+    if (legTy)
+      legTy.remove()
+  }
+}
 
-    var actypes = getActivetypesNames()
 
-    // TODO test more for multiple types
-    // we have no specifications yet for colors (and legends) on multiple types
-    if (actypes.length > 1) {
-      console.warn("colors by bins will only color nodes of type 0")
+// @daclass: the name of a numeric/categorical attribute from node.attributes
+// @forTypes: array of which typenames are concerned
+// @groupingTicks: an optional threshold's array expressing ranges with their low/up bounds label and ref to matchin nodeIds
+function updateColorsLegend ( daclass, forTypes, groupedByTicks ) {
+
+    // shortcut to erase legends for all types
+    if(daclass == null) {
+      clearColorLegend(TW.categories)
+      $("#legend-for-facets").html("")
+    };
+
+    // current display among TW.categories (ex: ['terms'])
+    if (typeof forTypes != 'array' || ! forTypes.length) {
+      forTypes = getActivetypesNames().filter(function(ty){
+        return daclass in TW.Facets[ty]
+      })
     }
-    // current display among TW.categories (ex: 'terms')
-    var curType = actypes[0]
+    // (we ignore other types: their color legends remain the same by default)
+
+    for (var k in forTypes) {
+      let curType = forTypes[k]
+      var LegendDiv = "<div id=legend-for-"+curType+" class=\"over-panels my-legend\">"
 
       // all infos in a bin array
       var legendInfo = []
@@ -297,9 +394,7 @@ function set_ClustersLegend ( daclass, groupedByTicks ) {
 
       // passed as arg   or  prepared in parseCustom
       if (!groupedByTicks && (!TW.Facets[curType] || !TW.Facets[curType][daclass])) {
-      console.warn(`no class bins for ${daclass}, displaying no legend`)
-
-      $("#legend-for-clusters").hide()
+        console.warn(`no class bins for ${curType} ${daclass}`)
       }
       else {
         let daclassLabel = daclass
@@ -308,8 +403,8 @@ function set_ClustersLegend ( daclass, groupedByTicks ) {
           && TW.facetOptions[daclass].legend) {
             daclassLabel = TW.facetOptions[daclass].legend
         }
-      var LegendDiv = ""
-      LegendDiv += `    <div class="legend-title">${daclassLabel}</div>`
+
+        LegendDiv += `    <div class="legend-title"><small>${curType}:</small> ${daclassLabel}</div>`
         LegendDiv += '    <div class="legend-scale">'
         LegendDiv += '      <ul class="legend-labels">'
 
@@ -397,11 +492,20 @@ function set_ClustersLegend ( daclass, groupedByTicks ) {
         }
         LegendDiv += '      </ul>'
         LegendDiv += '    </div>'
+        LegendDiv += '  </div>'
 
-      $("#legend-for-clusters").addClass( "my-legend" );
-      $("#legend-for-clusters").html( LegendDiv )
-      $("#legend-for-clusters").show()
+        let perhapsPreviousLegend = document.getElementById("legend-for-"+curType)
+        if (perhapsPreviousLegend) {
+          perhapsPreviousLegend.outerHTML = LegendDiv
+        }
+        else {
+          let newLegend = document.createElement('div')
+          $("#legend-for-facets").prepend(newLegend)
+          newLegend.outerHTML = LegendDiv
+        }
+      }
     }
+    $("#legend-for-facets").show()
 }
 
 // = = = = = = = = = = = [ / Clusters Plugin ] = = = = = = = = = = = //

twmain/globalUtils.js

@@ -96,9 +96,11 @@ function isUndef(variable){
 
 function stringToSomeInt (anyString) {
   let charCodeSum = 0
+  if (anyString && anyString.length) {
     for (let i = 0 ; i < anyString.length ; i++) {
       charCodeSum += anyString.charCodeAt(i)
     }
+  }
   return charCodeSum
 }
 

twmain/main.js

@@ -413,6 +413,9 @@ function mainStartGraph(inFormat, inData, twInstance) {
 
       TW.ByType = dicts.byType  // useful for loops
 
+      // init the rendering flags (after we got types, before we first render)
+      TW.gui.handpickedcolorsReset(TW.categories)
+
       // in-place: pre-compute all color/unselected color/size properties
       prepareNodesRenderingProperties(TW.Nodes)
       prepareEdgesRenderingProperties(TW.Edges, TW.Nodes)

twmain/methods.js

@@ -97,7 +97,6 @@ TW.resetGraph = function() {
 
   // reset rendering gui flags
   TW.gui.selectionActive = false
-  TW.gui.handpickedcolor = false
 
   // reset circle size and cursor
   TW.gui.circleSize = 0
@@ -107,6 +106,9 @@ TW.resetGraph = function() {
   TW.gui.checkBox=false
   TW.gui.lastFilters = {}
 
+  // reset colors legends
+  updateColorsLegend()
+
   // forget the states
   TW.states = [TW.initialSystemState]
 
@@ -734,7 +736,7 @@ function prepareNodesRenderingProperties(nodesDict) {
       // default unselected color
       defgrey_color : "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twNodesGreyOpacity+")",
 
-      // will be used for repainting (read when TW.gui.handpickedcolor flag)
+      // will be used for repainting (read when TW.gui.handpickedcolors flags)
       alt_color: null,
       altgrey_color: null,
     }

twmain/sigma.parseCustom.js

@@ -211,8 +211,8 @@ function scanGexf(gexfContent) {
 // ex: terms
 // ex: ISItermsriskV2_140 & ISItermsriskV2_140
 // optional arg optionalNodeConf should contain keys of the form:
-//    "node0": "NGram",
-//    "node1": "Document"
+//    "node0": "Keywords",
+//    "node1": "Scholars"
 //     etc.
 // (it's read from project_conf.json)
 function sortNodeTypes(observedTypesDict, optionalNodeConf) {
@@ -220,6 +220,14 @@ function sortNodeTypes(observedTypesDict, optionalNodeConf) {
   observedTypes.sort(function(a,b) {return observedTypesDict[b] - observedTypesDict[a]})
 
   let nbNodeTypes = 2
+
+  if (observedTypes.length > nbNodeTypes) {
+    console.warn(`The graph source data has more different node types than
+                  supported. Less frequent node types will be ignored.
+                  Max allowed types: ${nbNodeTypes},
+                  Found: ${observedTypes.length} (namely: ${observedTypes})`)
+  }
+
   var declaredTypes = []
   for (var i = 0 ; i < nbNodeTypes ; i++ ) {
     if (optionalNodeConf && optionalNodeConf["node"+i]) {
@@ -234,10 +242,14 @@ function sortNodeTypes(observedTypesDict, optionalNodeConf) {
     }
   }
 
-  var newcats = []
-  var catDict = {}
+  // console.log("observedTypes", observedTypes)
+  // console.log("declaredTypes", declaredTypes)
+
+  var newcats = []   // will become TW.categories
+  var catDict = {}   // will become TW.catDict
 
   var nTypes = observedTypes.length
+
   if(nTypes==0) {
       newcats[0]="Terms";
       catDict["Terms"] = 0;
@@ -251,43 +263,72 @@ function sortNodeTypes(observedTypesDict, optionalNodeConf) {
         console.log(`cat unique (${observedTypes[0]}) =>0`)
   }
   if(nTypes>1) {
-      // allows multiple node types, with an "all the rest" node1
+      // allows multiple node types even if not well declared
+      // ----------------------------------------------------
+      // POSSIBLE: an "all the rest" last nodeType ?
+
+      let alreadyUsed = {}
 
-      // try stipulated cats, then fallbacks
-      // possible: loop
-      if (observedTypesDict[declaredTypes[0]]) {
-        newcats[0] = declaredTypes[0];
-        catDict[declaredTypes[0]] = 0;
+      // try declared cats in declared position, independantly from each other
+      for (var i = 0 ; i < nbNodeTypes; i++) {
+        if (observedTypesDict[declaredTypes[i]]) {
+          let validatedType = declaredTypes[i]
+          newcats[i] = validatedType;
+          alreadyUsed[validatedType] = true
         }
-      if (observedTypesDict[declaredTypes[1]]) {
-        newcats[1] = declaredTypes[1];
-        catDict[declaredTypes[1]] = 1;
       }
 
-      // NB: type for nodes0 will be the majoritary by default, unless taken
-      if (!newcats[0]) {
-        if (observedTypes[0] != newcats[1]) {
-          newcats[0] = observedTypes[0]    // 0 is the most frequent here
-          catDict[observedTypes[0]] = 0;
+      // console.log("found stipulated cats", newcats, catDict)
+
+      // fallbacks: if some or all stipulated cats are not found
+      // ---------
+
+      // heuristic A: fill missing ones, by frequence
+      // (eg if nodes0 was not found, then type for nodes0 will be the
+      //     majoritary observed one, unless taken where we move one up)
+      for (var i = 0 ; i < nbNodeTypes; i++) {
+        if (typeof newcats[i] == "undefined") {
+          for (var j = 0 ; j < nTypes ; j++) {
+            if (!alreadyUsed[observedTypes[j]]) {
+              newcats[i] = observedTypes[j]
+              alreadyUsed[observedTypes[j]] = true
+              break
+            }
           }
-        else {
-          newcats[0] = observedTypes[1]    // 1 is second most frequent
-          catDict[observedTypes[1]] = 0;
         }
       }
+      // console.log("after filling majority cats", newcats, catDict)
 
-      // all the rest
+      // all the rest (heuristic B)
+      if (!newcats[nbNodeTypes-1]) {
         for(var i in observedTypes) {
+          // without a group others: if there is more than two cats altogether,
+          //                         only the last cat counts as node1 cat
           let c = observedTypes[i]
-        // or c is in "all the rest" group
-        // (POSS extend to multitypes)
-        if (c != newcats[0] && c != newcats[1]) {
-            if (!newcats[1])    newcats[1] = c;
-            else newcats[1] += '/'+c
-            catDict[c] = 1;
+
+
+          // -------------------------------------------- for a group "others"
+          // with a group "others": if there is more than two cats altogether,
+          //                         all the non majoritary or non-stipulated
+          //                         are grouped here as node1 cat
+          // but problem: it break the symetry b/w TW.categories and TW.catDict
+          //
+          // // c is in "all the rest" group (POSS extend to multitypes)
+          // if (c != newcats[0] && c != newcats[1]) {
+          //     if (!newcats[1])    newcats[1] = c;
+          //     else newcats[1] += '/'+c
+          //     catDict[c] = 1;
+          // }
+          // -------------------------------------------/ for a group "others"
         }
       }
   }
+
+  // reverse lookup
+  for (var i in newcats) {
+    catDict[newcats[i]] = i
+  }
+
   return {'categories': newcats, 'lookup_dict': catDict}
 }
 
@@ -650,10 +691,18 @@ function dictfyGexf( gexf , categories ){
     for(var i in categories)  {
       nodesByType[i] = []
 
-      let subCats = categories[i].split(/\//g)
-      for (var j in subCats) {
-        catDict[subCats[j]] = i
-      }
+
+      // without  a group "others" -------------------
+      catDict[categories[i]] = i
+
+      // POSS subCats for cat "others" if open types mapped to n types
+      //
+      // ----------------------- with a group "others"
+      // let subCats = categories[i].split(/\//g)
+      // for (var j in subCats) {
+      //   catDict[subCats[j]] = i
+      // }
+      // ---------------------- /with a group "others"
 
     }
 
@@ -1077,11 +1126,17 @@ function dictfyJSON( data , categories ) {
     for(var i in categories)  {
       nodesByType[i] = []
 
-      let subCats = categories[i].split(/\//g)
-      for (var j in subCats) {
-        catDict[subCats[j]] = i
-      }
+      // without  a group "others" -------------------
+      catDict[categories[i]] = i
 
+      // POSS subCats for cat "others" if open types mapped to n types
+      //
+      // ----------------------- with a group "others"
+      // let subCats = categories[i].split(/\//g)
+      // for (var j in subCats) {
+      //   catDict[subCats[j]] = i
+      // }
+      // ---------------------- /with a group "others"
     }
 
     // normalization, same as parseGexf

twmain/sigmaUtils.js

@@ -118,7 +118,7 @@ var SigmaUtils = function () {
         context.beginPath();
 
         if (settings('twSelectedColor') == "node")
-          context.fillStyle = TW.gui.handpickedcolor? node.customAttrs.alt_color : node.color; // node's
+          context.fillStyle = TW.gui.handpickedcolors[node.type].alton ? node.customAttrs.alt_color : node.color; // node's
         else
           context.fillStyle = "#fff"; // default
 
@@ -180,7 +180,6 @@ var SigmaUtils = function () {
       var color, size,
         prefix = settings('prefix') || ''
 
-
       //debug
       // console.warn("rendering edge", edge)
 
@@ -188,7 +187,7 @@ var SigmaUtils = function () {
 
       // precomputed color with no opacity
       // cf. sigmaTools.edgeRGB
-      var baseRGB = TW.gui.handpickedcolor ? edge.customAttrs.alt_rgb : edge.customAttrs.rgb
+      var baseRGB = edge.customAttrs.useAltColor ? edge.customAttrs.alt_rgb : edge.customAttrs.rgb
 
       if (edge.customAttrs.activeEdge) {
         size = (defSize * 2) + 1
@@ -291,7 +290,7 @@ var SigmaUtils = function () {
 
 
         // mode variants 1: if a coloringFunction is active
-        if (! TW.gui.handpickedcolor) {
+        if (! TW.gui.handpickedcolors[node.type].alton) {
           nodeColor = node.color
         }
         else {
@@ -301,7 +300,6 @@ var SigmaUtils = function () {
         // mode variants 2: if node is selected, highlighted or unselected
         if (TW.gui.selectionActive) {
 
-
           // the selected node(s)
           if (node.customAttrs.active) {
             // called by label+background overlay cf. "subcall"
@@ -317,7 +315,7 @@ var SigmaUtils = function () {
           // passive nodes should blend in the grey of twEdgeGreyColor
           // cf settings_explorerjs, defgrey_color and deselectNodes()
           else {
-            if (! TW.gui.handpickedcolor) {
+            if (! TW.gui.handpickedcolors[node.type].alton) {
               nodeColor = node.customAttrs.defgrey_color
             }
             else {
@@ -442,7 +440,7 @@ var SigmaUtils = function () {
             x = Math.round(node[prefix + 'x'] - fontSize / 2 - 2);
             y = Math.round(node[prefix + 'y'] - fontSize / 2 - 2);
             w = Math.round(
-              context.measureText(node.label).width + fontSize / 2 + size + 7
+              context.measureText(node.label).width + fontSize / 2 + size + 12
             );
             h = Math.round(fontSize + 4);
             e = Math.round(fontSize / 2 + 4);
@@ -656,11 +654,17 @@ function edgeInfos(anEdge) {
 }
 
 
-function gradientColoring(daclass) {
+// FIXME this function could be optimized
+function gradientColoring(daclass, forTypes) {
 
     graphResetLabelsAndSizes()    // full loop
 
-    TW.gui.handpickedcolor = true
+    if (typeof forTypes != 'array' || ! forTypes.length) {
+      // default strategy on multiple types: color all types that have the attr
+      forTypes = getActivetypesNames().filter(function(ty){
+        return daclass in TW.Facets[ty]
+      })
+    }
 
     // value getter
     let getVal
@@ -672,9 +676,10 @@ function gradientColoring(daclass) {
     }
 
     var min_pow = 0;
-    for(var nid in TW.Nodes) {
-        var the_node = TW.Nodes[ nid ]
-        var attval = getVal(the_node);
+    for (var k in forTypes) {
+      let nids = TW.ByType[TW.catDict[forTypes[k]]]
+      for (var j in nids) {
+        let attval = getVal(TW.Nodes[ nids[j] ]);
         if( !isNaN(parseFloat(attval)) ) { //is float
           while(true) {
               var themult = Math.pow(10,min_pow);
@@ -685,6 +690,7 @@ function gradientColoring(daclass) {
           }
         }
       }
+    }
 
     var NodeID_Val = {}
     var real_min = 1000000;
@@ -692,9 +698,13 @@ function gradientColoring(daclass) {
     var themult = Math.pow(10,min_pow);
     // console.log('themult', themult)
 
-    for(var nid in TW.Nodes) {
-        var the_node = TW.Nodes[ nid ]
-        var attval = getVal(the_node)
+    for (var k in forTypes) {
+      let nids = TW.partialGraph.graph.getNodesByType(
+        TW.catDict[forTypes[k]]   // unordered type names to type id
+      )
+      for (var j in nids) {
+        let nid = nids[j]
+        var attval = getVal(TW.Nodes[nid])
 
         var attnumber = Number(attval);
         if (isNaN(attnumber)) {
@@ -708,6 +718,7 @@ function gradientColoring(daclass) {
         if (round_number<real_min) real_min = round_number;
         if (round_number>real_max) real_max = round_number;
       }
+    }
 
     // console.log("NodeID_Val", NodeID_Val)
 
@@ -718,14 +729,21 @@ function gradientColoring(daclass) {
     // console.log("the mult: "+themult)
     // console.log(" - - - - - - - - -- - - ")
 
-
     //    [ Scaling node colours(0-255) and sizes(2-7) ]
     var Min_color = 0;
     var Max_color = 255;
     var Min_size = 1;
     var Max_size= 8;
+    var setSize = (TW.facetOptions[daclass] && TW.facetOptions[daclass].setsize)
     for(var nid in NodeID_Val) {
-        var newval_color = Math.round( ( Min_color+(NodeID_Val[nid]["round"]-real_min)*((Max_color-Min_color)/(real_max-real_min)) ) );
+        var newval_color
+        // special case: all nodes have the same size
+        if (real_min == real_max) {
+          newval_color = 0
+        }
+        else {
+          newval_color = Math.round( ( Min_color+(NodeID_Val[nid]["round"]-real_min)*((Max_color-Min_color)/(real_max-real_min)) ) );
+        }
         var hex_color = rgbToHex(255, (255-newval_color) , 0)
 
         let n = TW.partialGraph.graph.nodes(nid)
@@ -736,7 +754,7 @@ function gradientColoring(daclass) {
           n.customAttrs.altgrey_color = "rgba("+(hex2rgba(hex_color).slice(0,3).join(','))+",0.4)"
 
           // optionally changing size
-          if (TW.facetOptions[daclass] && TW.facetOptions[daclass].setsize) {
+          if (setSize) {
             var newval_size = Math.round( ( Min_size+(NodeID_Val[nid]["round"]-real_min)*((Max_size-Min_size)/(real_max-real_min)) ) );
             n.size = newval_size;
           }
@@ -752,8 +770,14 @@ function gradientColoring(daclass) {
     // Edge precompute alt_rgb by new source-target nodes-colours combination
     repaintEdges()
 
-    // remember in clusters
-    let bins = TW.Facets[getActivetypesNames()[0]][daclass]
+    // remember in clusters of each requested type
+    for (var k in forTypes) {
+      let ty = forTypes[k]
+      TW.gui.handpickedcolors[ty] = {
+        'alton': true,
+        'altattr': daclass,
+      }
+      let bins = TW.Facets[ty][daclass]
       if (bins && bins.invIdx) {
         for (var i in bins.invIdx) {
           if (bins.invIdx[i].labl != '_non_numeric_') {
@@ -778,10 +802,11 @@ function gradientColoring(daclass) {
           }
         }
       }
+    }
 
     // NB legend will group different possible values using
-    //    precomputed ticks from TW.Facets.terms[daclass]
-    set_ClustersLegend ( daclass)
+    //    precomputed ticks from TW.Facets[type][daclass]
+    updateColorsLegend (daclass, forTypes)
 
     TW.partialGraph.render();
 }
@@ -808,15 +833,27 @@ function repaintEdges() {
           if (src && tgt) {
             let src_color
             let tgt_color
-            if (TW.gui.handpickedcolor) {
+
+            // handpickedcolors on multiple types may or may not affect
+            // a given edge so we need the useAltColor individual flag
+            let useAlt = false
+
+            if (TW.gui.handpickedcolors[src.type].alton) {
               src_color = src.customAttrs.alt_color || '#555'
-              tgt_color = tgt.customAttrs.alt_color || '#555'
+              useAlt = true
             }
-            else {
+            else
               src_color = src.color || '#555'
-              tgt_color = tgt.color || '#555'
+
+            if (TW.gui.handpickedcolors[tgt.type].alton) {
+              tgt_color = tgt.customAttrs.alt_color || '#555'
+              useAlt = true
             }
+            else
+              tgt_color = tgt.color || '#555'
+
             e.customAttrs.alt_rgb = sigmaTools.edgeRGB(src_color,tgt_color)
+            e.customAttrs.useAltColor = useAlt
             // we don't set e.color because opacity may vary if selected or not
           }
         }
@@ -830,10 +867,12 @@ function repaintEdges() {
 //         (good for values centered around a neutral zone)
 // NB - binning is done at parseCustom (cf. TW.Facets)
 //    - number of bins can be specified by attribute name in TW.facetOptions[daclass]["n"]
-function heatmapColoring(daclass) {
+function heatmapColoring(daclass, forTypes) {
   var binColors
   var doModifyLabel = false
-  var actypes = getActivetypesNames()
+
+  // let's go
+  graphResetLabelsAndSizes()    // full loop
 
   // default value
   let nColors = TW.conf.legendsBins || 5
@@ -848,30 +887,34 @@ function heatmapColoring(daclass) {
     }
   }
 
-  // we have no specifications yet for colors and legends on multiple types
-  if (actypes.length > 1) {
-    console.warn("colors by bins will only color nodes of type 0")
+  if (typeof forTypes != 'array' || ! forTypes.length) {
+    // default strategy on multiple types: color all types that have the attr
+    forTypes = getActivetypesNames().filter(function(ty){
+      return daclass in TW.Facets[ty]
+    })
   }
 
-  var ty = actypes[0]
+  for (var k in forTypes) {
+
+    var ty = forTypes[k]
+
+    // global flag
+    TW.gui.handpickedcolors[ty] = {
+      'alton': true,
+      'altattr': daclass,
+    }
 
     // our binning
     var tickThresholds = TW.Facets[ty][daclass].invIdx
 
     // verifications
     if (tickThresholds.length - 1 != nColors) {
-    console.warn (`heatmapColoring setup mismatch: TW.Facets ticks ${tickThresholds.length} - 1 non_numeric from scanAttributes should == nColors ${nColors}`)
+      console.log (`heatmapColoring setup mismatch: TW.Facets ticks ${tickThresholds.length} - 1 non_numeric from scanAttributes should == nColors ${nColors}`)
       nColors = tickThresholds.length - 1
     }
 
     binColors = getHeatmapColors(nColors)
 
-  // let's go
-  graphResetLabelsAndSizes()    // full loop
-
-  // global flag
-  TW.gui.handpickedcolor = true
-
     // use our valueclass => ids mapping
     for (var k in tickThresholds) {
 
@@ -910,32 +953,43 @@ function heatmapColoring(daclass) {
       // remember
       tickThresholds[k].col = theColor
     }
+  }
 
   // Edge precompute alt_rgb by new source-target nodes-colours combination
   repaintEdges()
 
-  set_ClustersLegend ( daclass )
+  updateColorsLegend ( daclass, forTypes )
 
   TW.partialGraph.render();
 }
 
 
-function clusterColoring(daclass) {
+function clusterColoring(daclass, forTypes) {
 
-    graphResetLabelsAndSizes()    // full loop
+    graphResetLabelsAndSizes()    // full loop (could be avoided most times if flag in sstate)
+
+    if (typeof forTypes != 'array' || ! forTypes.length) {
+      // default strategy on multiple types: color all types that have the attr
+      forTypes = getActivetypesNames().filter(function(ty){
+        return daclass in TW.Facets[ty]
+      })
+    }
 
     // louvain needs preparation
     if(daclass=="clust_louvain") {
         if(!TW.SystemState().LouvainFait) {
             try {
-              RunLouvain()
+              RunLouvain(function() {
                 TW.SystemState().LouvainFait = true
+                clusterColoring("clust_louvain")
+              })
             }
             catch(e) {
               TW.SystemState().LouvainFait = false
               console.warn("skipped error on louvain, falling back to default colors")
               daclass == 'clust_default'
             }
+            return
         }
     }
 
@@ -949,10 +1003,10 @@ function clusterColoring(daclass) {
         }
 
         // reset the global state
-        TW.gui.handpickedcolor = false
+        TW.gui.handpickedcolorsReset()
+
     }
     else {
-
       let colList = []
       if (TW.conf.randomizeClusterColors) {
         // shuffle on entire array is better than random sorting function on each element
@@ -964,8 +1018,10 @@ function clusterColoring(daclass) {
 
       let nColors = TW.gui.colorList.length
 
+      for (var k in forTypes) {
+        let typeName = forTypes[k]
+        let facets = TW.Facets[typeName][daclass]
 
-      let facets = TW.Facets[getActivetypesNames()[0]][daclass]
         if (facets && facets.invIdx) {
           for (var i in facets.invIdx) {
             let valGroup = facets.invIdx[i]
@@ -992,7 +1048,7 @@ function clusterColoring(daclass) {
                 let theNode = TW.partialGraph.graph.nodes(valGroup.nids[j])
                 if (theNode) {
                   theNode.customAttrs.alt_color = theColor
-                theNode.customAttrs.altgrey_color = "rgba("+rgbColStr+",0.4)"
+                  theNode.customAttrs.altgrey_color = "rgba("+rgbColStr+","+TW.conf.sigmaJsDrawingProperties.twNodesGreyOpacity+")"
                 }
               }
             }
@@ -1003,13 +1059,15 @@ function clusterColoring(daclass) {
         }
         // fallback on old, slower strategy if scanAttributes inactive
         else {
-        for(var nid in TW.Nodes) {
-            var the_node = TW.partialGraph.graph.nodes(nid)
+          let nids = TW.ByType[TW.catDict[typeName]]
+          for (var j in nids) {
+            let nid = nids[j]
+            let the_node = TW.partialGraph.graph.nodes(nid)
 
             if (the_node) {
 
               // POSS: use "hidden" in filters instead of remove/readd
-              //       then this condition would be more useful here
+              //  typeName     then this condition would be more useful here
               if (! the_node.hidden) {
                 var attval = ( !isUndef(the_node.attributes) && !isUndef(the_node.attributes[daclass]) )? the_node.attributes[daclass] : TW.partialGraph.graph.nodes(nid)[daclass];
 
@@ -1033,15 +1091,18 @@ function clusterColoring(daclass) {
             }
           }
         }
-
         // set the global state
-      TW.gui.handpickedcolor = true
+        TW.gui.handpickedcolors[typeName] = {
+          'alton': true,
+          'altattr': daclass,
+        }
+      }
     }
 
     // Edge precompute alt_rgb by new source-target nodes-colours combination
     repaintEdges()
 
-    set_ClustersLegend ( daclass )
+    updateColorsLegend ( daclass, forTypes )
     TW.partialGraph.render();
 }
 

twpresets/settings_explorerjs.comex.js

@@ -21,7 +21,7 @@ TW.conf = (function(TW){
 
   // ...or remote bridge to default source api ajax queries
   TWConf.sourceAPI={}
-  TWConf.sourceAPI["nodetypes"] = {"node0": "NGram", "node1": "Document" }
+  TWConf.sourceAPI["nodetypes"] = {"node0": "Keywords", "node1": "Scholars" }
   TWConf.sourceAPI["forNormalQuery"] = "services/api/graph"
   TWConf.sourceAPI["forFilteredQuery"] = "services/api/graph"
 
@@ -251,7 +251,7 @@ TW.conf = (function(TW){
                                       // "default" for white background
 
       // not selected <=> (1-greyness)
-      twNodesGreyOpacity: .4,                       // smaller value: more grey
+      twNodesGreyOpacity: .5,                       // smaller value: more grey
       twBorderGreyColor: "rgba(100, 100, 100, 0.5)",
       twEdgeGreyColor: "rgba(100, 100, 100, 0.25)",
   };

twpresets/settings_explorerjs.devdefault.js

@@ -21,7 +21,7 @@ TW.conf = (function(TW){
 
   // ...or remote bridge to default source api ajax queries
   TWConf.sourceAPI={}
-  TWConf.sourceAPI["nodetypes"] = {"node0": "NGram", "node1": "Document" }
+  TWConf.sourceAPI["nodetypes"] = {"node0": "Keywords", "node1": "Scholars" }
   TWConf.sourceAPI["forNormalQuery"] = "services/api/graph"
   TWConf.sourceAPI["forFilteredQuery"] = "services/api/graph"