failed or loading data etls are now specially marked

src/components/DataBox.vue

@@ -2,13 +2,19 @@
   <div id="data-box">
     <label for="data-container" :tooltip="tooltip">{{ header }}</label>
     <div id="data-container" style="height: 80%;">
-      <div class="data-item" v-for="(item, index) in items">
+      <div class="data-item"
+           :data-state="item.state"
+           v-for="item in items">
         <input type="checkbox"
-               :id="'data-check-' + index"
+               :id="'data-check-' + item.data_id"
                :value="item.data_id"
                v-model="selectedIDs"
-               @click="updateSelected"/>
-        <label :for="'data-check-' + index">{{ item.description }}</label>
+               @click="updateSelected"
+               v-if="item.state == 'SUCCESS'"/>
+        <div class="info-box" v-if="item.state == 'FAILURE'">i</div>
+        <label :for="'data-check-' + item.data_id">
+          {{ item.description }}
+        </label>
       </div>
     </div>
   </div>
@@ -46,6 +52,9 @@
       updateSelected () {
         this.$emit('update', this.selectedIDs)
       }
+    },
+    components: {
+
     }
   }
 </script>
@@ -63,7 +72,40 @@
     padding: 5px 5px 5px 5px;
   }
 
-  #data-container .data-item:nth-child(odd) {
-    background: #ddd;
+  .data-item {
+    background: #eee;
+    padding: 2px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 98%;
+  }
+
+  .data-item label {
+    width: 80%
+  }
+
+  .data-item:nth-child(odd)[data-state="SUCCESS"] {
+
+  }
+
+  .data-item[data-state="FAILURE"] {
+    background: #ffcbcb;
+  }
+
+  .data-item[data-state="PENDING"] {
+    color: #bbb;
+  }
+
+  .info-box {
+    font-style: italic;
+    float: left;
+    margin: 0 3px 0 3px;
+    height: 15px;
+    width: 15px;
+    background: white;
+    border-radius: 10px;
+    text-align: center;
   }
-</style>
\ No newline at end of file
+</style>

src/components/charts/CorrelationAnalysis.vue

@@ -70,14 +70,14 @@
                   r="4"
                   :data-idx="idx"
                   v-for="(point, idx) in shownPoints.all"
-                  v-tooltip="point.tooltip">
+                  v-svgtooltip="point.tooltip">
           </circle>
           <line id="lin-reg-line"
                 :x1="tweened.regLine.x1"
                 :x2="tweened.regLine.x2"
                 :y1="tweened.regLine.y1"
                 :y2="tweened.regLine.y2"
-                v-tooltip="regLine.tooltip">
+                v-svgtooltip="regLine.tooltip">
           </line>
           <rect class="histogram-rect"
                 :x="attr.x"
@@ -105,7 +105,7 @@
   import DataBox from '../DataBox.vue'
   import requestHandling from '../mixins/request-handling'
   import * as d3 from 'd3'
-  import tooltip from '../directives/v-tooltip'
+  import tooltip from '../directives/v-svgtooltip'
   import { TweenLite } from 'gsap'
   export default {
     name: 'correlation-analysis',

src/store/actions.js

@@ -9,8 +9,7 @@ export default {
   },
   updateData: context => {
     context.getters.requestManager.getAllDataStatus().then(response => {
-      const data = response.data
-      context.commit(types.SET_DATA, data)
+      context.commit(types.SET_DATA, response.data.data_states)
     }).catch(error => {
       console.error(error) // TODO: Notify user about this
     }).then(() => { // finally

test/charts/test-chart.html

@@ -15,7 +15,7 @@
   const fjs = fractal.init({
     handler: 'ada',
     thisBaseURL: 'http://10.79.2.192:8080',
-    fractalisBaseURL: 'http://10.240.6.46:8080',
+    fractalisBaseURL: 'http://127.0.0.1:5000',
     getAuth () {
       return credentials
     }
@@ -44,6 +44,14 @@
       get description () {
         return `${this.projection} (${this.data_set})`
       }
+    },
+    {
+      data_type: 'Enum',
+      data_set: 'foo',
+      projection: 'baraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+      get description () {
+        return `${this.projection} (${this.data_set})`
+      }
     }
   ])
   fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder'})

webpack.config.js

@@ -25,7 +25,8 @@ module.exports = {
   devServer: {
     hot: true,
     inline: true,
-    publicPath: 'http://localhost:8080/'
+    publicPath: 'http://localhost:8080/',
+    headers: { 'Access-Control-Allow-Origin': '*' }
   },
   plugins: plugins,
   output: {