Add api call to fetch data. Update graph display to use fetched data

Author: sruti

backend-aws/handler.py

@@ -7,6 +7,11 @@
 def format_response(status_code, body):
     response = {
         "statusCode": status_code,
+        "headers": {
+                "Access-Control-Allow-Credentials": True,
+                "Access-Control-Allow-Origin": "*",
+                "Content-Type": "application/json",
+            },
         "body": json.dumps(body)
     }
     return response

backend-aws/requirements.txt

@@ -0,0 +1,8 @@
+boto3==1.9.89
+botocore==1.12.89
+docutils==0.14
+jmespath==0.9.3
+python-dateutil==2.8.0
+s3transfer==0.2.0
+six==1.12.0
+urllib3==1.24.1

index.html

@@ -34,45 +34,45 @@
     </div>
 
     <script>
-        const web = document.getElementById('idea-web');
-        const data = {
-            nodes: [
-                {
-                    id: 0, val: 1, name: "Dance Visualizer", tags: new Set(["computer vision", "dance"]),
-                    description: "Take old dance videos as input and track movements to create visualizations", creator: "Sruti"
-                },
-                {
-                    id: 1, val: 1, name: "Route Optimizer", tags: new Set(["routing", "constraint optimization"]),
-                    description: "Find optimal route for multiple locations and time constraints", creator: "Sruti"
-                },
-                {
-                    id: 2, val: 1, name: "Dance Moves Database", tags: new Set(["computer vision", "dance", "machine learning"]),
-                    description: "Analyze dance moves from different styles to learn and understand history", creator: "Marko"
-                },
-                {
-                    id: 3, val: 1, name: "Meet in the Middle", tags: new Set(["routing", "constraint optimization", "machine learning"]),
-                    description: "Find a convenient meeting point for two people in different locations", creator: "Dan"
-                }],
-            links: [{ source: 0, target: 2 }, { source: 1, target: 3 }, { source: 2, target: 3 }]
-        };
-
-        const Graph = ForceGraph3D()
-            (web)
-            .graphData(data)
-            .nodeLabel('name')
-            .onNodeHover(node => web.style.cursor = node ? 'pointer' : null)
-            .onNodeClick(node => {
-                // Aim at node from outside it
-                const distance = 40;
-                const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
-
-                Graph.cameraPosition(
-                    { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
-                    node, // lookAt ({ x, y, z })
-                    3000  // ms transition duration
-                );
-                detailDisplay(node);
-            });
+        displayGraph();
+
+        async function displayGraph() {
+            const web = document.getElementById('idea-web');
+            let newData
+            try {
+                newData = await getData()
+                const Graph = ForceGraph3D()
+                    (web)
+                    .graphData(newData)
+                    .nodeLabel('name')
+                    .onNodeHover(node => web.style.cursor = node ? 'pointer' : null)
+                    .onNodeClick(node => {
+                        // Aim at node from outside it
+                        const distance = 40;
+                        const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+                        Graph.cameraPosition(
+                            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
+                            node, // lookAt ({ x, y, z })
+                            3000  // ms transition duration
+                        );
+                        detailDisplay(node);
+                    });
+            }
+            catch (error) {
+                console.log(error)
+            }
+        }
+
+        function getData() {
+            return fetch('https://syar2tbuna.execute-api.us-east-1.amazonaws.com/dev/data')
+                .then(response => {
+                    if (response.ok) {
+                        return response.json()
+                    } throw new Error(response.statusText)
+                })
+                .catch(error => { throw new Error(error.message) });
+        }
 
         function onAddItemClick() {
             const modal = document.getElementById("modal-idea-new");