Skip to content

Commit d86f098

Browse files
jahn96jahn96
committed
Use lumino stringExt for fuzzy search
1 parent f0f3e06 commit d86f098

File tree

1 file changed

+92
-141
lines changed

1 file changed

+92
-141
lines changed

‎src/CodeSnippetDisplay.tsx‎

Lines changed: 92 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
} from '@jupyterlab/cells';
2323

2424
import { Widget } from '@lumino/widgets';
25-
import { find } from '@lumino/algorithm';
25+
import { find, StringExt } from '@lumino/algorithm';
2626
import { Drag } from '@lumino/dragdrop';
2727
import { MimeData } from '@lumino/coreutils';
2828

@@ -297,46 +297,10 @@ export class CodeSnippetDisplay extends React.Component<
297297
const displayName = language + name;
298298

299299
// check if this snippet is one of the filtered snippets
300-
if (
301-
this.state.searchValue !== '' &&
302-
Object.keys(this.state.matchIndices).includes(id.toString())
303-
) {
304-
// remove space
305-
// const tempSearchValue = searchValue.replace(/ /g, '');
306-
// const char_list = tempSearchValue.split('');
307-
308-
// console.log(char_list);
309-
// // form regular expression
310-
// let re = '/';
311-
// for (const ch of char_list) {
312-
// re += ch + '.*';
313-
// }
314-
// re += '/g';
315-
316-
// console.log(re);
317-
318-
// const startIndex: number = displayName
319-
// .toLowerCase()
320-
// .indexOf(searchValue.toLowerCase());
321-
322-
// const endIndex: number = startIndex + searchValue.length;
323-
300+
if (this.state.searchValue !== '' && this.state.matchIndices[id] !== null) {
324301
const elements = [];
325302
const boldIndices = this.state.matchIndices[id].slice();
326-
// boldIndices.sort((a,b) => a - b);
327-
// for (const index of boldIndices) {
328-
// if (index >= language.length) {
329-
// elements.push(
330-
// displayName.substring(language.length, index)
331-
// );
332-
// elements.push(
333-
// <mark className={SEARCH_BOLD}>
334-
// {displayName.substring(index, index + 1)}
335-
// </mark>
336-
// );
337-
// }
338-
// }
339-
// console.log(boldIndices);
303+
340304
// get first match index in the name
341305
let i = 0;
342306
while (i < boldIndices.length) {
@@ -347,33 +311,38 @@ export class CodeSnippetDisplay extends React.Component<
347311
i++;
348312
}
349313

350-
// when it matches the language
314+
// when there is no match in name but language
351315
if (i >= boldIndices.length) {
352316
return <span>{name}</span>;
353317
} else {
318+
// current and next indices are bold indices
354319
let currIndex = boldIndices[i];
355320
let nextIndex;
321+
// check if the match is the end of the name
356322
if (i < boldIndices.length - 1) {
357-
nextIndex = boldIndices[i + 1];
323+
i++;
324+
nextIndex = boldIndices[i];
358325
} else {
359326
nextIndex = null;
360327
}
361328
while (nextIndex !== null) {
329+
// make the current index bold
362330
elements.push(
363331
<mark className={SEARCH_BOLD}>
364332
{displayName.substring(currIndex, currIndex + 1)}
365333
</mark>
366334
);
335+
// add the regular string until we reach the next bold index
367336
elements.push(displayName.substring(currIndex + 1, nextIndex));
368337
currIndex = nextIndex;
369338
i++;
370339
if (i < boldIndices.length - 1) {
371-
nextIndex = boldIndices[i + 1];
340+
nextIndex = boldIndices[i];
372341
} else {
373342
nextIndex = null;
374343
}
375344
}
376-
345+
// key={id+'_'+currIndex}
377346
if (nextIndex === null) {
378347
elements.push(
379348
<mark className={SEARCH_BOLD}>
@@ -384,36 +353,8 @@ export class CodeSnippetDisplay extends React.Component<
384353
displayName.substring(currIndex + 1, displayName.length)
385354
);
386355
}
387-
// if (boldIndices[boldIndices.length - 1] < displayName.length) {
388-
// elements.push(
389-
// // <span>
390-
// displayName.substring(boldIndices[boldIndices.length - 1] + 1, displayName.length)
391-
// // </span>
392-
// );
393-
// }
394-
// console.log(elements);
395-
396-
// if (elements.length === 0) {
397-
// return <span>{name}</span>;
398-
// } else {
399356
return <span>{elements}</span>;
400-
// }
401357
}
402-
403-
// if (endIndex <= language.length) {
404-
// return <span>{name}</span>;
405-
// } else {
406-
// const start = displayName.substring(language.length, startIndex);
407-
// const bolded = displayName.substring(startIndex, endIndex);
408-
// const end = displayName.substring(endIndex);
409-
// return (
410-
// <span>
411-
// {start}
412-
// <mark className={SEARCH_BOLD}>{bolded}</mark>
413-
// {end}
414-
// </span>
415-
// );
416-
// }
417358
}
418359
return <span onDoubleClick={this.handleRenameSnippet}>{name}</span>;
419360
};
@@ -1181,6 +1122,7 @@ export class CodeSnippetDisplay extends React.Component<
11811122
<div
11821123
className={CODE_SNIPPET_METADATA}
11831124
onMouseEnter={(): void => {
1125+
console.log(id);
11841126
showPreview(
11851127
{
11861128
id: id,
@@ -1197,12 +1139,8 @@ export class CodeSnippetDisplay extends React.Component<
11971139
}}
11981140
>
11991141
<div key={displayName} className={TITLE_CLASS} id={id.toString()}>
1200-
<div
1201-
id={id.toString()}
1202-
title={codeSnippet.name}
1203-
className={DISPLAY_NAME_CLASS}
1204-
>
1205-
{this.renderLanguageIcon(codeSnippet.language)}
1142+
<div id={id.toString()} title={name} className={DISPLAY_NAME_CLASS}>
1143+
{this.renderLanguageIcon(language)}
12061144
{this.boldNameOnSearch(id, language, name)}
12071145
</div>
12081146
<div className={ACTION_BUTTONS_WRAPPER_CLASS} id={id.toString()}>
@@ -1253,7 +1191,7 @@ export class CodeSnippetDisplay extends React.Component<
12531191
if (state.searchValue !== '' || state.filterTags.length !== 0) {
12541192
const newSnippets = props.codeSnippets.filter(codeSnippet => {
12551193
return (
1256-
Object.keys(state.matchIndices).includes(codeSnippet.id.toString()) ||
1194+
state.matchIndices[codeSnippet.id] !== null ||
12571195
// (state.searchValue !== '' &&
12581196
// codeSnippet.name.toLowerCase().includes(state.searchValue)) ||
12591197
// (state.searchValue !== '' &&
@@ -1272,43 +1210,41 @@ export class CodeSnippetDisplay extends React.Component<
12721210
return null;
12731211
}
12741212

1275-
/**
1276-
* Return an object with the entry of (id, matched_indices)
1277-
* @param id unique id of snippet
1278-
* @param regex regular expression to match
1279-
* @param str name or language of the code snippet
1280-
* @param char_list list of characters searched
1281-
*/
1282-
matchSnippet(
1283-
id: number,
1284-
regex: RegExp,
1285-
str: string,
1286-
char_list: string[]
1287-
): [number, number[]] {
1288-
const match_indices = [];
1289-
let match = [];
1290-
while ((match = regex.exec(str))) {
1291-
console.log(str);
1292-
console.log(match);
1293-
if (match) {
1294-
const matched_string = match[0];
1295-
const start_idx = match['index'];
1296-
for (const match_ch of match.slice(1)) {
1297-
const match_index = matched_string.indexOf(match_ch) + start_idx;
1298-
match_indices.push(match_index);
1299-
}
1300-
1301-
// Object.keys(matches).length
1302-
// if (Object.keys(matches).length !== char_list.length) {
1303-
// return null;
1304-
// }
1305-
1306-
console.log(match_indices);
1307-
return [id, match_indices];
1308-
}
1309-
}
1310-
return null;
1311-
}
1213+
// /**
1214+
// * Return an object with the entry of (id, matched_indices)
1215+
// * @param id unique id of snippet
1216+
// * @param regex regular expression to match
1217+
// * @param str name or language of the code snippet
1218+
// * @param char_list list of characters searched
1219+
// */
1220+
// matchSnippet(
1221+
// id: number,
1222+
// regex: RegExp,
1223+
// str: string,
1224+
// char_list: string[]
1225+
// ): [number, number[]] {
1226+
// const match_indices = [];
1227+
// let match = [];
1228+
// while ((match = regex.exec(str))) {
1229+
// if (match != []) {
1230+
// const matched_string = match[0];
1231+
// const start_idx = match['index'];
1232+
// for (const match_ch of match.slice(1)) {
1233+
// const match_index = matched_string.indexOf(match_ch) + start_idx;
1234+
// match_indices.push(match_index);
1235+
// }
1236+
1237+
// // Object.keys(matches).length
1238+
// // if (Object.keys(matches).length !== char_list.length) {
1239+
// // return null;
1240+
// // }
1241+
1242+
// return [id, match_indices];
1243+
// }
1244+
// }
1245+
// // console.log(regex.exec(str));
1246+
// return null;
1247+
// }
13121248

13131249
filterSnippets = (searchValue: string, filterTags: string[]): void => {
13141250
// console.log(regex);
@@ -1336,34 +1272,49 @@ export class CodeSnippetDisplay extends React.Component<
13361272
const matchIndices: { [key: number]: number[] } = {};
13371273
let filteredSnippets = this.props.codeSnippets;
13381274
if (searchValue !== '') {
1339-
// remove space
1340-
const tempSearchValue = searchValue.replace(/ /g, '');
1341-
const char_list = tempSearchValue.split('');
1342-
1343-
// form regular expression
1344-
let re = '';
1345-
for (const ch of char_list) {
1346-
re += '(' + ch + ').*';
1347-
}
1348-
re = re.substring(0, re.length - 2);
1349-
console.log('regex:' + re);
1350-
1351-
const regex = new RegExp(re, 'gi');
1352-
1353-
filteredSnippets = this.props.codeSnippets.filter(codeSnippet => {
1354-
const matchIndex = this.matchSnippet(
1355-
codeSnippet.id,
1356-
regex,
1357-
codeSnippet.language + codeSnippet.name,
1358-
char_list
1275+
filteredSnippets = filteredSnippets.filter(snippet => {
1276+
const indices = StringExt.findIndices(
1277+
(snippet.language + snippet.name).toLowerCase(),
1278+
searchValue.toLowerCase()
13591279
);
1360-
console.log(matchIndex);
1361-
1362-
if (matchIndex) {
1363-
matchIndices[matchIndex[0]] = matchIndex[1];
1364-
}
1365-
return matchIndex !== null;
1280+
matchIndices[snippet.id] = indices;
1281+
return indices;
13661282
});
1283+
1284+
// remove space
1285+
// const tempSearchValue = searchValue.replace(/ /g, '');
1286+
// const char_list = tempSearchValue.split('');
1287+
1288+
// // form regular expression
1289+
// let re = '';
1290+
// for (const ch of char_list) {
1291+
// if ("[].*?^$+|(){}".includes(ch)) {
1292+
// re += '(\\' + ch + ').*?';
1293+
// }
1294+
// else{
1295+
// re += '(' + ch + ').*?';
1296+
// }
1297+
// }
1298+
// re = re.substring(0, re.length - 3);
1299+
// console.log('regex:' + re);
1300+
1301+
// const regex = new RegExp(re, 'i');
1302+
1303+
// filteredSnippets = this.props.codeSnippets.filter(codeSnippet => {
1304+
// // console.log(codeSnippet.language + codeSnippet.name);
1305+
// const matchIndex = this.matchSnippet(
1306+
// codeSnippet.id,
1307+
// regex,
1308+
// codeSnippet.language + codeSnippet.name,
1309+
// char_list
1310+
// );
1311+
// // console.log(matchIndex);
1312+
1313+
// if (matchIndex) {
1314+
// matchIndices[matchIndex[0]] = matchIndex[1];
1315+
// }
1316+
// return matchIndex !== null;
1317+
// });
13671318
}
13681319

13691320
// filter with tags

0 commit comments

Comments
 (0)