Merge pull request #57 from akeshavan/incorporate_eddy_quad

some more edits to the report

Author: akeshavan

dmriprepViewer/src/components/BrainSprite.vue

@@ -42,6 +42,7 @@ export default {
       brain: null,
       showOrig: true,
       done: false,
+      ready: false,
     };
   },
   methods: {
@@ -64,7 +65,10 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      setTimeout(() => { this.initBrainSprite(); }, 1);
+      setTimeout(() => {
+        this.ready = true;
+        this.initBrainSprite();
+      }, 100);
     });
   },
 };

dmriprepViewer/src/components/Bucket.vue

@@ -4,6 +4,11 @@
       <div class="col-md-3">
         <div class="container">
         <h3>{{bucket}} ({{manifestEntries.length}})</h3>
+          <div class="mb-3">
+            <b-button v-if="!statsReady" @click="getAllReports">
+              Compute Statistics
+            </b-button>
+          </div>
           <b-nav vertical pills class="w-100">
             <!-- <b-nav-item active>Active</b-nav-item> -->
             <b-nav-item v-for="(subject, index) in manifestEntries"
@@ -18,6 +23,9 @@
         <h1 v-if="manifestEntries.length">
           {{manifestEntries[currentReportIdx].split('/')[0]}}
         </h1>
+        <div v-if="statsReady">
+          <GroupStats :data="allReports" :individual="currentReport.eddy_quad"/>
+        </div>
         <div v-if="ready">
           <report
             :reportProp="currentReport"
@@ -35,6 +43,7 @@
 import axios from 'axios';
 import _ from 'lodash';
 import Report from './Report';
+import GroupStats from './GroupStats';
 
 export default {
   name: 'bucket',
@@ -44,12 +53,33 @@ export default {
       currentReportIdx: 0,
       currentReport: {},
       ready: false,
+      allReports: [],
+      statsReady: false,
     };
   },
   components: {
     Report,
+    GroupStats,
   },
   methods: {
+    getReport(r) {
+      return axios.get(`https://s3-us-west-2.amazonaws.com/${this.bucket}/${r}`);
+    },
+    /**
+    *
+    */
+    async getAllReports() {
+      this.statsReady = false;
+      const reports = await _.map(this.manifestEntries, m => this.getReport(m));
+      _.map(reports, (r) => {
+        r.then((resp) => {
+          if (resp.data.eddy_quad) {
+            this.allReports.push(resp.data.eddy_quad);
+          }
+        });
+      });
+      this.statsReady = true;
+    },
     /**
     * XML parser for pubmed query returns.
     */
@@ -118,10 +148,14 @@ export default {
     },
     updateReport() {
       this.ready = false;
-      axios.get(`https://s3-us-west-2.amazonaws.com/${this.bucket}/${this.manifestEntries[this.currentReportIdx]}`)
+      const reportUrl = `https://s3-us-west-2.amazonaws.com/${this.bucket}/${this.manifestEntries[this.currentReportIdx]}`;
+      return axios.get(reportUrl)
         .then((resp) => {
           this.currentReport = resp.data;
           this.ready = true;
+          this.$router.replace({ name: 'Bucket',
+            params: { bucket: this.bucket },
+            query: { report: reportUrl } });
         });
     },
   },
@@ -139,7 +173,19 @@ export default {
     },
   },
   mounted() {
-    this.getS3Manifest().then(this.updateReport);
+    let path = null;
+    if (this.$route.query) {
+      if (this.$route.query.report) {
+        path = this.$route.query.report.split(`https://s3-us-west-2.amazonaws.com/${this.bucket}/`)[1];
+      }
+    }
+
+    this.getS3Manifest().then(this.updateReport).then(() => {
+      if (path) {
+        this.currentReportIdx = this.manifestEntries.indexOf(path);
+      }
+      this.getAllReports();
+    });
   },
 };
 </script>

dmriprepViewer/src/components/GroupStats.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="mb-3">
+      <p class="lead">
+        Comparison to Group Eddy_Quad Statistics
+      </p>
+      <p>Absolute Motion (Z = {{numberFormatter(individual_abs_mot_z)}})</p>
+      <b-progress class="w-50 mx-auto">
+        <b-progress-bar :value="scaleZ(individual_abs_mot_z)"
+         :variant="getColor(0, individual_abs_mot_z)">
+          z = {{numberFormatter(individual_abs_mot_z)}}
+        </b-progress-bar>
+      </b-progress>
+    </div>
+    <div class="mb-3">
+      <p>Relative Motion (Z = {{numberFormatter(individual_rel_mot_z)}})</p>
+      <b-progress class="w-50 mx-auto">
+        <b-progress-bar :value="scaleZ(individual_rel_mot_z)"
+         :variant="getColor(0, individual_rel_mot_z)">
+          z = {{numberFormatter(individual_rel_mot_z)}}
+        </b-progress-bar>
+      </b-progress>
+    </div>
+
+  </div>
+</template>
+
+<script>
+// import _ from 'lodash';
+const d3 = require('d3');
+
+export default {
+  name: 'GroupStats',
+  props: ['data', 'individual'],
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    scaleZ(val) {
+      const scaler = d3.scaleLinear().range([0, 100]).domain([-3, 3]);
+      return scaler(val);
+    },
+    numberFormatter(val) {
+      const formatter = d3.format('.3n');
+      return formatter(val);
+    },
+    getColor(direction, zScore) {
+      if (direction) {
+        // positive is good
+        if (zScore <= -1) {
+          return 'danger';
+        } else if (zScore >= 1) {
+          return 'success';
+        }
+      }
+      if (zScore <= -1) {
+        return 'success';
+      } else if (zScore >= 1) {
+        return 'danger';
+      }
+      return 'primary';
+    },
+  },
+  computed: {
+    mean_group_abs_mot() {
+      return d3.mean(this.data, d => d.qc_mot_abs);
+    },
+    std_group_abs_mot() {
+      return d3.deviation(this.data, d => d.qc_mot_abs);
+    },
+    individual_abs_mot_z() {
+      if (this.individual) {
+        return (this.individual.qc_mot_abs - this.mean_group_abs_mot) / this.std_group_abs_mot;
+      }
+      return null;
+    },
+    mean_group_rel_mot() {
+      return d3.mean(this.data, d => d.qc_mot_rel);
+    },
+    std_group_rel_mot() {
+      return d3.deviation(this.data, d => d.qc_mot_rel);
+    },
+    individual_rel_mot_z() {
+      if (this.individual) {
+        return (this.individual.qc_mot_rel - this.mean_group_rel_mot) / this.std_group_rel_mot;
+      }
+      return null;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

dmriprepViewer/src/components/Report.vue

@@ -107,7 +107,7 @@ export default {
       // load the json
       if (!this.$route.query.url && this.$route.name === 'Report') {
         this.$router.push('/');
-      } else {
+      } else if (this.$route.query.url) {
         axios.get(this.$route.query.url).then((resp) => {
           this.report = resp.data;
         });
@@ -141,8 +141,9 @@ export default {
       if (this.$route.query) {
         // load the json
         if (!this.$route.query.url && this.$route.name === 'Report') {
-          // this.$router.push('/');
+          this.$router.push('/');
         } else {
+          console.log('getting axios?', this.$route.query.url);
           axios.get(this.$route.query.url).then((resp) => {
             this.report = resp.data;
           });