Skip to content

Commit ab2601f

Browse files
kpinnipakpinnipa
committed
Repurposed sorting modal for search. Need to fix state updates.
1 parent 9a3450e commit ab2601f

File tree

6 files changed

+437
-40
lines changed

6 files changed

+437
-40
lines changed

‎src/CodeSnippetDisplay.tsx‎

Lines changed: 134 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
pythonIcon,
3232
fileIcon,
3333
rKernelIcon,
34-
markdownIcon,
34+
markdownIcon
3535
} from '@jupyterlab/ui-components';
3636
import { CodeEditor, IEditorServices } from '@jupyterlab/codeeditor';
3737
import * as nbformat from '@jupyterlab/nbformat';
@@ -41,7 +41,7 @@ import {
4141
CodeCellModel,
4242
ICodeCellModel,
4343
MarkdownCell,
44-
CodeCell,
44+
CodeCell
4545
} from '@jupyterlab/cells';
4646

4747
import { Widget } from '@lumino/widgets';
@@ -97,7 +97,7 @@ import {
9797
sbtIcon,
9898
rustIcon,
9999
qsharpIcon,
100-
sasIcon,
100+
sasIcon
101101
} from './CodeSnippetLanguages';
102102
import { ICodeSnippetEditorMetadata } from './CodeSnippetEditor';
103103
// import { CodeSnippetContentsService } from './CodeSnippetContentsService';
@@ -130,6 +130,7 @@ const CODE_SNIPPET_MORE_OTPIONS_DOWNLOAD =
130130
'jp-codeSnippet-more-options-download';
131131
const CODE_SNIPPET_CREATE_NEW_BTN = 'jp-createSnippetBtn';
132132
const CODE_SNIPPET_NAME = 'jp-codeSnippet-name';
133+
const CODE_SNIPPET_HEADER_BOX = 'jp-codeSnippet-header-class';
133134

134135
/**
135136
* The threshold in pixels to start a drag event.
@@ -151,7 +152,7 @@ const JUPYTER_CELL_MIME = 'application/vnd.jupyter.cells';
151152
*/
152153
const moreOptionsIcon = new LabIcon({
153154
name: 'custom-ui-components:moreOptions',
154-
svgstr: moreSVGstr,
155+
svgstr: moreSVGstr
155156
});
156157

