Attempt to fix merge conflicts for PR 69

.github/workflows/interface_test.yml

@@ -0,0 +1,36 @@
+name: YABA interface tests
+
+on:
+  push:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  interface_test:
+
+    runs-on: ubuntu-latest
+    defaults:
+        run:
+          working-directory: interface
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x]
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the tests and generate coverage report
+      run: npm test -- --coverage
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v1

.github/workflows/linter.yml

@@ -0,0 +1,25 @@
+name: YABA Code Linter
+
+on:
+  push:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  lint:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Lint Code Base
+        uses: docker://github/super-linter:v3
+        env:
+          PYTHON_PYLINT_CONFIG_FILE: .pylintrc
+          VALIDATE_ALL_CODEBASE: false
+          VALIDATE_PYTHON_PYLINT: true
+          VALIDATE_JAVASCRIPT_ES: true
+          DEFAULT_BRANCH: master
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/py_tests.yml

@@ -0,0 +1,54 @@
+# This workflow will install Python dependencies, run tests and lint with a single version of Python
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-python-with-github-actions
+
+name: YABA app and client tests
+
+on:
+  push:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  py_test:
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        code: [ app, client]
+        include:
+         - code: app
+           path: ./yaba_test/test_yaba.py
+         - code: client
+           path: ./yaba_client_test/test_yaba_client.py
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Set up Python 3.7
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.7
+
+      - name: Install dependencies
+        run: |
+              pip install --upgrade pip
+              pip install pytest
+              pip install pytest-cov
+              pip install docker-compose
+
+      - name: Set-up the project
+        run: |
+              docker-compose up -d postgres
+              docker-compose run --rm bety initialize
+              docker-compose up -d
+              docker ps -a
+              docker logs betydb-yaba_yaba_api_1
+
+      - name: Test with pytest and generate coverage report
+        run: |
+              sleep 20
+              pytest --cov= ${{ matrix.path }} --cov-report=xml
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v1

.gitignore

@@ -105,4 +105,4 @@ venv.bak/
 
 # node modules
 node_modules/
-yarn.lock
+yarn.lock

app/Meta.py

@@ -7,9 +7,7 @@
 import traceback
 import logging
 import pandas as pd
-
-from flask import make_response,Response,jsonify
-from flask import json
+from flask import make_response,jsonify
 from db import *
 from werkzeug import secure_filename,FileStorage
 from sqlalchemy.exc import IntegrityError
@@ -618,7 +616,6 @@ def insert_citationsSites(fileName, status=True):
         else:
             msg = {'Message' : 'File not acceptable and Check the format of file or columns',
                    'Table':'Citations_sites'}
-
             return make_response(jsonify(msg), 400)
 
     except OperationalError:

app/server.py

@@ -6,6 +6,7 @@
 import connexion
 import json
 from time import sleep
+from flask import Response
 
 # Create the application instance
 app = connexion.App(__name__, specification_dir="./")

client/client.py

@@ -3,22 +3,21 @@
 #################
 
 import requests
-from flask import Flask, g, render_template,request,redirect,Response,flash,jsonify, make_response
-from flask import request
+from flask import Flask, render_template,request,redirect,Response,flash
 
 import logging
-import json
 from time import sleep
-import sys
-from flask_cors import CORS, cross_origin
+
+from flask_cors import CORS
 
 # Create app
 app = Flask(__name__)
 app.secret_key = 'my unobvious secret key'
 
 # The maximum allowed payload to 16 megabytes.
 app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
-cors = CORS(app, resources={r'/*': {'origins': '*'}})
+cors = CORS(app, resources={r'/*': {'origins': 'http://localhost:3001'}})
+
 logging.getLogger('flask_cors').level = logging.DEBUG
 logging.basicConfig(filename='client.log',format='%(asctime)s %(message)s',level=logging.INFO)
 

client/requirements.txt

@@ -1,2 +1,3 @@
 Flask==1.0
 requests==2.20.0
+flask-cors

interface/.dockerignore

@@ -0,0 +1 @@
+node_modules

interface/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:12.18.2-alpine
+
+COPY . /code
+
+WORKDIR /code
+
+ENV PATH /code/node_modules/.bin:$PATH
+
+RUN npm install --silent
+
+RUN npm install [email protected] -g --silent
+
+EXPOSE 3000
+
+# start app
+CMD ["npm", "start"]

interface/public/index.html

@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/bety.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="BETYdb-YABA Interface for Metadata Upload"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/bety.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,7 +26,7 @@
     -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
-    <title>React App</title>
+    <title>BETYdb-YABA Interface</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

interface/src/components/grid.js

