Skip to content

Commit 0e22c59

Browse files
justinchiu-coherejustinchiu-cohere
committed
port js viz
1 parent f09e736 commit 0e22c59

File tree

3 files changed

+1412
-13
lines changed

3 files changed

+1412
-13
lines changed

‎diff-viz-styles.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* Override body styles only within the demo figure */
8+
#demo-figure {
9+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
10+
}
11+
12+
.demo-wrapper {
13+
position: relative;
14+
overflow: hidden;
15+
border-radius: 8px;
16+
}
17+
18+
.container {
19+
display: flex;
20+
height: 500px;
21+
background: #f8f8f8;
22+
}
23+
24+
.code-panel {
25+
width: 50%;
26+
background: white;
27+
display: flex;
28+
flex-direction: column;
29+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
30+
border-radius: 8px;
31+
margin: 8px;
32+
overflow: hidden;
33+
}
34+
35+
36+
.code-header {
37+
background: #f5f5f5;
38+
padding: 12px 16px;
39+
border-bottom: 1px solid #ddd;
40+
font-size: 18px;
41+
color: #444;
42+
font-weight: 600;
43+
text-align: left;
44+
}
45+
46+
.code-content {
47+
flex: 1;
48+
overflow-y: auto;
49+
font-size: 12px;
50+
line-height: 18px;
51+
background: white;
52+
scrollbar-width: thin;
53+
scrollbar-color: #ccc #f5f5f5;
54+
overscroll-behavior-y: contain;
55+
}
56+
57+
/* Style scrollbar for Chrome, Safari and Opera */
58+
.code-content::-webkit-scrollbar {
59+
width: 8px;
60+
}
61+
62+
.code-content::-webkit-scrollbar-track {
63+
background: #f5f5f5;
64+
}
65+
66+
.code-content::-webkit-scrollbar-thumb {
67+
background: #ccc;
68+
border-radius: 4px;
69+
}
70+
71+
.code-content::-webkit-scrollbar-thumb:hover {
72+
background: #999;
73+
}
74+
75+
.code-line {
76+
display: flex;
77+
align-items: flex-start;
78+
min-height: 24px;
79+
transition: background-color 0.3s ease;
80+
padding: 1px 0;
81+
border-left: 3px solid transparent;
82+
}
83+
84+
.line-number {
85+
color: #999;
86+
width: 38px;
87+
flex-shrink: 0;
88+
text-align: right;
89+
padding-right: 9px;
90+
user-select: none;
91+
font-size: 12px;
92+
}
93+
94+
.line-content {
95+
flex: 1;
96+
white-space: pre;
97+
padding-right: 12px;
98+
text-align: left;
99+
}
100+
101+
102+
.added {
103+
background-color: #d4edda !important;
104+
}
105+
106+
.deleted {
107+
background-color: #ffebee !important;
108+
opacity: 0.7;
109+
}
110+
111+
.modified {
112+
background-color: #fff3cd;
113+
border-left: 3px solid #ffc107;
114+
animation: slideInYellow 0.5s ease;
115+
}
116+
117+
118+
@keyframes slideInRed {
119+
from {
120+
background-color: #dc3545;
121+
color: white;
122+
transform: translateX(-5px);
123+
}
124+
to {
125+
background-color: #ffebee;
126+
color: inherit;
127+
transform: translateX(0);
128+
}
129+
}
130+
131+
@keyframes slideInYellow {
132+
from {
133+
background-color: #ffc107;
134+
color: white;
135+
transform: translateX(-5px);
136+
}
137+
to {
138+
background-color: #fff3cd;
139+
color: inherit;
140+
transform: translateX(0);
141+
}
142+
}
143+
144+
145+
/* Status badge */
146+
.status-badge {
147+
position: absolute;
148+
bottom: 20px;
149+
left: 50%;
150+
transform: translateX(-50%);
151+
background: rgba(0, 0, 0, 0.8);
152+
color: white;
153+
padding: 9px 15px;
154+
border-radius: 25px;
155+
font-size: 15px;
156+
font-weight: 500;
157+
z-index: 1000;
158+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
159+
backdrop-filter: blur(10px);
160+
}
161+
162+
/* Phase indicator */
163+
.phase-indicator {
164+
display: inline-block;
165+
width: 10px;
166+
height: 10px;
167+
border-radius: 50%;
168+
margin-right: 8px;
169+
background: #666;
170+
transition: all 0.3s ease;
171+
}
172+
173+
.phase-indicator.phase-loading {
174+
background: #ff9800;
175+
animation: pulse 1s infinite;
176+
}
177+
178+
.phase-indicator.phase-library {
179+
background: #2196F3;
180+
animation: pulse 1s infinite;
181+
}
182+
183+
.phase-indicator.phase-solution {
184+
background: #4CAF50;
185+
animation: pulse 1s infinite;
186+
}
187+
188+
.phase-indicator.phase-complete {
189+
background: #9C27B0;
190+
}
191+
192+
@keyframes pulse {
193+
0%, 100% { opacity: 1; transform: scale(1); }
194+
50% { opacity: 0.7; transform: scale(1.1); }
195+
}
196+
197+
198+
/* Syntax highlighting */
199+
.keyword {
200+
color: #0066cc;
201+
font-weight: bold;
202+
}
203+
204+
.builtin {
205+
color: #3366cc;
206+
font-weight: 500;
207+
}
208+
209+
.string {
210+
color: #009900;
211+
}
212+
213+
.docstring {
214+
color: #006600;
215+
font-style: italic;
216+
}
217+
218+
.comment {
219+
color: #808080;
220+
font-style: italic;
221+
}
222+
223+
.function {
224+
color: #cc6600;
225+
font-weight: bold;
226+
}
227+
228+
.number {
229+
color: #ff6600;
230+
}
231+
232+
.decorator {
233+
color: #9966cc;
234+
font-weight: bold;
235+
}
236+
237+
.type {
238+
color: #006666;
239+
font-style: italic;
240+
}

‎index.html‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -96,20 +96,21 @@ <h2 id="abstract">Abstract</h2>
9696
<section>
9797
<h2 id="demo">Demo</h2>
9898
<figure id="demo-figure">
99-
<div class="status-badge">
100-
<span class="phase-indicator"></span>
101-
<span id="currentPhase">Loading...</span>
102-
| Timestep <span id="timestepCount">0</span>
103-
</div>
104-
105-
<div class="container">
106-
<div class="code-panel">
107-
<div class="code-header" id="libraryFileName">library.py</div>
108-
<div class="code-content" id="libraryContent"></div>
99+
<div class="demo-wrapper">
100+
<div class="container">
101+
<div class="code-panel">
102+
<div class="code-header" id="libraryFileName">library.py</div>
103+
<div class="code-content" id="libraryContent"></div>
104+
</div>
105+
<div class="code-panel">
106+
<div class="code-header" id="solutionFileName">solution.py</div>
107+
<div class="code-content" id="solutionContent"></div>
108+
</div>
109109
</div>
110-
<div class="code-panel">
111-
<div class="code-header" id="solutionFileName">solution.py</div>
112-
<div class="code-content" id="solutionContent"></div>
110+
<div class="status-badge">
111+
<span class="phase-indicator"></span>
112+
<span id="currentPhase">Loading...</span>
113+
| Timestep <span id="timestepCount">0</span>
113114
</div>
114115
</div>
115116
<figcaption>Librarian in action: watch as it identifies common patterns and refactors multiple code sources into shorter versions by creating a unified library with reusable components.</figcaption>

0 commit comments

Comments
 (0)