fix page navigation, add page info, more descriptive buttons

raptox · Apr 13, 2020 · 75fa088 · 75fa088
1 parent 129d1a6
commit 75fa088
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/app/components/Basic.css b/app/components/Basic.css
@@ -41,3 +41,7 @@
 .tableInfo {
   margin-top: 20px;
 }
+
+.pageInfo {
+  margin-left: 10px;
+}
diff --git a/app/components/ParseXML.js b/app/components/ParseXML.js
@@ -71,7 +71,7 @@ export default class ParseXML extends Component {
         {data && (
           <Button
             variant="contained"
-            color="info"
+            color="default"
             onClick={() => this.openFile(this.state.selectedFile)}
             style={buttonStyle}
           >

diff --git a/app/components/ViewParsed.js b/app/components/ViewParsed.js
@@ -25,7 +25,8 @@ export default class ViewParsed extends Component {
       balanceZoomData: {},
       balanceZoomEnd: false,
       balanceZoomStart: true,
-      balanceZoomMaxValue: 0
+      balanceZoomMaxValue: 0,
+      balanceZoomPages: 0
     };
   }
 
@@ -40,7 +41,7 @@ export default class ViewParsed extends Component {
     this.setState({
       balanceZoomIndex: 1,
       balanceZoomStart: true,
-      balanceZoomEnd: false
+      balanceZoomEnd: this.state.balanceZoomPages === 1 ? true : false
     });
   }
 
@@ -59,20 +60,40 @@ export default class ViewParsed extends Component {
         balanceZoom: false,
         balanceZoomIndex: 1,
         balanceZoomStart: true,
-        balanceZoomEnd: false
+        balanceZoomEnd: this.state.balanceZoomPages === 1 ? true : false
       });
     });
   }
 
   unZoomBalanceData() {
     if (this.state.parsedContent.balanceData.labels) {
+      this.setState({
+        balanceZoom: false,
+        balanceZoomIndex: 1,
+        balanceZoomStart: true,
+        balanceZoomEnd: this.state.balanceZoomPages === 1 ? true : false
+      });
       this.recalculateBalanceData(
         0,
         this.state.parsedContent.balanceData.labels.length
       );
     }
   }
 
+  initAll() {
+    this.setState({
+      balanceZoom: false,
+      balanceZoomIndex: 1,
+      balanceZoomStart: true,
+      balanceZoomEnd: this.state.balanceZoomPages === 1 ? true : false,
+      balanceSort: false
+    });
+    this.recalculateBalanceData(
+      0,
+      this.state.parsedContent.balanceData.labels.length
+    );
+  }
+
   nextPageBalance() {
     if (this.state.balanceZoomEnd) {
       window.alert('already on the last page');
@@ -85,7 +106,10 @@ export default class ViewParsed extends Component {
     let end;
     if (newRange > dataSize) {
       end = dataSize;
-      this.setState({ balanceZoomEnd: true });
+      this.setState({
+        balanceZoomEnd: true,
+        balanceZoomIndex: newZoomIndex
+      });
     } else {
       end = newRange;
       this.setState({ balanceZoomIndex: newZoomIndex });
@@ -99,14 +123,17 @@ export default class ViewParsed extends Component {
       window.alert('already on the first page');
       return;
     }
-    if (this.state.balanceZoomIndex === 1) {
+    if (this.state.balanceZoomIndex === 2) {
       this.recalculateBalanceData(0, this.state.balanceZoomPageSize);
-      this.setState({ balanceZoomStart: true });
+      this.setState({
+        balanceZoomIndex: 1,
+        balanceZoomStart: true
+      });
       return;
     }
     let newZoomIndex = this.state.balanceZoomIndex - 1;
-    let start = newZoomIndex * this.state.balanceZoomPageSize;
-    let end = this.state.balanceZoomIndex * this.state.balanceZoomPageSize;
+    let start = (newZoomIndex - 1) * this.state.balanceZoomPageSize;
+    let end = newZoomIndex * this.state.balanceZoomPageSize;
     this.recalculateBalanceData(start, end);
     this.setState({
       balanceZoomIndex: newZoomIndex,
@@ -236,14 +263,14 @@ export default class ViewParsed extends Component {
                   color="primary"
                   onClick={() => this.toggleBalanceZoom()}
                 >
-                  Toggle Zoom
+                  {this.state.balanceZoom ? 'Zoom Out' : 'Zoom In'}
                 </Button>{' '}
                 <Button
                   variant="contained"
                   color="primary"
                   onClick={() => this.toggleBalanceSort()}
                 >
-                  Toggle Sort
+                  {this.state.balanceSort ? 'Unsort MPI time' : 'Sort MPI time'}
                 </Button>
                 {this.state.balanceZoom && (
                   <div>
@@ -261,6 +288,10 @@ export default class ViewParsed extends Component {
                     >
                       Next Page
                     </Button>
+                    <span className={styles.pageInfo}>
+                      Page: {this.state.balanceZoomIndex} /{' '}
+                      {this.state.balanceZoomPages}
+                    </span>
                   </div>
                 )}
                 <Bar
@@ -451,11 +482,15 @@ export default class ViewParsed extends Component {
               maxValues.push(tempMaxValue);
             }
           );
-          console.log(Math.max(...maxValues));
-          this.setState({ balanceZoomMaxValue: Math.max(...maxValues) });
+          this.setState({
+            balanceZoomMaxValue: Math.max(...maxValues),
+            balanceZoomPages: Math.ceil(
+              this.state.parsedContent.balanceData.labels.length /
+                this.state.balanceZoomPageSize
+            )
+          });
         }
-
-        this.unZoomBalanceData();
+        this.initAll();
       });
     }
   }

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ipm-hpc-v2",
   "productName": "IPM-HPC-v2",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Interactive Visualization of MPI Performance Data (Bachelor Thesis)",
   "scripts": {
     "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",