influence graph

css/main.css

@@ -6,6 +6,13 @@ body {
     background: #9a9a9a;
 }
 
+@media (min-width: 1080px) {
+    body {
+        margin-left: 15%;
+        margin-right: 15%;
+    }
+}
+
 .title {
     display: block;
     font-size: 2em;
@@ -18,14 +25,22 @@ body {
     border-radius: 1em 0px 0px 0px;
 }
 
-img {
+img, object {
     width: 100%;
     height: auto;
     box-shadow: 1px 2px 6px 0px black;
     border-radius: 5px;
 }
 
-img[src=""] {
+object {
+    background-color: white;
+    min-height: 520px;
+    width: calc(100% - calc(50% - 250px));
+    overflow-x: hidden;
+    padding-left: calc(50% - 250px);
+}
+
+img[src=""], object[data=""] {
     display: none;
 }
 
@@ -39,5 +54,5 @@ img[src=""] {
 
 select, button {
     padding: 3px;
-    width: 25%;
+    width: 200px;
 }
\ No newline at end of file

index.html

@@ -30,6 +30,23 @@
         </div>
         <img id="comp" src=""/>
       </div>
+      <div class="layout-item" layout-name="Influence Graph">
+        <div class="title">Influence Graph</div>
+        <div class="comp-settings">
+          Show
+          <select name="ig-v" id="ig-v">
+            <option value="">--Please choose variable--</option>
+          </select>
+          influence graph at depth
+          <select name="ig-d" id="ig-d">
+            <option value="1">1</option>
+            <option value="2" selected>2</option>
+            <option value="3">3</option>
+          </select>
+          <button id="showgraph">GO</button>
+        </div>
+        <object id="ig" data="" type="text/html"></object>
+      </div>
     </div>
   </body>
 </html>
\ No newline at end of file

js/main.js

@@ -20,6 +20,7 @@ function connect() {
         if (data.type == "variables") {
             let va = '<option value="">--Please choose variable A--</option>';
             let vb = '<option value="">--Please choose variable B--</option>';
+            let v = '<option value="">--Please choose variable--</option>';
             
             let ini = data.data.ini;
             for (let k = 0; k < ini.length; k++) {
@@ -30,14 +31,18 @@ function connect() {
             for (let k = 0; k < vars.length; k++) {
                 va += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
                 vb += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
+                v  += `<option value="${vars[k].name}">${vars[k].name} (${vars[k].definition})</option>`;
             }
             document.getElementById('comp-va').innerHTML = va;
             document.getElementById('comp-vb').innerHTML = vb;
+            document.getElementById('ig-v').innerHTML = v;
             backend.init();
         } else if (data.type == "img") {
             document.getElementById('world').src = data.data;
         } else if (data.type == "imgcmp") {
             document.getElementById('comp').src = data.data;
+        } else if (data.type == "igraph") {
+            document.getElementById('ig').data = data.data;
         }
     })
     websocket.addEventListener("open", () => {
@@ -64,4 +69,12 @@ document.getElementById('compare').addEventListener('click', () => {
     if (va != "" && vb != "") {
         send(JSON.stringify({type: 'compare', va: va, vb: vb}));
     }
+})
+
+document.getElementById('showgraph').addEventListener('click', () => {
+    let v = document.getElementById('ig-v').value;
+    let d = document.getElementById('ig-d').value;
+    if (v != "" && d != "") {
+        send(JSON.stringify({type: 'igraph', v: [v], depth: parseInt(d)}));
+    }
 })
\ No newline at end of file

worldsim.py

@@ -59,6 +59,11 @@ class World:
         self.w.plot([va, vb], rescale=True, title='Comparison between {} and {}'.format(va, vb))
         plt.savefig('cmp-{}.png'.format(name), bbox_inches='tight')
 
+    def graph(self, name, v, depth):
+        w = World3(1)
+        w.run()
+        w.show_influence_graph(variables=v, depth = depth).show('ig-{}.html'.format(name))
+
 clients = {}
 async def handler(websocket):
     print("New client: {}".format(websocket.id))
@@ -78,6 +83,9 @@ async def handler(websocket):
             elif data['type'] == 'compare':
                 clients[websocket.id]['w'].compare(websocket.id, data['va'], data['vb'])
                 await websocket.send(json.dumps({'type': 'imgcmp', 'data': "cmp-{}.png".format(websocket.id)}))
+            elif data['type'] == 'igraph':
+                clients[websocket.id]['w'].graph(websocket.id, data['v'], data['depth'])
+                await websocket.send(json.dumps({'type': 'igraph', 'data': "ig-{}.html".format(websocket.id)}))
             elif data['type'] == 'update':
                 clients[websocket.id]['w'].updateVariable(data['name'], data['value'])
 
@@ -87,6 +95,7 @@ async def handler(websocket):
             del clients[websocket.id]
             os.system('rm -rf wg-{}.png'.format(websocket.id))
             os.system('rm -rf cmp-{}.png'.format(websocket.id))
+            os.system('rm -rf ig-{}.html'.format(websocket.id))
             break
         print(" >{}".format(message))
 
@@ -113,6 +122,7 @@ def thread_wsserver():
 if __name__ == "__main__":
     os.system('rm -rf wg-*.png')
     os.system('rm -rf cmp-*.png')
+    os.system('rm -rf ig-*.html')
 
     server = threading.Thread(target=thread_server)
     server.start()