[MERGE]

dist/styles/bootstrap-darkster.css

@@ -9495,6 +9495,10 @@ input[type=range]:-moz-focusring {
   margin-bottom: 12px;
 }
 
+.graph-selected-nodes__item {
+  display: inline-block;
+  padding: 2px;
+}
 .graph-selected-nodes__item:not(:last-child) {
   margin-bottom: 4px;
 }

dist/styles/bootstrap-default.css

@@ -9448,6 +9448,10 @@ input[type=range]:-moz-focusring {
   margin-bottom: 12px;
 }
 
+.graph-selected-nodes__item {
+  display: inline-block;
+  padding: 2px;
+}
 .graph-selected-nodes__item:not(:last-child) {
   margin-bottom: 4px;
 }

dist/styles/bootstrap-greyson.css

@@ -9204,6 +9204,10 @@ input[type=range]:-moz-focusring {
   margin-bottom: 12px;
 }
 
+.graph-selected-nodes__item {
+  display: inline-block;
+  padding: 2px;
+}
 .graph-selected-nodes__item:not(:last-child) {
   margin-bottom: 4px;
 }

dist/styles/bootstrap-herbie.css

@@ -9452,6 +9452,10 @@ input[type=range]:-moz-focusring {
   margin-bottom: 12px;
 }
 
+.graph-selected-nodes__item {
+  display: inline-block;
+  padding: 2px;
+}
 .graph-selected-nodes__item:not(:last-child) {
   margin-bottom: 4px;
 }

dist/styles/bootstrap-monotony.css

@@ -9453,6 +9453,10 @@ input[type=range]:-moz-focusring {
   margin-bottom: 12px;
 }
 
+.graph-selected-nodes__item {
+  display: inline-block;
+  padding: 2px;
+}
 .graph-selected-nodes__item:not(:last-child) {
   margin-bottom: 4px;
 }

src/Gargantext/Components/GraphExplorer/GraphTypes.purs

