frontend: Add non-Interactive mode (#142)

frontend/src/App.svelte

@@ -30,6 +30,7 @@
   let show_menu: boolean = false;
   let show_legend: boolean = true;
   let show_timebar: boolean = false;
+  $: nonInteractiveState = true;
 
   let customTheme: Object = config.Theme.ColorBlind;
   let themeMap: Map<string, any> = new Map(Object.entries(customTheme));
@@ -71,6 +72,44 @@
     }
   }
 
+  // non-interactive mode variables
+  let show_message: boolean = false;
+  let dayToDisplay: string = null;
+  let dayLastEventRecieved: number = 0;
+  let recievedNewNode: boolean = false;
+  let displayTime: string = null;
+  let displayDate: string = null;
+
+  const displayInfoMessage = () => {
+    //After 1 minute of no nodes recieved, a message is displayed.
+    let time: Date = new Date();
+    if (time.getDate() == dayLastEventRecieved) {
+      dayToDisplay = "TODAY";
+    } else if (time.getDate() - dayLastEventRecieved == 1) {
+      dayToDisplay = "YESTERDAY";
+    } else if (time.getDate() - dayLastEventRecieved > 1) {
+      dayToDisplay = displayDate;
+    }
+
+    if (recievedNewNode == false && dayToDisplay != null) {
+      show_message = true;
+      nonInteractiveState = true;
+      console.log("received no new node");
+    } else {
+      show_message = false;
+    }
+  };
+
+  let ms = 60000;
+  let interval = setInterval(displayInfoMessage, ms); // set timer to run every 1 minute
+
+  // timer function to wait 1 minute to check if nodes are still being received,
+  // if no new nodes after 1 minute, message for latest node received is displayed
+  const resetTimer = () => {
+    clearInterval(interval); // interval is reset every minute
+    interval = setInterval(displayInfoMessage, ms);
+  };
+
   const consume_query = async () => {
     const layout = new StatefulLayout();
     awaiting_query_request = true;
@@ -83,6 +122,25 @@
       layout.apply(event, graph_options);
       graph_elem.push(event);
 
+      graph_elem.nonInteractiveMode(event, nonInteractiveState);
+
+      //every time a node is pushed to the graph the variables are updated
+      let timeJson: number = event.time;
+      let time: Date = new Date(timeJson);
+      dayLastEventRecieved = time.getDate();
+      displayDate = time.toLocaleDateString([], {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+      });
+      displayTime = time.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+      recievedNewNode = true;
+      show_message = false;
+
       // TODO: Find a better way to do this
       if (once) {
         graph_elem.focusNode(event.id);
@@ -91,6 +149,10 @@
 
       legend = layout.getNodeStyle();
     }
+
+    recievedNewNode = false;
+    console.log("stoped recieving nodes");
+    resetTimer(); // method to reset timer
   };
 
   const submit_state_query = () => submit_query(current_query);
@@ -184,6 +246,10 @@
     (show_timebar = !show_timebar), graph_elem.updateTimeBar(show_timebar);
   };
 
+  const toggleInteractiveMode = () => {
+    nonInteractiveState = !nonInteractiveState;
+  };
+
   const options = {
     width: 400,
     height: 400,
@@ -263,6 +329,13 @@
       data={{}}
     />
   </div>
+  <G6Graph
+    on:nodeselected={on_node_selected}
+    bind:this={graph_elem}
+    bind:nonInteractiveState
+    {options}
+    data={{}}
+  />
 </div>
 
 <style lang="postcss" global>

frontend/src/components/G6Graph.svelte

@@ -9,6 +9,9 @@
 
   export let options = {};
   export let data = {};
+  export let nonInteractiveState: boolean;
+
+  let nodePoint: number = 0;
 
   let container: HTMLElement;
   let graph: Graph | null;
@@ -235,12 +238,10 @@
 
     graph.changeData(data);
     resizeGraph();
-
     return () => {
       graph.destroy();
     };
   });
-
   $: {
     if (data && graph) {
       graph.changeData(data);

frontend/src/components/SideBar.svelte

@@ -4,14 +4,22 @@
    export let show_menu: boolean;
    export let show_legend: boolean;
    export let show_timebar: boolean;
+   export let interactiveMode: boolean;
 
    export let updateTimeBarPlaceholder: () => void; //it was called directly inside the div element, now: a method is created inside app.svelt
    export let toggleMenuPlaceholder: () => void;  
    export let toggleLegendPlaceholder: () => void;
+   export let toggleInteractiveModePlaceholder: () => void;
 
 </script>
 <div class="flex h-screen w-16">
     <ul class="menu grid justify-items-center content-end py-3  h-screen shadow-large bg-base-300">
+      <li> 
+        <SvgButton onClickAction={toggleInteractiveModePlaceholder} 
+                btnState= {interactiveMode} 
+                data= "M12.522,10.4l-3.559,3.562c-0.172,0.173-0.451,0.176-0.625,0c-0.173-0.173-0.173-0.451,0-0.624l3.248-3.25L8.161,6.662c-0.173-0.173-0.173-0.452,0-0.624c0.172-0.175,0.451-0.175,0.624,0l3.738,3.736C12.695,9.947,12.695,10.228,12.522,10.4 M18.406,10c0,4.644-3.764,8.406-8.406,8.406c-4.644,0-8.406-3.763-8.406-8.406S5.356,1.594,10,1.594C14.643,1.594,18.406,5.356,18.406,10M17.521,10c0-4.148-3.374-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.147,17.521,10"   
+        />
+      </li>
       <li>
         <SvgButton
             onClickAction= {toggleMenuPlaceholder}