App.vue

<template>   
  <v-app class= "grey lighten-2">
    
    <Navbar/>
    <v-main class="grey lighten-2" align="center">
      <!-- set to true for normal grpcClient -->
      <gRPCPointclient v-if="false"  v-on:newPoint="addPoint($event)" />
      <gRPCProjectorClient v-if="true" v-on:newPoint="addPoint($event)" />
      <ScatterPlot ref = "scatter"/>
      <Counter ref = "counter"/>

    </v-main>
  </v-app>
</template>

<script>
import Navbar from './components/Navbar';
import gRPCProjectorClient from './components/gRPCProjectorClient'
import gRPCPointclient from './components/gRPCPointclient'
import ScatterPlot from './components/ScatterPlot'
import { interval } from 'rxjs';
import Counter from './components/counter'
export default {
  name: 'App',

  components: {
    Navbar,
    gRPCProjectorClient,
    gRPCPointclient,
    ScatterPlot,
    Counter  },
  created(){    
    //To handle to insane amount of points being send over
    const interValsource = interval(1000);
    interValsource.subscribe(val => this.distributeStreams(val));   
  },

  data(){
    return {
      pointList: [],
      streamStarted: false,
      pointCount: 0
    }
  },
  
  methods: {
    addPoint: function(point){
      this.streamStarted = true;
      this.pointList.push(point);
      if(this.pointList.length  == 1){
        console.log("Received point from ID",point.getId())
      }
    },
    //Update all the components which rely on the data
    //Is this the best way to do this?
    distributeStreams: function(val){
      //REMOVE THIS LATER
      if(val == -1){
        return
      }
      if(!this.streamStarted){
        return;
      }

      if(this.pointList.length <= this.pointCount){
        return;
      }

      //Give the point to all components

      //var index = Math.floor(Math.random() * Math.floor(this.pointList.length));
      this.$refs.scatter.addPointToPlot(this.pointList[this.pointCount]);
      this.$refs.counter.setCounter(this.pointList.length)

      this.pointCount += 1;
    }
    }
  };
</script>