Add score lead line to winrate graph

src/components/App.js

@@ -346,6 +346,7 @@ class App extends Component {
         showNextMoves: state.showNextMoves,
         showSiblings: state.showSiblings,
         showWinrateGraph: state.showWinrateGraph,
+        showScoreLeadGraph: state.showScoreLeadGraph,
         showGameGraph: state.showGameGraph,
         showCommentBox: state.showCommentBox,
         showLeftSidebar: state.showLeftSidebar,

src/components/Sidebar.js

@@ -106,13 +106,15 @@ export default class Sidebar extends Component {
       treePosition,
 
       showWinrateGraph,
+      showScoreLeadGraph,
       showGameGraph,
       showCommentBox,
 
       graphGridSize,
       graphNodeSize,
 
-      winrateData
+      winrateData,
+      scoreLeadData
     },
     {winrateGraphHeight, sidebarSplit}
   ) {
@@ -140,6 +142,8 @@ export default class Sidebar extends Component {
           lastPlayer,
           width: winrateGraphWidth,
           data: winrateData,
+          scoreLeadData: scoreLeadData,
+          showScoreLeadGraph: showScoreLeadGraph,
           currentIndex: level,
           onCurrentIndexChange: this.handleWinrateGraphChange
         }),
@@ -230,8 +234,14 @@ export default class Sidebar extends Component {
   }
 }
 
-Sidebar.getDerivedStateFromProps = function({showWinrateGraph, winrateData}) {
+Sidebar.getDerivedStateFromProps = function({
+  showWinrateGraph,
+  winrateData,
+  showScoreLeadGraph,
+  scoreLeadData
+}) {
   return {
-    showWinrateGraph: showWinrateGraph && winrateData.some(x => x != null)
+    showWinrateGraph: showWinrateGraph && winrateData.some(x => x != null),
+    showScoreLeadGraph: showScoreLeadGraph && scoreLeadData.some(x => x != null)
   }
 }

src/components/sidebars/WinrateGraph.js

@@ -71,13 +71,18 @@ export default class WinrateGraph extends Component {
     }
   }
 
