"Not" -> "Note", and linebreaks on <br> for readability in source. (#…

…2252)

* "Not" -> "Note", and linebreaks on <br> for readability in source. Fix #2162

* Replace two images with "image" util function. Fix #2163?

refinery/ui/source/js/dashboard/services/intros/satori-list-graph.js

@@ -94,6 +94,17 @@ function DashboardIntrosSatoriListGraph (
       );
     }
 
+    function image (name) {
+      return (
+        '<svg>' +
+        '  <use' +
+        '    xmlns:xlink="http://www.w3.org/1999/xlink"' +
+        '    xlink:href="/images/' + name + '">' +
+        '  </use>' +
+        '</svg>'
+      );
+    }
+
 
     self.options = angular.copy(introJsDefaultOptions);
     self.options.steps = [
@@ -146,14 +157,18 @@ function DashboardIntrosSatoriListGraph (
           '<strong>Precision</strong> (highlighted in blue) is defined as ' +
           'the number of retrieved ' +
           'data sets annotated with an ontology term divided by the total ' +
-          'number of retrieved data sets.<br/><br/>E.g., if 6 out of ' +
-          '<strong>retrieved</strong> 12 ' +
+          'number of retrieved data sets.<br/><br/>' +
+
+          'E.g., if 6 out of <strong>retrieved</strong> 12 ' +
           'data sets, annotated with <em>cancer</em>, have been returned in a ' +
           'search for <em>liver</em> than the precision of <em>cancer</em> ' +
           'is 0.5. In other words, half of all retrieved data sets are ' +
-          'related to <em>cancer</em> (see the figure below).<br/>Not that this' +
-          'does not tell us how many <em>cancer</em> data sets are available in the repository!' +
-          '<br/><img src="/static/images/intro-js-precision.png" class="m-t-1"/>',
+          'related to <em>cancer</em> (see the figure below).<br/><br/>' +
+
+          'Note that this does not tell us how many <em>cancer</em> ' +
+          'data sets are available in the repository!<br/><br/>' +
+
+          image('intro-js-precision.png'),
         beforeExecutives: function () {
           var el = document.querySelector(
             '#list-graph-wrapper .global-controls .sort-precision'
@@ -180,9 +195,9 @@ function DashboardIntrosSatoriListGraph (
           'data sets, annotated with <em>cancer</em>, have been returned in a ' +
           'search for <em>liver</em> the recall of <em>cancer</em> is 0.75. ' +
           'In other words, 75% of all <em>cancer</em>-related data sets have ' +
-          'been found with the search (See figure below).' +
-          '<br/><img src="/static/images/intro-js-recall.png" class="m-t-1 m-b-1" /><br/>' +
-          '<em>Note: We haven\'t queried for anything so the recall is 1.</em>',
+          'been found with the search (See figure below).<br>/<br/>' +
+          image('intro-js-recall.png') +
+          '<br/><em>Note: We haven\'t queried for anything so the recall is 1.</em>',
         position: 'left',
         beforeExecutives: function () {
           var el = document.querySelector(