@@ -39,7 +39,7 @@ newtype Node = Node {
   , children   :: Array String
   , id_        :: String
   , label      :: String
-  , size       :: Int
+  , size       :: Number
   , type_      :: String
   , x          :: Number
   , y          :: Number

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -9,7 +9,6 @@ import Data.Int (toNumber)
 import Data.Map as Map
 import Data.Maybe (Maybe(..), fromJust)
 import Data.Nullable (null, Nullable)
-import Data.Number as DN
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (Tuple(..))
@@ -290,7 +289,11 @@ graphViewCpt = R.memo' $ here.component "graphView" cpt where
 convert :: GET.GraphData -> Tuple (Maybe GET.MetaData) SigmaxT.SGraph
 convert (GET.GraphData r) = Tuple r.metaData $ SigmaxT.Graph {nodes, edges}
   where
-    nodes = foldMapWithIndex nodeFn $ GEU.normalizeNodeSize 1 10000 r.nodes
+    normalizedNodes :: Array GEGT.Node
+    normalizedNodes = GEGT.Node <$> (GEU.normalizeNodeSizeDefault $ (\(GEGT.Node n) -> n) <$> r.nodes)
+    nodes :: Seq.Seq (Record SigmaxT.Node)
+    nodes = foldMapWithIndex nodeFn normalizedNodes
+    nodeFn :: Int -> GEGT.Node -> Seq.Seq (Record SigmaxT.Node)
     nodeFn _i nn@(GEGT.Node n) =
       Seq.singleton {
           borderColor: color
@@ -302,7 +305,7 @@ convert (GET.GraphData r) = Tuple r.metaData $ SigmaxT.Graph {nodes, edges}
         , highlighted: false
         , id    : n.id_
         , label : n.label
-        , size  : DN.log (toNumber n.size + 1.0)
+        , size  : n.size
         --, size: toNumber n.size
         , type  : modeGraphType gargType
         , x     : n.x -- cos (toNumber i)
@@ -343,7 +346,8 @@ modeGraphType Types.Authors     = "square"
 modeGraphType Types.Institutes  = "equilateral"
 modeGraphType Types.Sources     = "star"
 --modeGraphType Types.Terms       = "def"
-modeGraphType Types.Terms       = "circle"
+--modeGraphType Types.Terms       = "circle"
+modeGraphType Types.Terms       = "ccircle"
 
 --------------------------------------------------------------
 

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -509,7 +509,7 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
             [ "text-info", "d-inline" ] $
             show termCount
           ,
-            H.text $ nbsp 1 <> "terms"
+            H.text $ nbsp 1 <> "related terms"
           ,
             -- Expand word cloud
             B.iconButton
@@ -643,11 +643,12 @@ updateTermButtonCpt = here.component "updateTermButton" cpt where
 badgeSize :: Number -> Number -> Number -> String
 badgeSize minSize maxSize size =
   let
-    minFontSize = 10.0
-    maxFontSize = 24.0
+    minFontSize = 7.0
+    maxFontSize = 28.0
     sizeScaled = (size - minSize) / (maxSize - minSize)  -- in [0; 1] range
-    scale' = DN.log (sizeScaled + 1.0) / (DN.log 2.0)  -- in [0; 1] range
-    scale = minFontSize + scale' * (maxFontSize - minFontSize)
+    --scale' = DN.log (sizeScaled + 1.0) / (DN.log 2.0)  -- in [0; 1] range
+    --scale = minFontSize + scale' * (maxFontSize - minFontSize)
+    scale = minFontSize + sizeScaled * (maxFontSize - minFontSize)
 
   in
     show scale <> "px"

src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs

@@ -165,35 +165,42 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
       H.nav
       { className: "graph-toolbar" }
       [
-        B.wad
-        [ "flex-shrink-0" ]
+        H.div
+        { className: "flex-shrink-0" }
         [
-          B.wad
-          [ "d-flex" ]
+          H.div
+          { className: "d-flex" }
           [
-            -- View Settings
+            -- Actions
             B.fieldset
             { className: "graph-toolbar__section"
-            , titleSlot: H.text "View settings"
+            , titleSlot: H.text "Actions"
             }
-            [
-              B.wad
-              [ "d-flex", "justify-content-space-between" ]
-              [
-                B.wad
-                []
             [
               -- resetForceAtlasButton { forceAtlasState, sigmaRef }
               pauseForceAtlasButton { state: forceAtlasState }
+            ,
+              gap
+{-            ,
+              cameraButton
+              { id: graphId'
+              , forceAtlasState
+              , hyperdataGraph: hyperdataGraph'
+              , reloadForest
+              , session: session
+              , sigmaRef: sigmaRef
+              }
+-}
             ]
           ,
-                B.wad
-                []
-                [
-                  centerButton
-                  { forceAtlasState
-                  , sigmaRef
+            -- View Settings
+            B.fieldset
+            { className: "graph-toolbar__section"
+            , titleSlot: H.text "View settings"
             }
+            [
+              centerButton { forceAtlasState
+                           , sigmaRef }
             ,
               gap
             ,
@@ -204,12 +211,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               gap
             ,
-                  louvainToggleButton
-                  { forceAtlasState
-                  , state: showLouvain
-                  }
-                ]
-              ]
+              louvainToggleButton { forceAtlasState
+                                  , state: showLouvain }
             ]
           ]
         ,
@@ -223,20 +226,16 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           }
           [
             -- zoom: 0 -100 - calculate ratio
-            multiSelectEnabledButton
-            { forceAtlasState
-            , state: multiSelectEnabled
-            }
+            multiSelectEnabledButton { forceAtlasState
+                                     , state: multiSelectEnabled }
           ,
             gap
           ,
             -- toggle multi node selection
             -- save button
-            mouseSelectorSizeSlider
-            { forceAtlasState
+            mouseSelectorSizeSlider { forceAtlasState
                                     , sigmaRef
-            , state: mouseSelectorSize
-            }
+                                    , state: mouseSelectorSize }
           ]
         ]
       ,
@@ -245,86 +244,71 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
         { className: intercalate " "
             [ "graph-toolbar__section"
             , "graph-toolbar__section--controls"
-            , "flex-grow-1", "flex-shrink-1"
+            , "flex-grow-1 flex-shrink-1"
             ]
         , titleSlot: H.text "Controls"
         }
         [
-          B.wad
-          [ "d-flex", "gap-2" ]
-          [
-            B.wad
-            [ "flex-grow-1", "px-2", "mb-2"  ]
-            [
-              B.wad
-              [ "d-flex", "justify-content-between", "mb-6" ]
+          H.div
+          { className: "d-flex justify-content-between mb-3" }
           [
             edgeConfluenceControl
             { forceAtlasState
             , range: edgeConfluenceRange
-                , state: edgeConfluence
-                }
+            , state: edgeConfluence }
           {- ,
             edgeWeightControl
             { forceAtlasState
             , range: edgeWeightRange
-                , state: edgeWeight
-                }
+            , state: edgeWeight }
           -}
           ]
         ,
-              B.wad
-              [ "d-flex", "justify-content-between" ]
+          H.div
+          { className: "d-flex justify-content-between" }
           [
             -- change level
             -- file upload
             -- run demo
             -- search button
             -- search topics
-                labelSizeButton
-                { forceAtlasState
+            labelSizeButton { forceAtlasState
+                            , graph
                             , sigmaRef
-                , state: labelSize
-                }
-              ]
+                            , state: labelSize }
           ]
+
         ,
-            B.wad
-            [ "flex-grow-1", "px-2", "mb-2" ]
-            [
-              B.wad
-              [ "d-flex", "justify-content-between", "mb-6" ]
+          H.div
+          { className: "d-flex justify-content-between" }
           [
             -- labels size: 1-4
             nodeSizeControl
             { forceAtlasState
             , range: nodeSizeRange
-                , state: nodeSize
-                }
+            , state: nodeSize }
+
           ]
         ,
-              B.wad
-              [ "d-flex", "justify-content-between" ]
+          H.div
+          { className: "d-flex justify-content-between" }
           [
             -- change level
             -- file upload
             -- run demo
             -- search button
             -- search topics
-                labelRenderedSizeThresholdButton
-                { forceAtlasState
+            labelRenderedSizeThresholdButton { forceAtlasState
                                              , sigmaRef
-                , state: labelRenderedSizeThreshold
-                }
+                                             , state: labelRenderedSizeThreshold }
           -- ,
           --   -- labels size: 1-4
           --   nodeSizeControl
           --   { range: nodeSizeRange
-              --   , state: nodeSize
-              --   }
-              ]
-            ]
+          --   , state: nodeSize }
+
           ]
+
         ]
       ]
 