-  shouldComponentUpdate({lastPlayer, width, currentIndex, data}, {invert}) {
+  shouldComponentUpdate(
+    {lastPlayer, width, currentIndex, data, scoreLeadData, showScoreLeadGraph},
+    {invert}
+  ) {
     return (
       lastPlayer !== this.props.lastPlayer ||
       width !== this.props.width ||
       currentIndex !== this.props.currentIndex ||
       data[currentIndex] !== this.props.data[currentIndex] ||
-      invert !== this.state.invert
+      scoreLeadData[currentIndex] !== this.props.scoreLeadData[currentIndex] ||
+      invert !== this.state.invert ||
+      showScoreLeadGraph !== this.state.showScoreLeadGraph
     )
   }
 
@@ -102,7 +107,14 @@ export default class WinrateGraph extends Component {
   }
 
   render() {
-    let {lastPlayer, width, currentIndex, data} = this.props
+    let {
+      lastPlayer,
+      width,
+      currentIndex,
+      data,
+      scoreLeadData,
+      showScoreLeadGraph
+    } = this.props
     let {invert} = this.state
 
     let dataDiff = data.map((x, i) =>
@@ -113,6 +125,7 @@ export default class WinrateGraph extends Component {
     let dataDiffMax = Math.max(...dataDiff.map(Math.abs), 25)
 
     let round2 = x => Math.round(x * 100) / 100
+
     let blackWinrate =
       data[currentIndex] == null ? null : round2(data[currentIndex])
     let blackWinrateDiff =
@@ -122,26 +135,54 @@ export default class WinrateGraph extends Component {
     let whiteWinrateDiff =
       dataDiff[currentIndex] == null ? null : -round2(dataDiff[currentIndex])
 
+    let blackScoreLead =
+      scoreLeadData[currentIndex] == null
+        ? null
+        : round2(scoreLeadData[currentIndex])
+    let whiteScoreLead =
+      scoreLeadData[currentIndex] == null
+        ? null
+        : -round2(scoreLeadData[currentIndex])
+
+    let absScoreLeadMax = Math.max(
+      ...scoreLeadData.map((x, i) =>
+        i === 0 || x === null || x === undefined ? null : Math.abs(x)
+      ),
+      12
+    )
+
+    let normScoreLeadData = scoreLeadData.map((x, i) =>
+      i === 0 || x === null || x === undefined
+        ? null
+        : 50 + (50 * x) / absScoreLeadMax
+    )
+
+    let winrates = [
+      [blackWinrate, blackWinrateDiff],
+      [whiteWinrate, whiteWinrateDiff]
+    ].map(
+      ([winrate, diff], i) =>
+        `${
+          i === 0 ? t('Black Winrate:') : t('White Winrate:')
+        } ${i18n.formatNumber(winrate)}%${
+          diff == null
+            ? ''
+            : ` (${diff >= 0 ? '+' : '-'}${i18n.formatNumber(Math.abs(diff))})`
+        }`
+    )
+
+    let scoreleads = (showScoreLeadGraph
+      ? [blackScoreLead, whiteScoreLead]
+      : []
+    ).map(
+      (scorelead, i) =>
+        `${
+          i === 0 ? t('Black ScoreLead:') : t('White ScoreLead:')
+        } ${i18n.formatNumber(scorelead)}`
+    )
+
     let tooltip =
-      data[currentIndex] == null
-        ? ''
-        : [
-            [blackWinrate, blackWinrateDiff],
-            [whiteWinrate, whiteWinrateDiff]
-          ]
-            .map(
-              ([winrate, diff], i) =>
-                `${
-                  i === 0 ? t('Black Winrate:') : t('White Winrate:')
-                } ${i18n.formatNumber(winrate)}%${
-                  diff == null
-                    ? ''
-                    : ` (${diff >= 0 ? '+' : '-'}${i18n.formatNumber(
-                        Math.abs(diff)
-                      )})`
-                }`
-            )
-            .join('\n')
+      data[currentIndex] == null ? '' : [...winrates, ...scoreleads].join('\n')
 
     return h(
       'section',
@@ -296,7 +337,7 @@ export default class WinrateGraph extends Component {
               .join(' ')
           }),
 
-          // Draw data lines
+          // Draw winrate data lines
 
           h('path', {
             fill: 'none',
@@ -333,7 +374,52 @@ export default class WinrateGraph extends Component {
                 return ''
               })
               .join(' ')
-          })
+          }),
+
+          // Draw score lead data lines
+
+          ...(!showScoreLeadGraph
+            ? []
+            : [
+                h('path', {
+                  fill: 'none',
+                  stroke: '#03e',
+                  'stroke-width': 2,
+                  'vector-effect': 'non-scaling-stroke',
+
+                  d: normScoreLeadData
+                    .map((x, i) => {
+                      if (x == null) return ''
+
+                      let command =
+                        i === 0 || normScoreLeadData[i - 1] == null ? 'M' : 'L'
+                      return `${command} ${i},${x}`
+                    })
+                    .join(' ')
+                }),
+
+                h('path', {
+                  fill: 'none',
+                  stroke: '#03c',
+                  'stroke-width': 2,
+                  'stroke-dasharray': 2,
+                  'vector-effect': 'non-scaling-stroke',
+
+                  d: normScoreLeadData
+                    .map((x, i) => {
+                      if (i === 0) return 'M 0,50'
+
+                      if (x == null && normScoreLeadData[i - 1] != null)
+                        return `M ${i - 1},${normScoreLeadData[i - 1]}`
+
+                      if (x != null && normScoreLeadData[i - 1] == null)
+                        return `L ${i},${x}`
+
+                      return ''
+                    })
+                    .join(' ')
+                })
+              ])
         ),
 
         // Draw marker

src/menu.js

@@ -33,6 +33,7 @@ exports.get = function(props = {}) {
     showNextMoves,
     showSiblings,
     showWinrateGraph,
+    showScoreLeadGraph,
     showGameGraph,
     showCommentBox,
     showLeftSidebar,
@@ -683,6 +684,18 @@ exports.get = function(props = {}) {
             }))
           }
         },
