From c57ec0c9ae61afe17d33e8ee92d3712fbbf6988a Mon Sep 17 00:00:00 2001
From: IsolatedSushi <simen.vanherpt@gmail.com>
Date: Thu, 29 Oct 2020 00:57:48 +0100
Subject: [PATCH] Read/Parse file, send over grpc and update server
---
DATA/data.csv | 3 +
backend/server.js | 2 +
frontend/src/components/ScatterPlot.vue | 4 +
.../src/components/gRPCProjectorClient.vue | 111 +++++++++++++-----
4 files changed, 91 insertions(+), 29 deletions(-)
create mode 100644 DATA/data.csv
diff --git a/DATA/data.csv b/DATA/data.csv
new file mode 100644
index 0000000..7e0ad5d
--- /dev/null
+++ b/DATA/data.csv
@@ -0,0 +1,3 @@
+1,18.0,25.0,12.0
+2,12.0,12.0,24.0
+3,9.0,13.0,3.0
diff --git a/backend/server.js b/backend/server.js
index 269b4fc..6d19042 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -29,6 +29,8 @@ function sendPoint(call, callback) {
//Route the grpc function to the microservice
function sendPointStream(call) {
+ console.log(call.request.modelid)
+ console.log(call.request.rows)
http.get("http://localhost:8090/generatePointStream", res =>{
res.on("data", data =>{
diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue
index 4b32273..f54bf2e 100644
--- a/frontend/src/components/ScatterPlot.vue
+++ b/frontend/src/components/ScatterPlot.vue
@@ -85,6 +85,10 @@ export default {
x: point.getX(),
y: point.getY()
});
+
+ if(this.dataPoints.length > 5){
+ return;
+ }
this.plot();
}
},
diff --git a/frontend/src/components/gRPCProjectorClient.vue b/frontend/src/components/gRPCProjectorClient.vue
index d2024e1..5e83524 100644
--- a/frontend/src/components/gRPCProjectorClient.vue
+++ b/frontend/src/components/gRPCProjectorClient.vue
@@ -8,7 +8,8 @@
transition="scale-transition"
dismissible
close-icon="mdi-delete"
- >Cannot connect to server</v-alert>
+ >Cannot connect to server</v-alert
+ >
<v-alert
v-if="launched"
@@ -17,61 +18,113 @@
transition="scale-transition"
dismissible
close-icon="mdi-delete"
- >Connected to the server!</v-alert>
+ >Connected to the server!</v-alert
+ >
<h1>Dapr grpc</h1>
<h1 class="my-10">Check the developer console for the messages</h1>
<v-layout row>
<v-spacer></v-spacer>
- <v-file-input show-size counter dense label="File input"></v-file-input>
+ <v-file-input
+ show-size
+ counter
+ dense
+ label="File input"
+ v-model="file"
+ ></v-file-input>
+ <v-btn color="primary" text @click="submitFiles">SUBMIT</v-btn>
<v-spacer></v-spacer>
</v-layout>
</div>
</template>
<script>
-
-
-const { TrainingSet } = require("../generated/projector_pb");
+const { TrainingSet, TrainingSetRow } = require("../generated/projector_pb");
const { ProjectorClient } = require("../generated/projector_grpc_web_pb");
-
+var os = require("os");
export default {
name: "gRPCProjectorClient",
data() {
return {
succesAlert: false,
- launched: false
+ launched: false,
+ file: null,
+ client: null,
};
},
created: function () {
//Setup the server
const connectURL = "http://" + window.location.hostname + ":8080";
- var client = new ProjectorClient(connectURL, null, null);
- var param = new TrainingSet();
-
- //Call the stream
- var stream = client.getProjectionPoints(param);
-
- stream.on("data", (response) => {
- this.succesAlert = true;
- this.launched = true;
- this.$emit("newPoint", response);
- });
-
- stream.on("error", (err) => {
- this.succesAlert = false
- this.launched = true;
-
- console.log(
- `Unexpected stream error: code = ${err.code}` +
- `, message = "${err.message}"`
- );
- });
+ this.client = new ProjectorClient(connectURL, null, null);
},
methods: {
+ startStream(trainingSet) {
+ //Call the stream
+ var stream = this.client.getProjectionPoints(trainingSet);
+
+ stream.on("data", (response) => {
+ this.succesAlert = true;
+ this.launched = true;
+ this.$emit("newPoint", response);
+ });
+
+ stream.on("error", (err) => {
+ this.succesAlert = false;
+ this.launched = true;
+
+ console.log(
+ `Unexpected stream error: code = ${err.code}` +
+ `, message = "${err.message}"`
+ );
+ });
+ },
+ parseFile(lines) {
+ var dataRows = [];
+ for (var i = 0; i < lines.length - 1; i++) {
+ var hdvector = [];
+
+ var dataPoints = lines[i].split(",");
+ var trainingRow = new TrainingSetRow();
+ trainingRow.setId(i.toString());
+ dataPoints.forEach((el) => {
+ hdvector.push(parseFloat(el));
+ });
+ trainingRow.setHdvectorList(hdvector);
+
+ dataRows.push(trainingRow);
+ }
+
+ return dataRows;
+ },
+
+ submitFiles() {
+ //Start up normal connection
+ if (!this.file) {
+ console.log("there is no file.");
+ this.startStream(new TrainingSet());
+ return;
+ }
+
+ //Read in file
+ let reader = new FileReader();
+ reader.readAsText(this.file, "UTF-8");
+ reader.onload = (evt) => {
+
+ var tokens = evt.target.result.split(os.EOL);
+
+ //Create the set
+ var trainingSet = new TrainingSet();
+ trainingSet.setModelid("testComputer");
+
+ var rows = this.parseFile(tokens);
+ trainingSet.setRowsList(rows);
+
+ this.startStream(trainingSet);
+ };
+ },
},
};
</script>
\ No newline at end of file
--
GitLab