[#18] Finalized basic webUI and added it to cluster and workflow

.github/workflows/github-actions.yml

@@ -53,6 +53,8 @@ jobs:
         docker push ghcr.io/saetch/deightma_nodecs:latest
     - run: |
         docker push ghcr.io/saetch/hasher_service:latest
+    - run: |
+        docker push ghcr.io/saetch/deightma_webui:latest
   build-client:
     runs-on: Ubuntu-latest
     steps:

Cluster/docker-compose.yml

@@ -66,6 +66,24 @@ services:
       deploy:
         mode: replicated
         replicas: 1
+    webUi:
+      image: ghcr.io/saetch/deightma_webui:latest
+      build:
+        dockerfile: Dockerfile
+        context: ./vueWebUI
+      ports:
+        - "8080:80"
+      networks:
+        - distr-network
+      deploy:
+        mode: replicated
+        replicas: 1
+      depends_on:
+        - coordinator
+        - nodecs
+        - master
+        - hasher_service
+        - bicubic_interpolation_service
 networks:
   distr-network:
     driver: bridge

Cluster/vueWebUI/Dockerfile

@@ -10,5 +10,4 @@ RUN npm run build
 # production stage
 FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
-EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

Cluster/vueWebUI/src/components/ResultDisplaySidebar.vue

@@ -14,7 +14,7 @@
         </svg>
         <div>
           <div class="display">StepSize: <span id="stepSizeDisplay">{{stepSize}}</span></div>
-          <input type="range" id="stepSizeSlider" class="slider" min="0.001" max="1.0" step="0.001" :value="stepSize" @input="updateStepSize">
+          <input type="range" id="stepSizeSlider" class="slider" min="0.001" max="0.35" step="0.001" :value="stepSize" @input="updateStepSize">
        </div>
       </div>
   </template>

Cluster/vueWebUI/src/components/SVGMap.vue

@@ -226,16 +226,12 @@ export default {
       newScale -= zoomFactor;
       if (newScale < minScale) newScale = minScale;
     }
-    console.log(newScale);
 
-    console.log("Event position: "+event.clientX+" "+event.clientY);
 
     let xDistFromCenter = (event.clientX - (this.position.x) - this.svgWidth / 2.0);
     let yDistFromCenter = (event.clientY - (this.position.y) - this.svgHeight / 2.0);
-    console.log("Distance from center: "+xDistFromCenter+" "+yDistFromCenter);
     let newXDistFromCenter = xDistFromCenter * (newScale / this.scale);
     let newYDistFromCenter = yDistFromCenter * (newScale / this.scale);
-    console.log("Distance from center: "+newXDistFromCenter+" "+newYDistFromCenter);
 
 
     this.scale = newScale;
@@ -315,6 +311,7 @@ export default {
         this.mapBorders.x1 = x;
       }else if (x > this.mapBorders.x2){
         this.svgWidth += offset * (x - this.mapBorders.x2);
+        this.position.x += offset * (this.scale /2 - 0.5) * (x - this.mapBorders.x2);
         this.mapBorders.x2 = x;
       }
       if(y>this.mapBorders.y2){
@@ -324,6 +321,8 @@ export default {
         this.mapBorders.y2 = y;
       }else if (y < this.mapBorders.y1){
         this.svgHeight += offset * (this.mapBorders.y1 - y);
+
+        this.position.y += offset * (this.scale /2 - 0.5) * (this.mapBorders.y1 - y);
         this.mapBorders.y1 = y;
       }