Skip to content

Commit 799351a

Browse files
bfollingtonbfollington
committed
Add experiment backlog
1 parent f3e4964 commit 799351a

File tree

16 files changed

+2571
-0
lines changed

16 files changed

+2571
-0
lines changed

‎static/dissector/analysis-card.js‎

Lines changed: 427 additions & 0 deletions
Large diffs are not rendered by default.

‎static/dissector/app.js‎

Lines changed: 670 additions & 0 deletions
Large diffs are not rendered by default.

‎static/dissector/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Reading Analysis App</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="main-content">
12+
<h1>Reading Analysis App</h1>
13+
<div class="input-section">
14+
<input type="text" id="url-input" placeholder="Enter a URL">
15+
<button id="fetch-btn">Fetch</button>
16+
<button id="analyze-btn">Analyze</button>
17+
</div>
18+
<textarea id="text-area" rows="20" cols="80"></textarea>
19+
<div id="character-count">0 characters</div>
20+
</div>
21+
<div class="sidebar">
22+
<h2>Analysis Feed</h2>
23+
<div id="queue-status"></div>
24+
<div id="feed"></div>
25+
</div>
26+
</div>
27+
<script type="module" src="app.js"></script>
28+
</body>
29+
</html>

‎static/dissector/styles.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
margin: 0;
10+
padding: 20px;
11+
}
12+
13+
.container {
14+
margin: 0 auto;
15+
}
16+
17+
.input-section {
18+
margin-bottom: 20px;
19+
}
20+
21+
#url-input {
22+
width: 70%;
23+
padding: 10px;
24+
font-size: 16px;
25+
}
26+
27+
#analyze-btn {
28+
padding: 10px 20px;
29+
font-size: 16px;
30+
}
31+
32+
#text-area {
33+
width: 100%;
34+
padding: 10px;
35+
font-size: 16px;
36+
}
37+
38+
.container {
39+
display: flex;
40+
}
41+
42+
.main-content {
43+
flex: 1;
44+
padding-right: 20px;
45+
}
46+
47+
.sidebar {
48+
width: 65%;
49+
padding: 20px;
50+
}
51+
52+
#feed {
53+
display: grid;
54+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
55+
grid-gap: 20px;
56+
}
57+
58+
analysis-card {
59+
background-color: #fff;
60+
border-radius: 4px;
61+
padding: 10px;
62+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
63+
max-width: 480px;
64+
max-height: 480px;
65+
overflow-y: auto;
66+
margin: 0 auto;
67+
}
68+
69+
@media screen and (max-width: 600px) {
70+
analysis-card {
71+
max-width: 100%;
72+
}
73+
}
74+
75+
analysis-card {
76+
width: 100%;
77+
}
78+
79+
@media screen and (max-width: 768px) {
80+
.container {
81+
flex-direction: column;
82+
}
83+
84+
.main-content {
85+
padding-right: 0;
86+
margin-bottom: 20px;
87+
}
88+
89+
.sidebar {
90+
width: 100%;
91+
}
92+
}
93+
94+
#feed analysis-card {
95+
padding: 10px;
96+
border-radius: 4px;
97+
margin-bottom: 10px;
98+
}

