Skip to content

Commit 0de2e84

Browse files
jahn96jahn96
authored
Merge pull request #69 from jahn96/snippetLayout
New snippet layout
2 parents 877fa2c + 63e724e commit 0de2e84

File tree

7 files changed

+218
-88
lines changed

7 files changed

+218
-88
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"@jupyterlab/rendermime": "^2.1.1",
5353
"@jupyterlab/services": "^5.0.0",
5454
"@lumino/algorithm": "^1.3.2",
55+
"@lumino/coreutils": "^1.5.3",
5556
"@lumino/dragdrop": "^1.6.2",
5657
"@lumino/messaging": "^1.4.2",
5758
"@lumino/properties": "^1.2.2",

‎snippets/import.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "import",
3-
"description": "sample import statement",
3+
"description": "sample import statement to train agent to learn about atari game",
44
"language": "python",
55
"code": [
66
"import re, random",
@@ -11,5 +11,6 @@
1111
"import pandas as pd",
1212
"import time"
1313
],
14-
"id": 1
14+
"id": 1,
15+
"tags": ["import statement"]
1516
}

‎snippets/try statement.json‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
{"name":"try statement","displayName":"try statement","description":"getting command","language":"python","code":[" try:"," command = int(sys.argv[1])"," except:"," command = sys.argv[1]"],"id":0}
1+
{
2+
"name": "try statement",
3+
"description": "sample try statement",
4+
"language": "python",
5+
"code": [
6+
" try:",
7+
" command = int(sys.argv[1])",
8+
" except:",
9+
" command = sys.argv[1]"
10+
],
11+
"id": 0
12+
}

‎src/CodeSnippetDisplay.tsx‎