src/Gargantext/Components/GraphExplorer/Toolbar/SlideButton.purs

@@ -6,6 +6,8 @@ module Gargantext.Components.GraphExplorer.Toolbar.SlideButton
   , mouseSelectorSizeSlider
   ) where
 
+import Data.Array as A
+import Data.Map as Map
 import Data.Maybe (Maybe(..))
 import Data.Number as DN
 import Prelude
@@ -15,7 +17,10 @@ import Reactix.DOM.HTML as H
 import Toestand as T
 
 import Gargantext.Components.Bootstrap.Types (ComponentStatus(Disabled))
+import Gargantext.Components.GraphExplorer.Types as GET
+import Gargantext.Components.GraphExplorer.Utils as GEU
 import Gargantext.Hooks.Sigmax as Sigmax
+import Gargantext.Hooks.Sigmax.Graphology as Graphology
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
@@ -68,6 +73,7 @@ sizeButtonCpt = here.component "sizeButton" cpt where
 
 type LabelSizeButtonProps =
   ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , graph           :: T.Box SigmaxTypes.SGraph
   , sigmaRef        :: R.Ref Sigmax.Sigma
   , state           :: T.Box Number)
 
@@ -76,13 +82,19 @@ labelSizeButton = R2.leaf labelSizeButtonCpt
 labelSizeButtonCpt :: R.Component LabelSizeButtonProps
 labelSizeButtonCpt = here.component "labelSizeButton" cpt
   where