‎static/frp-graph/graph.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import {
2+
mergeMap,
3+
map,
4+
fromEvent,
5+
from,
6+
tap,
7+
Subject,
8+
} from "https://cdn.jsdelivr.net/npm/rxjs@7.8.1/+esm";
9+
import { createApp } from "https://cdn.jsdelivr.net/npm/petite-vue@0.4.1/+esm";
10+
export function start() {}
11+
12+
const startButton = document.getElementById("startWorkflow");
13+
const workflow = document.getElementById("workflow");
14+
const debugLog = document.getElementById("debug");
15+
16+
function html(src) {
17+
return src;
18+
}
19+
20+
function log(...args) {
21+
tap((_) => console.log(...args));
22+
}
23+
24+
function debug(data) {
25+
render(
26+
"debug",
27+
html`<pre class="debug">{{data}}</pre>`,
28+
{
29+
data: JSON.stringify(data, null, 2),
30+
},
31+
false,
32+
);
33+
}
34+
35+
function render(id, htmlString, ctx, log = true) {
36+
if (log) {
37+
debug({ id, htmlString, ctx });
38+
}
39+
40+
const el = document.createElement("div");
41+
el.id = id + "-" + Math.floor(Math.random() * 10000);
42+
el.innerHTML = htmlString;
43+
if (!log) {
44+
debugLog.appendChild(el);
45+
} else {
46+
workflow.appendChild(el);
47+
}
48+
createApp(ctx).mount();
49+
}
50+
51+
const nameForm$ = fromEvent(startButton, "click")
52+
.pipe(
53+
map(() => {
54+
render(
55+
"nameForm",
56+
html`<div>
57+
<h2>Github User Lookup</h2>
58+
<label for="name">Enter a Github username:</label>
59+
<input type="text" v-model="name" />
60+
<button @click="submit()">Submit</button>
61+
</div>`,
62+
{
63+
name: "",
64+
submit() {
65+
nameSubmitted$.next(this.name);
66+
},
67+
},
68+
);
69+
}),
70+
)
71+
.subscribe();
72+
73+
const nameSubmitted$ = new Subject();
74+
75+
const githubData$ = nameSubmitted$.pipe(
76+
mergeMap((name) => {
77+
const githubApiUrl = `https://api.github.com/users/${name}/repos`;
78+
loading$.next(true);
79+
return from(fetch(githubApiUrl).then((response) => response.json()));
80+
}),
81+
tap(debug),
82+
tap((data) => loading$.next(false)),
83+
);
84+
85+
const loading$ = new Subject();
86+
87+
const loadingIndicator$ = loading$
88+
.pipe(
89+
map((data) => {
90+
render(
91+
"loadingIndicator",
92+
html`<div>{{ loading ? "loading..." : ""}}</div>`,
93+
{ loading: data },
94+
);
95+
}),
96+
)
97+
.subscribe();
98+
99+
const githubDataTable$ = githubData$
100+
.pipe(
101+
map((data) => {
102+
render(
103+
"githubDataTable",
104+
html`<div v-scope="{ count: 0 }">
105+
<table>
106+
<tr>
107+
<th>Name</th>
108+
<th>Full Name</th>
109+
<th>Description</th>
110+
<th>Stars</th>
111+
<th>Forks</th>
112+
</tr>
113+
<tr v-for="item in items">
114+
<td>{{ item.name }}</td>
115+
<td>{{ item.full_name }}</td>
116+
<td>{{ item.description }}</td>
117+
<td>{{ item.stargazers_count }}</td>
118+
<td>{{ item.forks_count }}</td>
119+
</tr>
120+
</table>
121+
</div>`,
122+
{ items: data },
123+
);
124+
}),
125+
)
126+
.subscribe();

‎static/frp-graph/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>rxjs</title>
5+
</head>
6+
<style type="text/css">
7+
.debug {
8+
font-size: 8px;
9+
max-height: 128px;
10+
max-width: 50vw;
11+
overflow-y: auto;
12+
background-color: #f0f0f0;
13+
border: 1px solid #ccc;
14+
padding: 4px;
15+
border-radius: 4px;
16+
}
17+
18+
#workflow {
19+
display: flex;
20+
flex-direction: column;
21+
flex-wrap: wrap;
22+
gap: 8px;
23+
}
24+
25+
#workflow > * {
26+
}
27+
28+
.columns {
29+
display: flex;
30+
gap: 16px;
31+
}
32+
33+
.columns > * {
34+
flex: 1;
35+
}
36+
</style>
37+
<body>
38+
<button id="startWorkflow">Start Workflow</button>
39+
<div class="columns">
40+
<div id="workflow"></div>
41+
<div id="debug"></div>
42+
</div>
43+
44+
<script type="module">
45+
import { start } from "./graph.js";
46+
</script>
47+
</body>
48+
</html>

‎static/ui-generation-sketch-01/access.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Arena from "./arena.js";
2+
3+
let apiKey = localStorage.getItem("apiKey");
4+
5+
if (!apiKey) {
6+
// Prompt the user for the API key if it doesn't exist
7+
const userApiKey = prompt("Please enter your API key:");
8+
9+
if (userApiKey) {
10+
// Save the API key in localStorage
11+
localStorage.setItem("apiKey", userApiKey);
12+
apiKey = userApiKey;
13+
} else {
14+
// Handle the case when the user cancels or doesn't provide an API key
15+
alert("API key not provided. Some features may not work.");
16+
}
17+
}
18+
19+
export const arena = new Arena({
20+
accessToken: apiKey,
21+
});

0 commit comments

Comments
 (0)