Visualize the polygons

docker-compose.yml

@@ -48,11 +48,38 @@ services:
       - 6001:6000
     depends_on:
       - yaba_api
+
+  yaba_visualization:
+    build: ./visualization
+    networks:
+      - bety
+    volumes:
+      - './visualization:/code'
+      - '/code/node_modules'
+    ports:
+      - 80:8080
+    depends_on:
+      - postgres
+    restart: unless-stopped
+
+  yaba_interface:
+    build: ./interface
+    networks: 
+      - bety
+    volumes:
+      - './interface:/code'
+      - '/code/node_modules'
+    ports:
+      - 3001:3000
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    depends_on:
+      - yaba_client
+      - yaba_visualization
+    stdin_open: true
+
 volumes:
   postgres:
 
 networks:
-  bety:
-
-
-
+  bety:

interface/src/App.js

@@ -7,8 +7,9 @@ import Homepage from './components/homepage';
 import Upload1 from './components/upload1';
 import Upload2 from './components/upload2';
 import Validation from './components/validation';
-import ShapeView from './components/shape-visual'
-import Visual from './components/data-visual';
+import CultivarsView from './components/cultivars-visual'
+import ExperimentsView from './components/experiments-visual'
+import TreatmentsView from './components/treatments-visual'
 import Successpage from './components/success';
 import Errorpage from './components/error'
 
@@ -38,8 +39,9 @@ class App extends Component {
         <Route path="/upload1" component={()=> <Upload1 getFiles={this.getFiles}/>} exact/>
         <Route path="/upload2" component={()=> <Upload2 getFiles={this.getFiles}/>} exact/>
         <Route path="/validate" component={()=> <Validation fileList={this.state}/>} exact/>
-        <Route path="/map" component={()=> <ShapeView fileList={this.state}/>} exact/>
-        <Route path="/visual" component={()=> <Visual fileList={this.state}/>} exact/>
+        <Route path="/cmap" component={()=> <CultivarsView fileList={this.state}/>} exact/>
+        <Route path="/emap" component={()=> <ExperimentsView fileList={this.state}/>} exact/>        
+        <Route path="/tmap" component={()=> <TreatmentsView fileList={this.state}/>} exact/>
         <Route path="/success" component={Successpage} exact/>
         <Route path="/error" component={Errorpage} exact/>
         </Switch>