5 files changed, 217 insertions, 40 deletions

diff --git a/src/App.css b/src/App.css
index d0870a2..fc9d5ec 100644
--- a/src/App.css
+++ b/src/App.css
@@ -51,3 +51,17 @@
 .App li[well-covered="false"] {
   color: red;
 }
+
+.App .listing {
+  overflow-x: auto;
+  padding: 0.5rem 0;
+  background-color: #FAFAFA;
+}
+
+.App .listing li[well-covered] {
+    font-weight: bold;
+}
+
+.App pre {
+  margin: 0.1rem;
+}
diff --git a/src/App.js b/src/App.js
index 347d243..fb77d93 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,9 +18,10 @@
  */
 
 import React, { Component } from 'react';
-import {Parser} from 'xml2js';
+import { Parser } from 'xml2js';
+import JSZip from 'jszip';
 
-import {Counters, SessionInfo, PackagesCoverage} from './Blocks.js';
+import { Report } from './Report.js';
 import './App.css';
 
 class App extends Component {
@@ -28,24 +29,31 @@ class App extends Component {
     super(props);
     this.state = {
       report: null,
+      sourceSet: null,
       hasError: false
     };
   }
 
   componentDidCatch(error, info) {
     this.setState({ hasError: true });
-    console.err(error, info);
+    console.error(error, info);
   }
 
   _useReportFile(file) {
     const fileReader = new FileReader();
-    fileReader.onloadend = (readEvent) => this._useReport(readEvent.target.result);
+    fileReader.onloadend = readEvent => this._useReport(readEvent.target.result);
     fileReader.readAsText(file);
   }
 
   _useReport(xmlString) {
+    this.setState({ hasError: false });
     const xmlParser = new Parser();
-    xmlParser.parseString(xmlString, (err, result) => this.setState({ report: result.report }));
+    xmlParser.parseString(xmlString, (_, result) => this.setState({ report: result.report }));
+  }
+
+  _useSourceArchive(file) {
+    this.setState({ hasError: false });
+    JSZip.loadAsync(file).then(zip => this.setState({ sourceSet: zip.files }));
   }
 
   _renderError() {
@@ -58,7 +66,7 @@ class App extends Component {
   }
 
   _renderReport() {
-    return this.state.hasError ? this._renderError(): (<Report report={this.state.report} />);
+    return this.state.hasError ? this._renderError(): (<Report report={this.state.report} sourceSet={this.state.sourceSet} />);
   }
 
   render() {
@@ -73,7 +81,7 @@ class App extends Component {
 
         <div>
           <label htmlFor="sourceJar">Source JAR: </label>
-          <input id="sourceJar" type="file" accept=".jar" onChange={event => null} />
+          <input id="sourceJar" type="file" accept=".jar" onChange={event => this._useSourceArchive(event.target.files[0])} />
         </div>
 
         <hr />
@@ -83,37 +91,4 @@ class App extends Component {
   }
 }
 
-class Report extends Component {  
-  _renderNone() {
-    return (<span>Please provide a JaCoCo XML report file to visualise.</span>);
-  }
-
-  _renderReport() {
-    return (
-      <div>
-        <h2>Viewing report: "{this.props.report.$.name}"</h2>
-
-        <section>
-          <h3>Session info</h3>
-          <SessionInfo data={this.props.report.sessioninfo} />
-        </section>
-        
-        <section>
-          <h3>Global coverage</h3>
-          <Counters data={this.props.report.counter} />
-        </section>
-
-        <section>
-          <h3>Details</h3>
-          <PackagesCoverage packages={this.props.report.package} />
-        </section>
-      </div>
-    );
-  }
-
-  render() {
-    return this.props.report ? this._renderReport() : this._renderNone();
-  }
-}
-
 export default App;
diff --git a/src/Blocks.js b/src/Blocks.js
index d9020fa..f830538 100644
--- a/src/Blocks.js
+++ b/src/Blocks.js
@@ -18,6 +18,7 @@
  */
 
 import React, { Component } from 'react';
+import { CoverageListing } from './CoverageListing.js';
 
 function renderRows(renderRowFunc, rows, inline) {
   const renderedRows = rows ? rows.map(renderRowFunc) : (<li>None.</li>);
@@ -97,3 +98,38 @@ class MethodsCoverage extends Component {
     return renderRows(this._renderRow, this.props.methods, false);
   }
 }
+
+export class PackagesSourceCoverage extends Component {
+  _renderRow(row) {
+    return (
+      <li key={row.$.name}>
+        <span>{row.$.name}</span>
+        <SourcesCoverage package={row.$.name} 
+                         packageSourceFiles={row.sourcefile}
+                         sourceSet={this.props.sourceSet} />
+      </li>
+    )
+  }
+
+  render() {
+    return renderRows(row => this._renderRow(row), this.props.packages, false);
+  }
+}
+
+class SourcesCoverage extends Component {
+  _renderRow(row) {
+    const fileName = this.props.package + '/' + row.$.name;
+    return (
+      <li key={fileName}>
+        <span>{fileName}</span>
+        <CoverageListing fileName={fileName}
+                         sourceSet={this.props.sourceSet}
+                         coverage={row.line} />
+      </li>
+    )
+  }
+
+  render() {
+    return renderRows(row => this._renderRow(row), this.props.packageSourceFiles, false);
+  }
+}
diff --git a/src/CoverageListing.js b/src/CoverageListing.js
new file mode 100644
index 0000000..8b7830c
--- /dev/null
+++ b/src/CoverageListing.js
@@ -0,0 +1,93 @@
+/*
+ * JaCoCo Report Viewer, a web-based coverage report viewer
+ * Copyright (C) 2018  Pacien TRAN-GIRARD
+ *                     Adam NAILI
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react';
+
+export class CoverageListing extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      listingContent: null,
+      coverageMap: null
+    };
+  }
+
+  componentDidMount() {
+    this._updateState();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.fileName === prevProps.fileName &&
+        this.props.sourceSet === prevProps.sourceSet &&
+        this.props.coverage === prevProps.coverage) return;
+
+    this._updateState();
+  }
+
+  _updateState() {
+    if (!this.props.sourceSet || !(this.props.fileName in this.props.sourceSet)) {
+      this.setState({ listingContent: null });
+      return;
+    }
+
+    this._updateListingContent();
+    this._updateCoverageMap();
+  }
+
+  _updateCoverageMap() {
+    const coverageMap = this.props.coverage.reduce((map, line) => (map[parseInt(line.$.nr)] = line.$, map), {});
+    this.setState({ coverageMap: coverageMap });
+  }
+
+  _updateListingContent() {