-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.tsx
104 lines (94 loc) · 2.78 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import * as React from "react";
import { connect } from "react-redux";
import {
selectors,
AppState,
ContentRef,
KernelNotStartedProps,
LocalKernelProps,
RemoteKernelProps
} from "@nteract/core";
import { fromJS, RecordOf } from "immutable";
import Manager from "./manager";
import { WidgetModel } from "@jupyter-widgets/base";
import { CellId } from "@nteract/commutable";
import { request_state } from "./manager/widget-comms";
interface JupyterWidgetData {
model_id: string;
version_major: number;
version_minor: number;
}
interface Props {
data: JupyterWidgetData;
modelById: (model_id: string) => Promise<WidgetModel>;
kernel?:
| RecordOf<KernelNotStartedProps>
| RecordOf<LocalKernelProps>
| RecordOf<RemoteKernelProps>
| null;
id: CellId;
contentRef: ContentRef;
customWidgetLoader?: (moduleName: string, moduleVersion: string) => Promise<any>;
}
interface State {
model?: WidgetModel;
}
/**
* The WidgetDisplay takes a model_id, which is returned by the
* display_data payload that is returned from the execution of a
* cell containing an ipywidget. This model_id is used to retrieve
* the initial model for the widget from the comms state in the
* core state model.
*/
export class WidgetDisplay extends React.Component<Props, State> {
static MIMETYPE = "application/vnd.jupyter.widget-view+json";
constructor(props: Props) {
super(props);
this.state = { model: undefined };
}
async componentDidMount() {
const {
modelById,
data: { model_id }
} = this.props;
const model = await modelById(model_id);
this.setState({ model });
}
render() {
const { model } = this.state;
if (model) {
return (
<Manager
model={model}
model_id={this.props.data.model_id}
id={this.props.id}
contentRef={this.props.contentRef}
modelById={this.props.modelById}
kernel={this.props.kernel}
customWidgetLoader={this.props.customWidgetLoader}
/>
);
} else {
return null;
}
}
}
const mapStateToProps = (state: AppState, props: Props) => {
let currentKernel = selectors.currentKernel(state);
return {
modelById: async (model_id: string) => {
let model = selectors.modelById(state, { commId: model_id });
//if we can't find the model, request the state from the kernel
if (!model && currentKernel) {
let request_state_response = await request_state(
currentKernel,
model_id
);
model = fromJS(request_state_response.content.data);
}
return model;
},
kernel: currentKernel
};
};
export default connect(mapStateToProps, null)(WidgetDisplay);