Switch notebook editors to monaco (#239)
* Upgrade nteract packages and related dependencies to make new stateful-component work * Switch to new monacoEditor * Configure store using nteract mythic configuration * Replace CodeMirror with Monaco editor in NotebookReadOnlyRenderer * Reformat * Upgrade d3 to latest to resolve d3-selection conflicts with nteract/data-explorer that broke D3ForceGraph * Upgrade jupyterlab terminal widget to work with latest version of react. Upgrade jupyterlab services to include latest fix for websocket auth * Update jest test snapshots * Upgrade packages to fix build issues * Remove comment * Fix unit tests * Fix unit test snapshot * Remove useless @types/node-fetch
This commit is contained in:
Laurent Nguyen
GitHub
parent
4fe2098730
commit
0ad5fb465b
File diff suppressed because it is too large
Load Diff
41
package.json
41
package.json
|
|
@ -6,26 +6,26 @@
|
|||
"dependencies": {
|
||||
"@azure/cosmos": "3.9.0",
|
||||
"@azure/cosmos-language-service": "0.0.4",
|
||||
"@jupyterlab/services": "4.2.0",
|
||||
"@jupyterlab/terminal": "1.2.1",
|
||||
"@jupyterlab/services": "6.0.0-rc.2",
|
||||
"@jupyterlab/terminal": "3.0.0-rc.2",
|
||||
"@microsoft/applicationinsights-web": "2.5.8",
|
||||
"@nteract/commutable": "7.1.4",
|
||||
"@nteract/connected-components": "6.7.8",
|
||||
"@nteract/core": "13.0.0",
|
||||
"@nteract/commutable": "7.3.2",
|
||||
"@nteract/connected-components": "6.8.2",
|
||||
"@nteract/core": "15.1.0",
|
||||
"@nteract/data-explorer": "8.0.3",
|
||||
"@nteract/directory-listing": "2.0.6",
|
||||
"@nteract/dropdown-menu": "1.0.1",
|
||||
"@nteract/editor": "9.6.6",
|
||||
"@nteract/editor": "10.1.2",
|
||||
"@nteract/fixtures": "2.3.0",
|
||||
"@nteract/iron-icons": "1.0.0",
|
||||
"@nteract/jupyter-widgets": "2.0.0",
|
||||
"@nteract/logos": "1.0.0",
|
||||
"@nteract/markdown": "4.4.0",
|
||||
"@nteract/monaco-editor": "3.0.3",
|
||||
"@nteract/monaco-editor": "3.2.0",
|
||||
"@nteract/octicons": "2.0.0",
|
||||
"@nteract/outputs": "3.0.9",
|
||||
"@nteract/presentational-components": "3.0.7",
|
||||
"@nteract/stateful-components": "1.4.0",
|
||||
"@nteract/stateful-components": "1.7.0",
|
||||
"@nteract/styles": "2.0.2",
|
||||
"@nteract/transform-geojson": "5.1.8",
|
||||
"@nteract/transform-model-debug": "5.0.1",
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
"copy-webpack-plugin": "6.0.2",
|
||||
"crossroads": "0.12.2",
|
||||
"css-element-queries": "1.1.1",
|
||||
"d3": "6.1.1",
|
||||
"datatables.net-colreorder-dt": "1.5.1",
|
||||
"datatables.net-dt": "1.10.19",
|
||||
"date-fns": "1.29.0",
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
"promise-polyfill": "8.1.0",
|
||||
"promise.prototype.finally": "3.1.0",
|
||||
"q": "1.5.1",
|
||||
"react": "16.9.0",
|
||||
"react": "16.13.1",
|
||||
"react-animate-height": "2.0.8",
|
||||
"react-dnd": "9.4.0",
|
||||
"react-dnd-html5-backend": "9.4.0",
|
||||
|
|
@ -82,11 +83,12 @@
|
|||
"react-notification-system": "0.2.17",
|
||||
"react-redux": "7.1.3",
|
||||
"redux": "4.0.4",
|
||||
"rx-jupyter": "5.5.2",
|
||||
"rxjs": "6.5.3",
|
||||
"rx-jupyter": "5.5.12",
|
||||
"rxjs": "6.6.3",
|
||||
"styled-components": "4.3.2",
|
||||
"text-encoding": "0.7.0",
|
||||
"underscore": "1.9.1",
|
||||
"utility-types": "3.10.0",
|
||||
"url-polyfill": "1.1.7",
|
||||
"webcrypto-liner": "1.1.4",
|
||||
"webfontloader": "1.6.28",
|
||||
|
|
@ -100,9 +102,9 @@
|
|||
"@types/applicationinsights-js": "1.0.7",
|
||||
"@types/codemirror": "0.0.56",
|
||||
"@types/crossroads": "0.0.30",
|
||||
"@types/d3": "4.13.2",
|
||||
"@types/enzyme": "3.10.3",
|
||||
"@types/enzyme-adapter-react-16": "1.0.5",
|
||||
"@types/d3": "5.9.2",
|
||||
"@types/enzyme": "3.10.7",
|
||||
"@types/enzyme-adapter-react-16": "1.0.6",
|
||||
"@types/expect-puppeteer": "4.4.3",
|
||||
"@types/hasher": "0.0.31",
|
||||
"@types/jest": "23.3.10",
|
||||
|
|
@ -113,7 +115,7 @@
|
|||
"@types/prop-types": "15.5.8",
|
||||
"@types/puppeteer": "3.0.1",
|
||||
"@types/q": "1.5.1",
|
||||
"@types/react": "16.8.25",
|
||||
"@types/react": "16.9.49",
|
||||
"@types/react-dom": "16.0.7",
|
||||
"@types/react-notification-system": "0.2.39",
|
||||
"@types/react-redux": "7.1.7",
|
||||
|
|
@ -132,10 +134,9 @@
|
|||
"case-sensitive-paths-webpack-plugin": "2.3.0",
|
||||
"create-file-webpack": "1.0.2",
|
||||
"css-loader": "1.0.0",
|
||||
"d3": "4.13.0",
|
||||
"enzyme": "3.10.0",
|
||||
"enzyme-adapter-react-16": "1.15.1",
|
||||
"enzyme-to-json": "3.4.3",
|
||||
"enzyme": "3.11.0",
|
||||
"enzyme-adapter-react-16": "1.15.5",
|
||||
"enzyme-to-json": "3.6.1",
|
||||
"eslint": "7.8.1",
|
||||
"eslint-cli": "1.1.1",
|
||||
"eslint-plugin-no-null": "1.0.2",
|
||||
|
|
@ -156,7 +157,7 @@
|
|||
"less-vars-loader": "1.1.0",
|
||||
"mini-css-extract-plugin": "0.4.3",
|
||||
"monaco-editor-webpack-plugin": "1.7.0",
|
||||
"node-fetch": "2.6.0",
|
||||
"node-fetch": "2.6.1",
|
||||
"prettier": "1.19.1",
|
||||
"puppeteer": "4.0.0",
|
||||
"raw-loader": "0.5.1",
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
/>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
<Memo(StyledImageBase)
|
||||
<StyledImageBase
|
||||
alt="name cover image"
|
||||
height={144}
|
||||
imageFit={2}
|
||||
|
|
@ -95,7 +95,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
styles={
|
||||
Object {
|
||||
|
|
@ -119,7 +119,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
styles={
|
||||
Object {
|
||||
|
|
@ -143,7 +143,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="Heart"
|
||||
styles={
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
|
|||
<div
|
||||
className="infoPanelMain"
|
||||
>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
className="infoIconMain"
|
||||
iconName="Help"
|
||||
styles={
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class NotebookViewerComponent extends React.Component<
|
|||
databaseAccountName: undefined,
|
||||
defaultExperience: "NotebookViewer",
|
||||
isReadOnly: true,
|
||||
cellEditorType: "codemirror",
|
||||
cellEditorType: "monaco",
|
||||
autoSaveInterval: 365 * 24 * 3600 * 1000, // There is no way to turn off auto-save, set to 1 year
|
||||
contentProvider: contents.JupyterContentProvider // NotebookViewer only knows how to talk to Jupyter contents API
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,14 +56,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
|
|||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
|
@ -156,14 +156,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
|
|||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<Memo(StyledIconBase)
|
||||
<StyledIconBase
|
||||
ariaLabel="Info"
|
||||
iconName="Info"
|
||||
styles={
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import * as ko from "knockout";
|
||||
import Q from "q";
|
||||
import { schemeCategory20 } from "d3";
|
||||
import { event as d3Event, selectAll, select } from "d3-selection";
|
||||
import { schemeCategory10 } from "d3-scale-chromatic";
|
||||
import { selectAll, select } from "d3-selection";
|
||||
import { zoom, zoomIdentity } from "d3-zoom";
|
||||
import { scaleOrdinal } from "d3-scale";
|
||||
import { forceSimulation, forceLink, forceCollide, forceManyBody } from "d3-force";
|
||||
import { interpolateNumber, interpolate } from "d3-interpolate";
|
||||
import { map as d3Map } from "d3-collection";
|
||||
import { drag } from "d3-drag";
|
||||
import { drag, D3DragEvent } from "d3-drag";
|
||||
|
||||
import _ from "underscore";
|
||||
import { NeighborType } from "../../../Contracts/ViewModels";
|
||||
|
|
@ -89,7 +89,7 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
private static readonly PAGINATION_LINE2_Y_OFFSET_PX = 14;
|
||||
|
||||
// We limit the number of different colors to 20
|
||||
private static readonly COLOR_SCHEME_20 = scaleOrdinal(schemeCategory20);
|
||||
private static readonly COLOR_SCHEME = scaleOrdinal(schemeCategory10);
|
||||
private static readonly MAX_COLOR_NB = 20;
|
||||
|
||||
// Some state variables
|
||||
|
|
@ -344,13 +344,13 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
} while ((el = el && el.parentNode));
|
||||
}
|
||||
|
||||
private zoomed() {
|
||||
private zoomed(event: any) {
|
||||
this.zoomTransform = {
|
||||
x: d3Event.transform.x,
|
||||
y: d3Event.transform.y,
|
||||
k: d3Event.transform.k
|
||||
x: event.transform.x,
|
||||
y: event.transform.y,
|
||||
k: event.transform.k
|
||||
};
|
||||
this.g.attr("transform", d3Event.transform);
|
||||
this.g.attr("transform", event.transform);
|
||||
}
|
||||
|
||||
private instantiateSimulation() {
|
||||
|
|
@ -719,17 +719,17 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
})
|
||||
.call(
|
||||
drag()
|
||||
.on("start", (d: D3Node) => {
|
||||
return this.dragstarted(d);
|
||||
})
|
||||
.on("drag", (d: D3Node) => {
|
||||
return this.dragged(d);
|
||||
})
|
||||
.on("end", (d: D3Node) => {
|
||||
return this.dragended(d);
|
||||
})
|
||||
.on("start", ((e: D3DragEvent<SVGGElement, D3Node, unknown>, d: D3Node) => {
|
||||
return this.dragstarted(d, e);
|
||||
}) as any)
|
||||
.on("drag", ((e: D3DragEvent<SVGGElement, D3Node, unknown>, d: D3Node) => {
|
||||
return this.dragged(d, e);
|
||||
}) as any)
|
||||
.on("end", ((e: D3DragEvent<SVGGElement, D3Node, unknown>, d: D3Node) => {
|
||||
return this.dragended(d, e);
|
||||
}) as any)
|
||||
)
|
||||
.on("mouseover", (d: D3Node) => {
|
||||
.on("mouseover", (_: MouseEvent, d: D3Node) => {
|
||||
if (this.isHighlightDisabled || this.selectedNode || this.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -737,7 +737,7 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
this.highlightNode(this, d);
|
||||
this.simulation.stop();
|
||||
})
|
||||
.on("mouseout", (d: D3Node) => {
|
||||
.on("mouseout", (_: MouseEvent, d: D3Node) => {
|
||||
if (this.isHighlightDisabled || this.selectedNode || this.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -765,17 +765,17 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
.attr("aria-label", (d: D3Node) => {
|
||||
return this.retrieveNodeCaption(d);
|
||||
})
|
||||
.on("dblclick", function(d: D3Node) {
|
||||
.on("dblclick", function(_: MouseEvent, d: D3Node) {
|
||||
// this is the <g> element
|
||||
self.onNodeClicked(this.parentNode, d);
|
||||
})
|
||||
.on("click", function(d: D3Node) {
|
||||
.on("click", function(_: MouseEvent, d: D3Node) {
|
||||
// this is the <g> element
|
||||
self.onNodeClicked(this.parentNode, d);
|
||||
})
|
||||
.on("keypress", function(d: D3Node) {
|
||||
if (d3Event.charCode === Constants.KeyCodes.Space || d3Event.charCode === Constants.KeyCodes.Enter) {
|
||||
d3Event.stopPropagation();
|
||||
.on("keypress", function(event: KeyboardEvent, d: D3Node) {
|
||||
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
||||
event.stopPropagation();
|
||||
// this is the <g> element
|
||||
self.onNodeClicked(this.parentNode, d);
|
||||
}
|
||||
|
|
@ -850,24 +850,24 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
return `Next page of nodes for ${this.retrieveNodeCaption(d)}`;
|
||||
})
|
||||
.attr("tabindex", 0)
|
||||
.on("click", function(d: D3Node) {
|
||||
.on("click", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.NEXT_PAGE);
|
||||
})
|
||||
.on("dblclick", function(d: D3Node) {
|
||||
}) as any)
|
||||
.on("dblclick", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.NEXT_PAGE);
|
||||
})
|
||||
.on("keypress", function(d: D3Node) {
|
||||
if (d3Event.charCode === Constants.KeyCodes.Space || d3Event.charCode === Constants.KeyCodes.Enter) {
|
||||
d3Event.stopPropagation();
|
||||
}) as any)
|
||||
.on("keypress", ((event: KeyboardEvent, d: D3Node) => {
|
||||
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
||||
event.stopPropagation();
|
||||
self.loadNeighbors(d, PAGE_ACTION.NEXT_PAGE);
|
||||
}
|
||||
})
|
||||
.on("mouseover", function(d: D3Node) {
|
||||
select(this).classed("active", true);
|
||||
})
|
||||
.on("mouseout", function(d: D3Node) {
|
||||
select(this).classed("active", false);
|
||||
})
|
||||
}) as any)
|
||||
.on("mouseover", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", true);
|
||||
}) as any)
|
||||
.on("mouseout", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", false);
|
||||
}) as any)
|
||||
.attr("visibility", (d: D3Node) => (!d._outEAllLoaded || !d._inEAllLoaded ? "visible" : "hidden"));
|
||||
parent
|
||||
.append("use")
|
||||
|
|
@ -879,24 +879,24 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
return `Previous page of nodes for ${this.retrieveNodeCaption(d)}`;
|
||||
})
|
||||
.attr("tabindex", 0)
|
||||
.on("click", function(d: D3Node) {
|
||||
.on("click", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.PREVIOUS_PAGE);
|
||||
})
|
||||
.on("dblclick", function(d: D3Node) {
|
||||
}) as any)
|
||||
.on("dblclick", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.PREVIOUS_PAGE);
|
||||
})
|
||||
.on("keypress", function(d: D3Node) {
|
||||
if (d3Event.charCode === Constants.KeyCodes.Space || d3Event.charCode === Constants.KeyCodes.Enter) {
|
||||
d3Event.stopPropagation();
|
||||
}) as any)
|
||||
.on("keypress", ((event: KeyboardEvent, d: D3Node) => {
|
||||
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
||||
event.stopPropagation();
|
||||
self.loadNeighbors(d, PAGE_ACTION.PREVIOUS_PAGE);
|
||||
}
|
||||
})
|
||||
.on("mouseover", function(d: D3Node) {
|
||||
select(this).classed("active", true);
|
||||
})
|
||||
.on("mouseout", function(d: D3Node) {
|
||||
select(this).classed("active", false);
|
||||
})
|
||||
}) as any)
|
||||
.on("mouseover", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", true);
|
||||
}) as any)
|
||||
.on("mouseout", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", false);
|
||||
}) as any)
|
||||
.attr("visibility", (d: D3Node) =>
|
||||
!d._pagination || d._pagination.currentPage.start !== 0 ? "visible" : "hidden"
|
||||
);
|
||||
|
|
@ -975,24 +975,24 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
return `Load adjacent nodes for ${this.retrieveNodeCaption(d)}`;
|
||||
})
|
||||
.attr("tabindex", 0)
|
||||
.on("click", function(d: D3Node) {
|
||||
.on("click", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.FIRST_PAGE);
|
||||
})
|
||||
.on("dblclick", function(d: D3Node) {
|
||||
}) as any)
|
||||
.on("dblclick", ((_: MouseEvent, d: D3Node) => {
|
||||
self.loadNeighbors(d, PAGE_ACTION.FIRST_PAGE);
|
||||
})
|
||||
.on("keypress", function(d: D3Node) {
|
||||
if (d3Event.charCode === Constants.KeyCodes.Space || d3Event.charCode === Constants.KeyCodes.Enter) {
|
||||
d3Event.stopPropagation();
|
||||
}) as any)
|
||||
.on("keypress", ((event: KeyboardEvent, d: D3Node) => {
|
||||
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
||||
event.stopPropagation();
|
||||
self.loadNeighbors(d, PAGE_ACTION.FIRST_PAGE);
|
||||
}
|
||||
})
|
||||
.on("mouseover", function(d: D3Node) {
|
||||
select(this).classed("active", true);
|
||||
})
|
||||
.on("mouseout", function(d: D3Node) {
|
||||
select(this).classed("active", false);
|
||||
});
|
||||
}) as any)
|
||||
.on("mouseover", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", true);
|
||||
}) as any)
|
||||
.on("mouseout", ((e: MouseEvent, d: D3Node) => {
|
||||
select(e.target as any).classed("active", false);
|
||||
}) as any);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1053,7 +1053,7 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
if (index < 0 || index >= D3ForceGraph.MAX_COLOR_NB) {
|
||||
index = D3ForceGraph.MAX_COLOR_NB - 1;
|
||||
}
|
||||
return D3ForceGraph.COLOR_SCHEME_20(index.toString());
|
||||
return D3ForceGraph.COLOR_SCHEME(index.toString());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1071,23 +1071,23 @@ export class D3ForceGraph implements GraphRenderer {
|
|||
}
|
||||
}
|
||||
|
||||
private dragstarted(d: D3Node) {
|
||||
private dragstarted(d: D3Node, event: D3DragEvent<SVGGElement, D3Node, unknown>) {
|
||||
this.isDragging = true;
|
||||
if (!d3Event.active) {
|
||||
if (!event.active) {
|
||||
this.simulation.alphaTarget(0.3).restart();
|
||||
}
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
private dragged(d: D3Node) {
|
||||
d.fx = d3Event.x;
|
||||
d.fy = d3Event.y;
|
||||
private dragged(d: D3Node, event: D3DragEvent<SVGGElement, D3Node, unknown>) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
private dragended(d: D3Node) {
|
||||
private dragended(d: D3Node, event: D3DragEvent<SVGGElement, D3Node, unknown>) {
|
||||
this.isDragging = false;
|
||||
if (!d3Event.active) {
|
||||
if (!event.active) {
|
||||
this.simulation.alphaTarget(0);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
makeAppRecord,
|
||||
makeCommsRecord,
|
||||
makeContentsRecord,
|
||||
makeEditorsRecord,
|
||||
makeEntitiesRecord,
|
||||
makeHostsRecord,
|
||||
makeJupyterHostRecord,
|
||||
|
|
@ -34,6 +35,7 @@ import configureStore from "./NotebookComponent/store";
|
|||
import { Notification } from "react-notification-system";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
|
||||
|
||||
export type KernelSpecsDisplay = { name: string; displayName: string };
|
||||
|
||||
|
|
@ -112,20 +114,15 @@ export class NotebookClientV2 {
|
|||
host: jupyterHostRecord
|
||||
// TODO: tamitta: notificationSystem.addNotification was removed, do we need a substitute?
|
||||
}),
|
||||
comms: makeCommsRecord(),
|
||||
config: Immutable.Map({
|
||||
theme: "light",
|
||||
editorType: params.cellEditorType || "codemirror",
|
||||
autoSaveInterval: params.autoSaveInterval || Constants.Notebook.autoSaveIntervalMs
|
||||
}),
|
||||
core: makeStateRecord({
|
||||
currentKernelspecsRef: kernelspecsRef,
|
||||
entities: makeEntitiesRecord({
|
||||
editors: makeEditorsRecord({}),
|
||||
hosts: makeHostsRecord({
|
||||
byRef: Immutable.Map<string, HostRecord>().set(this.contentHostRef, jupyterHostRecord)
|
||||
}),
|
||||
comms: makeCommsRecord(),
|
||||
contents: makeContentsRecord({
|
||||
// byRef: Immutable.Map<string, ContentRecord>().set(this.contentRef, record)
|
||||
byRef: Immutable.Map<string, ContentRecord>()
|
||||
}),
|
||||
transforms: makeTransformsRecord({
|
||||
|
|
@ -238,6 +235,24 @@ export class NotebookClientV2 {
|
|||
};
|
||||
|
||||
this.store = configureStore(initialState, params.contentProvider, traceErrorFct, [cacheKernelSpecsMiddleware]);
|
||||
|
||||
// Additional configuration
|
||||
this.store.dispatch(configOption("editorType").action(params.cellEditorType ?? "monaco"));
|
||||
this.store.dispatch(
|
||||
configOption("autoSaveInterval").action(params.autoSaveInterval ?? Constants.Notebook.autoSaveIntervalMs)
|
||||
);
|
||||
createConfigCollection({
|
||||
key: "monaco"
|
||||
});
|
||||
defineConfigOption({
|
||||
label: "Show Line numbers",
|
||||
key: "monaco.lineNumbers",
|
||||
values: [
|
||||
{ label: "Yes", value: true },
|
||||
{ label: "No", value: false }
|
||||
],
|
||||
defaultValue: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -196,7 +196,6 @@ export class NotebookComponentBootstrapper {
|
|||
this.getStore().dispatch(
|
||||
actions.createCellBelow({
|
||||
cellType: "code",
|
||||
source: "",
|
||||
contentRef: this.contentRef
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { StringUtils } from "../../../../../Utils/StringUtils";
|
||||
import { actions, AppState, ContentRef, selectors } from "@nteract/core";
|
||||
import { MonacoEditorProps } from "@nteract/monaco-editor";
|
||||
import { IMonacoProps as MonacoEditorProps } from "@nteract/monaco-editor";
|
||||
import * as React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { Dispatch } from "redux";
|
||||
|
|
@ -21,7 +21,7 @@ interface MappedStateProps {
|
|||
mimetype: string;
|
||||
text: string;
|
||||
contentRef: ContentRef;
|
||||
theme: string; // "light" | "dark";
|
||||
theme?: "light" | "dark";
|
||||
}
|
||||
|
||||
interface MappedDispatchProps {
|
||||
|
|
@ -65,8 +65,10 @@ export class TextFile extends React.PureComponent<TextFileProps, TextFileState>
|
|||
return (
|
||||
<EditorContainer className="nteract-editor" style={{ position: "static" }}>
|
||||
<Editor
|
||||
id={"no-cell-id-for-single-editor"}
|
||||
contentRef={this.props.contentRef}
|
||||
theme={this.props.theme === "dark" ? "vs-dark" : "vs"}
|
||||
mode={this.props.mimetype}
|
||||
language={"plaintext"}
|
||||
editorFocused
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange.bind(this)}
|
||||
|
|
@ -97,8 +99,7 @@ function makeMapStateToTextFileProps(
|
|||
return {
|
||||
contentRef,
|
||||
mimetype: content.mimetype != null ? content.mimetype : "text/plain",
|
||||
text,
|
||||
theme: selectors.currentTheme(state)
|
||||
text
|
||||
};
|
||||
};
|
||||
return mapStateToTextFileProps;
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: ContentsProps): object
|
|||
},
|
||||
COPY_CELL: () => dispatch(actions.copyCell({ contentRef })),
|
||||
CREATE_CELL_ABOVE: () => dispatch(actions.createCellAbove({ cellType: "code", contentRef })),
|
||||
CREATE_CELL_BELOW: () => dispatch(actions.createCellBelow({ cellType: "code", source: "", contentRef })),
|
||||
CREATE_CELL_BELOW: () => dispatch(actions.createCellBelow({ cellType: "code", contentRef })),
|
||||
CUT_CELL: () => dispatch(actions.cutCell({ contentRef })),
|
||||
DELETE_CELL: () => dispatch(actions.deleteCell({ contentRef })),
|
||||
EXECUTE_ALL_CELLS: () => dispatch(actions.executeAllCells({ contentRef })),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as Immutable from "immutable";
|
||||
import { ActionsObservable, StateObservable } from "redux-observable";
|
||||
import { Subject, empty } from "rxjs";
|
||||
import { StateObservable } from "redux-observable";
|
||||
import { Subject, of } from "rxjs";
|
||||
import { toArray } from "rxjs/operators";
|
||||
import { makeNotebookRecord } from "@nteract/commutable";
|
||||
import { actions, state } from "@nteract/core";
|
||||
|
|
@ -124,7 +124,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
const kernelSpecName = "kernelspecname";
|
||||
const sessionId = "sessionId";
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -192,7 +192,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
const kernelSpecName = "kernelspecname";
|
||||
const sessionId = "sessionId";
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -247,7 +247,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
const kernelSpecName = "kernelspecname";
|
||||
const sessionId = "sessionId";
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -298,7 +298,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const cwd = "/";
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -398,7 +398,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
it("launches supported kernel in kernelspecs", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -421,7 +421,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
it("launches undefined kernel uses default kernel from kernelspecs", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -445,7 +445,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
it("launches unsupported kernel uses default kernel from kernelspecs", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -469,7 +469,7 @@ describe("launchWebSocketKernelEpic", () => {
|
|||
it("launches unsupported kernel uses kernelspecs with similar name", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.launchKernelByName({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -499,7 +499,7 @@ describe("autoStartKernelEpic", () => {
|
|||
it("automatically starts kernel when content fetch is successful if kernelRef is defined", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.fetchContentFulfilled({
|
||||
contentRef,
|
||||
kernelRef,
|
||||
|
|
@ -527,7 +527,7 @@ describe("autoStartKernelEpic", () => {
|
|||
it("Don't start kernel when content fetch is successful if kernelRef is not defined", async () => {
|
||||
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
|
||||
|
||||
const action$ = ActionsObservable.of(
|
||||
const action$ = of(
|
||||
actions.fetchContentFulfilled({
|
||||
contentRef,
|
||||
kernelRef: undefined,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
|
||||
import { webSocket } from "rxjs/webSocket";
|
||||
import { ActionsObservable, StateObservable } from "redux-observable";
|
||||
import { StateObservable } from "redux-observable";
|
||||
import { ofType } from "redux-observable";
|
||||
import {
|
||||
mergeMap,
|
||||
|
|
@ -65,7 +65,7 @@ const logToTelemetry = (state: CdbAppState, title: string, error?: string) => {
|
|||
* @param state$
|
||||
*/
|
||||
const addInitialCodeCellEpic = (
|
||||
action$: ActionsObservable<actions.FetchContentFulfilled>,
|
||||
action$: Observable<actions.FetchContentFulfilled>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{} | actions.CreateCellBelow> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -104,7 +104,7 @@ const addInitialCodeCellEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
export const autoStartKernelEpic = (
|
||||
action$: ActionsObservable<actions.FetchContentFulfilled>,
|
||||
action$: Observable<actions.FetchContentFulfilled>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{} | actions.CreateCellBelow> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -157,7 +157,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
|
|||
* Override from kernel-lifecycle to improve code mirror language intellisense
|
||||
* @param action$
|
||||
*/
|
||||
export const acquireKernelInfoEpic = (action$: ActionsObservable<actions.NewKernelAction>) => {
|
||||
export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => {
|
||||
return action$.pipe(
|
||||
ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
|
||||
switchMap((action: actions.NewKernelAction) => {
|
||||
|
|
@ -310,7 +310,7 @@ const connect = (serverConfig: NotebookServiceConfig, kernelID: string, sessionI
|
|||
* @param state$
|
||||
*/
|
||||
export const launchWebSocketKernelEpic = (
|
||||
action$: ActionsObservable<actions.LaunchKernelByNameAction>,
|
||||
action$: Observable<actions.LaunchKernelByNameAction>,
|
||||
state$: StateObservable<CdbAppState>
|
||||
) => {
|
||||
return action$.pipe(
|
||||
|
|
@ -422,7 +422,7 @@ export const launchWebSocketKernelEpic = (
|
|||
* TODO: Remove this epic once the /restart endpoint is implemented.
|
||||
*/
|
||||
export const restartWebSocketKernelEpic = (
|
||||
action$: ActionsObservable<actions.RestartKernel | actions.NewKernelAction>,
|
||||
action$: Observable<actions.RestartKernel | actions.NewKernelAction>,
|
||||
state$: StateObservable<AppState>
|
||||
) =>
|
||||
action$.pipe(
|
||||
|
|
@ -532,7 +532,7 @@ export const restartWebSocketKernelEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
const changeWebSocketKernelEpic = (
|
||||
action$: ActionsObservable<actions.ChangeKernelByName>,
|
||||
action$: Observable<actions.ChangeKernelByName>,
|
||||
state$: StateObservable<AppState>
|
||||
) => {
|
||||
return action$.pipe(
|
||||
|
|
@ -614,7 +614,7 @@ const changeWebSocketKernelEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
const focusInitialCodeCellEpic = (
|
||||
action$: ActionsObservable<actions.CreateCellAppend>,
|
||||
action$: Observable<actions.CreateCellAppend>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{} | actions.FocusCell> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -652,10 +652,7 @@ const focusInitialCodeCellEpic = (
|
|||
* @param action$
|
||||
* @param state$
|
||||
*/
|
||||
const notificationsToUserEpic = (
|
||||
action$: ActionsObservable<any>,
|
||||
state$: StateObservable<CdbAppState>
|
||||
): Observable<{}> => {
|
||||
const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservable<CdbAppState>): Observable<{}> => {
|
||||
return action$.pipe(
|
||||
ofType(
|
||||
actions.RESTART_KERNEL_SUCCESSFUL,
|
||||
|
|
@ -705,7 +702,7 @@ const notificationsToUserEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
const handleKernelConnectionLostEpic = (
|
||||
action$: ActionsObservable<actions.UpdateDisplayFailed>,
|
||||
action$: Observable<actions.UpdateDisplayFailed>,
|
||||
state$: StateObservable<CdbAppState>
|
||||
): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -766,7 +763,7 @@ const handleKernelConnectionLostEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
export const cleanKernelOnConnectionLostEpic = (
|
||||
action$: ActionsObservable<actions.UpdateDisplayFailed>,
|
||||
action$: Observable<actions.UpdateDisplayFailed>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<actions.KillKernelSuccessful> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -789,7 +786,7 @@ export const cleanKernelOnConnectionLostEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
const executeFocusedCellAndFocusNextEpic = (
|
||||
action$: ActionsObservable<CdbActions.ExecuteFocusedCellAndFocusNextAction>,
|
||||
action$: Observable<CdbActions.ExecuteFocusedCellAndFocusNextAction>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{} | actions.FocusNextCellEditor> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -829,7 +826,7 @@ function getUserPuid(): string {
|
|||
* @param state$
|
||||
*/
|
||||
const closeUnsupportedMimetypesEpic = (
|
||||
action$: ActionsObservable<actions.FetchContentFulfilled>,
|
||||
action$: Observable<actions.FetchContentFulfilled>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{}> => {
|
||||
return action$.pipe(
|
||||
|
|
@ -858,7 +855,7 @@ const closeUnsupportedMimetypesEpic = (
|
|||
* @param state$
|
||||
*/
|
||||
const closeContentFailedToFetchEpic = (
|
||||
action$: ActionsObservable<actions.FetchContentFailed>,
|
||||
action$: Observable<actions.FetchContentFailed>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<{}> => {
|
||||
return action$.pipe(
|
||||
|
|
|
|||
|
|
@ -1,36 +1,22 @@
|
|||
import { AppState, epics as coreEpics, reducers, IContentProvider } from "@nteract/core";
|
||||
import {
|
||||
applyMiddleware,
|
||||
combineReducers,
|
||||
compose,
|
||||
createStore,
|
||||
Store,
|
||||
AnyAction,
|
||||
Middleware,
|
||||
Dispatch,
|
||||
MiddlewareAPI
|
||||
} from "redux";
|
||||
import { combineEpics, createEpicMiddleware, Epic, ActionsObservable } from "redux-observable";
|
||||
import { compose, Store, AnyAction, Middleware, Dispatch, MiddlewareAPI } from "redux";
|
||||
import { createEpicMiddleware, Epic } from "redux-observable";
|
||||
import { allEpics } from "./epics";
|
||||
import { coreReducer, cdbReducer } from "./reducers";
|
||||
import { catchError } from "rxjs/operators";
|
||||
import { Observable } from "rxjs";
|
||||
import { configuration } from "@nteract/mythic-configuration";
|
||||
import { makeConfigureStore } from "@nteract/myths";
|
||||
import { CdbAppState } from "./types";
|
||||
|
||||
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
|
||||
|
||||
export default function configureStore(
|
||||
initialState: Partial<AppState>,
|
||||
initialState: Partial<CdbAppState>,
|
||||
contentProvider: IContentProvider,
|
||||
onTraceFailure: (title: string, message: string) => void,
|
||||
customMiddlewares?: Middleware<{}, any, Dispatch<AnyAction>>[]
|
||||
): Store<AppState, AnyAction> {
|
||||
const rootReducer = combineReducers({
|
||||
app: reducers.app,
|
||||
comms: reducers.comms,
|
||||
config: reducers.config,
|
||||
core: coreReducer,
|
||||
cdb: cdbReducer
|
||||
});
|
||||
|
||||
): Store<CdbAppState, AnyAction> {
|
||||
/**
|
||||
* Catches errors in reducers
|
||||
*/
|
||||
|
|
@ -46,7 +32,7 @@ export default function configureStore(
|
|||
};
|
||||
|
||||
const protect = (epic: Epic) => {
|
||||
return (action$: ActionsObservable<any>, state$: any, dependencies: any) =>
|
||||
return (action$: Observable<any>, state$: any, dependencies: any) =>
|
||||
epic(action$, state$, dependencies).pipe(
|
||||
catchError((error, caught) => {
|
||||
traceFailure("Epic failure", error);
|
||||
|
|
@ -64,9 +50,8 @@ export default function configureStore(
|
|||
}
|
||||
};
|
||||
|
||||
const combineAndProtectEpics = (epics: Epic[]): Epic => {
|
||||
const protectedEpics = epics.map(epic => protect(epic));
|
||||
return combineEpics<Epic>(...protectedEpics);
|
||||
const protectEpics = (epics: Epic[]): Epic[] => {
|
||||
return epics.map(epic => protect(epic));
|
||||
};
|
||||
|
||||
// This list needs to be consistent and in sync with core.allEpics until we figure
|
||||
|
|
@ -93,20 +78,23 @@ export default function configureStore(
|
|||
coreEpics.publishToBookstoreAfterSave,
|
||||
coreEpics.sendInputReplyEpic
|
||||
];
|
||||
const rootEpic = combineAndProtectEpics([...filteredCoreEpics, ...allEpics]);
|
||||
const epicMiddleware = createEpicMiddleware({ dependencies: { contentProvider } });
|
||||
let middlewares: Middleware[] = [epicMiddleware];
|
||||
// TODO: tamitta: errorMiddleware was removed, do we need a substitute?
|
||||
|
||||
if (customMiddlewares) {
|
||||
middlewares = middlewares.concat(customMiddlewares);
|
||||
}
|
||||
middlewares.push(catchErrorMiddleware);
|
||||
const mythConfigureStore = makeConfigureStore<CdbAppState>()({
|
||||
packages: [configuration],
|
||||
reducers: {
|
||||
app: reducers.app,
|
||||
core: coreReducer as any,
|
||||
cdb: cdbReducer
|
||||
},
|
||||
epics: protectEpics([...filteredCoreEpics, ...allEpics]),
|
||||
epicDependencies: { contentProvider },
|
||||
epicMiddleware: [catchErrorMiddleware],
|
||||
enhancer: composeEnhancers
|
||||
});
|
||||
|
||||
const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middlewares)));
|
||||
|
||||
epicMiddleware.run(rootEpic);
|
||||
const store = mythConfigureStore(initialState as any);
|
||||
|
||||
// TODO Fix typing issue here: createStore() output type doesn't quite match AppState
|
||||
return store as Store<AppState, AnyAction>;
|
||||
// return store as Store<AppState, AnyAction>;
|
||||
return store as any;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ import { connect } from "react-redux";
|
|||
import { Dispatch } from "redux";
|
||||
import { actions, ContentRef } from "@nteract/core";
|
||||
import loadTransform from "../NotebookComponent/loadTransform";
|
||||
import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
|
||||
import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
|
||||
import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
|
||||
import "./NotebookReadOnlyRenderer.less";
|
||||
|
||||
export interface NotebookRendererProps {
|
||||
|
|
@ -19,19 +20,6 @@ export interface NotebookRendererProps {
|
|||
hidePrompts?: boolean;
|
||||
}
|
||||
|
||||
interface PassedEditorProps {
|
||||
id: string;
|
||||
contentRef: ContentRef;
|
||||
editorFocused: boolean;
|
||||
value: string;
|
||||
channels: any;
|
||||
kernelStatus: string;
|
||||
theme: string;
|
||||
onChange: (text: string) => void;
|
||||
onFocusChange: (focused: boolean) => void;
|
||||
className: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* This is the class that uses nteract to render a read-only notebook.
|
||||
*/
|
||||
|
|
@ -73,8 +61,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
|
|||
{{
|
||||
prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
|
||||
editor: {
|
||||
codemirror: (props: PassedEditorProps) =>
|
||||
this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
|
||||
monaco: (props: PassedEditorProps) =>
|
||||
this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />
|
||||
}
|
||||
}}
|
||||
</CodeCell>
|
||||
|
|
@ -90,8 +78,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
|
|||
<RawCell id={id} contentRef={contentRef} cell_type="raw">
|
||||
{{
|
||||
editor: {
|
||||
codemirror: (props: PassedEditorProps) =>
|
||||
this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
|
||||
monaco: (props: PassedEditorProps) =>
|
||||
this.props.hideInputs ? <></> : <MonacoEditor {...props} readOnly={true} editorType={"monaco"} />
|
||||
}
|
||||
}}
|
||||
</RawCell>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import "./base.css";
|
|||
import "./default.css";
|
||||
|
||||
import { RawCell, Cells, CodeCell, MarkdownCell } from "@nteract/stateful-components";
|
||||
import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
|
||||
import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
|
||||
import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
|
||||
|
||||
import Prompt from "./Prompt";
|
||||
import { promptContent } from "./PromptContent";
|
||||
|
|
@ -42,19 +43,6 @@ interface NotebookRendererDispatchProps {
|
|||
|
||||
type NotebookRendererProps = NotebookRendererBaseProps & NotebookRendererDispatchProps;
|
||||
|
||||
interface PassedEditorProps {
|
||||
id: string;
|
||||
contentRef: ContentRef;
|
||||
editorFocused: boolean;
|
||||
value: string;
|
||||
channels: any;
|
||||
kernelStatus: string;
|
||||
theme: string;
|
||||
onChange: (text: string) => void;
|
||||
onFocusChange: (focused: boolean) => void;
|
||||
className: string;
|
||||
}
|
||||
|
||||
const decorate = (id: string, contentRef: ContentRef, cell_type: CellType, children: React.ReactNode) => {
|
||||
const Cell = () => (
|
||||
<DraggableCell id={id} contentRef={contentRef}>
|
||||
|
|
@ -115,9 +103,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
|
|||
<CodeCell id={id} contentRef={contentRef} cell_type="code">
|
||||
{{
|
||||
editor: {
|
||||
codemirror: (props: PassedEditorProps) => (
|
||||
<CodeMirrorEditor {...props} lineNumbers={true} />
|
||||
)
|
||||
monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
|
||||
},
|
||||
prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (
|
||||
<Prompt id={id} contentRef={contentRef} isHovered={false}>
|
||||
|
|
@ -135,6 +121,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
|
|||
"markdown",
|
||||
<MarkdownCell id={id} contentRef={contentRef} cell_type="markdown">
|
||||
{{
|
||||
editor: {
|
||||
monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
|
||||
},
|
||||
toolbar: () => <CellToolbar id={id} contentRef={contentRef} />
|
||||
}}
|
||||
</MarkdownCell>
|
||||
|
|
@ -147,6 +136,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
|
|||
"raw",
|
||||
<RawCell id={id} contentRef={contentRef} cell_type="raw">
|
||||
{{
|
||||
editor: {
|
||||
monaco: (props: PassedEditorProps) => <MonacoEditor {...props} editorType={"monaco"} />
|
||||
},
|
||||
toolbar: () => <CellToolbar id={id} contentRef={contentRef} />
|
||||
}}
|
||||
</RawCell>
|
||||
|
|
|
|||
|
|
@ -150,9 +150,9 @@ const mapDispatchToProps = (
|
|||
): DispatchProps => ({
|
||||
executeCell: () => dispatch(actions.executeCell({ id, contentRef })),
|
||||
insertCodeCellAbove: () => dispatch(actions.createCellAbove({ id, contentRef, cellType: "code" })),
|
||||
insertCodeCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "code", source: "" })),
|
||||
insertCodeCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "code" })),
|
||||
insertTextCellAbove: () => dispatch(actions.createCellAbove({ id, contentRef, cellType: "markdown" })),
|
||||
insertTextCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "markdown", source: "" })),
|
||||
insertTextCellBelow: () => dispatch(actions.createCellBelow({ id, contentRef, cellType: "markdown" })),
|
||||
moveCell: (destinationId: CellId, above: boolean) =>
|
||||
dispatch(actions.moveCell({ id, contentRef, destinationId, above })),
|
||||
clearOutputs: () => dispatch(actions.clearOutputs({ id, contentRef })),
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
/**
|
||||
* JupyterLab applications based on jupyterLab components
|
||||
*/
|
||||
import { ServerConnection, TerminalSession } from "@jupyterlab/services";
|
||||
import { ServerConnection, TerminalManager } from "@jupyterlab/services";
|
||||
import { Terminal } from "@jupyterlab/terminal";
|
||||
import { Panel, Widget } from "@phosphor/widgets";
|
||||
|
||||
export class JupyterLabAppFactory {
|
||||
public static async createTerminalApp(serverSettings: ServerConnection.ISettings) {
|
||||
const session = await TerminalSession.startNew({
|
||||
const manager = new TerminalManager({
|
||||
serverSettings: serverSettings
|
||||
});
|
||||
const session = await manager.startNew();
|
||||
const term = new Terminal(session, { theme: "dark", shutdownOnClose: true });
|
||||
|
||||
if (!term) {
|
||||
|
|
@ -21,7 +22,7 @@ export class JupyterLabAppFactory {
|
|||
term.addClass("terminalWidget");
|
||||
|
||||
let panel = new Panel();
|
||||
panel.addWidget(term);
|
||||
panel.addWidget(term as any);
|
||||
panel.id = "main";
|
||||
|
||||
// Attach the widget to the dom.
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const createServerSettings = (urlVars: { [key: string]: string }): ServerConnect
|
|||
options = {
|
||||
baseUrl: server,
|
||||
token: urlVars[TerminalQueryParams.Token],
|
||||
appendToken: true,
|
||||
init: { body },
|
||||
fetch: window.parent.fetch
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
import { armRequest } from "./request";
|
||||
import fetch from "node-fetch";
|
||||
|
||||
interface Global {
|
||||
Headers: unknown;
|
||||
}
|
||||
|
||||
((global as unknown) as Global).Headers = ((fetch as unknown) as Global).Headers;
|
||||
|
||||
describe("ARM request", () => {
|
||||
it("should call window.fetch", async () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue