Skip to content

Commit 7c2b0c3

Browse files
author
Yi-Ting Lee
committed
add functions that generate html components and style selectors
1 parent 67346a7 commit 7c2b0c3

File tree

1 file changed

+45
-124
lines changed

1 file changed

+45
-124
lines changed

‎src/sagemaker/lineage/query.py

Lines changed: 45 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,13 @@ def __init__(self):
215215
self.Output,
216216
) = self._import_visual_modules()
217217

218+
self.entity_color = {
219+
"TrialComponent": "#f6cf61",
220+
"Context": "#ff9900",
221+
"Action": "#88c396",
222+
"Artifact": "#146eb4",
223+
}
224+
218225
def _import_visual_modules(self):
219226
"""Import modules needed for visualization."""
220227
try:
@@ -247,13 +254,46 @@ def _import_visual_modules(self):
247254

248255
return cyto, JupyterDash, html, Input, Output
249256

257+
def _create_legend_component(self, text, color, colorText=""):
258+
"""Create legend component div."""
259+
return self.html.Div(
260+
[
261+
self.html.Div(
262+
colorText,
263+
style={
264+
"background-color": color,
265+
"width": "1.5vw",
266+
"height": "1.5vw",
267+
"display": "inline-block",
268+
"font-size": "1.5vw",
269+
},
270+
),
271+
self.html.Div(
272+
style={
273+
"width": "0.5vw",
274+
"height": "1.5vw",
275+
"display": "inline-block",
276+
}
277+
),
278+
self.html.Div(
279+
text,
280+
style={"display": "inline-block", "font-size": "1.5vw"},
281+
),
282+
]
283+
)
284+
285+
def _create_entity_selector(self, entity_name, color):
286+
"""Create selector for each lineage entity."""
287+
return {"selector": "." + entity_name, "style": {"background-color": color}}
288+
250289
def _get_app(self, elements):
251290
"""Create JupyterDash app for interactivity on Jupyter notebook."""
252291
app = self.JupyterDash(__name__)
253292
self.cyto.load_extra_layouts()
254293

255294
app.layout = self.html.Div(
256295
[
296+
# graph section
257297
self.cyto.Cytoscape(
258298
id="cytoscape-graph",
259299
elements=elements,
@@ -297,13 +337,10 @@ def _get_app(self, elements):
297337
"font-family": "verdana",
298338
},
299339
},
300-
{"selector": ".Artifact", "style": {"background-color": "#146eb4"}},
301-
{"selector": ".Context", "style": {"background-color": "#ff9900"}},
302-
{"selector": ".TrialComponent", "style": {"background-color": "#f6cf61"}},
303-
{"selector": ".Action", "style": {"background-color": "#88c396"}},
304340
{"selector": ".startarn", "style": {"shape": "star"}},
305341
{"selector": ".select", "style": {"border-opacity": "0.7"}},
306-
],
342+
]
343+
+ [self._create_entity_selector(k, v) for k, v in self.entity_color.items()],
307344
responsive=True,
308345
),
309346
self.html.Div(
@@ -315,126 +352,10 @@ def _get_app(self, elements):
315352
"vertical-align": "top",
316353
},
317354
),
355+
# legend section
318356
self.html.Div(
319-
[
320-
self.html.Div(
321-
[
322-
self.html.Div(
323-
style={
324-
"background-color": "#f6cf61",
325-
"width": "1.5vw",
326-
"height": "1.5vw",
327-
"display": "inline-block",
328-
}
329-
),
330-
self.html.Div(
331-
style={
332-
"width": "0.5vw",
333-
"height": "1.5vw",
334-
"display": "inline-block",
335-
}
336-
),
337-
self.html.Div(
338-
" Trial Component",
339-
style={"display": "inline-block", "font-size": "1.5vw"},
340-
),
341-
]
342-
),
343-
self.html.Div(
344-
[
345-
self.html.Div(
346-
style={
347-
"background-color": "#ff9900",
348-
"width": "1.5vw",
349-
"height": "1.5vw",
350-
"display": "inline-block",
351-
}
352-
),
353-
self.html.Div(
354-
style={
355-
"width": "0.5vw",
356-
"height": "1.5vw",
357-
"display": "inline-block",
358-
}
359-
),
360-
self.html.Div(
361-
" Context",
362-
style={"display": "inline-block", "font-size": "1.5vw"},
363-
),
364-
]
365-
),
366-
self.html.Div(
367-
[
368-
self.html.Div(
369-
style={
370-
"background-color": "#88c396",
371-
"width": "1.5vw",
372-
"height": "1.5vw",
373-
"display": "inline-block",
374-
}
375-
),
376-
self.html.Div(
377-
style={
378-
"width": "0.5vw",
379-
"height": "1.5vw",
380-
"display": "inline-block",
381-
}
382-
),
383-
self.html.Div(
384-
" Action",
385-
style={"display": "inline-block", "font-size": "1.5vw"},
386-
),
387-
]
388-
),
389-
self.html.Div(
390-
[
391-
self.html.Div(
392-
style={
393-
"background-color": "#146eb4",
394-
"width": "1.5vw",
395-
"height": "1.5vw",
396-
"display": "inline-block",
397-
}
398-
),
399-
self.html.Div(
400-
style={
401-
"width": "0.5vw",
402-
"height": "1.5vw",
403-
"display": "inline-block",
404-
}
405-
),
406-
self.html.Div(
407-
" Artifact",
408-
style={"display": "inline-block", "font-size": "1.5vw"},
409-
),
410-
]
411-
),
412-
self.html.Div(
413-
[
414-
self.html.Div(
415-
"★",
416-
style={
417-
"background-color": "white",
418-
"width": "1.5vw",
419-
"height": "1.5vw",
420-
"display": "inline-block",
421-
"font-size": "1.5vw",
422-
},
423-
),
424-
self.html.Div(
425-
style={
426-
"width": "0.5vw",
427-
"height": "1.5vw",
428-
"display": "inline-block",
429-
}
430-
),
431-
self.html.Div(
432-
"StartArn",
433-
style={"display": "inline-block", "font-size": "1.5vw"},
434-
),
435-
]
436-
),
437-
],
357+
[self._create_legend_component(k, v) for k, v in self.entity_color.items()]
358+
+ [self._create_legend_component("StartArn", "#ffffff", "★")],
438359
style={
439360
"display": "inline-block",
440361
"font-size": "1vw",

0 commit comments

Comments
 (0)