@@ -0,0 +1,162 @@
+import React, {Component} from 'react';
+import * as d3 from 'd3';
+import getRandomColors from './getRandomColor'
+import { getVisualData } from './requests'
+
+class Grid extends Component{
+    constructor(props){
+        super(props);
+        this.state={
+            label:[],
+            list:[]
+        }
+    }
+
+    async componentDidMount(){
+        try{
+            let type=this.props.type;
+            let username= this.props.username;
+            let data;
+            if(this.props.input !== true)
+                data= await getVisualData(this.props.data, type, username);
+            else
+                data=this.props.data;
+            let label=[],color=[];
+            let mrow=0,mcol=0;
+            for(let i=0; i < data.length; i++){
+                if(data[i]["x"] > mrow)
+                    mrow= data[i]["x"] ;
+                if(data[i]["y"] > mcol)
+                    mcol= data[i]["y"] ;
+                if(!label.includes(data[i][type])){
+                    label.push(data[i][type])
+                }
+            }
+
+            color= getRandomColors(label.length)
+            let plots = new Array();
+            let xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
+            let ypos = 1;
+            let width = 25;
+            let height = 25;
+            let gcol='';
+            let x,y,idx,text,name;
+            let list=[];
+            // iterate for rows 
+            for (let row = 0; row < mrow; row++) {
+                plots.push( new Array() );
+                name= '';
+                // iterate for cells/columns inside rows
+                for (let column = 0; column < mcol; column++) {
+                    gcol= "#fff";
+                    text= "Range "+ ((ypos-1)/25 + 1) +" Column " + ((xpos-1)/25 + 1);
+                    data.forEach((set)=>{                        
+                        y= ((set.x -1) * 25 )+ 1;
+                        x= ((set.y -1) * 25 )+ 1;
+                        if( x==xpos && y==ypos ){
+                            idx= label.indexOf(set[type])
+                            gcol= color[idx];
+                            name= set.experiments;
+                            list.push([name, text])
+                        }
+                    })
+
+                    plots[row].push({
+                        name: name,
+                        x: xpos,
+                        y: ypos,
+                        width: width,
+                        height: height,
+                        color: gcol,
+                        text: text
+                    })
+                    // increment the x position. I.e. move it over by 50 (width letiable)
+                    xpos += width;
+                    }
+                // reset the x position after a row is complete
+                xpos = 1;
+                // increment the y position for the next row. Move it down 50 (height letiable)
+                ypos += height; 
+            }
+
+            this.setState({
+                label,
+                list
+            })
+
+            let grid = d3.select(`#grid${type}`)
+            .append("svg")
+            .attr("width",26 * mcol)
+            .attr("height",26 * mrow);
+
+            let row = grid.selectAll(".row")
+            .data(plots)
+            .enter().append("g")
+            .attr("class", "row");
+
+            row.selectAll(".square")
+            .data(function(d) { return d; })
+            .enter().append("rect")
+            .attr("class","square")
+            .attr("x", function(d) { return d.x; })
+            .attr("y", function(d) { return d.y; })
+            .attr("width", function(d) { return d.width; })
+            .attr("height", function(d) { return d.height; })
+            .style("fill", function(d) { return d.color; })
+            .style("stroke", "#222")
+            .attr("data-legend",function(d) { return d.name})
+            .append("title")
+            .text(function(d,i){ return d.text})
+
+            var SVG = d3.select(`#legend${type}`).append("svg")
+            // Usually you have a color scale in your chart already
+            var legend = d3.scaleOrdinal()
+            .domain(label)
+            .range(color);
+
+            // Add one dot in the legend for each name.
+            var size = 20
+            SVG.selectAll("mydots")
+            .data(label)
+            .enter()
+            .append("rect")
+                .attr("x", 0)
+                .attr("y", function(d,i){ return i*(size+5)}) // 0 is where the first dot appears. 5 is the distance between dots
+                .attr("width", size)
+                .attr("height", size)
+                .style("fill", function(d){ return legend(d)})
+                .style("stroke", "#222")
+
+            // Add one dot in the legend for each name.
+            SVG.selectAll("mylabels")
+            .data(label)
+            .enter()
+            .append("text")
+                .attr("x", size*1.2)
+                .attr("y", function(d,i){ return 3 + i*(size+5) + (size/2)}) // 13 is where the first dot appears. 5 is the distance between dots
+                .style("fill", function(d){ return legend(d)})
+                .text(function(d){ return d})
+                .attr("text-anchor", "left")
+                .style("alignment-baseline", "middle")
+        }
+        catch(err){
+            console.log(err)
+        }
+    }
+
+    render(){
+        let legend=`legend${this.props.type}`;
+        let grid=`grid${this.props.type}`;
+        let title= this.props.type[0].toUpperCase() + this.props.type.slice(1);
+        return (
+        <div className="grid">
+        <div className="title">{title}</div>
+        <div id={legend}></div>
+        <div id={grid}></div>
+        </div>
+        );
+    }
+
+}
+
+export default Grid;