Lines changed: 87 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import insertSVGstr from '../style/icon/insertsnippet.svg';
2-
import carrotSVGstr from '../style/icon/jupyter_snippetarrow.svg';
2+
import launchEditorSVGstr from '../style/icon/jupyter_launcher.svg';
33
import { SearchBar } from './SearchBar';
44
import { showPreview } from './PreviewSnippet';
55
import {
@@ -8,16 +8,15 @@ import {
88
} from './CodeSnippetContentsService';
99
// import { CodeSnippetWidget } from './CodeSnippetWidget';
1010

11-
import { Clipboard, Dialog, showDialog } from '@jupyterlab/apputils';
11+
import { /**Clipboard,*/ Dialog, showDialog } from '@jupyterlab/apputils';
1212
import { CodeCell, MarkdownCell } from '@jupyterlab/cells';
1313
import { CodeEditor } from '@jupyterlab/codeeditor';
1414
import { PathExt } from '@jupyterlab/coreutils';
1515
// import { ServerConnection } from '@jupyterlab/services';
1616
import { DocumentWidget } from '@jupyterlab/docregistry';
1717
import { FileEditor } from '@jupyterlab/fileeditor';
1818
import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
19-
import { copyIcon } from '@jupyterlab/ui-components';
20-
import { LabIcon } from '@jupyterlab/ui-components';
19+
import { /**copyIcon,*/ LabIcon, addIcon } from '@jupyterlab/ui-components';
2120
import { IEditorServices } from '@jupyterlab/codeeditor';
2221

2322
import { IExpandableActionButton } from '@elyra/ui-components';
@@ -46,7 +45,7 @@ const DISPLAY_NAME_CLASS = 'expandableContainer-name';
4645
const ELYRA_BUTTON_CLASS = 'jp-button';
4746
const BUTTON_CLASS = 'expandableContainer-button';
4847
const TITLE_CLASS = 'expandableContainer-title';
49-
const ACTION_BUTTONS_WRAPPER_CLASS = 'elyra-expandableContainer-action-buttons';
48+
const ACTION_BUTTONS_WRAPPER_CLASS = 'expandableContainer-action-buttons';
5049
const ACTION_BUTTON_CLASS = 'expandableContainer-actionButton';
5150

5251
/**
@@ -72,9 +71,9 @@ const insertIcon = new LabIcon({
7271
svgstr: insertSVGstr
7372
});
7473

75-
const previewIcon = new LabIcon({
76-
name: 'custom-ui-compnents:preview',
77-
svgstr: carrotSVGstr
74+
const launchEditorIcon = new LabIcon({
75+
name: 'custom-ui-compnents:launchEditor',
76+
svgstr: launchEditorSVGstr
7877
});
7978

8079
/**
@@ -270,25 +269,28 @@ export class CodeSnippetDisplay extends React.Component<
270269
.getElementsByClassName('drag-hover')
271270
[_id].classList.add('drag-hover-clicked');
272271
}
273-
if (
274-
document
275-
.getElementsByClassName(CODE_SNIPPET_ITEM)
276-
[_id].classList.contains('codeSnippet-item-clicked')
277-
) {
278-
document
279-
.getElementsByClassName(CODE_SNIPPET_ITEM)
280-
[_id].classList.remove('codeSnippet-item-clicked');
281-
} else {
282-
document
283-
.getElementsByClassName(CODE_SNIPPET_ITEM)
284-
[_id].classList.add('codeSnippet-item-clicked');
285-
}
272+
// if (
273+
// document
274+
// .getElementsByClassName(CODE_SNIPPET_ITEM)
275+
// [_id].classList.contains('codeSnippet-item-clicked')
276+
// ) {
277+
// document
278+
// .getElementsByClassName(CODE_SNIPPET_ITEM)
279+
// [_id].classList.remove('codeSnippet-item-clicked');
280+
// } else {
281+
// document
282+
// .getElementsByClassName(CODE_SNIPPET_ITEM)
283+
// [_id].classList.add('codeSnippet-item-clicked');
284+
// }
286285
};
287286

288287
// Bold text in snippet name based on search
289-
private boldNameOnSearch = (filter: string, displayed: string): any => {
288+
private boldNameOnSearch = (
289+
filter: string,
290+
displayed: string
291+
): JSX.Element => {
290292
const name: string = displayed;
291-
if (filter !== '') {
293+
if (filter !== '' && displayed.includes(filter)) {
292294
const startIndex: number = name.indexOf(filter);
293295
const endIndex: number = startIndex + filter.length;
294296
const start = name.substring(0, startIndex);
@@ -302,7 +304,7 @@ export class CodeSnippetDisplay extends React.Component<
302304
</span>
303305
);
304306
}
305-
return name;
307+
return <span>{name}</span>;
306308
};
307309

308310
private handleDragSnippet(
@@ -472,15 +474,16 @@ export class CodeSnippetDisplay extends React.Component<
472474
): JSX.Element => {
473475
const buttonClasses = [ELYRA_BUTTON_CLASS, BUTTON_CLASS].join(' ');
474476
const displayName = '[' + codeSnippet.language + '] ' + codeSnippet.name;
477+
const tags = codeSnippet.tags;
475478

476479
const actionButtons = [
477-
{
478-
title: 'Copy',
479-
icon: copyIcon,
480-
onClick: (): void => {
481-
Clipboard.copyToSystem(codeSnippet.code.join('\n'));
482-
}
483-
},
480+
// {
481+
// title: 'Copy',
482+
// icon: copyIcon,
483+
// onClick: (): void => {
484+
// Clipboard.copyToSystem(codeSnippet.code.join('\n'));
485+
// }
486+
// },
484487
{
485488
title: 'Insert',
486489
icon: insertIcon,
@@ -489,20 +492,19 @@ export class CodeSnippetDisplay extends React.Component<
489492
}
490493
},
491494
{
492-
title: 'Preview',
493-
icon: previewIcon,
495+
title: 'Launch Editor',
496+
icon: launchEditorIcon,
494497
onClick: (): void => {
495-
showPreview(
496-
{
497-
id: parseInt(id, 10),
498-
title: displayName,
499-
body: new PreviewHandler(),
500-
codeSnippet: codeSnippet
501-
},
502-
this.props.openCodeSnippetEditor,
503-
this.props.editorServices
504-
);
505-
this.snippetClicked(id);
498+
// showPreview(
499+
// {
500+
// id: parseInt(id, 10),
501+
// title: displayName,
502+
// body: new PreviewHandler(codeSnippet),
503+
// codeSnippet: codeSnippet
504+
// }
505+
// );
506+
this.props.openCodeSnippetEditor(codeSnippet);
507+
// this.snippetClicked(id);
506508
}
507509
}
508510
];
@@ -528,9 +530,18 @@ export class CodeSnippetDisplay extends React.Component<
528530
this.handleDragSnippet(event);
529531
}}
530532
></div>
531-
<div>
532-
<div key={displayName} className={TITLE_CLASS}>
533-
<span
533+
<div className={'jp-codeSnippet-metadata'}>
534+
<div
535+
key={displayName}
536+
className={TITLE_CLASS}
537+
// onMouseOver={() => {
538+
// this.dragHoverStyle(id);
539+
// }}
540+
// onMouseOut={() => {
541+
// this.dragHoverStyleRemove(id);
542+
// }}
543+
>
544+
<div
534545
id={id}
535546
title={codeSnippet.name}
536547
className={DISPLAY_NAME_CLASS}
@@ -553,7 +564,7 @@ export class CodeSnippetDisplay extends React.Component<
553564
}}
554565
>
555566
{this.boldNameOnSearch(this.state.filterValue, displayName)}
556-
</span>
567+
</div>
557568
<div className={ACTION_BUTTONS_WRAPPER_CLASS}>
558569
{actionButtons.map((btn: IExpandableActionButton) => {
559570
return (
@@ -571,18 +582,33 @@ export class CodeSnippetDisplay extends React.Component<
571582
<btn.icon.react
572583
tag="span"
573584
elementPosition="center"
574-
width="16px"
585+
width="21px"
586+
height="21px"
575587
/>
576588
</button>
577589
);
578590
})}
579591
</div>
580592
</div>
593+
<div className={'jp-codeSnippet-description'}>
594+
<p>{`${codeSnippet.description}`}</p>
595+
</div>
596+
<div className={'jp-codeSnippet-tags'}>
597+
{tags ? tags.map((tag: string) => this.renderTag(tag, id)) : null}
598+
</div>
581599
</div>
582600
</div>
583601
);
584602
};
585603

604+
private renderTag(tag: string, id: string): JSX.Element {
605+
return (
606+
<div className={'tag applied-tag'} key={tag + '-' + id}>
607+
<label className={'tag-header'}>{tag}</label>
608+
</div>
609+
);
610+
}
611+
586612
static getDerivedStateFromProps(
587613
props: ICodeSnippetDisplayProps,
588614
state: ICodeSnippetDisplayState
@@ -616,8 +642,19 @@ export class CodeSnippetDisplay extends React.Component<
616642
render(): React.ReactElement {
617643
return (
618644
<div>
645+
<header className={CODE_SNIPPETS_HEADER_CLASS}>
646+
<span className={'jp-codeSnippet-title'}>{'Snippets'}</span>
647+
<addIcon.react
648+
className={'jp-createSnippetBtn'}
649+
tag="span"
650+
right="7px"
651+
top="5px"
652+
/>
653+
</header>
619654
<SearchBar onFilter={this.filterSnippets} />
620-
<header className={CODE_SNIPPETS_HEADER_CLASS}>{'Snippets'}</header>
655+
<div className={'jp-codeSnippet-filter'}>
656+
<button>Filter</button>
657+
</div>
621658
<div className={CODE_SNIPPETS_CONTAINER}>
622659
<div>
623660
{this.state.codeSnippets.map((codeSnippet, id) =>

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ function activateCodeSnippet(
209209

210210
app.contextMenu.addItem({
211211
command: delCommand,
212-
selector: '.expandableContainer-title'
212+
selector: '.codeSnippet-item'
213213
});
214214

215215
// Track and restore the widget state

‎style/icon/jupyter_launcher.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)