157158
/**
@@ -176,6 +177,7 @@ interface ICodeSnippetDisplayState {
176177
matchIndices: number[][];
177178
searchValue: string;
178179
filterTags: string[];
180+
searchOptions: string[];
179181
}
180182

181183
/**
@@ -194,6 +196,7 @@ export class CodeSnippetDisplay extends React.Component<
194196
matchIndices: [],
195197
searchValue: '',
196198
filterTags: [],
199+
searchOptions: []
197200
};
198201
this._drag = null;
199202
this._dragData = null;
@@ -288,7 +291,7 @@ export class CodeSnippetDisplay extends React.Component<
288291
'" is incompatible with ' +
289292
editorLanguage +
290293
'. Continue?',
291-
buttons: [Dialog.cancelButton(), Dialog.okButton()],
294+
buttons: [Dialog.cancelButton(), Dialog.okButton()]
292295
});
293296
};
294297

@@ -297,7 +300,7 @@ export class CodeSnippetDisplay extends React.Component<
297300
return showDialog({
298301
title: 'Error',
299302
body: errMsg,
300-
buttons: [Dialog.okButton()],
303+
buttons: [Dialog.okButton()]
301304
});
302305
};
303306

@@ -425,7 +428,7 @@ export class CodeSnippetDisplay extends React.Component<
425428
await showDialog({
426429
title: 'Duplicate Name of Code Snippet',
427430
body: <p> {`"${newName}" already exists.`} </p>,
428-
buttons: [Dialog.okButton({ label: 'Dismiss' })],
431+
buttons: [Dialog.okButton({ label: 'Dismiss' })]
429432
});
430433
} else {
431434
this.props.codeSnippetManager
@@ -490,7 +493,7 @@ export class CodeSnippetDisplay extends React.Component<
490493
this._dragData = {
491494
pressX: event.clientX,
492495
pressY: event.clientY,
493-
dragImage: target.nextSibling.firstChild.cloneNode(true) as HTMLElement,
496+
dragImage: target.nextSibling.firstChild.cloneNode(true) as HTMLElement
494497
};
495498

496499
const dragImageTextColor = getComputedStyle(document.body).getPropertyValue(
@@ -589,7 +592,7 @@ export class CodeSnippetDisplay extends React.Component<
589592
dragImage: dragImage,
590593
supportedActions: 'copy-move',
591594
proposedAction: 'copy',
592-
source: this,
595+
source: this
593596
});
594597

595598
this._drag.mimeData.setData(JUPYTER_CELL_MIME, selected);
@@ -1177,8 +1180,8 @@ export class CodeSnippetDisplay extends React.Component<
11771180
onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
11781181
showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
11791182
this._setOptionsPosition(event);
1180-
},
1181-
},
1183+
}
1184+
}
11821185
];
11831186
return (
11841187
<div
@@ -1216,7 +1219,7 @@ export class CodeSnippetDisplay extends React.Component<
12161219
id: id,
12171220
title: displayName,
12181221
body: new PreviewHandler(),
1219-
codeSnippet: codeSnippet,
1222+
codeSnippet: codeSnippet
12201223
},
12211224
this.props.editorServices
12221225
);
@@ -1232,7 +1235,7 @@ export class CodeSnippetDisplay extends React.Component<
12321235
{this.boldNameOnSearch(id, language, name)}
12331236
</div>
12341237
<div className={ACTION_BUTTONS_WRAPPER_CLASS} id={id.toString()}>
1235-
{actionButtons.map((btn) => {
1238+
{actionButtons.map(btn => {
12361239
return (
12371240
<button
12381241
key={btn.title}
@@ -1284,6 +1287,7 @@ export class CodeSnippetDisplay extends React.Component<
12841287
matchIndices: [],
12851288
searchValue: '',
12861289
filterTags: [],
1290+
searchOptions: []
12871291
};
12881292
}
12891293

@@ -1293,6 +1297,7 @@ export class CodeSnippetDisplay extends React.Component<
12931297
matchIndices: prevState.matchIndices,
12941298
searchValue: prevState.searchValue,
12951299
filterTags: prevState.filterTags,
1300+
searchOptions: prevState.searchOptions
12961301
};
12971302
}
12981303
return null;
@@ -1303,44 +1308,134 @@ export class CodeSnippetDisplay extends React.Component<
13031308
let matchIndices: number[][] = [];
13041309
const matchResults: StringExt.IMatchResult[] = [];
13051310
let filteredSnippets = this.props.codeSnippets;
1311+
let name = false;
1312+
//let language: boolean = false;
1313+
//let code: boolean = false;
13061314
const filteredSnippetsScore: {
13071315
score: number;
13081316
snippet: ICodeSnippet;
13091317
}[] = [];
1318+
// if (searchValue !== '') {
1319+
// filteredSnippets.forEach(snippet => {
1320+
// const matchResult = StringExt.matchSumOfSquares(
1321+
// (snippet.language + snippet.name).toLowerCase(),
1322+
// searchValue.replace(' ', '').toLowerCase()
1323+
// );
1324+
1325+
// if (matchResult) {
1326+
// matchResults.push(matchResult);
1327+
// filteredSnippetsScore.push({
1328+
// score: matchResult.score,
1329+
// snippet: snippet
1330+
// });
1331+
// }
1332+
// });
13101333
if (searchValue !== '') {
1311-
filteredSnippets.forEach((snippet) => {
1312-
const matchResult = StringExt.matchSumOfSquares(
1313-
(snippet.language + snippet.name).toLowerCase(),
1314-
searchValue.replace(' ', '').toLowerCase()
1315-
);
1334+
// title/code/language
1335+
if (searchValue.includes('/*')) {
1336+
const searchVals: string[] = searchValue.split('/*');
1337+
if (searchVals[0] !== undefined) {
1338+
name = true;
1339+
filteredSnippets.forEach(snippet => {
1340+
//search by name
1341+
const matchResult = StringExt.matchSumOfSquares(
1342+
snippet.name.toLowerCase(),
1343+
searchVals[0].replace(' ', '').toLowerCase()
1344+
);
13161345

1317-
if (matchResult) {
1318-
matchResults.push(matchResult);
1319-
filteredSnippetsScore.push({
1320-
score: matchResult.score,
1321-
snippet: snippet,
1346+
if (matchResult) {
1347+
matchResults.push(matchResult);
1348+
filteredSnippetsScore.push({
1349+
score: matchResult.score,
1350+
snippet: snippet
1351+
});
1352+
}
13221353
});
13231354
}
1324-
});
1355+
1356+
if (searchVals[1] !== undefined) {
1357+
// THIS DOESNT WORK. Have to check a snippet language and remove.
1358+
//search by language
1359+
console.log('language');
1360+
let filtered: ICodeSnippet[] = filteredSnippets;
1361+
if (name) {
1362+
//if a name is entered, narrow by both name and language
1363+
filtered = [];
1364+
filteredSnippetsScore.forEach(snippetScore =>
1365+
filtered.push(snippetScore.snippet)
1366+
);
1367+
}
1368+
filtered.forEach(snippet => {
1369+
const matchResult2 = StringExt.matchSumOfSquares(
1370+
snippet.language.toLowerCase(),
1371+
searchVals[1].replace(' ', '').toLowerCase()
1372+
);
1373+
1374+
if (matchResult2) {
1375+
matchResults.push(matchResult2);
1376+
filteredSnippetsScore.push({
1377+
score: matchResult2.score,
1378+
snippet: snippet
1379+
});
1380+
}
1381+
});
1382+
}
1383+
// if (searchVals[2] !== undefined) {
1384+
// // search for search term through the code lines
1385+
// console.log(searchVals[2]);
1386+
// filteredSnippets.forEach(snippet => {
1387+
// for (let snippetLine in snippet.code) {
1388+
// // go through each line of the code
1389+
// let matchResult3 = StringExt.matchSumOfSquares(
1390+
// snippetLine.toLowerCase(),
1391+
// searchVals[2].toLowerCase()
1392+
// );
1393+
1394+
// if (matchResult3) {
1395+
// matchResults.push(matchResult3);
1396+
// filteredSnippetsScore.push({
1397+
// score: matchResult3.score,
1398+
// snippet: snippet
1399+
// });
1400+
// }
1401+
// }
1402+
// });
1403+
// }
1404+
} else {
1405+
filteredSnippets.forEach(snippet => {
1406+
const matchResult = StringExt.matchSumOfSquares(
1407+
(snippet.language + snippet.name).toLowerCase(),
1408+
searchValue.replace(' ', '').toLowerCase()
1409+
);
1410+
1411+
if (matchResult) {
1412+
matchResults.push(matchResult);
1413+
filteredSnippetsScore.push({
1414+
score: matchResult.score,
1415+
snippet: snippet
1416+
});
1417+
}
1418+
});
1419+
}
13251420

13261421
// sort snippets by its score
13271422
filteredSnippetsScore.sort((a, b) => a.score - b.score);
13281423
const newFilteredSnippets: ICodeSnippet[] = [];
1329-
filteredSnippetsScore.forEach((snippetScore) =>
1424+
filteredSnippetsScore.forEach(snippetScore =>
13301425
newFilteredSnippets.push(snippetScore.snippet)
13311426
);
13321427
filteredSnippets = newFilteredSnippets;
13331428

13341429
// sort the matchResults by its score
13351430
matchResults.sort((a, b) => a.score - b.score);
1336-
matchResults.forEach((res) => matchIndices.push(res.indices));
1431+
matchResults.forEach(res => matchIndices.push(res.indices));
13371432
}
13381433

13391434
// filter with tags
13401435
if (filterTags.length !== 0) {
13411436
const newMatchIndices = matchIndices.slice();
13421437
filteredSnippets = filteredSnippets.filter((codeSnippet, id) => {
1343-
return filterTags.some((tag) => {
1438+
return filterTags.some(tag => {
13441439
if (codeSnippet.tags) {
13451440
if (codeSnippet.tags.includes(tag)) {
13461441
return true;
@@ -1361,7 +1456,7 @@ export class CodeSnippetDisplay extends React.Component<
13611456
codeSnippets: filteredSnippets,
13621457
matchIndices: matchIndices,
13631458
searchValue: searchValue,
1364-
filterTags: filterTags,
1459+
filterTags: filterTags
13651460
},
13661461
() => {
13671462
console.log('snippets filtered');
@@ -1390,10 +1485,10 @@ export class CodeSnippetDisplay extends React.Component<
13901485
buttons: [
13911486
Dialog.okButton({
13921487
label: 'Delete',
1393-
displayType: 'warn',
1488+
displayType: 'warn'
13941489
}),
1395-
Dialog.cancelButton(),
1396-
],
1490+
Dialog.cancelButton()
1491+
]
13971492
}).then((response: any): void => {
13981493
if (response.button.accept) {
13991494
const widgetId = `${CODE_SNIPPET_EDITOR}-${codeSnippet.id}`;
@@ -1496,7 +1591,7 @@ export class CodeSnippetDisplay extends React.Component<
14961591
id: codeSnippet.id,
14971592
selectedTags: codeSnippet.tags,
14981593
allTags: allTags,
1499-
fromScratch: false,
1594+
fromScratch: false
15001595
});
15011596
this.removeOptionsNode();
15021597
};
@@ -1541,17 +1636,19 @@ export class CodeSnippetDisplay extends React.Component<
15411636
id: this.state.codeSnippets.length,
15421637
selectedTags: [],
15431638
allTags: this.getActiveTags(),
1544-
fromScratch: true,
1639+
fromScratch: true
15451640
});
15461641
}}
15471642
>
15481643
<addIcon.react tag="span" right="7px" top="5px" />
15491644
</button>
15501645
</header>
1551-
<FilterTools
1552-
tags={this.getActiveTags()}
1553-
onFilter={this.filterSnippets}
1554-
/>
1646+
<div className={CODE_SNIPPET_HEADER_BOX}>
1647+
<FilterTools
1648+
tags={this.getActiveTags()}
1649+
onFilter={this.filterSnippets}
1650+
/>
1651+
</div>
15551652
<div className={CODE_SNIPPETS_CONTAINER}>
15561653
<div>
15571654
{this.state.codeSnippets.map((codeSnippet, id) =>

0 commit comments

Comments
 (0)