Update plot titles, intro arrows, bump vdp version

Author: keller-mark

src/components/ExplorerMain.vue

@@ -11,11 +11,20 @@
         <PlotContainer
             :pWidth="(colWidth-150-5)"
             :pHeight="200"
-            :pMarginTop="5"
+            :pMarginTop="130"
             :pMarginLeft="150"
             :pMarginRight="5"
-            :pMarginBottom="150"
+            :pMarginBottom="5"
         >
+            <Axis 
+                slot="axisTop"
+                variable="sample_id"
+                side="top"
+                :tickRotation="-65"
+                :maxCharacters="4"
+                :getScale="getScale"
+                :getStack="getStack"
+            />
             <Axis 
                 slot="axisLeft"
                 variable="mut_count_sum"
@@ -33,14 +42,7 @@
                 :getData="getData"
                 :getScale="getScale"
             />
-            <Axis 
-                slot="axisBottom"
-                variable="sample_id"
-                side="bottom"
-                :tickRotation="-65"
-                :getScale="getScale"
-                :getStack="getStack"
-            />
+            
         </PlotContainer>
 
         <!-- Exposures -->
@@ -185,7 +187,7 @@
             :pMarginTop="10"
             :pMarginLeft="150"
             :pMarginRight="5"
-            :pMarginBottom="0"
+            :pMarginBottom="5"
         >
             <Axis 
                 slot="axisLeft"
@@ -205,23 +207,6 @@
             />
         </PlotContainer>
 
-        <PlotContainer
-            :pWidth="(colWidth-150-5)"
-            :pHeight="0"
-            :pMarginTop="0"
-            :pMarginLeft="150"
-            :pMarginRight="5"
-            :pMarginBottom="150"
-        >
-            <Axis 
-                slot="axisBottom"
-                variable="sample_id"
-                side="bottom"
-                :tickRotation="-65"
-                :getScale="getScale"
-                :getStack="getStack"
-            />
-        </PlotContainer>
 
         <!-- Meta -->
         <div v-if="showMeta">

src/components/Intro.vue

@@ -3,6 +3,7 @@
         <div class="intro-figure">
             <span id="arrow1" class="arrow"></span>
             <span id="arrow2" class="arrow"></span>
+
             <span id="text1" class="text"><span class="bubble">1</span>Select signatures</span>
             <span id="text2" class="text"><span class="bubble">2</span>Select samples</span>
         </div>
@@ -104,28 +105,28 @@ export default {
         }
     }
     #arrow1 {
-        right: 8.5rem;
+        right: 17.8rem;
         &:before {
             height: 100px;
         }
         &:after {
             top: 117px;
-            width: 7rem;
+            width: 1.3rem;
         }
     }
     #arrow2 {
-        right: 1.3rem;
+        right: 10.8rem;
         &:before {
             height: 164px;
         }
         &:after {
             top: 181px;
-            width: 13rem;
+            width: 7.1rem;
         }
     }
     .text {
         display: inline-block;
-        right: 17.2rem;
+        right: 20.2rem;
         border: 0px solid black;
         position: absolute;
         text-align: right;

src/components/PlotInfo.vue

@@ -1,7 +1,6 @@
 <template>
     <div>
         <div class="plot-info">
-            <h4 class="plot-info-title">{{ title }}</h4>
             <button @click="modalVisible = true">?</button>
         </div>
 
@@ -42,17 +41,14 @@ export default {
 @import './../style/modal.scss';
 
 .plot-info {
-    width: 95%;
-    margin-left: 2.5%;
+    width: 100%;
     margin-bottom: 5px;
-    padding: 5px;
     text-align: center;
-    h4 {
-        display: inline-block;
-        margin: 0;
-    }
+    z-index: 3;
+    position: relative;
     button {
-        float: right;
+        float: left;
+        margin-left: 15px;
         background-color: $color-gray;
         border: none;
         color: white;

src/style/modal.scss

@@ -1,5 +1,5 @@
 .modal-background {
-    z-index: 1;
+    z-index: 4;
     top: 0;
     left: 0;
     position: fixed;

yarn.lock

@@ -8243,8 +8243,8 @@ vm-browserify@0.0.4:
     indexof "0.0.1"
 
 vue-declarative-plots@^1.0.0:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/vue-declarative-plots/-/vue-declarative-plots-1.2.9.tgz#feef8c1d5919ab5806ab82e332c9c20141abbff1"
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/vue-declarative-plots/-/vue-declarative-plots-1.2.10.tgz#eaf8a2e19b9faacb17df61920c657f56c0475362"
   dependencies:
     colorjoe "^4.1.0"
     d3 "^5.7.0"