Skip to content

Commit 865925c

Browse files
felizbearbzz
felizbear
authored and
bzz
committed
highlight syntax and search terms in search results
1 parent 9ca8628 commit 865925c

File tree

4 files changed

+127
-12
lines changed

4 files changed

+127
-12
lines changed

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

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,110 @@
11
/* jshint loopfunc: true */
22
/*
3-
* Licensed under the Apache License, Version 2.0 (the "License");
3+
* Licensed under the Apache License, Version 2.0 (the 'License');
44
* you may not use this file except in compliance with the License.
55
* You may obtain a copy of the License at
66
*
77
* http://www.apache.org/licenses/LICENSE-2.0
88
*
99
* Unless required by applicable law or agreed to in writing, software
10-
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* distributed under the License is distributed on an 'AS IS' BASIS,
1111
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
* See the License for the specific language governing permissions and
1313
* limitations under the License.
1414
*/
1515
'use strict';
1616

17-
angular.module('zeppelinWebApp').controller('SearchResultCtrl', function($scope, $routeParams, searchService) {
17+
angular
18+
.module('zeppelinWebApp')
19+
.controller('SearchResultCtrl', function($scope, $routeParams, searchService) {
1820

1921
var results = searchService.search({'q': $routeParams.searchTerm}).query();
2022

21-
console.log("Found: %o", results);
23+
console.log('Found: %o', results);
2224
results.$promise.then(function(result) {
2325
$scope.notes = result.body;
2426
});
25-
console.log("Found body: %o", $scope.notes);
27+
console.log('Found body: %o', $scope.notes);
2628

2729
$scope.page = 0;
28-
$scope.allResults = false;
30+
$scope.allResults = false;
31+
32+
33+
$scope.highlightSearchResults = function(note) {
34+
return function(_editor) {
35+
function getEditorMode(text) {
36+
var editorModes = {
37+
'ace/mode/scala': /^%spark/,
38+
'ace/mode/sql': /^%(\w*\.)?\wql/,
39+
'ace/mode/markdown': /^%md/,
40+
'ace/mode/sh': /^%sh/
41+
}
42+
43+
return Object.keys(editorModes).reduce(function(res, mode) {
44+
return editorModes[mode].test(text)? mode : res
45+
}, 'ace/mode/scala')
46+
}
47+
48+
var Range = ace.require('ace/range').Range;
49+
50+
_editor.setOption('highlightActiveLine', false);
51+
_editor.$blockScrolling = Infinity;
52+
_editor.setReadOnly(true);
53+
_editor.renderer.setShowGutter(false);
54+
_editor.setTheme('ace/theme/chrome');
55+
_editor.getSession().setMode(getEditorMode(note.text));
56+
57+
function getIndeces(term) {
58+
return function(str) {
59+
var indeces = [];
60+
var i = -1;
61+
while((i = str.indexOf(term, i + 1)) >= 0) {
62+
indeces.push(i);
63+
}
64+
return indeces;
65+
}
66+
}
67+
68+
var lines = note.fragment
69+
.split('\n')
70+
.map(function(line, row) {
71+
var match = line.match(/<B>(.+?)<\/B>/)
72+
73+
// return early if nothing to highlight
74+
if (!match) {
75+
return line
76+
}
77+
78+
var term = match[1]
79+
var __line = line
80+
.replace(/<B>/g, '')
81+
.replace(/<\/B>/g, '')
82+
83+
var indeces = getIndeces(term)(__line)
84+
85+
indeces.forEach(function(start) {
86+
var end = start + term.length
87+
_editor
88+
.getSession()
89+
.addMarker(
90+
new Range(row, start, row, end),
91+
'search-results-highlight',
92+
'line'
93+
);
94+
})
95+
96+
return __line
97+
})
98+
99+
// resize editor based on content length
100+
_editor.setOption(
101+
'maxLines',
102+
lines.reduce(function(len, line) {return len + line.length}, 0)
103+
)
104+
105+
_editor.getSession().setValue(lines.join('\n'))
106+
107+
}
108+
}
109+
29110
});

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,24 @@
1414
<div ng-controller="SearchResultCtrl" class="searchResults">
1515
<div class="row">
1616
<div class="col-md-8 col-md-offset-3">
17-
<ul style="list-style-type: none; margin-top: 10%;">
17+
<ul class="search-results">
1818
<li ng-repeat="note in notes">
19-
<i style="font-size: 10px;" class="icon-doc"></i>
20-
<a style="text-decoration: none;"
21-
href="#/notebook/{{note.id}}">
22-
{{note.name || 'Note ' + note.id}}
23-
</a>
19+
<h4>
20+
<i style="font-size: 10px;" class="icon-doc"></i>
21+
<a class="search-results-header"
22+
href="#/notebook/{{note.id}}">
23+
{{note.name || 'Note ' + note.id}}
24+
</a>
25+
</h4>
26+
<div
27+
class="search-result"
28+
ui-ace="{
29+
onLoad: highlightSearchResults(note),
30+
require: ['ace/ext/language_tools']
31+
}"
32+
ng-model="_"
33+
>
34+
</div>
2435
</li>
2536
</div>
2637
</div>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.search-results {
2+
list-style-type: none;
3+
margin-top: 10%;
4+
}
5+
6+
.search-result {
7+
height: 200px;
8+
}
9+
10+
.search-results-header {
11+
text-decoration: none;
12+
}
13+
14+
.search-results-highlight {
15+
background-color: yellow;
16+
position: absolute;
17+
}
18+
19+
/* remove error highlighting */
20+
.search-results .ace_invalid {
21+
background: none !important;
22+
}

‎zeppelin-web/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
<!-- endbuild -->
5050
<!-- build:css(.tmp) styles/main.css -->
5151
<link rel="stylesheet" href="app/home/home.css">
52+
<link rel="stylesheet" href="app/search/search.css">
5253
<link rel="stylesheet" href="app/notebook/notebook.css">
5354
<link rel="stylesheet" href="app/notebook/paragraph/paragraph.css">
5455
<link rel="stylesheet" href="app/interpreter/interpreter.css">

0 commit comments

Comments
 (0)