fix(pairwise): fix window overflow issue

Duke-MatSci · Jul 30, 2023 · 8cedf46 · 8cedf46
1 parent 580872a
commit 8cedf46
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/app/src/pages/metamine/Base.vue b/app/src/pages/metamine/Base.vue
@@ -12,7 +12,7 @@
                 <div class="md-toolbar-section-end">
                   <div>
                     <nav class="nav_menu nav_menu--lightbg">
-                      <ul class="nav_ul">
+                      <ul class="nav_ul" style="width: 100%">
                         <li>
                           <div class="nav_menu--container">
                             <a class="u--default-size nav_menu--handler" href="#">ABOUT</a>

diff --git a/app/src/pages/metamine/visualizationNU/PairwisePlotPage.vue b/app/src/pages/metamine/visualizationNU/PairwisePlotPage.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="wrapper-box md-gutter adjust-padding" style="margin:5px 0 0 5px;">
+    <div class="wrapper-box md-gutter adjust-padding" style="margin:5px 0 0 5px">
       <div class="md-layout-item">
         <h2 class="metamine_pairwise-header">Material Data Explorer (Pairwise)</h2>
       </div>
       <div class="main-content" style="margin: 1rem; display: flex">
-        <div class="pairwise-plot-chart">
+        <div class="pairwise-plot-chart" style="width: 50%">
           <PairwisePlot></PairwisePlot>
         </div>
-        <div class="subcharts" style="width: 20%;">
+        <div class="subcharts" style="width: 20%">
           <Structure></Structure>
           <Youngs></Youngs>
           <Poisson></Poisson>
         </div>
-        <div class="side-tools" style="width: 30%;">
+        <div class="side-tools" style="width: 30%">
           <DataSelector></DataSelector>
           <RangeSelector></RangeSelector>
           <MaterialInformation></MaterialInformation>
@@ -27,7 +27,6 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  width: 18%;
   overflow: hidden;
 }
 </style>

diff --git a/app/src/pages/metamine/visualizationNU/components/pairwise.vue b/app/src/pages/metamine/visualizationNU/components/pairwise.vue
@@ -9,8 +9,10 @@ import { mapState } from 'vuex'
 
 const margin = { top: 10, right: 20, bottom: 50, left: 100 }
 const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-const height = vh * 0.83
-const width = height
+const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+const width = Math.min(vw * 0.4, vh * 0.8)
+const height = width
+// const width = height
 const padding = 20
 
 function expo (x, f) {
@@ -150,11 +152,6 @@ export default {
         .attr('width', width)
         .attr('height', height)
         .attr('viewBox', [-margin.left, -margin.top, width, height])
-        .attr(
-          'style',
-          'max-width: 100%; height: auto;'
-        )
-
       // Compute the inner dimensions of the cells.
       const cellWidth =
                 (width -
@@ -203,7 +200,7 @@ export default {
             'transform',
             (d, i) =>
                             `translate(${0 - margin.left + padding * 1.5},${
-                                i * (cellHeight + padding) + margin.top * 9
+                                i * (cellHeight + padding) + margin.top * 6
                             }) rotate(270)`
           )
           .attr('x', padding / 2)
@@ -224,9 +221,7 @@ export default {
             'transform',
             (d, i) =>
                             `translate(${
-                                i * (cellWidth + padding) +
-                                margin.bottom -
-                                padding / 2
+                                i * (cellWidth + padding) 
                             },${cellHeight * 6 + margin.bottom + padding * 4})`
           )
           .attr('x', padding / 2)
@@ -257,7 +252,6 @@ export default {
       x = columns, // array of x-accessors
       y = columns, // array of y-accessors
       z = () => 1, // given d in data, returns the (categorical) z-value
-      height = width, // outer height, in pixels
       xType = d3.scaleLinear, // the x-scale type
       yType = d3.scaleLinear, // the y-scale type
       zDomain, // array of z-values