-
Notifications
You must be signed in to change notification settings - Fork 66
/
index.js
131 lines (117 loc) Β· 3.41 KB
/
index.js
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// @flow
import * as React from "react";
import NotebookPreview from "@nteract/notebook-preview";
import Markdown from "@nteract/markdown";
import { Source } from "@nteract/presentational-components";
import {
standardTransforms,
standardDisplayOrder,
registerTransform
} from "@nteract/transforms";
import { VegaLite1, VegaLite2, Vega2, Vega3 } from "@nteract/transform-vega";
// import DataResourceTransform from "@nteract/transform-dataresource";
import { PlotlyNullTransform, PlotlyTransform } from "../../transforms";
import DirectoryListing from "./directory-listing";
import HTMLView from "./html";
import JSONView from "./json";
import CSVView from "./csv";
const jquery = require("jquery");
// HACK: Temporarily provide jquery for others to use...
global.jquery = jquery;
global.$ = jquery;
// Order is important here. The last transform in the array will have order `0`.
const { transforms, displayOrder } = [
// DataResourceTransform,
PlotlyNullTransform,
PlotlyTransform,
VegaLite1,
VegaLite2,
Vega2,
Vega3
].reduce(registerTransform, {
transforms: standardTransforms,
displayOrder: standardDisplayOrder
});
const suffixRegex = /(?:\.([^.]+))?$/;
class File extends React.Component<*> {
shouldComponentUpdate() {
return false;
}
render() {
const name = this.props.entry.name;
const presuffix = suffixRegex.exec(name);
if (!presuffix) {
return null;
}
const suffix = (presuffix[1] || "").toLowerCase();
switch (suffix) {
case "html":
return <HTMLView entry={this.props.entry} />;
case "json":
return <JSONView entry={this.props.entry} />;
case "csv":
return <CSVView entry={this.props.entry} />;
case "md":
case "markdown":
case "rmd":
return <Markdown source={this.props.entry.content} />;
case "js":
return (
<Source language="javascript">{this.props.entry.content}</Source>
);
case "py":
case "pyx":
return <Source language="python">{this.props.entry.content}</Source>;
case "gif":
case "jpeg":
case "jpg":
case "png":
return (
<img
src={`/files/${this.props.pathname}`}
alt={this.props.pathname}
/>
);
default:
if (this.props.entry.format === "text") {
return (
<Source language="text/plain">{this.props.entry.content}</Source>
);
}
return <a href={`/files/${this.props.pathname}`}>Download raw file</a>;
}
}
}
type EntryProps = {
entry: JupyterApi$Content,
pathname: string,
basepath: string
};
export const Entry = (props: EntryProps) => {
if (props.entry.content === null) {
return null;
}
switch (props.entry.type) {
case "directory":
// Dynamic type check on content being an Array
if (Array.isArray(props.entry.content)) {
return (
<DirectoryListing contents={props.entry.content} basepath={"/view"} />
);
}
return null;
case "file":
// TODO: Case off various file types (by extension, mimetype)
return <File entry={props.entry} pathname={props.pathname} />;
case "notebook":
return (
<NotebookPreview
notebook={props.entry.content}
displayOrder={displayOrder}
transforms={transforms}
/>
);
default:
return <pre>{JSON.stringify(props.entry.content)}</pre>;
}
};