-    cpt { forceAtlasState, sigmaRef, state} _ = do
+    cpt { forceAtlasState, graph, sigmaRef, state} _ = do
+      graph' <- T.useLive T.unequal graph
+
+      let minLabelSize = 1.0
+      let maxLabelSize = 30.0
+      let defaultLabelSize = 14.0
+
       pure $ sizeButton {
           state
         , caption: "Label size"
         , forceAtlasState
-        , min: 1.0
-        , max: 30.0
+        , min: minLabelSize
+        , max: maxLabelSize
         , onChange: \e -> do
           let sigma = R.readRef sigmaRef
           let newValue' = DN.fromString $ R.unsafeEventValue e
@@ -90,11 +102,20 @@ labelSizeButtonCpt = here.component "labelSizeButton" cpt
             Nothing -> pure unit
             Just newValue ->
               Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
+                let ratio = (newValue - minLabelSize) / (defaultLabelSize - minLabelSize)
+                let nodes = SigmaxTypes.graphNodes graph'
+                let nodesResized = (\n@{ size } -> n { size = size * ratio }) <$> nodes
+                let nodesMap = SigmaxTypes.idMap nodesResized
+                Graphology.forEachNode (Sigma.graph s) $ \{ id } -> do
+                  case Map.lookup id nodesMap of
+                    Nothing -> pure unit
+                    Just { size } -> Graphology.mergeNodeAttributes (Sigma.graph s) id { size }
+
                 Sigma.setSettings s {
                     defaultLabelSize: newValue
                   , drawLabels: true
                   , labelSize: newValue
-                  , maxNodeSize: newValue / 2.5
+                  -- , maxNodeSize: newValue / 2.5
                     --, labelSizeRatio: newValue / 2.5
                   }
                 T.write_ newValue state
@@ -145,7 +166,7 @@ mouseSelectorSizeSliderCpt = here.component "mouseSelectorSizeSlider" cpt
           caption: "Selector size (Shift + wheel)"
         , forceAtlasState
         , min: 1.0
-        , max: 50.0
+        , max: 100.0
         , onChange: \e -> do
           let sigma = R.readRef sigmaRef
           let newValue' = DN.fromString $ R.unsafeEventValue e

src/Gargantext/Components/GraphExplorer/Utils.purs

 module Gargantext.Components.GraphExplorer.Utils
   ( stEdgeToGET, stNodeToGET
   , normalizeNodes
+  , normalizeNodeSizeDefault
   , normalizeNodeSize
   , takeGreatestNodeByCluster, countNodeByCluster
   ) where
@@ -13,6 +14,7 @@ import Data.Lens (Lens', lens, over, traversed, (^.))
 import Data.Int (floor, toNumber)
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Data.Newtype (wrap)
+import Data.Number as DN
 import Data.Sequence as Seq
 import Data.Traversable (class Traversable)
 import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
@@ -49,8 +51,16 @@ normalizeNodes ns = GUL.normalizeLens xLens $ GUL.normalizeLens yLens ns
     yLens :: Lens' GEGT.Node Number
     yLens = lens (\(GEGT.Node { y }) -> y) $ (\(GEGT.Node n) val -> GEGT.Node (n { y = val }))
 
-normalizeNodeSize :: forall t. Traversable t => Int -> Int -> t GEGT.Node -> t GEGT.Node
-normalizeNodeSize minSize maxSize ns = over traversed (over sizeLens (\s -> toNumber minSize + (s - sizeMin') * quotient)) ns
+type NodeSize r = { size :: Number | r }
+
+normalizeNodeSizeDefault :: forall t r. Traversable t => t (NodeSize r) -> t (NodeSize r)
+normalizeNodeSizeDefault ns = logSize <$> normalizeNodeSize 50.0 100000.0 ns
+  where
+    logSize (n@{ size }) = n { size = DN.log (size + 1.0) }
+
+normalizeNodeSize :: forall t r. Traversable t =>
+                     Number -> Number -> t (NodeSize r) -> t (NodeSize r)
+normalizeNodeSize minSize maxSize ns = over traversed (over sizeLens (\s -> minSize + (s - sizeMin') * quotient)) ns
   where
     sizes = over traversed (_ ^. sizeLens) ns
     sizeMin = minimum sizes
@@ -62,9 +72,12 @@ normalizeNodeSize minSize maxSize ns = over traversed (over sizeLens (\s -> toNu
     sizeMin' = fromMaybe 0.0 sizeMin
     divisor = maybe 1.0 (\r -> 1.0 / r) range
     quotient :: Number
-    quotient = (toNumber $ maxSize - minSize) * divisor
-    sizeLens :: Lens' GEGT.Node Number
-    sizeLens = lens (\(GEGT.Node { size }) -> toNumber size) $ (\(GEGT.Node n) val -> GEGT.Node (n { size = floor val }))
+    quotient = (maxSize - minSize) * divisor
+    --quotient = (toNumber $ maxSize - minSize) * divisor
+    --sizeLens :: Lens' GEGT.Node Number
+    --sizeLens = lens (\(GEGT.Node { size }) -> size) $ (\(GEGT.Node n) val -> GEGT.Node (n { size = val }))
+    sizeLens :: Lens' { size :: Number | r } Number
+    sizeLens = lens (\{ size } -> size) $ \n val -> (n { size = val })
 
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Nodes/Graph.purs

@@ -98,22 +98,22 @@ nodeCpt = here.component "node" cpt where
               Tuple mMetaData graph = convert hyperdataGraph
             in
               hydrateStore
-              { graph
+              { cacheParams: cache'
+              , graph
+              , graphId
               , hyperdataGraph: loaded
               , mMetaData
-              , graphId
-              , cacheParams: cache'
               }
       }
 
 --------------------------------------------------------
 
 type HydrateStoreProps =
-  ( mMetaData       :: Maybe GET.MetaData
+  ( cacheParams     :: GET.CacheParams
   , graph           :: SigmaxT.SGraph
-  , hyperdataGraph  :: GET.HyperdataGraph
   , graphId         :: GET.GraphId
-  , cacheParams     :: GET.CacheParams
+  , hyperdataGraph  :: GET.HyperdataGraph
+  , mMetaData       :: Maybe GET.MetaData
   )
 
 hydrateStore :: R2.Leaf HydrateStoreProps

src/Gargantext/Hooks/Sigmax/Graphology.js

@@ -18,6 +18,13 @@ export function _mergeNodeAttributes(g, name, attrs) {
   return g.mergeNodeAttributes(name, attrs);
 }
 
+export function _forEachNode(g, fn) {
+  return g.forEachNode(function(_name, attrs) {
+    // NOTE: fn is an effectful function, it wraps `do` in a separate function
+    return fn(attrs)();
+  })
+}
+
 export function _addEdge(g, source, target, e) {
   //return g.addEdge(source, target, e);
 

src/Gargantext/Hooks/Sigmax/Graphology.purs

@@ -27,6 +27,7 @@ foreign import _addNode :: EffectFn3 Graph String (Record Types.Node) String
 foreign import _updateNode :: EffectFn3 Graph String (Record Types.Node -> Record Types.Node) Unit
 foreign import _addEdge :: EffectFn4 Graph String String (Record Types.Edge) String
 foreign import _mergeNodeAttributes :: forall a. EffectFn3 Graph String a Unit
+foreign import _forEachNode :: EffectFn2 Graph (Record Types.Node -> Effect Unit) Unit
 --foreign import _updateEdge :: EffectFn4 Graph String String (Record Types.Edge) String
 foreign import _mapNodes :: forall a. Fn2 Graph (Record Types.Node -> a) (Array a)
 foreign import _filterNodes :: Fn2 Graph (Record Types.Node -> Boolean) (Array Types.NodeId)
@@ -65,9 +66,7 @@ updateNode g node@{ id, borderColor, color, equilateral, hidden, highlighted, ty
 mergeNodeAttributes :: forall a. Graph -> Types.NodeId -> a -> Effect Unit
 mergeNodeAttributes = runEffectFn3 _mergeNodeAttributes
 forEachNode :: Graph -> (Record Types.Node -> Effect Unit) -> Effect Unit
--- TODO Check this: how does FFI translate function of two arguments
--- into PS \x y ?
-forEachNode g fn = pure $ g ... "forEachNode" $ [\_ n -> fn n]
+forEachNode = runEffectFn2 _forEachNode
 mapNodes :: forall a. Graph -> (Record Types.Node -> a) -> Array a
 mapNodes = runFn2 _mapNodes
 filterNodes :: Graph -> (Record Types.Node -> Boolean) -> Array Types.NodeId

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -3,6 +3,8 @@
 import Graph from 'graphology';
 import Sigma from 'sigma';
 import { takeScreenshot } from '../../src/external-deps/sigmajs-screenshot.js';
+import CircleNodeProgram from 'sigma/rendering/webgl/programs/node.fast';
+import ContourCircleNodeProgram from '../../src/external-deps/sigmajs-circle-with-contour.js';
 
 let sigma = Sigma.Sigma;
 console.log('imported sigma', Sigma);
@@ -164,7 +166,14 @@ let sigmaMouseSelector = function(sigma, options) {
 function _sigma(left, right, el, opts) {
   try {
     let graph = new Graph();
-    let s = new sigma(graph, el, opts.settigns);
+    const settings = {
+      nodeProgramClasses: {
+        circle: CircleNodeProgram.default,  // TODO why default? It seems that import should be fixed
+        ccircle: ContourCircleNodeProgram
+      },
+      ...opts.settings
+    };
+    let s = new sigma(graph, el, settings);
     console.log('[_sigma] initializing sigma with el', el, 'opts', opts.settings, 'sigma', s);
     console.log('[_sigma] labelRenderedSizeThreshold', opts.settings.labelRenderedSizeThreshold);
     sigmaMouseSelector(s);

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -9,6 +9,7 @@ import Data.Map as Map
 import Data.Maybe (Maybe(..), fromJust)
 import Data.Sequence as Seq
 import Data.Set as Set
+import Data.Traversable (class Traversable)
 import Data.Tuple (Tuple(..))
 import Partial.Unsafe (unsafePartial)
 import Prelude (class Eq, class Show, map, ($), (&&), (==), (||), (<$>), (<), mod, not)
@@ -107,19 +108,20 @@ graphEdges (Graph {edges}) = edges
 graphNodes :: SGraph -> Seq.Seq (Record Node)
 graphNodes (Graph {nodes}) = nodes
 
+idMap :: forall r t. Traversable t => t { id :: String | r } -> Map.Map String { id :: String | r }
+idMap xs = Map.fromFoldable $ (\x@{ id } -> Tuple id x) <$> xs
+
 edgesGraphMap :: SGraph -> EdgesMap
-edgesGraphMap graph =
-  Map.fromFoldable $ map (\e -> Tuple e.id e) $ graphEdges graph
+edgesGraphMap graph = idMap $ graphEdges graph
 
 edgesFilter :: (Record Edge -> Boolean) -> SGraph -> SGraph
 edgesFilter f (Graph {edges, nodes}) = Graph { edges: Seq.filter f edges, nodes }
 
 nodesMap :: Seq.Seq (Record Node) -> NodesMap
-nodesMap nodes = Map.fromFoldable $ map (\n -> Tuple n.id n) nodes
+nodesMap = idMap
 
 nodesGraphMap :: SGraph -> NodesMap
-nodesGraphMap graph =
-  nodesMap $ graphNodes graph
+nodesGraphMap graph = idMap $ graphNodes graph
 
 nodesFilter :: (Record Node -> Boolean) -> SGraph -> SGraph
 nodesFilter f (Graph {edges, nodes}) = Graph { edges, nodes: Seq.filter f nodes }

src/external-deps/sigmajs-circle-with-contour.js

+// Based on sigma.js/src/rendering/webgl/programs/node.fast.ts
+
+import { NodeDisplayData } from "sigma/types";
+import { floatColor } from "sigma/utils";
+import vertexShaderSource from "sigma/rendering/webgl/shaders/node.fast.vert.glsl";
+import fragmentShaderSource from "sigma/rendering/webgl/shaders/node.fast.frag.glsl";
+import { AbstractNodeProgram } from "sigma/rendering/webgl/programs/common/node";
+import { RenderParams } from "sigma/rendering/webgl/programs/common/program";
+import CircleNodeProgram from 'sigma/rendering/webgl/programs/node.fast';
+
+const POINTS = 2;
+const ATTRIBUTES = 4;
+
+/*
+export default class NodeContourFastProgram extends AbstractNodeProgram {
+  //constructor(gl : WebGLRenderingContext) {
+  constructor(gl) {
+    super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+    this.bind();
+    }
+*/
+
+export default class NodeContourFastProgram extends CircleNodeProgram {
+  //process(data: NodeDisplayData, hidden: boolean, offset: number): void {
+  process(data, hidden, offset) {
+    const array = this.array;
+    let i = offset * POINTS * ATTRIBUTES;
+
+    if (hidden) {
+      // contour
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+
+      // circle
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+      array[i++] = 0;
+
+      return;
+    }
+
+    const color = floatColor(data.color);
+    const black = floatColor('black');
+
+    // contour
+    array[i++] = data.x;
+    array[i++] = data.y;
+    array[i++] = data.size + 1;
+    array[i++] = black;
+
+    // circle
+    array[i++] = data.x;
+    array[i++] = data.y;
+    array[i++] = data.size;
+    array[i] = color;
+}
+
+  //render(params: RenderParams): void {
+  render(params) {
+    if (this.hasNothingToRender()) return;
+
+    const gl = this.gl;
+
+    const program = this.program;
+    gl.useProgram(program);
+
+    gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+    gl.uniform1f(this.scaleLocation, params.scalingRatio);
+    gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+
+    gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+  }
+}

src/sass/_legacy/_graph.sass

@@ -216,6 +216,9 @@
 
   &__item
 
+    display: inline-block
+    padding: 2px
+
     &:not(:last-child)
       margin-bottom: space-x(0.5)