+        {
+          label: i18n.t('menu.view', 'Show &Score Lead Graph'),
+          type: 'checkbox',
+          checked: !!showScoreLeadGraph,
+          enabled: !!showGameGraph || !!showCommentBox,
+          click: () => {
+            toggleSetting('view.show_scoreleadgraph')
+            sabaki.setState(({showScoreLeadGraph}) => ({
+              showScoreLeadGraph: !showScoreLeadGraph
+            }))
+          }
+        },
         {
           label: i18n.t('menu.view', 'Show Game &Tree'),
           type: 'checkbox',

src/modules/enginesyncer.js

@@ -145,7 +145,10 @@ export default class EngineSyncer extends EventEmitter {
               this.analysis = {
                 sign,
                 variations,
-                winrate: Math.max(...variations.map(({winrate}) => winrate))
+                winrate: Math.max(...variations.map(({winrate}) => winrate)),
+                scoreLead: Math.max(
+                  ...variations.map(({scoreLead}) => scoreLead)
+                )
               }
             } else if (line.startsWith('play ')) {
               sign = -sign

src/modules/sabaki.js

@@ -76,6 +76,7 @@ class Sabaki extends EventEmitter {
       showLeftSidebar: setting.get('view.show_leftsidebar'),
       leftSidebarWidth: setting.get('view.leftsidebar_width'),
       showWinrateGraph: setting.get('view.show_winrategraph'),
+      showScoreLeadGraph: setting.get('view.show_scoreleadgraph'),
       showGameGraph: setting.get('view.show_graph'),
       showCommentBox: setting.get('view.show_comments'),
       sidebarWidth: setting.get('view.sidebar_width'),
@@ -197,6 +198,11 @@ class Sabaki extends EventEmitter {
         return [
           ...this.gameTree.listCurrentNodes(state.gameCurrents[state.gameIndex])
         ].map(x => x.data.SBKV && x.data.SBKV[0])
+      },
+      get scoreLeadData() {
+        return [
+          ...this.gameTree.listCurrentNodes(state.gameCurrents[state.gameIndex])
+        ].map(x => x.data.SBKS && x.data.SBKS[0])
       }
     }
   }
@@ -1691,13 +1697,17 @@ class Sabaki extends EventEmitter {
 
           if (syncer.analysis != null && syncer.treePosition != null) {
             let tree = this.state.gameTrees[this.state.gameIndex]
-            let {sign, winrate} = syncer.analysis
+            let {sign, winrate, scoreLead} = syncer.analysis
             if (sign < 0) winrate = 100 - winrate
+            if (sign < 0) scoreLead = 0 - scoreLead
 
             let newTree = tree.mutate(draft => {
               draft.updateProperty(syncer.treePosition, 'SBKV', [
                 (Math.round(winrate * 100) / 100).toString()
               ])
+              draft.updateProperty(syncer.treePosition, 'SBKS', [
+                (Math.round(scoreLead * 100) / 100).toString()
+              ])
             })
 
             this.setCurrentTreePosition(newTree, this.state.treePosition)

src/setting.js

@@ -202,6 +202,7 @@ let defaults = {
   'view.show_next_moves': true,
   'view.show_siblings': true,
   'view.show_winrategraph': true,
+  'view.show_scoreleadgraph': true,
   'view.sidebar_width': 200,
   'view.sidebar_minwidth': 100,
   'view.winrategraph_blunderthreshold': 5,