Skip to content

Commit 98c44b7

Browse files
JHSaundersJHSaunders
committed
Add syntax highlighting and a proper code editor.
The result processor now uses a small ace-editor. It syntax highlights as well as debouncing so input is not sluggish. The dash-ace dependency is currently pulled off of a fork in order to activate persistence, this shoud move of fthe primary package once reasoned-ai/dash-ace#2 is merged. The code definition is now highlighted using pygments.
1 parent 4a683b5 commit 98c44b7

File tree

5 files changed

+293
-18
lines changed

5 files changed

+293
-18
lines changed

‎dash-ace‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 99e051a332e692729f5160c20783fdc5db52f688

‎fn_graph_studio/__init__.py‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,48 @@
22
import traceback
33
from pathlib import Path
44

5+
import dash_ace
56
import dash_core_components as dcc
7+
import dash_dangerously_set_inner_html
68
import dash_html_components as html
79
import networkx as nx
10+
import numpy as np
11+
import pandas as pd
12+
import plotly.express as px
813
from dash import Dash
914
from dash.dependencies import Input, Output, State
1015
from dash_interactive_graphviz import DashInteractiveGraphviz
1116
from dash_split_pane import DashSplitPane
1217
from dash_treebeard import DashTreebeard
1318
from fn_graph.calculation import (
1419
NodeInstruction,
15-
get_execution_instructions,
1620
calculate_collect_exceptions,
21+
get_execution_instructions,
1722
)
1823
from fn_graph.profiler import Profiler
19-
20-
__package__ = "fn_graph_studio"
24+
from pygments import highlight
25+
from pygments.formatters import HtmlFormatter
26+
from pygments.lexers import PythonLexer
2127

2228
from .parameter_editor import (
23-
parameter_widgets,
24-
get_variable_parameter_keys,
2529
get_variable_parameter_ids,
30+
get_variable_parameter_keys,
31+
parameter_widgets,
2632
)
2733
from .result_renderers import add_default_renderers
2834

29-
import pandas as pd
30-
import numpy as np
31-
import plotly.express as px
35+
__package__ = "fn_graph_studio"
36+
3237

3338
# Load up embedded styles
3439
# We embed the styles directly in the template ofr portabilities sake
3540
# I feel there is likely a better way to do this but I cannot fnd it.
3641
with open(Path(__file__).parent / "styles.css") as f:
3742
styles = f.read()
3843

44+
with open(Path(__file__).parent / "highlight.css") as f:
45+
highlight_styles = f.read()
46+
3947

4048
def BasePane(default_style):
4149
def wrapper(*args, style=None, **kwargs):
@@ -104,6 +112,8 @@ def __init__(self, app, composer, renderers=None):
104112
<style>
105113
"""
106114
+ styles
115+
+ "\n\n"
116+
+ highlight_styles
107117
+ """
108118
</style>
109119
</head>
@@ -368,12 +378,19 @@ def sidebar_components(self, composer):
368378
}
369379

