Skip to content

Commit 594c526

Browse files
risenWrisenW
authored
Merge pull request #18 from AceTheCreator/main
Ploty and Addons Functionality
2 parents d3fa86c + e72d8af commit 594c526

File tree

7 files changed

+60
-34
lines changed

7 files changed

+60
-34
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,12 @@ module.exports = {
2727
"no-param-reassign": ["error", { props: false }],
2828
camelcase: "off",
2929
"linebreak-style": 0,
30-
"prettier/prettier": "error",
30+
"prettier/prettier": [
31+
"error",
32+
{
33+
endOfLine: "auto",
34+
},
35+
],
3136
},
3237
settings: {
3338
react: {

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
<body>
3333
<noscript>You need to enable JavaScript to run this app.</noscript>
3434
<div id="root"></div>
35+
<div id="plot_div"></div>
3536
<!--
3637
This HTML file is a template.
3738
If you open it directly in the browser, you will see an empty page.

‎src/Cell.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ import roll from "./static/rolling.svg";
2727
require("codemirror/lib/codemirror.css");
2828
require("codemirror/mode/javascript/javascript");
2929
require("codemirror/theme/yeti.css");
30+
require("codemirror/addon/edit/closebrackets");
31+
require("codemirror/addon/edit/matchbrackets");
32+
require("codemirror/addon/hint/javascript-hint");
33+
require("codemirror/addon/hint/show-hint");
3034

3135
export default function Cell({
3236
cell,
@@ -35,7 +39,7 @@ export default function Cell({
3539
setCurrentCell,
3640
cellId,
3741
}) {
38-
const cellOutputId = `#cell-output-${cellId}`;
42+
const cellOutputId = `out_${cellId}`;
3943
const refCode = useRef(null);
4044
const refOutput = useRef("");
4145
const [showMoreCellButton, setShowMoreCellButton] = useState("none");
@@ -46,6 +50,7 @@ export default function Cell({
4650
setShowMoreCellButton("none");
4751
}
4852
}, [cellId, currentCell]);
53+
// eslint-disable-next-line consistent-return
4954
const getCode = async () => {
5055
window.current_cell = cellId;
5156
if (cell.type === "code") {
@@ -77,13 +82,12 @@ export default function Cell({
7782
}
7883
}
7984
}
80-
if (
81-
input.includes("table") ||
82-
input.includes("plot") ||
83-
input.includes("console.log(")
84-
) {
85+
if (input.includes("table") || input.includes("plot")) {
8586
// eslint-disable-next-line no-eval
86-
console.log("hello world");
87+
return false;
88+
}
89+
if (input.includes("console.for")) {
90+
return false;
8791
}
8892
// eslint-disable-next-line no-eval
8993
const cellstate = { ...cell, input, output };

‎src/components/header/header.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
// eslint-disable-next-line import/no-extraneous-dependencies
33
import PropTypes from "prop-types";
44
import { CgSoftwareDownload, CgMathPlus } from "react-icons/cg";
@@ -12,11 +12,19 @@ import {
1212
} from "./header.style";
1313

1414
export default function Header({ download, load }) {
15+
const [noteName, setNoteName] = useState("untitled.ipynb");
16+
const onNoteTitleChange = (e) => {
17+
setNoteName(e);
18+
};
1519
return (
1620
<HeaderContainer>
1721
<div></div>
1822
<NoteEditContainer>
19-
<NoteTitle type="text" value="untitled.ipynb" />
23+
<NoteTitle
24+
onChange={(e) => onNoteTitleChange(e.target.value)}
25+
type="text"
26+
value={noteName}
27+
/>
2028
<div>
2129
<AddNoteLabel htmlFor="import-notebook-file">
2230
{" "}
@@ -29,7 +37,11 @@ export default function Header({ download, load }) {
2937
<AddNoteInput
3038
type="file"
3139
id="import-notebook-file"
32-
onChange={() => load()}
40+
onChange={() => {
41+
const fileName = load();
42+
const name = `${fileName.split(".")[0]}.ipynb`;
43+
onNoteTitleChange(name);
44+
}}
3345
/>
3446
</div>
3547
</NoteEditContainer>

‎src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,7 @@ a{
3030
color: #36c5ce;
3131
text-decoration: none;
3232
}
33+
34+
input:focus{
35+
outline: none !important;
36+
}

‎src/reducer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
// eslint-disable-next-line consistent-return
33
export const reducer = (state, action) => {
44
if (action.type === "CHANGE_CELL") {
5-
console.log(state);
65
const stateCells = state.cells.map((cell) => {
76
if (cell.id === action.payload.id) {
87
return action.payload;
@@ -36,6 +35,7 @@ export const reducer = (state, action) => {
3635
}
3736

3837
if (action.type === "LOAD_NOTE") {
38+
// console.log(action.payload);
3939
return { ...state, cells: action.payload };
4040
}
4141
};

‎src/utils.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1+
/* eslint-disable prefer-const */
12
// Function for cell on going activity
23
function cellActivity(type, message) {
34
if (type === "loading") {
45
document.getElementById("play").style.display = "none";
56
document.getElementById("activity-loader").style.display = "block";
6-
document.getElementById(`#cell-output-${window.current_cell}`).innerHTML =
7-
"";
7+
document.getElementById(`out_${window.current_cell}`).innerHTML = "";
88
} else if (type === "success") {
99
document.getElementById("play").style.display = "block";
1010
document.getElementById("activity-loader").style.display = "none";
11-
document.getElementById(
12-
`#cell-output-${window.current_cell}`
13-
).innerHTML = message;
14-
document.getElementById(`#cell-output-${window.current_cell}`).style.color =
15-
"white";
11+
document.getElementById(`out_${window.current_cell}`).innerHTML = message;
12+
document.getElementById(`out_${window.current_cell}`).style.color = "white";
1613
} else {
1714
document.getElementById("play").style.display = "block";
1815
document.getElementById("activity-loader").style.display = "none";
19-
document.getElementById(
20-
`#cell-output-${window.current_cell}`
21-
).innerHTML = message;
22-
document.getElementById(`#cell-output-${window.current_cell}`).style.color =
23-
"red";
16+
document.getElementById(`out_${window.current_cell}`).innerHTML = message;
17+
document.getElementById(`out_${window.current_cell}`).style.color = "red";
2418
}
2519
}
2620
/* eslint-disable no-eval */
@@ -196,6 +190,7 @@ const load_package = async (array, callback) => {
196190
};
197191

198192
export const load_notebook = (dispatch) => {
193+
let fileName = null;
199194
const { files } = document.getElementById("import-notebook-file");
200195
let json_content = null;
201196
if (files.length > 0) {
@@ -207,21 +202,23 @@ export const load_notebook = (dispatch) => {
207202
dispatch({ type: "LOAD_NOTE", payload: json });
208203
};
209204
reader.readAsText(content);
205+
fileName = content.name;
210206
}
207+
return fileName;
211208
};
212209
/**
213210
* Returns the id of the current cell's output div
214211
*/
215212
function this_div() {
216-
const id = `#cell-output-${window.current_cell}`;
217-
const rand_div_name = `random_div_#${id}`;
213+
const id = `out_${window.current_cell}`;
214+
const rand_div_name = `random_div_${id}`;
218215
const html = `
219216
<div class="col-md-1"></div>
220217
<div class="col-md-9" id=${rand_div_name}>
221218
</div>
222219
<div class="col-md-2"></div>
223220
`;
224-
document.getElementById(id).append(html);
221+
document.getElementById(id).innerHTML += html;
225222
return rand_div_name;
226223
}
227224

@@ -232,13 +229,14 @@ function this_div() {
232229
*/
233230
// eslint-disable-next-line no-unused-vars
234231
function viz(name, callback) {
235-
console.log(name);
236232
// utility function to enabling ploting
237233
// create the ploting div needed
238-
239-
const id = `#cell-output-${window.current_cell}`;
240-
console.log(document.getElementById(id));
241-
document.getElementById(id).append(`<div>ddl;</div>`);
234+
// eslint-disable-next-line prefer-const
235+
let id = `out_${window.current_cell}`;
236+
document.getElementById(id).innerHTML += `<div id=${name}></div>`;
237+
// eslint-disable-next-line no-unused-vars
238+
let cb = callback(name);
239+
console.log(cb);
242240
// eslint-disable-next-line no-unused-vars
243241
}
244242
/**
@@ -266,8 +264,10 @@ async function load_csv(path) {
266264
* @param {*} args
267265
*/
268266
function forLoop_log(args) {
269-
const id = `#cell-output-${window.current_cell}`;
270-
document.getElementById(id).append(`${args}<br />`);
267+
let id = `out_${window.current_cell}`;
268+
let logs = document.createElement("p");
269+
logs.append(`${args}`);
270+
document.getElementById(id).append(logs);
271271
}
272272

273273
console.forlog = forLoop_log;

0 commit comments

Comments
 (0)