A little bit of eye candy

src/components/DataBox.vue

@@ -91,52 +91,49 @@
 
 <style lang="sass" scoped>
   .fjs-data-box
+    width: 50%
+    display: flex
+    flex-direction: column
     text-align: center
-    width: 40%
-    height: 90%
     margin: 10px
     > label
       font-size: 16px
     .fjs-data-window
-      height: 80%
-      width: 100%
+      flex: 1
       border: 1px solid #ccc
       border-radius: 8px
       font-size: 14px
       overflow-y: scroll
       padding: 5px
-    .fjs-data-entry-header
-      background-color: #eee
-      padding: 5px
-      margin: 2px
-      width: 95%
-      > *
-        display: inline-block
-        vertical-align: middle
-      label
-        width: 85%
-        word-break: keep-all
-        overflow: hidden
-        text-overflow: ellipsis
-      &[data-state="FAILURE"]
-        background-color: #ffcbcb
-      &[data-state="PENDING"]
-        color: #bbb
-      .cross
-        color: red
-        padding: 5px
-      .options
-        cursor: pointer
-        white-space: nowrap
-    .fjs-data-entry-body
-      display: none
-      padding: 3px
-      &[data-state="FAILURE"]
-        background-color: #ffcbcb
-      .fjs-action-btns
-        text-align: center
-        button
-          height: 25px
-          font-size: 14px
-          font-weight: bold
+      .fjs-data-entry-container
+        display: flex
+        flex-direction: column
+        .fjs-data-entry-header
+          display: flex
+          background-color: #eee
+          padding: 5px
+          margin: 2px
+          label
+            flex: 1
+          &[data-state="FAILURE"]
+            background-color: #ffcbcb
+          &[data-state="PENDING"]
+            color: #bbb
+          .cross
+            color: red
+            padding: 5px
+          .options
+            cursor: pointer
+            white-space: nowrap
+        .fjs-data-entry-body
+          display: none
+          padding: 5px
+          &[data-state="FAILURE"]
+            background-color: #ffcbcb
+          .fjs-action-btns
+            text-align: center
+            button
+              height: 25px
+              font-size: 14px
+              font-weight: bold
 </style>

src/components/charts/CorrelationAnalysis.vue

@@ -552,8 +552,11 @@
       text-align: center
       .fjs-correlation-method
         width: 0
-        margin: auto
         white-space: nowrap
+        border: solid 1px #bbb
+        text-align: left
+        border-radius: 8px
+        margin: 10px
 
 
     .fjs-vis-container

src/main.js

@@ -12,7 +12,7 @@ class FractalJS {
 
   // noinspection JSMethodCanBeStatic
   loadData (descriptors) {
-    store.state.requestManager.createData({descriptors})
+    return store.state.requestManager.createData({descriptors})
   }
 
   setChart ({chart, selector}) {
@@ -21,7 +21,7 @@ class FractalJS {
 
   // noinspection JSMethodCanBeStatic
   clearCache () {
-    store.state.requestManager.deleteAllData()
+    return store.state.requestManager.deleteAllData()
   }
 
   // noinspection JSMethodCanBeStatic

test/charts/test-chart.html

@@ -26,39 +26,41 @@
     }
   })
   fjs.clearCache()
-  fjs.loadData([
-    {
-      data_type: 'Enum',
-      data_set: 'denopa.clinical_baseline',
-      projection: 'Geschlecht',
-      get label () {
-        return `${this.projection} (${this.data_set})`
-      }
-    },
-    {
-      data_type: 'Integer',
-      data_set: 'denopa.clinical_baseline',
-      projection: 'a_Alter',
-      get label () {
-        return `${this.projection} (${this.data_set})`
-      }
-    },
-    {
-      data_type: 'Double',
-      data_set: 'denopa.clinical_baseline',
-      projection: 'a_AESD_I_mean',
-      get label () {
-        return `${this.projection} (${this.data_set})`
-      }
-    },
-    {
-      data_type: 'Enum',
-      data_set: 'foo',
-      projection: 'I don\'t exist',
-      get label () {
-        return `${this.projection} (${this.data_set})`
-      }
-    }
-  ])
+    .then(() => {
+      fjs.loadData([
+        {
+          data_type: 'Enum',
+          data_set: 'denopa.clinical_baseline',
+          projection: 'Geschlecht',
+          get label () {
+            return `${this.projection} (${this.data_set})`
+          }
+        },
+        {
+          data_type: 'Integer',
+          data_set: 'denopa.clinical_baseline',
+          projection: 'a_Alter',
+          get label () {
+            return `${this.projection} (${this.data_set})`
+          }
+        },
+        {
+          data_type: 'Double',
+          data_set: 'denopa.clinical_baseline',
+          projection: 'a_AESD_I_mean',
+          get label () {
+            return `${this.projection} (${this.data_set})`
+          }
+        },
+        {
+          data_type: 'Enum',
+          data_set: 'foo',
+          projection: 'I don\'t exist',
+          get label () {
+            return `${this.projection} (${this.data_set})`
+          }
+        }
+      ])
+    })
   fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
 </script>