Merge pull request #6 from dalmolingroup/feat/group-components

feat: groups and packs nodes outside the largest connected component

Author: daniloimparato

R/app.R

@@ -25,26 +25,20 @@ easylayout <- function(graph) {
   # From github.com/daniloimparato/easylayout_old/blob/fdb800aec4852dddcdaec11a4bae1dc1c5d770b9/R/vivagraph.R
   precompute_iterations   = 1000
   initial_size_multiplier = 75
-  pin_nodes               = FALSE
-  pin_threshold           = 4
-  pinned_cols             = 2
-  pinned_rows             = "auto"
-  pinned_size_multiplier  = 20
-  lcc_margin_left         = 300
 
   # Nodes must have some sort of identifier.
   # Falls back to 1, 2, 3... if "name" is not available.
   if (is.null(igraph::V(graph)$name)) {
     igraph::V(graph)$name <- as.character(1:igraph::vcount(graph))
   }
 
-  if (pinned_rows == "auto") {
-    pinned_rows <- 0
-  }
-
-  subgraphs <- igraph::decompose.graph(graph)
-  subgraphs_sizes <- sapply(subgraphs, igraph::vcount)
-  subgraphs_to_pin <- subgraphs_sizes <= pin_threshold
+  g_components <- igraph::components(graph)
+  largest_component <- g_components$csize |> which.max()
+  new_attribute <- ifelse(
+    test = g_components$membership == largest_component,
+    yes = NA,
+    no = as.character(g_components$membership)
+  )
 
   # Magic precomputing
   vertices <- igraph::as_data_frame(graph, "vertices")
@@ -82,6 +76,8 @@ easylayout <- function(graph) {
     igraph::V(graph)$y <- layout[,2]
   }
 
+  igraph::V(graph)$component <- new_attribute
+
   graph_json <- jsonlite::toJSON(list(
     nodes = igraph::as_data_frame(graph, "vertices"),
     links = igraph::as_data_frame(graph, "edges")

inst/www/assets/index.css

@@ -14,7 +14,7 @@
   // Speed dial imports
   import { fly } from "svelte/transition";
   import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { AdjustmentsHorizontalSolid, DrawSquareSolid, DotsHorizontalOutline, PauseSolid, PlaySolid, UploadSolid, ReplySolid } from 'flowbite-svelte-icons';
+  import { AdjustmentsHorizontalSolid, DrawSquareSolid, DotsHorizontalOutline, PauseSolid, PlaySolid, UploadSolid, ReplySolid, ObjectsColumnSolid, } from 'flowbite-svelte-icons';
 
   // Select imports
   import { Label, Select, Range } from "flowbite-svelte";
@@ -26,11 +26,15 @@
 
   let currentState = States.SIMULATING;
 
+  let editorComponent;
+
   let graph;
   let layoutInstance;
 
   let selectedLayoutName = "viva";
 
+  let usePrecomputedPositions = true;
+
   $: selectedLayout = layoutSettings.find((l) => l.value === selectedLayoutName);
   $: if (graph) {
     let settings = {};
@@ -61,9 +65,17 @@
   }
 
   function toggleEditorMode() {
-    $isEditorMode = !$isEditorMode;
-    if ($isEditorMode) $isSimulationRunning = false;
-    currentState = $isEditorMode ? States.EDITING : States.SIMULATING;
+    if ($isEditorMode) {
+      // Discarding active selection is just an easy way to avoid transforming
+      // the relative selection coordinates to canvas coordinates
+      editorComponent.discardActiveSelection();
+      $isSimulationRunning = false;
+      $isEditorMode = false;
+      currentState = States.SIMULATING;
+    } else {
+      $isEditorMode = true;
+      currentState = States.EDITING;
+    }
   }
 
   let sidebarExpanded = true;
@@ -74,6 +86,9 @@
 
   function transmitCoordinatesBackToShiny() {
     let coordinates = [];
+
+    if ($isEditorMode) editorComponent.persistNodePositions();
+
     graph.forEachNode(function(node) {
       var pos = layoutInstance.getNodePosition(node.id);
       coordinates.push({ x: pos.x, y: pos.y });
@@ -94,7 +109,7 @@
   });
 </script>
 
-{#if sidebarExpanded}
+{#if sidebarExpanded && !$isEditorMode}
 <aside
   id="expanded-sidebar"
   class="fixed top-0 left-0 z-40 w-48 h-screen overflow-hidden"
@@ -158,10 +173,10 @@
   <div class="flex flex-grow bg-slate-50">
     {#if graph && !$isEditorMode}
       {#key selectedLayoutName}
-        <Graph {graph} layout={layoutInstance} />
+        <Graph {graph} layout={layoutInstance} bind:usePrecomputedPositions />
       {/key}
     {:else if $isEditorMode}
-      <Editor {graph} />
+      <Editor {graph} layout={layoutInstance} bind:this={editorComponent}/>
     {:else}
       <p>Loading graph....</p>
     {/if}
@@ -185,6 +200,9 @@
     <SpeedDialButton name="Simulation" on:click={toggleEditorMode}>
       <ReplySolid class="w-6 h-6" />
     </SpeedDialButton>
+    <SpeedDialButton name="Pack components" on:click={editorComponent.packComponents}>
+      <ObjectsColumnSolid class="w-6 h-6" />
+    </SpeedDialButton>
     {:else}
     <SpeedDialButton name="Edit" on:click={toggleEditorMode}>
       <DrawSquareSolid class="w-6 h-6" />