Skip to content

Commit b95a588

Browse files
set npm
1 parent 5339602 commit b95a588

File tree

5 files changed

+112
-95
lines changed

5 files changed

+112
-95
lines changed

.github/workflows/static.yml

+7-11
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,14 @@ jobs:
3232
- name: Setup Pages
3333
id: pages
3434
uses: actions/configure-pages@v3
35-
- name: Build Wasm
36-
run: |
37-
pwd
38-
ls -la
39-
cargo install wasm-pack
40-
cd wasm-sudoku
41-
wasm-pack build --target web
42-
cd ..
35+
- name: Wasm Test
36+
run: npm test
37+
- name: Build Pages
38+
run: npm run build
4339
- name: Upload artifact
44-
uses: actions/upload-pages-artifact@v2
40+
uses: actions/upload-pages-artifact@v1
4541
with:
46-
path: ./wasm-sudoku/pkg
42+
path: ./dist
4743

4844
deploy:
4945
needs: build
@@ -60,7 +56,7 @@ jobs:
6056
uses: actions/upload-pages-artifact@v3
6157
with:
6258
# Upload entire repository
63-
path: '.'
59+
path: '.dist'
6460
- name: Deploy to GitHub Pages
6561
id: deployment
6662
uses: actions/deploy-pages@v4

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
/package-lock.json
3+
/dist

index.html

+1-84
Original file line numberDiff line numberDiff line change
@@ -41,89 +41,6 @@
4141
<div class=".mycontainer">
4242
<div id="mynetwork">
4343
</div>
44-
45-
<script type="text/javascript">
46-
function draw(tree_map){
47-
48-
var nodes = Array(tree_map[tree_map.length - 1].to)
49-
.fill(null)
50-
.map((_, i) => ({ id: i + 1, label: `${i + 1}` }));
51-
var edges = tree_map;
52-
53-
// create a network
54-
var container = document.getElementById("mynetwork");
55-
var data = {
56-
nodes: new vis.DataSet(nodes),
57-
edges: new vis.DataSet(edges),
58-
};
59-
var options = {
60-
layout: {
61-
hierarchical: {
62-
direction: "UD",
63-
sortMethod: "hubsize",
64-
},
65-
},
66-
edges: {
67-
arrows: "to",
68-
}, physics: {
69-
enabled: false,
70-
}, interaction: {
71-
tooltipDelay: 200,
72-
hideEdgesOnDrag: true,
73-
dragNodes: false,
74-
},
75-
configure: {
76-
filter: function (option, path) {
77-
if (path.indexOf("hierarchical") !== -1) {
78-
return true;
79-
}
80-
return false;
81-
},
82-
showButton: false,
83-
},
84-
};
85-
86-
network = new vis.Network(container, data, options);
87-
88-
// periodically change the layout
89-
90-
}
91-
function draw_viz(data) {
92-
let string_list = [];
93-
for (const i of data) {
94-
string_list.push(`${i.from} -> ${i.to}`);
95-
}
96-
var graphviz = d3.select("#graph").graphviz();
97-
graphviz.renderDot(`
98-
digraph { ${string_list.join("\n")} }
99-
`);
100-
}
101-
</script>
102-
<script type="module">
103-
import init,{sudoku} from "./wasm-sudoku/pkg/wasm_sudoku.js";
104-
console.log("開始します")
105-
init().then(()=>{
106-
let q_2 = [
107-
...[0, 0, 4, 9, 0, 0, 0, 6, 1],
108-
...[2, 0, 6, 0, 0, 0, 0, 0, 0],
109-
...[1, 0, 0, 3, 6, 0, 0, 2, 0],
110-
...[0, 3, 7, 0, 0, 0, 0, 0, 4],
111-
...[0, 0, 0, 1, 0, 0, 6, 0, 0],
112-
...[0, 1, 0, 0, 4, 0, 3, 0, 5],
113-
...[7, 4, 0, 0, 3, 0, 0, 0, 0],
114-
...[0, 0, 0, 0, 1, 5, 0, 0, 9],
115-
...[0, 0, 0, 0, 0, 2, 0, 4, 0],
116-
]
117-
118-
console.log("数独を解いています")
119-
let data = JSON.parse(sudoku(q_2));
120-
console.log("数独を解き終わりました");
121-
console.log("再帰構造をレンダリングしています")
122-
123-
draw_viz(data.slice(0,3100));
124-
console.log("レンダリングを終了しました")
125-
});
126-
127-
</script>
44+
<script type="module" src="./main.js"></script>
12845
</body>
12946
</html>