370380
def result_processor(self):
371-
return dcc.Textarea(
381+
return dash_ace.DashAceEditor(
372382
id="result-processor",
383+
value="",
384+
theme="github",
385+
mode="python",
386+
tabSize=2,
373387
placeholder="e.g. result.query(....)",
374-
rows=5,
375-
style=dict(width="100%", border="none"),
376-
persistence=1,
388+
maxLines=10,
389+
minLines=5,
390+
showGutter=False,
391+
persistence=True,
392+
highlightActiveLine=False,
393+
debounceChangePeriod=500
377394
)
378395

379396
def sidebar(self, composer):
@@ -545,7 +562,7 @@ def populate_result(
545562
result = results[function_name]
546563

547564
error = None
548-
if result_processor_value:
565+
if result_processor_value.strip():
549566
try:
550567
result = self.process_result(result, result_processor_value)
551568
except Exception as e:
@@ -573,8 +590,19 @@ def populate_result(
573590
)
574591

575592
def populate_definition(self, composer, function_name):
593+
576594
source = composer.get_source(function_name)
577-
return function_name, None, None, html.Pre(source, style=dict(padding="0.5rem"))
595+
highlighted = highlight(source, PythonLexer(), HtmlFormatter())
596+
597+
return (
598+
function_name,
599+
None,
600+
None,
601+
html.Div(
602+
dash_dangerously_set_inner_html.DangerouslySetInnerHTML(highlighted),
603+
style=dict(padding="0.5rem"),
604+
),
605+
)
578606

579607
def populate_profiler(self, composer, function_name, parameters):
580608

@@ -810,11 +838,19 @@ class ExternalStudio(BaseStudio):
810838
"""
811839

812840
def result_processor(self):
813-
return dcc.Textarea(
841+
return dash_ace.DashAceEditor(
814842
id="result-processor",
843+
value="",
844+
theme="github",
845+
mode="python",
846+
tabSize=2,
815847
placeholder='Enter a query string.\n\nYou can use full pandas query strings.\ne.g.: merchant_id == "ABC"',
816-
rows=5,
817-
style=dict(width="100%", border="none"),
848+
maxLines=10,
849+
minLines=5,
850+
showGutter=False,
851+
persistence=True,
852+
highlightActiveLine=False,
853+
debounceChangePeriod=500
818854
)
819855

820856
def process_result(self, result, value):

‎fn_graph_studio/highlight.css‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
.highlight .c {
2+
color: #408080;
3+
font-style: italic;
4+
} /* Comment */
5+
.highlight .err {
6+
border: 1px solid #ff0000;
7+
} /* Error */
8+
.highlight .k {
9+
color: #008000;
10+
font-weight: bold;
11+
} /* Keyword */
12+
.highlight .o {
13+
color: #666666;
14+
} /* Operator */
15+
.highlight .ch {
16+
color: #408080;
17+
font-style: italic;
18+
} /* Comment.Hashbang */
19+
.highlight .cm {
20+
color: #408080;
21+
font-style: italic;
22+
} /* Comment.Multiline */
23+
.highlight .cp {
24+
color: #bc7a00;
25+
} /* Comment.Preproc */
26+
.highlight .cpf {
27+
color: #408080;
28+
font-style: italic;
29+
} /* Comment.PreprocFile */
30+
.highlight .c1 {
31+
color: #408080;
32+
font-style: italic;
33+
} /* Comment.Single */
34+
.highlight .cs {
35+
color: #408080;
36+
font-style: italic;
37+
} /* Comment.Special */
38+
.highlight .gd {
39+
color: #a00000;
40+
} /* Generic.Deleted */
41+
.highlight .ge {
42+
font-style: italic;
43+
} /* Generic.Emph */
44+
.highlight .gr {
45+
color: #ff0000;
46+
} /* Generic.Error */
47+
.highlight .gh {
48+
color: #000080;
49+
font-weight: bold;
50+
} /* Generic.Heading */
51+
.highlight .gi {
52+
color: #00a000;
53+
} /* Generic.Inserted */
54+
.highlight .go {
55+
color: #888888;
56+
} /* Generic.Output */
57+
.highlight .gp {
58+
color: #000080;
59+
font-weight: bold;
60+
} /* Generic.Prompt */
61+
.highlight .gs {
62+
font-weight: bold;
63+
} /* Generic.Strong */
64+
.highlight .gu {
65+
color: #800080;
66+
font-weight: bold;
67+
} /* Generic.Subheading */
68+
.highlight .gt {
69+
color: #0044dd;
70+
} /* Generic.Traceback */
71+
.highlight .kc {
72+
color: #008000;
73+
font-weight: bold;
74+
} /* Keyword.Constant */
75+
.highlight .kd {
76+
color: #008000;
77+
font-weight: bold;
78+
} /* Keyword.Declaration */
79+
.highlight .kn {
80+
color: #008000;
81+
font-weight: bold;
82+
} /* Keyword.Namespace */
83+
.highlight .kp {
84+
color: #008000;
85+
} /* Keyword.Pseudo */
86+
.highlight .kr {
87+
color: #008000;
88+
font-weight: bold;
89+
} /* Keyword.Reserved */
90+
.highlight .kt {
91+
color: #b00040;
92+
} /* Keyword.Type */
93+
.highlight .m {
94+
color: #666666;
95+
} /* Literal.Number */
96+
.highlight .s {
97+
color: #ba2121;
98+
} /* Literal.String */
99+
.highlight .na {
100+
color: #7d9029;
101+
} /* Name.Attribute */
102+
.highlight .nb {
103+
color: #008000;
104+
} /* Name.Builtin */
105+
.highlight .nc {
106+
color: #0000ff;
107+
font-weight: bold;
108+
} /* Name.Class */
109+
.highlight .no {
110+
color: #880000;
111+
} /* Name.Constant */
112+
.highlight .nd {
113+
color: #aa22ff;
114+
} /* Name.Decorator */
115+
.highlight .ni {
116+
color: #999999;
117+
font-weight: bold;
118+
} /* Name.Entity */
119+
.highlight .ne {
120+
color: #d2413a;
121+
font-weight: bold;
122+
} /* Name.Exception */
123+
.highlight .nf {
124+
color: #0000ff;
125+
} /* Name.Function */
126+
.highlight .nl {
127+
color: #a0a000;
128+
} /* Name.Label */
129+
.highlight .nn {
130+
color: #0000ff;
131+
font-weight: bold;
132+
} /* Name.Namespace */
133+
.highlight .nt {
134+
color: #008000;
135+
font-weight: bold;
136+
} /* Name.Tag */
137+
.highlight .nv {
138+
color: #19177c;
139+
} /* Name.Variable */
140+
.highlight .ow {
141+
color: #aa22ff;
142+
font-weight: bold;
143+
} /* Operator.Word */
144+
.highlight .w {
145+
color: #bbbbbb;
146+
} /* Text.Whitespace */
147+
.highlight .mb {
148+
color: #666666;
149+
} /* Literal.Number.Bin */
150+
.highlight .mf {
151+
color: #666666;
152+
} /* Literal.Number.Float */
153+
.highlight .mh {
154+
color: #666666;
155+
} /* Literal.Number.Hex */
156+
.highlight .mi {
157+
color: #666666;
158+
} /* Literal.Number.Integer */
159+
.highlight .mo {
160+
color: #666666;
161+
} /* Literal.Number.Oct */
162+
.highlight .sa {
163+
color: #ba2121;
164+
} /* Literal.String.Affix */
165+
.highlight .sb {
166+
color: #ba2121;
167+
} /* Literal.String.Backtick */
168+
.highlight .sc {
169+
color: #ba2121;
170+
} /* Literal.String.Char */
171+
.highlight .dl {
172+
color: #ba2121;
173+
} /* Literal.String.Delimiter */
174+
.highlight .sd {
175+
color: #ba2121;
176+
font-style: italic;
177+
} /* Literal.String.Doc */
178+
.highlight .s2 {
179+
color: #ba2121;
180+
} /* Literal.String.Double */
181+
.highlight .se {
182+
color: #bb6622;
183+
font-weight: bold;
184+
} /* Literal.String.Escape */
185+
.highlight .sh {
186+
color: #ba2121;
187+
} /* Literal.String.Heredoc */
188+
.highlight .si {
189+
color: #bb6688;
190+
font-weight: bold;
191+
} /* Literal.String.Interpol */
192+
.highlight .sx {
193+
color: #008000;
194+
} /* Literal.String.Other */
195+
.highlight .sr {
196+
color: #bb6688;
197+
} /* Literal.String.Regex */
198+
.highlight .s1 {
199+
color: #ba2121;
200+
} /* Literal.String.Single */
201+
.highlight .ss {
202+
color: #19177c;
203+
} /* Literal.String.Symbol */
204+
.highlight .bp {
205+
color: #008000;
206+
} /* Name.Builtin.Pseudo */
207+
.highlight .fm {
208+
color: #0000ff;
209+
} /* Name.Function.Magic */
210+
.highlight .vc {
211+
color: #19177c;
212+
} /* Name.Variable.Class */
213+
.highlight .vg {
214+
color: #19177c;
215+
} /* Name.Variable.Global */
216+
.highlight .vi {
217+
color: #19177c;
218+
} /* Name.Variable.Instance */
219+
.highlight .vm {
220+
color: #19177c;
221+
} /* Name.Variable.Magic */
222+
.highlight .il {
223+
color: #666666;
224+
} /* Literal.Number.Integer.Long */

0 commit comments

Comments
 (0)