From 9e68f132af9a3b5c797cd2aac4e1ea5b198a76f2 Mon Sep 17 00:00:00 2001
From: Bhaskar Singh <allstarbhaskarkumar@gmail.com>
Date: Thu, 20 Feb 2020 09:14:29 +0530
Subject: [PATCH] fixes #79

---
 polkaviz-app/src/components/Rectangle.js      | 31 ++++++++++---------
 .../src/components/kusama/KusamaApp.js        | 20 ++++++++++++
 .../src/components/kusama/KusamaIntentions.js |  1 +
 .../src/components/kusama/KusamaRectangle.js  | 12 ++++---
 .../src/components/kusama/KusamaValidators.js |  1 +
 5 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/polkaviz-app/src/components/Rectangle.js b/polkaviz-app/src/components/Rectangle.js
index 2a4b3aa..95ecb4b 100644
--- a/polkaviz-app/src/components/Rectangle.js
+++ b/polkaviz-app/src/components/Rectangle.js
@@ -14,23 +14,24 @@ class Rectangle extends React.Component {
     });
     document.body.style.cursor = 'pointer';
     // this.setState({ showValidatorAddress: true });
-    // this.props.onIntentionHover({
-    //   accountId: 
-    //   this.props.validatorAddress.toString().slice(0, 8) +
-    //   '......' +
-    //   this.props.validatorAddress.toString().slice(-8),
-    //   backersText: this.props.nominators,
-    //   selfText: this.props.bondvalue,
-    // })
+    this.props.onIntentionHover({
+      accountId: 
+      this.props.validatorAddress.toString().slice(0, 8) +
+      '......' +
+      this.props.validatorAddress.toString().slice(-8),
+      backersText: this.props.nominators,
+      selfText: this.props.bondvalue,
+    })
     // console.log("intentions info");
   };
   handleOnMouseOut = e => {
-    e.target.setAttrs({
-      scaleX: 1,
-      scaleY: 1,
-    });
-    document.body.style.cursor = 'default';
-    this.setState({ showValidatorAddress: false });
+    this.props.onIntentionMouseOut(e);
+    // e.target.setAttrs({
+    //   scaleX: 1,
+    //   scaleY: 1,
+    // });
+    // document.body.style.cursor = 'default';
+    // this.setState({ showValidatorAddress: false });
   };
   handleClick = () => {
     document.body.style.cursor = 'default';
@@ -88,7 +89,7 @@ class Rectangle extends React.Component {
         <Rect
           x={this.props.x}
           y={this.props.y}
-          width={3.5}
+          width={6}
           height={10}
           fill={this.props.color}
           cornerRadius={4.69457}
diff --git a/polkaviz-app/src/components/kusama/KusamaApp.js b/polkaviz-app/src/components/kusama/KusamaApp.js
index ccb81c1..2e4dcca 100644
--- a/polkaviz-app/src/components/kusama/KusamaApp.js
+++ b/polkaviz-app/src/components/kusama/KusamaApp.js
@@ -303,6 +303,15 @@ class KusamaApp extends React.Component {
     });
   }
 
+  onValidatorMouseOut = (e) => {
+    e.target.setAttrs({
+      scaleX: 1,
+      scaleY: 1,
+    });
+    document.body.style.cursor = 'default';
+    this.forceUpdate();
+  }
+
   onIntentionHover = (info) => {
     // console.log("intention info", info);
     //check if specific validator info's length is more than 1
@@ -315,6 +324,15 @@ class KusamaApp extends React.Component {
     });
   }
 
+  onIntentionMouseOut = (e) => {
+    e.target.setAttrs({
+      scaleX: 1,
+      scaleY: 1,
+    });
+    document.body.style.cursor = 'default';
+    this.forceUpdate();
+  }
+
   render() {
     // TODO: Remove not in use variables/contants
     const commonWidth = window.innerWidth + 300;
@@ -406,6 +424,7 @@ class KusamaApp extends React.Component {
                 <KusamaValidator
                   key={index}
                   onValidatorHover={this.onValidatorHover}
+                  onValidatorMouseOut={this.onValidatorMouseOut}
                   validatorAddress={person.valname}
                   valinfo={person.valinfo}
                   accountIndex={person.accountIndex}
@@ -437,6 +456,7 @@ class KusamaApp extends React.Component {
                 <KusamaIntention
                   key={index}
                   onIntentionHover={this.onIntentionHover}
+                  onIntentionMouseOut={this.onIntentionMouseOut}
                   validatorAddress={person.valname}
                   valinfo={person.valinfo}
                   totalinfo={this.state.kusamavaltotalinfo}
diff --git a/polkaviz-app/src/components/kusama/KusamaIntentions.js b/polkaviz-app/src/components/kusama/KusamaIntentions.js
index ae6eaaa..1a4f9fb 100644
--- a/polkaviz-app/src/components/kusama/KusamaIntentions.js
+++ b/polkaviz-app/src/components/kusama/KusamaIntentions.js
@@ -113,6 +113,7 @@ class Validator extends React.Component {
           intentions={this.props.intentions}
           color={color}
           onIntentionHover={this.props.onIntentionHover}
+          onIntentionMouseOut={this.props.onIntentionMouseOut}
         />
       </React.Fragment>
     );
diff --git a/polkaviz-app/src/components/kusama/KusamaRectangle.js b/polkaviz-app/src/components/kusama/KusamaRectangle.js
index 0f5a0ab..0e07aac 100644
--- a/polkaviz-app/src/components/kusama/KusamaRectangle.js
+++ b/polkaviz-app/src/components/kusama/KusamaRectangle.js
@@ -87,8 +87,8 @@ class Rectangle extends React.Component {
         <Rect
           x={this.props.x}
           y={this.props.y}
-          width={5}
-          height={10}
+          width={8}
+          height={12}
           fill={this.props.color}
           cornerRadius={4.69457}
           rotation={this.props.angle}
@@ -111,10 +111,12 @@ class Rectangle extends React.Component {
             }
           }
           }
-          onMouseOut={
-            !this.props.isMainWrapper ? this.handleOnMouseOut : undefined
+          onMouseOut={(e) =>{
+              if(!this.props.isMainWrapper){
+                this.props.onValidatorMouseOut(e);
+              }
+            }
           }
-          // onClick={this.handleClick}
         />
 
         {this.state.showValidatorAddress && !this.props.isMainWrapper && (
diff --git a/polkaviz-app/src/components/kusama/KusamaValidators.js b/polkaviz-app/src/components/kusama/KusamaValidators.js
index 1683a25..c505938 100644
--- a/polkaviz-app/src/components/kusama/KusamaValidators.js
+++ b/polkaviz-app/src/components/kusama/KusamaValidators.js
@@ -130,6 +130,7 @@ class Validator extends React.Component {
           nominatorsStake={nominatorsStake}
           accountIndex={this.props.accountIndex}
           onValidatorHover={this.props.onValidatorHover}
+          onValidatorMouseOut={this.props.onValidatorMouseOut}
         />
       </React.Fragment>
     );