package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "visualizing-recursion",
3+
"version": "1.0.0",
4+
"description": "visualizing sudoku solver algorithm recursion",
5+
"main": "script.js",
6+
"scripts": {
7+
"build": "rimraf dist pkg && webpack && cp index.html dist/index.html",
8+
"test": "cd wasm-sudoku && wasm-pack build --target web && cd .."
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"webpack": "^5.90.3",
15+
"webpack-cli": "^5.1.4"
16+
}
17+
}

src/index.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import init,{sudoku} from "../wasm-sudoku/pkg/wasm_sudoku.js";
2+
3+
function draw(tree_map){
4+
5+
var nodes = Array(tree_map[tree_map.length - 1].to)
6+
.fill(null)
7+
.map((_, i) => ({ id: i + 1, label: `${i + 1}` }));
8+
var edges = tree_map;
9+
10+
// create a network
11+
var container = document.getElementById("mynetwork");
12+
var data = {
13+
nodes: new vis.DataSet(nodes),
14+
edges: new vis.DataSet(edges),
15+
};
16+
var options = {
17+
layout: {
18+
hierarchical: {
19+
direction: "UD",
20+
sortMethod: "hubsize",
21+
},
22+
},
23+
edges: {
24+
arrows: "to",
25+
}, physics: {
26+
enabled: false,
27+
}, interaction: {
28+
tooltipDelay: 200,
29+
hideEdgesOnDrag: true,
30+
dragNodes: false,
31+
},
32+
configure: {
33+
filter: function (option, path) {
34+
if (path.indexOf("hierarchical") !== -1) {
35+
return true;
36+
}
37+
return false;
38+
},
39+
showButton: false,
40+
},
41+
};
42+
43+
network = new vis.Network(container, data, options);
44+
45+
// periodically change the layout
46+
47+
}
48+
49+
function draw_viz(data) {
50+
let string_list = [];
51+
for (const i of data) {
52+
string_list.push(`${i.from} -> ${i.to}`);
53+
}
54+
var graphviz = d3.select("#graph").graphviz();
55+
graphviz.renderDot(`
56+
digraph { ${string_list.join("\n")} }
57+
`);
58+
}
59+
60+
61+
console.log("開始します")
62+
init().then(()=>{
63+
let q_2 = [
64+
...[0, 0, 4, 9, 0, 0, 0, 6, 1],
65+
...[2, 0, 6, 0, 0, 0, 0, 0, 0],
66+
...[1, 0, 0, 3, 6, 0, 0, 2, 0],
67+
...[0, 3, 7, 0, 0, 0, 0, 0, 4],
68+
...[0, 0, 0, 1, 0, 0, 6, 0, 0],
69+
...[0, 1, 0, 0, 4, 0, 3, 0, 5],
70+
...[7, 4, 0, 0, 3, 0, 0, 0, 0],
71+
...[0, 0, 0, 0, 1, 5, 0, 0, 9],
72+
...[0, 0, 0, 0, 0, 2, 0, 4, 0],
73+
]
74+
75+
console.log("数独を解いています")
76+
let data = JSON.parse(sudoku(q_2));
77+
console.log("数独を解き終わりました");
78+
console.log("再帰構造をレンダリングしています")
79+
80+
draw_viz(data.slice(0,3100));
81+
console.log("レンダリングを終了しました")
82+
});
83+
84+

0 commit comments

Comments
 (0)