diff --git a/src/smc-webapp/jupyter/actions.ts b/src/smc-webapp/jupyter/actions.ts index bf14f9e682..a0a7c5c614 100644 --- a/src/smc-webapp/jupyter/actions.ts +++ b/src/smc-webapp/jupyter/actions.ts @@ -1902,11 +1902,14 @@ export class JupyterActions extends Actions { set_kernel = (kernel: any) => { if (this.store.get("kernel") !== kernel) { - return this._set({ + this._set({ type: "settings", kernel }); } + if (this.store.get("show_kernel_selector")) { + this.hide_select_kernel(); + } }; show_history_viewer = () => { @@ -3220,12 +3223,8 @@ export class JupyterActions extends Actions { }); }; - select_kernel = (kernel_name: string | undefined): void => { - if (kernel_name != null) { - this.set_kernel(kernel_name); - } else { - this.set_kernel(null); - } + select_kernel = (kernel_name: string): void => { + this.set_kernel(kernel_name); this.set_default_kernel(kernel_name); this.focus(true); this.hide_select_kernel(); diff --git a/src/smc-webapp/jupyter/main.tsx b/src/smc-webapp/jupyter/main.tsx index 899e074392..2336272fa3 100644 --- a/src/smc-webapp/jupyter/main.tsx +++ b/src/smc-webapp/jupyter/main.tsx @@ -40,6 +40,7 @@ interface JupyterEditorProps { name: string; // TODO: is this correct? view_mode?: any; // rtypes.oneOf(['normal', 'json', 'raw']) kernel?: string; // string name of the kernel + site_name: string; // error?: string; // TODO: repeated? fatal?: string; // *FATAL* error; user must edit file to fix. toolbar?: boolean; @@ -134,7 +135,8 @@ class JupyterEditor0 extends Component { kernels_by_language: rtypes.immutable.Map, default_kernel: rtypes.string, closestKernel: rtypes.immutable.Map - } + }, + customize: { site_name: rtypes.string } }; } @@ -351,9 +353,10 @@ class JupyterEditor0 extends Component { kernel_info={this.props.kernel_info} kernel_selection={this.props.kernel_selection} kernels_by_name={this.props.kernels_by_name} - kernels_by_language = {this.props.kernels_by_language} + kernels_by_language={this.props.kernels_by_language} default_kernel={this.props.default_kernel} closestKernel={this.props.closestKernel} + site_name={this.props.site_name} /> ); } diff --git a/src/smc-webapp/jupyter/select-kernel.tsx b/src/smc-webapp/jupyter/select-kernel.tsx index c2f2953b57..efe01269d0 100644 --- a/src/smc-webapp/jupyter/select-kernel.tsx +++ b/src/smc-webapp/jupyter/select-kernel.tsx @@ -9,7 +9,7 @@ import { OrderedMap /*, List as ImmutableList*/ } from "immutable"; import * as misc from "smc-util/misc"; -const { Icon, Markdown, /*Space,*/ Loading } = require("../r_misc"); // TODO: import types +const { Icon, /* Markdown, /*Space,*/ Loading } = require("../r_misc"); // TODO: import types const { Button, Col, @@ -28,12 +28,14 @@ const row_style: React.CSSProperties = { }; const main_style: React.CSSProperties = { + padding: "20px 10px", overflowY: "auto", overflowX: "hidden" }; interface IKernelSelectorProps { actions: any; + site_name: string; kernel?: string; kernel_info?: any; default_kernel?: string; @@ -43,9 +45,7 @@ interface IKernelSelectorProps { closestKernel?: TKernel; } -interface IKernelSelectorState { - selected_kernel?: string; -} +interface IKernelSelectorState {} export class KernelSelector extends Component< IKernelSelectorProps, @@ -53,27 +53,27 @@ export class KernelSelector extends Component< > { constructor(props: IKernelSelectorProps, context: any) { super(props, context); - this.state = { selected_kernel: undefined }; + this.state = {}; } - render_select_button() { - const disabled = this.state.selected_kernel == null; - const msg = disabled - ? "Select a kernel" - : `Use ${this.kernel_name(this.state.selected_kernel!)}`; - return ( - - ); - } + // render_select_button() { + // const disabled = this.state.selected_kernel == null; + // const msg = disabled + // ? "Select a kernel" + // : `Use ${this.kernel_name(this.state.selected_kernel!)}`; + // return ( + // + // ); + // } // the idea here is to not set the kernel, but still render the notebook. // looks like that's not easy, and well, probably incompatible with classical jupyter. @@ -96,18 +96,6 @@ export class KernelSelector extends Component< } */ - render_body() { - if ( - this.props.kernel_selection == null || - this.props.kernels_by_name == null - ) - return; - let ks = this.props.kernel_selection.map((k, v) => { - return `${k}=${v}`; - }); - return ; - } - kernel_name(name: string) { return this.kernel_attr(name, "display_name"); } @@ -136,7 +124,7 @@ export class KernelSelector extends Component< render_kernel_button( name: string, - size: string = "default", + size?: string, show_icon: boolean = true ): Rendered { const lang = this.kernel_attr(name, "language"); @@ -200,16 +188,16 @@ export class KernelSelector extends Component< ); } - render_all_selected_link() { - if (this.props.kernels_by_name == null) return; - const name = this.state.selected_kernel; - if (name == null) return; - const cocalc: ImmutableMap = this.props.kernels_by_name.getIn( - [name, "metadata", "cocalc"], - null - ); - return this.render_suggested_link(cocalc); - } + // render_all_selected_link() { + // if (this.props.kernels_by_name == null) return; + // const name = this.state.selected_kernel; + // if (name == null) return; + // const cocalc: ImmutableMap = this.props.kernels_by_name.getIn( + // [name, "metadata", "cocalc"], + // null + // ); + // return this.render_suggested_link(cocalc); + // } render_all_langs(): Rendered[] | undefined { if (this.props.kernels_by_language == null) return; @@ -263,12 +251,18 @@ export class KernelSelector extends Component< } render_top() { - if (this.props.kernel == null) { - let msg: string; - if (this.props.kernel_info != null) { - msg = "This notebook kernel is unknown."; + if (this.props.kernel == null || this.props.kernel_info == null) { + let msg: Rendered; + // kernel, but no info means it is not known + if (this.props.kernel != null && this.props.kernel_info == null) { + msg = ( + <> + Your notebook kernel "{this.props.kernel}" does not + exist on {this.props.site_name}. + + ); } else { - msg = "This notebook has no kernel."; + msg = <>This notebook has no kernel.; } return ( @@ -296,7 +290,7 @@ export class KernelSelector extends Component< return ( -

Unknown Kernel

+

Unknown Kernel

A similar kernel might be{" "} {this.render_kernel_button(closestKernelName)}. @@ -316,19 +310,30 @@ export class KernelSelector extends Component< ); } - render() { - let body: Rendered; + render_close_button(): Rendered | undefined { + if (this.props.kernel == null || this.props.kernel_info == null) return; + return ( + + ); + } + + render_body(): Rendered { if ( this.props.kernels_by_name == null || this.props.kernel_selection == null ) { - body = ( + return ( ); } else { - body = ( + return ( <> {this.render_top()} {this.render_unknown()} @@ -340,13 +345,25 @@ export class KernelSelector extends Component< ); } + } + + render_head(): Rendered { + return ( + +

+ {"Select a Kernel"} + {this.render_close_button()} +

+
+ ); + } + + render(): Rendered { return (
- -

{"Select a Kernel"}

-
- {body} + {this.render_head()} + {this.render_body()}
);