Как добавить настраиваемое меню правой кнопки мыши в мой код боке? - PullRequest
Новая
       21

Как добавить настраиваемое меню правой кнопки мыши в мой код боке?

0 голосов
/ 10 июля 2020

Я получил график, в котором много узлов находится в узле, который мне нужно создать после щелчка правой кнопкой мыши, чтобы создать собственное меню. ТАК в моем коде, что мне добавить, чтобы вместо обычного меню появилось мое собственное значение? Здесь у меня есть код боке, который будет генерировать узлы. Я включил блок HTML v = для моего настраиваемого щелчка правой кнопкой мыши, который работает правильно. Итак, как я могу интегрировать сценарий HTML в свой код боке? Код HTML также присутствует под кодом боке. МОЙ КОД 

'''Bokeh'''
plot_width = 1400
plot_height=  900

#Add the addtributes of the node
nx.set_node_attributes(G,  node_size, name='node_size')
nx.set_node_attributes(G,  node_color, name='node_color')
nx.set_node_attributes(G, label_name_hover, name='lable_hover')
nx.set_node_attributes(G, label_hover_2, name='label_hover_2')


source = ColumnDataSource(pd.DataFrame.from_dict({k:v for k,v in G.nodes(data=True)}, orient='index'))

plot = Plot(plot_width=plot_width, plot_height=plot_height,
            x_range=Range1d(-1.1,1.1), y_range=Range1d(-1.1,1.1), 
            min_border_bottom=0, min_border_top=0)


#Add Network Graph to bokeh and define the fixed positions
graph_renderer = from_networkx(G, nx.spring_layout, pos = new_pos)
plot.add_tools(TapTool(), BoxSelectTool())
#Lable Hover
# plot.add_tools(HoverTool(tooltips='@lable_hover'))

import jinja2 '''This html code I have to embed under the bokeh code so that it will work'''
from bokeh.embed import components
template = jinja2.Template("""
<!doctype html>
<html>
    <head>
        <script>
            src="http://cdn.pydata.org/bokeh/dev/bokeh-0.13.0.min.js"
            var menuDisplayed = false;
            var menuBox = null;
           
            window.addEventListener("contextmenu", function() {
                var left = arguments[0].clientX;
                var top = arguments[0].clientY;
               
                menuBox = window.document.querySelector(".menu");
                menuBox.style.left = left + "px";
                menuBox.style.top = top + "px";
                menuBox.style.display = "block";
               
                arguments[0].preventDefault();
               
                menuDisplayed = true;
            }, false);
           
            window.addEventListener("click", function() {
                if(menuDisplayed == true){
                    menuBox.style.display = "none";
                }
            }, true);
        </script>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="menu-item">Add Node</div>
            <div class="menu-item">Delete Node</div>
            <div class="menu-item">Update Node</div>
        </div>
    </body>
</html>
""")
plot.add_tools(HoverTool(tooltips="""
        <div>
                </script>
                <span id="doc" style="font-size: 12px; font-weight: bold; color:green;">@lable_hover</span> 
                <br><span style="font-size: 12px; color: blue;">@label_hover_2</span>
                
        </div>
        
        """))


graph_renderer.node_renderer.data_source = source

graph_renderer.node_renderer.glyph = Circle(size='node_size', fill_color='node_color')
graph_renderer.node_renderer.hover_glyph = Circle(size=15, fill_color='yellow')

graph_renderer.edge_renderer.glyph = MultiLine(line_color="#000000", line_alpha=0.5, line_width=0.5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(line_color='red', line_width=1)
graph_renderer.edge_renderer.hover_glyph = MultiLine(line_color='deeppink', line_width=1)

graph_renderer.selection_policy = NodesAndLinkedEdges()
# graph_renderer.inspection_policy = EdgesAndLinkedNodes()

#Fix layout positions
graph_renderer.layout_provider = StaticLayoutProvider(graph_layout=new_pos)   
plot.renderers.append(graph_renderer)

#Below part is to Get node positions
x, y = zip(*graph_renderer.layout_provider.graph_layout.values())
x = list(x)
y = list(y)
x = dict(zip(G.nodes, x))
y= dict(zip(G.nodes, y))
nx.set_node_attributes(G,  x, name='x')
nx.set_node_attributes(G,  y, name='y')
node_source = ColumnDataSource(pd.DataFrame.from_dict({k:v for k,v in G.nodes(data=True)}))
plot.background_fill_color = 'beige'
plot.background_fill_alpha = 0.5
tab_1 = Panel(child=plot, title = "Lexical Chains")
tabs = Tabs(tabs=[tab_1], sizing_mode = 'stretch_both')
output_file('lexical_graph_2.html')
show(tabs)
...