enh: added a URL input and changed to a new compontent for the report

Author: akeshavan

preafqViewer/package-lock.json

@@ -14,6 +14,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "bootstrap-vue": "^2.0.0-rc.11",
     "d3": "^5.7.0",
     "vue": "^2.5.2",

preafqViewer/package.json

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 Vue.use(BootstrapVue);
 

preafqViewer/src/App.vue

@@ -6,119 +6,34 @@
       <b-form-file class="mt-3" v-model="file"
        :state="Boolean(file)" placeholder="Choose a file...">
      </b-form-file>
-      <div v-if="report.b0" class="mt-3">
-        <h2 class="mt-3 pt-3">Corrected dwi</h2>
-        <p class="lead">Result of eddy</p>
-        <vue-slider ref="timeSlider" v-model="time"
-         :min="0" :max="report.dwi_corrected[0].num_slices-1">
-       </vue-slider>
-        <sprite4d v-for="view in report.dwi_corrected"
-                  :key="view.orientation"
-                  :M="view.M"
-                  :N="view.N"
-                  :img="view.img"
-                  :num_slices="view.num_slices"
-                  :pix="view.pix"
-                  :id="view.orientation"
-                  :time="time"
-                  :overlayMode="false"
-                  opacity="1"
-        >
-        </sprite4d>
 
-        <h2 class="mt-3 pt-3">Eddy Report</h2>
-        <p class="lead"> <b-btn v-b-toggle.collapse1 variant="primary">
-          Outliers ({{report.eddy_report.length}})</b-btn> </p>
-          <b-collapse id="collapse1" class="mt-2">
-            <b-card>
+     <p class="lead mt-3">OR copy/paste a URL</p>
+     <b-input-group size="md" class="mb-3" prepend="URL">
+        <b-form-input v-model="url" />
+        <b-input-group-append>
+          <b-btn size="md" text="Button"
+           variant="primary"
+           @click="navigate">Go</b-btn>
+        </b-input-group-append>
+      </b-input-group>
 
-              <p v-for="e in report.eddy_report" :key="e">{{e}}</p>
-
-            </b-card>
-          </b-collapse>
-
-          <div style="height: 200px; width: 100%; display: inline-flex;">
-            <line-chart id="motion_params"
-             :data="report.eddy_params"
-             xlabel="TR"
-             ylabel="RMS"
-             :highlightIdx="time"
-            >
-            </line-chart>
-          </div>
-
-        <h2 class="mt-3 pt-3">Registration + Brain Mask</h2>
-        <p class="lead">Brain mask computed on T1w, and mapped to B0</p>
-
-        <sprite4d
-          :key="'bmask'+2"
-          :M="report.b0.M"
-          :N="report.b0.N"
-          :num_slices="report.b0.num_slices"
-          id="b0_mask"
-          :pix="report.b0.pix"
-          :time="spriteSlice"
-          :img="report.b0.img"
-          opacity="1"
-        ></sprite4d>
-        <sprite4d
-          :key="'anat_mask'+1"
-          :M="report.anat_mask.M"
-          :N="report.anat_mask.N"
-          :num_slices="report.anat_mask.num_slices"
-          id="anat_mask"
-          :pix="report.anat_mask.pix"
-          :time="spriteSlice"
-          :img="report.anat_mask.img"
-          :overlayMode="true"
-          opacity="1"
-        ></sprite4d>
-        <vue-slider ref="timeSlider"
-         v-model="spriteSlice" :min="0"
-         :max="report.b0.num_slices-1"></vue-slider>
-
-        <h2 class="mt-3 pt-3">DTI: ColorFA</h2>
-        <p class="lead">Color FA mapped on B0</p>
-
-        <sprite4d
-          key="bmask1"
-          :M="report.b0.M"
-          :N="report.b0.N"
-          :num_slices="report.b0.num_slices"
-          id="b0_mask"
-          :pix="report.b0.pix"
-          :time="spriteSlice"
-          :img="report.b0.img"
-          opacity="1"
-        ></sprite4d>
-        <sprite4d
-          key="colorfa_mask"
-          :M="report.colorFA.M"
-          :N="report.colorFA.N"
-          :num_slices="report.colorFA.num_slices"
-          id="colorfa_mask"
-          :pix="report.colorFA.pix"
-          :time="spriteSlice"
-          :img="report.colorFA.img"
-          :overlayMode="true"
-          opacity="0.5"
-        ></sprite4d>
-
-      </div>
+      <report v-if="report.b0" :report="report"></report>
   </b-container>
 </template>
 
 <script>
 import vueSlider from 'vue-slider-component';
 import sprite4d from './Sprite4D';
 import lineChart from './LineChart';
+import report from './Report';
 
 export default {
   name: 'HelloWorld',
   components: {
     sprite4d,
     vueSlider,
     lineChart,
+    report,
   },
   data() {
     return {
@@ -127,12 +42,17 @@ export default {
       report: {},
       time: 0,
       spriteSlice: 0,
+      url: null,
     };
   },
   methods: {
     get_mid_slice() {
       return Math.floor(this.report.b0.num_slices / 2);
     },
+    navigate() {
+      console.log(this.url);
+      this.$router.push({ path: '/report', query: { url: this.url } });
+    },
   },
   watch: {
     file() {

preafqViewer/src/components/HelloWorld.vue

@@ -100,7 +100,7 @@ export default {
       d3.select(`#${this.id} .dot-series-2`)
         .attr('r', 7)
         .attr('cx', () => self.x(self.highlightIdx))
-        .attr('cy', () => self.y(self.data[self.highlightIdx][0]))
+        .attr('cy', () => self.y(self.data[self.highlightIdx][1]))
         .attr('fill', 'red');
     },
     plotData() {