highlight syntax and search terms in search results

zeppelin-web/src/app/search/result-list.controller.js

@@ -1,29 +1,110 @@
 /* jshint loopfunc: true */
 /*
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
+ * distributed under the License is distributed on an 'AS IS' BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
 'use strict';
 
-angular.module('zeppelinWebApp').controller('SearchResultCtrl', function($scope, $routeParams, searchService) {
+angular
+  .module('zeppelinWebApp')
+  .controller('SearchResultCtrl', function($scope, $routeParams, searchService) {
 
   var results = searchService.search({'q': $routeParams.searchTerm}).query();
 
-  console.log("Found: %o", results);
+  console.log('Found: %o', results);
   results.$promise.then(function(result) {
     $scope.notes = result.body;
   });
-  console.log("Found body: %o", $scope.notes);
+  console.log('Found body: %o', $scope.notes);
 
   $scope.page = 0;
-  $scope.allResults = false;  
+  $scope.allResults = false;
+
+
+  $scope.highlightSearchResults = function(note) {
+    return function(_editor) {
+      function getEditorMode(text) {
+        var editorModes = {
+          'ace/mode/scala': /^%spark/,
+          'ace/mode/sql': /^%(\w*\.)?\wql/,
+          'ace/mode/markdown': /^%md/,
+          'ace/mode/sh': /^%sh/
+        }
+
+        return Object.keys(editorModes).reduce(function(res, mode) {
+          return editorModes[mode].test(text)? mode : res
+        }, 'ace/mode/scala')
+      }
+
+      var Range = ace.require('ace/range').Range;
+
+      _editor.setOption('highlightActiveLine', false);
+      _editor.$blockScrolling = Infinity;
+      _editor.setReadOnly(true);
+      _editor.renderer.setShowGutter(false);
+      _editor.setTheme('ace/theme/chrome');
+      _editor.getSession().setMode(getEditorMode(note.text));
+
+      function getIndeces(term) {
+        return function(str) {
+          var indeces = [];
+          var i = -1;
+          while((i = str.indexOf(term, i + 1)) >= 0) {
+            indeces.push(i);
+          }
+          return indeces;
+        }
+      }
+
+      var lines = note.fragment
+        .split('\n')
+        .map(function(line, row) {
+          var match = line.match(/<B>(.+?)<\/B>/)
+
+        // return early if nothing to highlight
+          if (!match) {
+            return line
+          }
+
+          var term = match[1]
+          var __line = line
+            .replace(/<B>/g, '')
+            .replace(/<\/B>/g, '')
+
+          var indeces = getIndeces(term)(__line)
+
+          indeces.forEach(function(start) {
+            var end = start + term.length
+            _editor
+              .getSession()
+              .addMarker(
+                new Range(row, start, row, end),
+                'search-results-highlight',
+                'line'
+              );
+          })
+
+          return __line
+        })
+
+      // resize editor based on content length
+      _editor.setOption(
+        'maxLines',
+        lines.reduce(function(len, line) {return len + line.length}, 0)
+      )
+
+      _editor.getSession().setValue(lines.join('\n'))
+
+    }
+  }
+
 });

zeppelin-web/src/app/search/result-list.html

@@ -14,13 +14,24 @@
 <div ng-controller="SearchResultCtrl" class="searchResults">
   <div class="row">
     <div class="col-md-8 col-md-offset-3">
-      <ul style="list-style-type: none; margin-top: 10%;">
+      <ul class="search-results">
         <li ng-repeat="note in notes">
-          <i style="font-size: 10px;" class="icon-doc"></i>
-          <a style="text-decoration: none;" 
-             href="#/notebook/{{note.id}}">
-            {{note.name || 'Note ' + note.id}}
-          </a>
+          <h4>
+            <i style="font-size: 10px;" class="icon-doc"></i>
+            <a class="search-results-header"
+               href="#/notebook/{{note.id}}">
+                {{note.name || 'Note ' + note.id}}
+            </a>
+          </h4>
+          <div
+            class="search-result"
+            ui-ace="{
+              onLoad: highlightSearchResults(note),
+              require: ['ace/ext/language_tools']
+            }"
+            ng-model="_"
+          >
+          </div>
        </li>
     </div>
   </div>

zeppelin-web/src/app/search/search.css

@@ -0,0 +1,22 @@
+.search-results {
+  list-style-type: none;
+  margin-top: 10%;
+}
+
+.search-result {
+  height: 200px;
+}
+
+.search-results-header {
+  text-decoration: none;
+}
+
+.search-results-highlight {
+  background-color: yellow;
+  position: absolute;
+}
+
+/* remove error highlighting */
+.search-results .ace_invalid {
+  background: none !important;
+}

zeppelin-web/src/index.html

@@ -49,6 +49,7 @@
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
     <link rel="stylesheet" href="app/home/home.css">
+    <link rel="stylesheet" href="app/search/search.css">
     <link rel="stylesheet" href="app/notebook/notebook.css">
     <link rel="stylesheet" href="app/notebook/paragraph/paragraph.css">
     <link rel="stylesheet" href="app/interpreter/interpreter.css">