lakkoju/GraphVisualUI
0
1import time2import re3import pandas as pd4import numpy as np5import torch6import torch.nn.functional as F7import graphviz as graphviz8import pydeck as pdk9import streamlit as st10 11from transformers import AutoTokenizer, AutoModel12from tokenizers import Tokenizer, AddedToken13from st_click_detector import click_detector14 15# Define selection options and sort alphabetically16 17st.graphviz_chart(''' 18graph G {19 fontname="Helvetica,Arial,sans-serif"20 node [fontname="Helvetica,Arial,sans-serif"]21 edge [fontname="Helvetica,Arial,sans-serif"]22 layout=fdp23 e24 subgraph clusterA {25 a -- b;26 subgraph clusterC {27 C -- D;28 }29 }30 subgraph clusterB {31 d -- f32 }33 d -- D34 e -- clusterB35 clusterC -- clusterB36}37''')38 39st.graphviz_chart(''' 40graph Transparency {41 layout=neato42 start=11 // empiric value to set orientation43 bgcolor="#0000ff11"44 node [shape=circle width=2.22 label="" style=filled]45 5 [color="#0000ff80"]46 6 [color="#ee00ee80"]47 1 [color="#ff000080"]48 2 [color="#eeee0080"]49 3 [color="#00ff0080"]50 4 [color="#00eeee80"]51 1 -- 2 -- 3 -- 4 -- 5 -- 6 -- 152 }53''')54 55st.graphviz_chart('''56digraph UML_Class_diagram {57 fontname="Helvetica,Arial,sans-serif"58 node [fontname="Helvetica,Arial,sans-serif"]59 edge [fontname="Helvetica,Arial,sans-serif"]60 labelloc="t"61 label="UML Class diagram demo"62 graph [splines=false]63 node [shape=record style=filled fillcolor=gray95]64 edge [arrowhead=vee style=dashed]65 Client -> Interface1 [xlabel=dependency]66 Client -> Interface267 edge [dir=back arrowtail=empty style=""]68 Interface1 -> Class1 [xlabel=inheritance]69 Interface2 -> Class1 [dir=none]70 Interface2 [label="" xlabel="Simple\ninterface" shape=circle]71 Interface1[label = <{<b>«interface» I/O</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]72 Class1[label = <{<b>I/O class</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]73 edge [dir=back arrowtail=empty style=dashed]74 Class1 -> System_1 [xlabel=implementation]75 System_1 [label = <{<b>System</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]76 "Shared resource" [label = <{<b>Shared resource</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]77 edge [dir=back arrowtail=diamond]78 "System_1" -> Subsystem_1 [xlabel="composition"]79 Subsystem_1[label = <{<b>Subsystem 1</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]80 Subsystem_2[label = <{<b>Subsystem 2</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]81 Subsystem_3[label = <{<b>Subsystem 3</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]82 "System_1" -> Subsystem_283 "System_1" -> Subsystem_384 edge [xdir=back arrowtail=odiamond]85 Subsystem_1 -> "Shared resource" [xlabel=aggregation]86 {Subsystem_2 Subsystem_3 } -> "Shared resource"87}88''')89 90 91 92st.graphviz_chart('''93digraph G {94 fontname="Helvetica,Arial,sans-serif"95 node [fontname="Helvetica,Arial,sans-serif"]96 edge [fontname="Helvetica,Arial,sans-serif"]97 subgraph cluster_1 {98 node [ style=filled,shape="box",fillcolor="antiquewhite:aquamarine" ]n5;99 node [ shape="ellipse",fillcolor="bisque4:blue2" ]n4;100 node [ shape="circle",fillcolor="cadetblue1:chocolate1" ]n3;101 node [ shape="diamond",fillcolor="crimson:cyan4" ]n2;102 node [ shape="triangle",fillcolor="deepskyblue2:firebrick" ]n1;103 node [ shape="pentagon",fillcolor="gray24:gray88" ]n0;104 label = "X11 Colors";105 }106 subgraph cluster_2 {107 node [ style=filled,shape="box",fillcolor="bisque:brown" ]n11;108 node [ shape="ellipse",fillcolor="green:darkorchid" ]n10;109 node [ shape="circle",fillcolor="deepskyblue:gold" ]n9;110 node [ shape="diamond",fillcolor="lightseagreen:orangered" ]n8;111 node [ shape="triangle",fillcolor="turquoise:salmon" ]n7;112 node [ shape="pentagon",fillcolor="snow:black" ]n6;113 label = "SVG Colors";114 }115 subgraph cluster_3 {116 node [ style=filled,shape="box",fillcolor="/accent3/1:/accent3/3" ]n17;117 node [ shape="ellipse",fillcolor="/accent4/1:/accent4/4" ]n16;118 node [ shape="circle",fillcolor="/accent5/1:/accent5/5" ]n15;119 node [ shape="diamond",fillcolor="/accent6/1:/accent6/6" ]n14;120 node [ shape="triangle",fillcolor="/accent7/1:/accent7/7" ]n13;121 node [ shape="pentagon",fillcolor="/accent8/1:/accent8/8" ]n12;122 label = "Brewer - accent";123 }124 subgraph cluster_4 {125 node [ style=filled,shape="box",fillcolor="/blues3/1:/blues3/2" ]n23;126 node [ shape="ellipse",fillcolor="/blues4/1:/blues4/3" ]n22;127 node [ shape="circle",fillcolor="/blues5/1:/blues5/4" ]n21;128 node [ shape="diamond",fillcolor="/blues6/1:/blues6/5" ]n20;129 node [ shape="triangle",fillcolor="/blues7/1:/blues7/6" ]n19;130 node [ shape="pentagon",fillcolor="/blues8/1:/blues8/7" ]n18;131 label = "Brewer - blues";132 }133n3 -> n9 -> n15 -> n21;134}135''')136 137st.graphviz_chart('''138digraph G {bgcolor="#0000FF44:#FF000044" gradientangle=90139 fontname="Helvetica,Arial,sans-serif"140 node [fontname="Helvetica,Arial,sans-serif"]141 edge [fontname="Helvetica,Arial,sans-serif"]142 subgraph cluster_0 {143 style=filled;144 color=lightgrey;145 fillcolor="darkgray:gold";146 gradientangle=0147 node [fillcolor="yellow:green" style=filled gradientangle=270] a0;148 node [fillcolor="lightgreen:red"] a1;149 node [fillcolor="lightskyblue:darkcyan"] a2;150 node [fillcolor="cyan:lightslateblue"] a3;151 a0 -> a1 -> a2 -> a3;152 label = "process #1";153 }154 subgraph cluster_1 {155 node [fillcolor="yellow:magenta" 156 style=filled gradientangle=270] b0;157 node [fillcolor="violet:darkcyan"] b1;158 node [fillcolor="peachpuff:red"] b2;159 node [fillcolor="mediumpurple:purple"] b3;160 b0 -> b1 -> b2 -> b3;161 label = "process #2";162 color=blue163 fillcolor="darkgray:gold";164 gradientangle=0165 style=filled;166 }167 start -> a0;168 start -> b0;169 a1 -> b3;170 b2 -> a3;171 a3 -> a0;172 a3 -> end;173 b3 -> end;174 start [shape=Mdiamond ,175 fillcolor="pink:red",176 gradientangle=90,177 style=radial];178 end [shape=Msquare,179 fillcolor="lightyellow:orange",180 style=radial,181 gradientangle=90];182}183''')184 185st.graphviz_chart('''186graph Color_wheel {187 graph [188 layout = neato189 label = "Color wheel, 33 colors.\nNeato layout"190 labelloc = b191 fontname = "Helvetica,Arial,sans-serif"192 start = regular193 normalize = 0194 ]195 node [196 shape = circle197 style = filled198 color = "#00000088"199 fontname = "Helvetica,Arial,sans-serif"200 ]201 edge [202 len = 2.7203 color = "#00000088"204 fontname = "Helvetica,Arial,sans-serif"205 ]206 subgraph Dark {207 node [fontcolor = white width = 1.4]208 center [width = 1 style = invis shape = point]209 center -- darkred [label = "0°/360°"]210 darkred [fillcolor = darkred]211 brown [fillcolor = brown]212 brown -- center [label = "30°"]213 olive [fillcolor = olive]214 olive -- center [label = "60°"]215 darkolivegreen [fillcolor = darkolivegreen fontsize = 10]216 darkolivegreen -- center [label = "90°"]217 darkgreen [fillcolor = darkgreen]218 darkgreen -- center [label = "120°"]219 "dark hue 0.416" [color = ".416 1 .6" fontcolor = white]220 "dark hue 0.416" -- center [label = "150°"]221 darkcyan [fillcolor = darkcyan]222 darkcyan -- center [label = "180°"]223 "dark hue 0.583" [color = ".583 1 .6" fontcolor = white]224 "dark hue 0.583" -- center [label = "210°"]225 darkblue [fillcolor = darkblue]226 darkblue -- center [label = "240°"]227 "dark hue 0.750" [color = ".750 1 .6"]228 "dark hue 0.750" -- center [label = "270°"]229 darkmagenta [fillcolor = darkmagenta]230 darkmagenta -- center [label = "300°"]231 "dark hue 0.916" [color = ".916 1 .6"]232 "dark hue 0.916" -- center [label = "330°"]233 }234 subgraph Tue {235 node [width = 1.3]236 "hue 0.083" -- brown237 "hue 0.083" [color = ".083 1 1"]238 "hue 0.125" [color = ".125 1 1"]239 "hue 0.166" -- olive240 "hue 0.166" [color = ".166 1 1"]241 "hue 0.208" [color = ".208 1 1"]242 "hue 0.250" -- darkolivegreen243 "hue 0.250" [color = ".250 1 1"]244 "hue 0.291" [color = ".291 1 1"]245 "hue 0.333" -- darkgreen246 "hue 0.333" [color = ".333 1 1"]247 "hue 0.375" [color = ".375 1 1"]248 "hue 0.416" -- "dark hue 0.416"249 "hue 0.416" [color = ".416 1 1"]250 "hue 0.458" [color = ".458 1 1"]251 "hue 0.500" -- darkcyan252 "hue 0.500" [color = ".500 1 1"]253 "hue 0.541" [color = ".541 1 1"]254 node [fontcolor = white]255 "hue 0.000" [color = ".000 1 1"]256 "hue 0.000" -- darkred257 "hue 0.041" [color = ".041 1 1"]258 "hue 0.583" -- "dark hue 0.583"259 "hue 0.583" [color = ".583 1 1"]260 "hue 0.625" [color = ".625 1 1"]261 "hue 0.666" -- darkblue262 "hue 0.666" [color = ".666 1 1"]263 "hue 0.708" [color = ".708 1 1"]264 "hue 0.750" -- "dark hue 0.750"265 "hue 0.750" [color = ".750 1 1"]266 "hue 0.791" [color = ".791 1 1"]267 "hue 0.833" -- darkmagenta268 "hue 0.833" [color = ".833 1 1"]269 "hue 0.875" [color = ".875 1 1"]270 "hue 0.916" -- "dark hue 0.916"271 "hue 0.916" [color = ".916 1 1"]272 "hue 0.958" [color = ".958 1 1"]273 edge [len = 1]274 "hue 0.000" -- "hue 0.041" -- "hue 0.083" -- "hue 0.125" -- "hue 0.166" -- "hue 0.208"275 "hue 0.208" -- "hue 0.250" -- "hue 0.291" -- "hue 0.333" -- "hue 0.375" -- "hue 0.416"276 "hue 0.416" -- "hue 0.458" -- "hue 0.500" --"hue 0.541" -- "hue 0.583" -- "hue 0.625"277 "hue 0.625" -- "hue 0.666" -- "hue 0.708" -- "hue 0.750" -- "hue 0.791" -- "hue 0.833"278 "hue 0.833" -- "hue 0.875" -- "hue 0.916" -- "hue 0.958" -- "hue 0.000"279 }280 subgraph Main_colors {281 node [width = 2 fontsize = 20]282 red [fillcolor = red fontcolor = white]283 orangered [fillcolor = orangered]284 orange [fillcolor = orange]285 gold [fillcolor = gold]286 yellow [fillcolor = yellow]287 yellowgreen [fillcolor = yellowgreen]288 deeppink [fillcolor = deeppink fontcolor = white]289 fuchsia [label = "fuchsia\nmagenta" fillcolor = fuchsia fontcolor = white]290 purple [fillcolor = purple fontcolor = white]291 blue [fillcolor = blue fontcolor = white]292 cornflowerblue [fillcolor = cornflowerblue]293 deepskyblue [fillcolor = deepskyblue]294 aqua [fillcolor = aqua label = "aqua\ncyan"]295 springgreen [fillcolor = springgreen]296 green [fillcolor = green]297 purple -- fuchsia -- deeppink -- red298 cornflowerblue -- blue -- purple299 cornflowerblue -- deepskyblue -- aqua [len = 1.7]300 aqua -- springgreen -- green -- yellowgreen -- yellow301 yellow -- gold -- orange -- orangered -- red [len = 1.6]302 orange -- "hue 0.083"303 deeppink -- "hue 0.916"304 deeppink -- "hue 0.875"305 red -- "hue 0.000"306 yellowgreen -- "hue 0.250"307 blue -- "hue 0.666"308 yellow -- "hue 0.166"309 gold -- "hue 0.125"310 green -- "hue 0.333"311 springgreen -- "hue 0.416"312 aqua -- "hue 0.500"313 cornflowerblue -- "hue 0.583"314 deepskyblue -- "hue 0.541"315 purple -- "hue 0.791"316 purple -- "hue 0.750"317 fuchsia -- "hue 0.833"318 }319 subgraph Light_colors {320 node [width = 2 fontsize = 20]321 node [shape = circle width = 1.8]322 edge [len = 2.1]323 pink [fillcolor = pink]324 pink -- red325 lightyellow [fillcolor = lightyellow]326 lightyellow -- yellow327 mediumpurple [fillcolor = mediumpurple]328 mediumpurple -- purple329 violet [fillcolor = violet]330 violet -- fuchsia331 hotpink [fillcolor = hotpink]332 hotpink -- deeppink333 "light hue 0.250" [color = ".250 .2 1"]334 "light hue 0.250" -- yellowgreen335 lightcyan [fillcolor = lightcyan]336 lightcyan -- aqua337 lightslateblue [fillcolor = lightslateblue]338 lightslateblue -- blue339 lightgreen [fillcolor = lightgreen]340 lightgreen -- green341 lightskyblue [fillcolor = lightskyblue]342 lightskyblue -- deepskyblue343 peachpuff [fillcolor = peachpuff]344 peachpuff -- orange345 "light hue 0.416" [color = ".416 .2 1"]346 "light hue 0.416" -- springgreen347 }348 subgraph Tints {349 node [width = 1]350 edge [len = 2.4]351 "hue 0 tint" -- pink352 "hue 0 tint" [color = "0 .1 1"]353 "hue 0.041 tint" [color = ".041 .1 1"]354 "hue 0.083 tint" -- peachpuff355 "hue 0.083 tint" [color = ".083 .1 1"]356 "hue 0.125 tint" [color = ".125 .1 1"]357 "hue 0.166 tint" -- lightyellow358 "hue 0.166 tint" [color = ".166 .1 1"]359 "hue 0.208 tint" [color = ".208 .1 1"]360 "hue 0.250 tint" -- "light hue 0.250"361 "hue 0.250 tint" [color = ".250 .1 1"]362 "hue 0.291 tint" [color = ".291 .1 1"]363 "hue 0.333 tint" -- lightgreen364 "hue 0.333 tint" [color = ".333 .1 1"]365 "hue 0.375 tint" [color = ".375 .1 1"]366 "hue 0.416 tint" -- "light hue 0.416"367 "hue 0.416 tint" [color = ".416 .1 1"]368 "hue 0.458 tint" [color = ".458 .1 1"]369 "hue 0.5 tint" -- lightcyan370 "hue 0.5 tint" [color = ".5 .1 1"]371 "hue 0.541 tint" -- lightskyblue372 "hue 0.541 tint" [color = ".541 .1 1"]373 "hue 0.583 tint" [color = ".583 .1 1"]374 "hue 0.625 tint" [color = ".625 .1 1"]375 "hue 0.666 tint" -- lightslateblue376 "hue 0.666 tint" [color = ".666 .1 1"]377 "hue 0.708 tint" [color = ".708 .1 1"]378 "hue 0.750 tint" -- mediumpurple379 "hue 0.750 tint" [color = ".750 .1 1"]380 "hue 0.791 tint" [color = ".791 .1 1"]381 "hue 0.833 tint" -- violet382 "hue 0.833 tint" [color = ".833 .1 1"]383 "hue 0.875 tint" [color = ".875 .1 1"]384 "hue 0.916 tint" -- hotpink385 "hue 0.916 tint" [color = ".916 .1 1"]386 "hue 0.958 tint" [color = ".958 .1 1"]387 edge [len = 2]388 "hue 0 tint" -- "hue 0.041 tint" -- "hue 0.083 tint" -- "hue 0.125 tint" -- "hue 0.166 tint" -- "hue 0.208 tint"389 "hue 0.208 tint" -- "hue 0.250 tint" -- "hue 0.291 tint" -- "hue 0.333 tint" -- "hue 0.375 tint" -- "hue 0.416 tint"390 "hue 0.416 tint" -- "hue 0.458 tint" -- "hue 0.5 tint" --"hue 0.541 tint" -- "hue 0.583 tint" -- "hue 0.625 tint"391 "hue 0.625 tint" -- "hue 0.666 tint" -- "hue 0.708 tint" -- "hue 0.750 tint" -- "hue 0.791 tint" -- "hue 0.833 tint"392 "hue 0.833 tint" -- "hue 0.875 tint" -- "hue 0.916 tint" -- "hue 0.958 tint" -- "hue 0 tint"393 }394 }395''')