Skip to content

Commit

Permalink
Merge pull request #156 from XpressAI/adry/update-toolbar-button
Browse files Browse the repository at this point in the history 
🎨Update toolbar button and switch context menu shortcut key
  • Loading branch information
@MFA-X-AI
MFA-X-AI authored Apr 28, 2022
2 parents 8e57459 + 69bb5c5 commit b7664d5
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 67 deletions.
10 changes: 5 additions & 5 deletions src/components/xircuitBodyWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1600,9 +1600,6 @@ export const BodyWidget: FC<BodyWidgetProps> = ({

// Show the component panel context menu
const showComponentPanel = (event: React.MouseEvent<HTMLDivElement>) => {
// Disable the default context menu
event.preventDefault();

setActionPanelShown(false);
setIsComponentPanelShown(false);

Expand Down Expand Up @@ -1647,6 +1644,9 @@ export const BodyWidget: FC<BodyWidgetProps> = ({

// Show the nodeActionPanel context menu
const showNodeActionPanel = (event: React.MouseEvent<HTMLDivElement>) => {
// Disable the default context menu
event.preventDefault();

setActionPanelShown(false);
setIsComponentPanelShown(false);

Expand Down Expand Up @@ -1739,11 +1739,11 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
onMouseDown={(event) => {
event.preventDefault();
}}
onContextMenu={showComponentPanel}
onContextMenu={showNodeActionPanel}
onClick={(event) => {
hidePanel();
if (event.ctrlKey || event.metaKey) {
showNodeActionPanel(event);
showComponentPanel(event);
}
}}>
<DemoCanvasWidget>
Expand Down
170 changes: 110 additions & 60 deletions src/xircuitFactory.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,34 @@
import {
ABCWidgetFactory,
DocumentRegistry,
DocumentWidget
import {
ABCWidgetFactory,
DocumentRegistry,
DocumentWidget
} from '@jupyterlab/docregistry';
import {
ILabShell,
JupyterFrontEnd
import {
ILabShell,
JupyterFrontEnd
} from '@jupyterlab/application';
import { Signal } from '@lumino/signaling';
import { XPipePanel } from './xircuitWidget';
import {
bugIcon,
checkIcon,
editIcon,
listIcon,
refreshIcon,
runIcon,
saveIcon
import {
bugIcon,
checkIcon,
copyIcon,
cutIcon,
editIcon,
listIcon,
pasteIcon,
redoIcon,
refreshIcon,
runIcon,
saveIcon,
undoIcon
} from '@jupyterlab/ui-components';
import { ToolbarButton } from '@jupyterlab/apputils';
import { commandIDs } from './components/xircuitBodyWidget';
import { CommandIDs } from './log/LogPlugin';
import { ServiceManager } from '@jupyterlab/services';
import { RunSwitcher } from './components/RunSwitcher';
import { lockIcon, revertIcon, xircuitsIcon } from './ui-components/icons';
import { lockIcon, xircuitsIcon } from './ui-components/icons';

const XPIPE_CLASS = 'xircuits-editor';

Expand Down Expand Up @@ -117,12 +122,34 @@ export class XircuitFactory extends ABCWidgetFactory<DocumentWidget> {
*/
let saveButton = new ToolbarButton({
icon: saveIcon,
tooltip: 'Save Xircuits',
tooltip: 'Save (Ctrl+S)',
onClick: (): void => {
this.commands.execute(commandIDs.saveXircuit);
}
});

/**
* Create a undo button toolbar item.
*/
let undoButton = new ToolbarButton({
icon: undoIcon,
tooltip: 'Undo (Ctrl+Z)',
onClick: (): void => {
this.commands.execute(commandIDs.undo);
}
});

/**
* Create a redo button toolbar item.
*/
let redoButton = new ToolbarButton({
icon: redoIcon,
tooltip: 'Redo (Ctrl+Y)',
onClick: (): void => {
this.commands.execute(commandIDs.redo);
}
});

/**
* Create a reload button toolbar item.
*/
Expand All @@ -135,53 +162,64 @@ export class XircuitFactory extends ABCWidgetFactory<DocumentWidget> {
});

/**
* Create a revert button toolbar item.
* Create a cut button toolbar item.
*/
let revertButton = new ToolbarButton({
icon: revertIcon,
tooltip: 'Revert Xircuits to Checkpoint',
let cutButton = new ToolbarButton({
icon: cutIcon,
tooltip: 'Cut selected nodes',
onClick: (): void => {
this.commands.execute(commandIDs.revertDocManager);
this.commands.execute(commandIDs.cutNode);
}
});

/**
* Create a compile button toolbar item.
* Create a copy button toolbar item.
*/
let compileButton = new ToolbarButton({
icon: checkIcon,
tooltip: 'Compile Xircuits',
let copyButton = new ToolbarButton({
icon: copyIcon,
tooltip: 'Copy selected nodes',
onClick: (): void => {
this.commands.execute(commandIDs.compileXircuit);
this.commands.execute(commandIDs.copyNode);
}
});

/**
* Create a run button toolbar item.
* Create a paste button toolbar item.
*/
let runButton = new ToolbarButton({
icon: runIcon,
tooltip: 'Run Xircuits',
let pasteButton = new ToolbarButton({
icon: pasteIcon,
tooltip: 'Paste nodes from the clipboard',
onClick: (): void => {
this.commands.execute(commandIDs.runXircuit);
this.commands.execute(commandIDs.pasteNode);
}
});

/**
* Create a debug button toolbar item.
*/
let debugButton = new ToolbarButton({
icon:bugIcon,
tooltip: 'Open Xircuits Debugger and enable Image Viewer',
// let debugButton = new ToolbarButton({
// icon:bugIcon,
// tooltip: 'Open Xircuits Debugger and enable Image Viewer',
// onClick: (): void => {
// this.commands.execute(commandIDs.debugXircuit);
// }
// });

/**
* Create a lock button toolbar item.
*/
let lockButton = new ToolbarButton({
icon: lockIcon,
tooltip: "Lock all non-general nodes connected from start node",
onClick: (): void => {
this.commands.execute(commandIDs.debugXircuit);
this.commands.execute(commandIDs.lockXircuit);
}
});

/**
* Create a log button toolbar item.
*/
let logButton = new ToolbarButton({
let logButton = new ToolbarButton({
icon: listIcon,
tooltip: 'Open log',
onClick: (): void => {
Expand All @@ -190,41 +228,53 @@ export class XircuitFactory extends ABCWidgetFactory<DocumentWidget> {
});

/**
* Create a lock button toolbar item.
* Create a test button toolbar item.
*/
let lockButton = new ToolbarButton({
icon: lockIcon,
tooltip: "Lock all non-general nodes connected from start node",
let testButton = new ToolbarButton({
icon: editIcon,
tooltip: 'For testing purposes',
onClick: (): void => {
this.commands.execute(commandIDs.lockXircuit);
this.commands.execute(commandIDs.testXircuit)
}
});

/**
* Create a test button toolbar item.
* Create a compile button toolbar item.
*/
let testButton = new ToolbarButton({
icon: editIcon,
tooltip: 'For testing purpose',
let compileButton = new ToolbarButton({
icon: checkIcon,
tooltip: 'Compile Xircuits',
onClick: (): void => {
this.commands.execute(commandIDs.testXircuit)
this.commands.execute(commandIDs.compileXircuit);
}
});

widget.toolbar.insertItem(0,'xircuits-add-save', saveButton);
widget.toolbar.insertItem(1,'xircuits-add-reload', reloadButton);
widget.toolbar.insertItem(2,'xircuits-add-revert', revertButton);
widget.toolbar.insertItem(3,'xircuits-add-compile', compileButton);
widget.toolbar.insertItem(4,'xircuits-add-run', runButton);

/**
* Create a compile and run button toolbar item.
*/
let compileAndRunButton = new ToolbarButton({
icon: runIcon,
tooltip: 'Compile and Run Xircuits',
onClick: (): void => {
this.commands.execute(commandIDs.runXircuit);
}
});

widget.toolbar.insertItem(0, 'xircuits-add-save', saveButton);
widget.toolbar.insertItem(1, 'xircuits-add-undo', undoButton);
widget.toolbar.insertItem(2, 'xircuits-add-redo', redoButton);
widget.toolbar.insertItem(3, 'xircuits-add-reload', reloadButton);
widget.toolbar.insertItem(4, 'xircuits-add-cut', cutButton);
widget.toolbar.insertItem(5, 'xircuits-add-copy', copyButton);
widget.toolbar.insertItem(6, 'xircuits-add-paste', pasteButton);
widget.toolbar.insertItem(7, 'xircuits-add-lock', lockButton);
widget.toolbar.insertItem(8, 'xircuits-add-log', logButton);
widget.toolbar.insertItem(9, 'xircuits-add-test', testButton);
widget.toolbar.insertItem(10, 'xircuits-add-compile', compileButton);
widget.toolbar.insertItem(11, 'xircuits-add-run', compileAndRunButton);
widget.toolbar.insertItem(12, 'xircuits-run-type', new RunSwitcher(this));
// TODO: Fix debugger
// widget.toolbar.insertItem(5,'xircuits-add-debug', debugButton);
widget.toolbar.insertItem(6,'xircuits-add-lock', lockButton);
widget.toolbar.insertItem(7,'xircuits-add-log', logButton);
widget.toolbar.insertItem(8,'xircuits-add-test', testButton);
widget.toolbar.insertItem(9,
'xircuits-run-type',
new RunSwitcher(this)
);

return widget;
}
Expand Down
4 changes: 2 additions & 2 deletions ui-tests/tests/E2E.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ test('Should complete E2E test', async ({
dialog.dismiss().catch(() => {});
});

await page.locator("xpath=//*[contains(@title, 'Save Xircuits')]").first().click();
await page.locator("xpath=//*[contains(@title, 'Save (Ctrl+S)')]").first().click();
await page.locator("xpath=//*[contains(@title, 'Compile Xircuits')]").first().click();
await page.locator("xpath=//*[contains(@title, 'Run Xircuits')]").first().click();
await page.locator("xpath=//*[contains(@title, 'Compile and Run Xircuits')]").first().click();

// Start Xircuits
await page.locator('button:has-text("Start")').click();
Expand Down

0 comments on commit b7664d5

Please sign in to comment.