Skip to content
Permalink
Browse files

jupyter windowing -- make it better in various ways.

  • Loading branch information...
williamstein committed Aug 13, 2019
1 parent db46b54 commit a19cdb01041aa6766f024d6f6952c8177b4d5be0
@@ -198,7 +198,7 @@ export class CellList extends Component<CellListProps> {

// supported scroll positions are in types.ts
if (scroll === "cell visible") {
if (!this.props.cur_id) return;
if (!this.props.cur_id || this.props.mode == "edit") return;
const n = this.props.cell_list.indexOf(this.props.cur_id);
if (n != -1) {
list.scrollToRow(n);
@@ -260,7 +260,7 @@ export class CellList extends Component<CellListProps> {
);
}

private render_cell(id: string, isScrolling?: boolean): Rendered {
private render_cell(id: string, isScrolling: boolean=false): Rendered {
const cell = this.props.cells.get(id);
return (
<Cell
@@ -301,12 +301,12 @@ export class CellList extends Component<CellListProps> {
);
}

private windowed_list_row_renderer({ key, isScrolling }): Rendered {
private windowed_list_row_renderer({ key, isVisible, isScrolling }): Rendered {
const is_last: boolean = key === this.props.cell_list.get(-1);
return (
<div>
{this.render_insert_cell(key, "above")}
{this.render_cell(key, isScrolling)}
{this.render_cell(key, isScrolling || !isVisible)}
{is_last ? this.render_insert_cell(key, "below") : undefined}
</div>
);
@@ -325,14 +325,15 @@ export class CellList extends Component<CellListProps> {
return (
<WindowedList
ref={this.windowed_list_ref}
overscan_row_count={0 /* DO *NOT* CHANGE THIS!!! */}
overscan_row_count={50}
estimated_row_size={DEFAULT_ROW_SIZE}
row_key={index => this.props.cell_list.get(index)}
row_count={this.props.cell_list.size}
row_renderer={this.windowed_list_row_renderer.bind(this)}
cache_id={cache_id}
use_is_scrolling={true}
hide_resize={true}
render_info={true}
/>
);
}
@@ -45,6 +45,7 @@ interface CellProps {
trust?: boolean;
hook_offset?: number;
is_scrolling?: boolean;
height?: number; // optional fixed height
}

export class Cell extends Component<CellProps> {
@@ -64,6 +65,7 @@ export class Cell extends Component<CellProps> {
nextProps.cell_toolbar !== this.props.cell_toolbar ||
nextProps.trust !== this.props.trust ||
nextProps.is_scrolling !== this.props.is_scrolling ||
nextProps.height !== this.props.height ||
(nextProps.complete !== this.props.complete &&
(nextProps.is_current || this.props.is_current))
);
@@ -234,6 +236,11 @@ export class Cell extends Component<CellProps> {
style.color = INPUT_PROMPT_COLOR; // should be the same as the prompt; it's not an error.
}

if (this.props.height) {
style.height = this.props.height + "px";
style.overflowY = "scroll";
}

return (
<div style={style}>
{this.render_not_deletable()}
@@ -23,7 +23,7 @@ import { NotebookFrameActions } from "../frame-editors/jupyter-editor/cell-noteb
// windowing, destroying and creating the same codemirror can happen
// a lot. TODO: This **should** be an LRU cache to avoid a memory leak.
interface CachedInfo {
sel?: any[]; // only cache the selections right now...
sel?: any[]; // only cache the selections right now...
}

const cache: { [key: string]: CachedInfo } = {};
@@ -412,10 +412,10 @@ export class CodeMirrorEditor extends Component<CodeMirrorEditorProps> {
};

// NOTE: init_codemirror is VERY expensive, e.g., on the order of 10's of ms.
private async init_codemirror(
private init_codemirror(
options: ImmutableMap<string, any>,
value: string
): Promise<void> {
): void {
if (this.cm != null) return;
const node = this.cm_ref.current;
if (node == null) {
@@ -521,24 +521,12 @@ export class CodeMirrorEditor extends Component<CodeMirrorEditorProps> {
this.props.set_last_cursor();
}

// Finally, do a refresh in the next render loop, once layout is done.
// See https://github.com/sagemathinc/cocalc/issues/2397
// Note that this also avoids a significant disturbing flicker delay
// even for non-raw cells. This obviously probably slows down initial
// load or switch to of the page, unfortunately. Such is life.
// CRITICAL: Also do the focus only after the refresh, or when
// switching from static to non-static, whole page gets badly
// repositioned (see https://github.com/sagemathinc/cocalc/issues/2548).
await delay(0);
if (this.cm != null) {
this.cm.refresh();
if (this.props.is_focused) {
this.cm.focus();
}
if (this.props.is_focused) {
this.cm.focus();
}
}

componentWillReceiveProps(nextProps: CodeMirrorEditorProps) {
async componentWillReceiveProps(nextProps: CodeMirrorEditorProps) {
if (this.cm == null) {
this.init_codemirror(nextProps.options, nextProps.value);
return;
@@ -565,10 +553,10 @@ export class CodeMirrorEditor extends Component<CodeMirrorEditorProps> {
// controlled loss of focus from store; we have to force
// this somehow. Note that codemirror has no .blur().
// See http://codemirror.977696.n3.nabble.com/Blur-CodeMirror-editor-td4026158.html
setTimeout(
() => (this.cm != null ? this.cm.getInputField().blur() : undefined),
1
);
await delay(1);
if (this.cm != null) {
this.cm.getInputField().blur();
}
}
if (this._vim_mode && !nextProps.is_focused && this.props.is_focused) {
$(this.cm.getWrapperElement()).css({ paddingBottom: 0 });
@@ -21,6 +21,7 @@ let ResizeObserver: any = (window as any).ResizeObserver;
if (ResizeObserver == null) {
ResizeObserver = require("resize-observer").ResizeObserver;
}
const RESIZE_THRESH: number = 5;

import { VariableSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
@@ -151,7 +152,8 @@ export class WindowedList extends Component<Props, State> {
key == null ||
isNaN(entry.contentRect.height) ||
entry.contentRect.height === 0 ||
this.row_heights_cache[key] == entry.contentRect.height
Math.abs(this.row_heights_cache[key] - entry.contentRect.height) <=
RESIZE_THRESH
) {
// not really changed or just disappeared from DOM... so continue
// using what we have cached (or the default).
@@ -197,7 +199,7 @@ export class WindowedList extends Component<Props, State> {
}

let ht = elt.height();
if (Math.abs(h - ht) < 5) {
if (Math.abs(h - ht) < 2*RESIZE_THRESH) {
// don't shrink if there are little jiggles.
ht = Math.max(h, ht);
}

0 comments on commit a19cdb0

Please sign in to comment.
You can’t perform that action at this time.