communities edge color, new network

l-pa · May 12, 2020 · 09ca26d · 09ca26d
1 parent 5d91bd6
commit 09ca26d
Show file tree

Hide file tree

Showing 5 changed files with 20,990 additions and 8 deletions.
diff --git a/src/App.css b/src/App.css
@@ -54,6 +54,11 @@ hr {
   height: 30em;
 }
 
+.border-h {
+  border: 2px solid white;
+  width: 14em;
+}
+
 .selector {
   position: absolute;
   left: 30%;
@@ -88,6 +93,7 @@ hr {
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   margin-top: 1em;
   margin-bottom: 1em;
+  width: 25vw;
 }
 
 .example p {
@@ -108,6 +114,9 @@ hr {
   .border {
     display: none;
   }
+  .example {
+    width: 100%;
+  }
 }
 
 .scrollable {

diff --git a/src/App.js b/src/App.js
@@ -111,7 +111,6 @@ function App() {
               <div className="center">
                 <div className="left">
                   <h2>Custom network</h2>
-                  <p>GEXF - 1.2+ / JSON / GML</p>
                   <input
                     type="file"
                     accept=".gexf, .json, .gml"
@@ -125,6 +124,8 @@ function App() {
                     }}
                   />
                   <br />
+                  <p>GEXF - 1.2+ / JSON / GML</p>
+                  <div className="border-h" />
                   <br />
                   <input
                     type="checkbox"
@@ -142,15 +143,20 @@ function App() {
                     tabIndex="0"
                     onClick={() => {
                       setExample(
-                        "https://raw.githubusercontent.com/l-pa/network-app/master/src/networks/java_packages.json",
-                        "json",
-                        "java_packages"
+                        "https://raw.githubusercontent.com/l-pa/network-app/master/src/networks/diseasome.gexf",
+                        "gexf",
+                        "diseasome"
                       );
                     }}
                     className="example"
                   >
-                    <p>Java packages.json</p>
-                    <small>1.5k nodes, 8k edges</small>
+                    <p>Diseasome.gexf</p>
+                    <small>
+                      A network of disorders and disease genes linked by known
+                      disorder–gene associations, indicating the common genetic
+                      origin of many diseases.
+{" "}
+                    </small>
                   </div>
                   <div
                     role="button"

diff --git a/src/components/Network.js b/src/components/Network.js
@@ -289,6 +289,7 @@ function Network(props) {
             lasso={lasso}
             fileName={props.fileName}
             setNodeGroups={setNodeGroups}
+            nodeGroups={nodeGroups}
             groupArea={groupArea}
             selectNodesButton={groupArea}
           />

diff --git a/src/components/Settings.js b/src/components/Settings.js
@@ -227,7 +227,7 @@ export default function Settings(props) {
         break;
     }
     window.network.refresh();
-  }, [edgeColor, nodeColor, nodeRealColor]);
+  }, [edgeColor, nodeColor, nodeRealColor, props.nodeGroups]);
 
   useEffect(() => {
     // TODO
@@ -671,7 +671,6 @@ export default function Settings(props) {
                 .nodes(nodes)
                 .edges(window.network.graph.edges());
               const result = community();
-              console.log(result);
               const palette = iwanthue(Math.max(...Object.values(result)) + 1, {
                 clustering: "force-vector",
                 seed: Math.random()