Merge pull request #733 from joko3ono/feat/histogram-graph

Feat: histogram graph

Author: yannickwurm

jest.config.js

@@ -42,10 +42,12 @@ module.exports = {
         'hit_buttons': '<rootDir>/public/js/null_plugins/hit_buttons.js',
         'search_header_plugin': '<rootDir>/public/js/null_plugins/search_header_plugin.js',
         'circos$': '<rootDir>/public/js/tests/mocks/circos.js',
+        'grapher': '<rootDir>/public/js/grapher.js',
+        'histogram': '<rootDir>/public/js/null_plugins/grapher/histogram.js',
     },
     watchPlugins: [
         'jest-watch-typeahead/filename',
         'jest-watch-typeahead/testname'
     ],
     resetMocks: true
-};
+};

package-lock.json

@@ -2,7 +2,7 @@ import d3 from 'd3';
 import Circos from '../packages/circosJS@1.7.0';
 import _ from 'underscore';
 
-import Grapher from './grapher';
+import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
 import Utils from './utils';
 

public/js/circos.js

@@ -29,13 +29,18 @@ export default function Grapher(Graph) {
         }
 
         render() {
-            var cssClasses = Graph.className() + ' grapher';
-            return (
-                <div ref="grapher" className={cssClasses}>
-                    {this.header()}
-                    {this.svgContainerJSX()}
-                </div>
-            );
+            // Do not render when Graph.name() is null
+            if (Graph.name() === null) {
+                return null;
+            } else {
+                var cssClasses = Graph.className() + ' grapher';
+                return (
+                    <div ref="grapher" className={cssClasses}>
+                        {this.header()}
+                        {this.svgContainerJSX()}
+                    </div>
+                );
+            }
         }
 
         header() {
@@ -123,4 +128,4 @@ $(window).resize(
             grapher.draw();
         });
     }, 125)
-);
+);

public/js/grapher.js

@@ -1,6 +1,6 @@
 import d3 from 'd3';
 import _ from 'underscore';
-import Grapher from './grapher';
+import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
 import Utils from './utils';
 

public/js/hits_overview.js

@@ -1,6 +1,6 @@
 import d3 from 'd3';
 import _ from 'underscore';
-import Grapher from './grapher';
+import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
 
 /**

public/js/kablammo.js

@@ -1,6 +1,6 @@
 import d3 from 'd3';
 import _ from 'underscore';
-import Grapher from './grapher';
+import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
 
 /**

public/js/length_distribution.js

@@ -0,0 +1,25 @@
+import Grapher from 'grapher';
+
+class Graph {
+    static canCollapse() {
+        return false;
+    }
+
+    static name() {
+        return null;
+    }
+
+    static className() {
+        return null;
+    }
+
+    static dataName(_props) {
+        return null;
+    }
+
+    static graphId() {
+        return null;
+    }
+}
+
+export default Grapher(Graph);

public/js/null_plugins/grapher/histogram.js

@@ -1,3 +1,4 @@
+import Histogram from 'histogram';
 
 class ReportPlugins {
     constructor(parent) {
@@ -13,6 +14,10 @@ class ReportPlugins {
     queryResults(_query) {
         return [];
     }
+
+    generateStats() {
+        return (<Histogram />);
+    }
 }
 
-export default ReportPlugins;
+export default ReportPlugins;

public/js/null_plugins/report_plugins.js

@@ -300,6 +300,7 @@ class Report extends Component {
                 <div className="col-md-9">
                     {this.overviewJSX()}
                     {this.circosJSX()}
+                    {this.plugins.generateStats()}
                     {this.state.results}
                 </div>
             </div>