Refactor legend to component

Author: rnugraha

.gitignore

@@ -23,3 +23,6 @@ yarn-error.log*
 
 # idea
 .idea
+
+# testing
+/coverage

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.3",
   "description": "A light weight React based mutation lollipop plot.",
   "author": "Riza Nugraha",
-  "license": "GPLv3",
+  "license": "GPL-3.0-or-later",
   "repository": "/react-mutation-plot",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -51,6 +51,8 @@
     "@svgr/rollup": "^2.4.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^5.1.4",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^5.0.1",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",

src/components/Legend.js

@@ -0,0 +1,61 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+const renderDomainLegendItems = (uniqueDomains) => {
+  return uniqueDomains.map((d, idx) => {
+    return (
+      <React.Fragment>
+        <rect
+          fill={d.color}
+          x={770}
+          y={32 + (15 * idx) + 'px'}
+          width={10}
+          height={10}
+        />
+        <text
+          x={785}
+          y={40 + (15 * idx) + 'px'}
+          style={{
+            fontSize: '11px',
+            fontFamily: 'arial'
+          }}
+        >
+          {d.label}
+        </text>
+      </React.Fragment>)
+  })
+}
+
+const pfamDomainsLegend = (domains) => {
+  const uniqueDomains = Array.from(new Set(domains.map(d => d.label)))
+    .map(label => ({
+      label: label,
+      color: domains.find(d => d.label === label).color
+    }))
+  return uniqueDomains.length ? (
+    <g>
+      <text x='770'
+        y='20'
+        style={{
+          fontSize: '12px',
+          fontWeight: 'bold',
+          fontFamily: 'arial',
+          fill: '#333'
+        }}
+      >
+        Pfam domains:
+      </text>
+      {renderDomainLegendItems(uniqueDomains)}
+    </g>
+  ) : ''
+}
+
+const legend = (props) => {
+  const {domains} = props
+  return domains ? pfamDomainsLegend(domains) : ''
+}
+
+legend.propTypes = {
+  domains: PropTypes.array
+}
+export default legend

src/components/Legend.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+import Legend from './Legend'
+
+export const mockDomains = [
+  {
+    'startCodon': 57,
+    'endCodon': 167,
+    'label': 'Recep_L_domain',
+    'color': '#2dcf00',
+    'tooltip': {
+      'header': 'Recep_L_domain',
+      'body': 'Recep_L_domain (57 - 167)'
+    }
+  },
+  {
+    'startCodon': 185,
+    'endCodon': 338,
+    'label': 'Furin-like',
+    'color': '#ff5353',
+    'tooltip': {
+      'header': 'Furin-like'
+    }
+  }
+]
+
+describe('Legend', () => {
+  it('should not render anything if theres is no domains', () => {
+    const wrapper = shallow(<Legend domains={[]} />)
+    expect(wrapper).toEqual({})
+  })
+  it('should render legend', () => {
+    const wrapper = shallow(<Legend domains={mockDomains} />)
+    expect(wrapper.find('g').length).toBe(1)
+    expect(wrapper.find('rect').length).toBe(2)
+  })
+})

src/index.js

@@ -6,6 +6,7 @@ import Lollipop, {lollipopSpec} from './components/Lollipop'
 import Domain, {domainSpec} from './components/Domain'
 import SVGAxis from './components/SVGAxis'
 import Tooltip from './components/Tooltip'
+import Legend from './components/Legend'
 
 const LOLLIPOP_ID_CLASS_PREFIX = 'lollipop-'
 const DOMAIN_ID_CLASS_PREFIX = 'domain-'
@@ -193,57 +194,8 @@ class LollipopPlot extends React.Component {
     return (this.props.lollipops.find(lollipop => (lollipop.count > this.yMax())) ? '>= ' : '') + this.yMax()
   }
 
-  renderDomainLegendItems = (uniqueDomains) => {
-    return uniqueDomains.map((d, idx) => {
-      return (
-        <React.Fragment>
-          <rect
-            fill={d.color}
-            x={770}
-            y={32 + (15 * idx) + 'px'}
-            width={10}
-            height={10}
-          />
-          <text
-            x={785}
-            y={40 + (15 * idx) + 'px'}
-            style={{
-              fontSize: '11px',
-              fontFamily: 'arial'
-            }}
-          >
-            {d.label}
-          </text>
-        </React.Fragment>)
-    })
-  }
-
-  pfamDomainsLegend = () => {
-    const {domains} = this.props
-    const uniqueDomains = Array.from(new Set(domains.map(d => d.label)))
-      .map(label => ({
-        label: label,
-        color: domains.find(d => d.label === label).color
-      }))
-    return (
-      <g>
-        <text x='770'
-          y='20'
-          style={{
-            fontSize: '12px',
-            fontWeight: 'bold',
-            fontFamily: 'arial',
-            fill: '#333'
-          }}
-        >
-          Pfam domains:
-        </text>
-        {this.renderDomainLegendItems(uniqueDomains)}
-      </g>
-    )
-  }
-
   render() {
+    const {domains} = this.props
     return (
       <React.Fragment>
         <svg xmlns='http://www.w3.org/2000/svg' width={this.svgWidth() + 200} height={this.svgHeight()}
@@ -267,7 +219,7 @@ class LollipopPlot extends React.Component {
           />
           {this.lollipops()}
           {this.domains()}
-          {this.pfamDomainsLegend()}
+          <Legend domains={domains} />
           <SVGAxis
             key='horz'
             x={this.geneX()}

src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })