Skip to content

Commit 0af66d5

Browse files
AceTheCreatorAceTheCreator
committed
fixing note download bug
1 parent ff3ddac commit 0af66d5

13 files changed

+686
-81
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@
2222
npm-debug.log*
2323
yarn-debug.log*
2424
yarn-error.log*
25+
yarn.lock
26+
debug.log*

‎babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { presets: ["@babel/preset-env"] };

‎jest.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const tsPreset = require("ts-jest/jest-preset");
2+
const puppeteerPreset = require("jest-puppeteer/jest-preset");
3+
4+
module.exports = {
5+
...tsPreset,
6+
...puppeteerPreset,
7+
transform: {
8+
"^.+\\.(ts|tsx)?$": "ts-jest",
9+
"^.+\\.(js|jsx)$": "babel-jest",
10+
},
11+
globalSetup: "jest-environment-puppeteer/setup",
12+
globalTeardown: "jest-environment-puppeteer/teardown",
13+
testEnvironment: "jest-environment-puppeteer",
14+
};

‎package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^5.11.5",
77
"@testing-library/react": "^11.1.1",
88
"@testing-library/user-event": "^12.2.0",
9+
"blob-polyfill": "^5.0.20210201",
910
"codemirror": "^5.58.2",
1011
"react": "^17.0.1",
1112
"react-codemirror": "^1.0.0",
@@ -23,7 +24,8 @@
2324
"scripts": {
2425
"start": "react-scripts start",
2526
"build": "react-scripts build",
26-
"test": "react-scripts test",
27+
"test": "jest",
28+
"test:watch": "jest --watch",
2729
"eject": "react-scripts eject",
2830
"lint": "eslint .",
2931
"lint:fix": "eslint . --fix"
@@ -47,14 +49,19 @@
4749
]
4850
},
4951
"devDependencies": {
52+
"babel-jest": "^26.6.3",
53+
"babel-preset-jest": "^26.6.2",
5054
"eslint-config-airbnb-base": "^14.2.1",
5155
"eslint-config-prettier": "^7.0.0",
5256
"eslint-plugin-import": "^2.22.1",
5357
"eslint-plugin-jsx-a11y": "^6.4.1",
5458
"eslint-plugin-prettier": "^3.2.0",
5559
"eslint-plugin-react": "^7.21.5",
5660
"eslint-plugin-react-hooks": "^4.2.0",
61+
"jest-puppeteer": "^5.0.3",
5762
"prettier": "^2.2.1",
58-
"test": "^0.6.0"
63+
"puppeteer": "^9.1.1",
64+
"test": "^0.6.0",
65+
"ts-jest": "^26.5.6"
5966
}
6067
}

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Dnotebook</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/Cell.js

Lines changed: 38 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,7 @@ export default function Cell({
4545
const cellOutputId = `out_${cellId}`;
4646
const refCode = useRef(null);
4747
const refOutput = useRef("");
48-
const [showMoreCellButton, setShowMoreCellButton] = useState("none");
49-
useEffect(() => {
50-
if (cellId === activeCell) {
51-
setShowMoreCellButton("flex");
52-
} else {
53-
setShowMoreCellButton("none");
54-
}
55-
}, [cellId, currentCell]);
48+
useEffect(() => {}, [cellId, currentCell]);
5649
// eslint-disable-next-line consistent-return
5750
const getCode = async () => {
5851
window.current_cell = cellId;
@@ -84,13 +77,8 @@ export default function Cell({
8477
output = "";
8578
}
8679
}
87-
}
88-
if (input.includes("plot")) {
89-
// eslint-disable-next-line no-eval
90-
return false;
91-
}
92-
if (input.includes("console.for")) {
93-
return false;
80+
} else if (input.includes("plot") || input.includes("console.for")) {
81+
return document.getElementById(`out_${currentCell}`);
9482
}
9583
// eslint-disable-next-line no-eval
9684
const cellstate = { ...cell, input, output };
@@ -237,36 +225,40 @@ export default function Cell({
237225
Text
238226
</AddCellButton>
239227
</div>
240-
<OtherCellButtonWrapper display={showMoreCellButton}>
241-
<CellButton
242-
onClick={() => {
243-
upCell("code");
244-
}}
245-
>
246-
<div>
247-
{" "}
248-
<CgArrowUp />
249-
</div>
250-
</CellButton>
251-
<CellButton
252-
onClick={() => {
253-
downCell("text");
254-
}}
255-
>
256-
<div>
257-
<CgArrowDown />
258-
</div>
259-
</CellButton>
260-
<CellButton
261-
onClick={() => {
262-
deleteCell();
263-
}}
264-
>
265-
<div>
266-
<CgTrash />
267-
</div>
268-
</CellButton>
269-
</OtherCellButtonWrapper>
228+
{cellId === activeCell ? (
229+
<OtherCellButtonWrapper>
230+
<CellButton
231+
onClick={() => {
232+
upCell("code");
233+
}}
234+
>
235+
<div>
236+
{" "}
237+
<CgArrowUp />
238+
</div>
239+
</CellButton>
240+
<CellButton
241+
onClick={() => {
242+
downCell("text");
243+
}}
244+
>
245+
<div>
246+
<CgArrowDown />
247+
</div>
248+
</CellButton>
249+
<CellButton
250+
onClick={() => {
251+
deleteCell();
252+
}}
253+
>
254+
<div>
255+
<CgTrash />
256+
</div>
257+
</CellButton>
258+
</OtherCellButtonWrapper>
259+
) : (
260+
<div></div>
261+
)}
270262
</CellHead>
271263
<div
272264
style={{
@@ -276,6 +268,7 @@ export default function Cell({
276268
{cell.type === "code" ? (
277269
<CodeMirror
278270
onFocusChange={() => {
271+
console.log(activeCell);
279272
setActiveCell(cellId);
280273
}}
281274
value={cell.input}

‎src/Cell.style.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export const OtherCellButtonWrapper = styled.div`
4141
display: flex;
4242
align-items: flex-end;
4343
margin-top: 37px;
44-
display: ${(props) => props.display};
4544
`;
4645

4746
export const CellButton = styled.button`

‎src/__tests__/App.test.js

Whitespace-only changes.

‎src/__tests__/utils.test.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* eslint-disable no-undef */
2+
/**
3+
* @jest-environment jsdom
4+
*/
5+
6+
/* eslint-disable import/no-extraneous-dependencies */
7+
import "regenerator-runtime/runtime";
8+
import {
9+
downLoad_notebook,
10+
load_package,
11+
load_notebook,
12+
load_csv,
13+
} from "../utils";
14+
15+
const cellState = {
16+
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],
17+
};
18+
19+
// FIXME: make blob work with jest;
20+
describe("Download notebook test", () => {
21+
global.URL.createObjectURL = jest.fn();
22+
23+
it("it should download notebook", async () => {
24+
const downloadUrl = downLoad_notebook(cellState);
25+
});
26+
});
27+
28+
describe("Load packages into notebook", () => {
29+
beforeAll(() => {
30+
page.goto("http://localhost:3000/demo");
31+
});
32+
const validPackages = [
33+
"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest",
34+
"https://cdn.plot.ly/plotly-latest.min.js",
35+
];
36+
const inValidPackages = [
37+
"https://cdn.invalid.com",
38+
"https://cdn.invalid-latest.ly",
39+
];
40+
it("it should load package successfully", async () => {
41+
const loadPackage = load_package(validPackages);
42+
});
43+
});

‎src/assets/default-note.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"cells": [
3+
{
4+
"id": "cell_2",
5+
"input": "## A Quick Visualization ",
6+
"type": "text"
7+
},
8+
{
9+
"id": "cell_1",
10+
"input": "var df2;\nload_csv(\"https://raw.githubusercontent.com/risenW/medium_tutorial_notebooks/master/train.csv\").then((df) => {\n df2 = df\n});",
11+
"output": "",
12+
"type": "code"
13+
}
14+
]
15+
}

‎src/reducer.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const reducer = (state, action) => {
2727
if (action.type === "DELETE_CELL") {
2828
if (state.cells.length > 1) {
2929
const newCell = state.cells.filter((cell) => {
30+
console.log(cell);
3031
return cell.id !== action.payload;
3132
});
3233

‎src/utils.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Blob } from "blob-polyfill";
12
/* eslint-disable prefer-const */
23
// Function for cell on going activity
34
function cellActivity(type, message) {
@@ -140,7 +141,6 @@ export const downLoad_notebook = (state, name) => {
140141
const data = JSON.stringify(state.cells);
141142
const blob = new Blob([data], { type: "application/json" });
142143
const url = (window.URL || window.webkitURL).createObjectURL(blob);
143-
144144
const link = document.createElement("a");
145145
let fileName = "Dnote-react";
146146
if (name) {
@@ -149,10 +149,10 @@ export const downLoad_notebook = (state, name) => {
149149
}
150150
link.download = `${fileName}.json`;
151151
link.href = url;
152-
153152
document.body.appendChild(link);
154153
link.click();
155154
link.remove();
155+
return link;
156156
};
157157

158158
/**
@@ -161,7 +161,7 @@ export const downLoad_notebook = (state, name) => {
161161
* @param {*} callback
162162
*/
163163
// eslint-disable-next-line consistent-return
164-
const load_package = async (array, callback) => {
164+
export const load_package = async (array, callback) => {
165165
cellActivity("loading", "");
166166
const loader = function (src, handler) {
167167
const script = document.createElement("script");
@@ -240,23 +240,23 @@ function viz(name, callback) {
240240
document.getElementById(id).innerHTML += `<div id=${name}></div>`;
241241
// eslint-disable-next-line no-unused-vars
242242
let cb = callback(name);
243-
console.log(cb);
243+
return cb;
244244
// eslint-disable-next-line no-unused-vars
245245
}
246246
/**
247247
* Helper function to load CSV data into Danfo.js Data Structure
248248
* @param {String} path to CSV data.
249249
*/
250250
// eslint-disable-next-line consistent-return
251-
async function load_csv(path) {
251+
export async function load_csv(path) {
252252
cellActivity("loading", "");
253253
try {
254254
// eslint-disable-next-line no-undef
255255
const df = await dfd.read_csv(path);
256256
cellActivity("success", "Successfully loaded csv");
257257
return df;
258258
} catch (error) {
259-
cellActivity(
259+
return cellActivity(
260260
"error",
261261
"Failed to load csv. Check your internet connection or your csv path"
262262
);

0 commit comments

Comments
 (0)