You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by "Balachandar R.A." <ba...@gmail.com> on 2016/02/18 07:10:50 UTC
Cytoscape-qtip and zeppelin
I am trying reciprocate the example seen in the link
https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
extension for cytoscape, As a standalone code, this works. But, when I port
this code in zeppelin paragraph, I do not see the tooltip. Here is the
code I tested. Any hint will be highly appreciated. Thanks
%angular
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="
http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="
http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script src="
http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
"></script>
<script src="http://40.221.94.235/cytoscape-qtip.js"></script>
<div id="cy">
<style>
body {
font-family: helvetica;
font-size:
14px;
width: 100%;
height:
1000px;
}
#cy {
width: 100%;
height:
1000px;
position:
absolute;
left: 0;
top: 0;
z-index:
999;
}
h1 {
opacity:
0.5;
font-size:
1em;
}
</style>
<script>
$(function(){
var cy =
window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function(){
},
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(name)'
}
},
{
selector: 'edge',
style: {
'width': 1,
'line-color': '#aaa',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
});
// just use
the regular qtip api but on cy elements
cy.elements().qtip({
content: function(){ return 'Example qTip on ele ' + this.id() },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
});
</script>
regards
Bala
Re: Cytoscape-qtip and zeppelin
Posted by moon soo Lee <mo...@apache.org>.
Thanks for sharing!
On Tue, Feb 23, 2016 at 8:54 PM Balachandar R.A. <ba...@gmail.com>
wrote:
> Hi
>
> The below code snippet helped. I could see the tooltip now.
>
> cy2.on('mouseover', 'node', function(event) {
> var node = event.cyTarget;
> node.qtip({
> content: 'hello',
> show: {
> event: event.type,
> ready: true
> },
> hide: {
> event: 'mouseout unfocus'
> }
> }, event);
> });
>
>
> I have the below headers in the beginning of my paragraph
>
>
> <script src="
> https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.1/cytoscape.min.js
> "></script>
>
> <link rel="stylesheet" type="text/css" href="
> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>
> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
> <script src="
> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
> "></script>
> <script src="
> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
> "></script>
>
> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>
>
> Hope this helps
>
>
> regards
> Bala
>
>
>
> On 19 February 2016 at 01:59, Corneau Damien <co...@gmail.com> wrote:
>
>> I took a shot at it, and improved the code to make sure things would go
>> well.
>> However, I couldn't make it work.
>> All the libraries are included and both *qtip* and *cytoscape* are
>> working fine,
>> However *cytoscape.js-qtip *is not doing anything, even using `
>> cytoscape-qtip` in the console would throw an error
>>
>> Here is my code in case:
>>
>> %angular
>>
>> <div id="cy"></div>
>>
>> <style>
>> body {
>> font-family: helvetica;
>> font-size: 14px;
>> width: 100%;
>> height: 1000px;
>> }
>>
>> #cy {
>> width: 100%;
>> height: 400px;
>> z-index: 999;
>> }
>>
>> h1 {
>> opacity: 0.5;
>> font-size: 1em;
>> }
>> </style>
>>
>> <script>
>>
>>
>> //
>> // LOADING THE COMPONENT
>> //
>>
>> // Include the component css
>> if (!jQuery("link[href$='jquery.qtip.css']").length) {
>> var fileref=document.createElement("link");
>> fileref.setAttribute("rel", "stylesheet");
>> fileref.setAttribute("type", "text/css");
>> fileref.setAttribute("href", '//
>> cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.css');
>> if (typeof fileref!="undefined")
>> document.getElementsByTagName("head")[0].appendChild(fileref);
>> }
>>
>> // Remove some CSS from Zeppelin so that the component renders well
>> var id =
>> document.getElementById("cy").parentElement.getAttribute('id');
>> document.getElementById(id).style.overflow = "visible";
>>
>> // Load the js and render the component after
>> jQuery.when(
>> // Load the js
>> jQuery.getScript('//
>> cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.min.js',
>> function( data, textStatus, jqxhr ) {
>> console.log( jqxhr.status ); // 200
>> console.log( "Qtip Load was performed." );
>> }),
>> jQuery.getScript('//
>> cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.3/cytoscape.js', function(
>> data, textStatus, jqxhr ) {
>> console.log( jqxhr.status ); // 200
>> console.log( "Cytoscape Load was performed." );
>> }),
>> jQuery.getScript('//
>> cdn.rawgit.com/cytoscape/cytoscape.js-qtip/master/cytoscape-qtip.js',
>> function( data, textStatus, jqxhr ) {
>> console.log( jqxhr.status ); // 200
>> console.log( "CytoscapeQtip Load was performed." );
>> }),
>> jQuery("#cy").ready,
>> jQuery.Deferred(function( deferred ){
>> jQuery( deferred.resolve );
>> })
>> ).done(function(){
>> var cy = window.cy = cytoscape({
>> container: document.getElementById('cy'),
>> ready: function(){
>> console.log('ready yes');
>> },
>> style: [
>> {
>> selector: 'node',
>> style: {
>> 'background-color': '#666',
>> 'label': 'data(name)'
>> }
>> },
>> {
>> selector: 'edge',
>> style: {
>> 'width': 1,
>> 'line-color': '#aaa',
>> 'target-arrow-color': '#ccc',
>> 'target-arrow-shape': 'triangle'
>> }
>> }
>> ],
>> elements: {
>> nodes: [
>> { data: { id: 'j', name: 'Jerry' } },
>> { data: { id: 'e', name: 'Elaine' } },
>> { data: { id: 'k', name: 'Kramer' } },
>> { data: { id: 'g', name: 'George' } }
>> ],
>> edges: [
>> { data: { source: 'j', target: 'e' } },
>> { data: { source: 'j', target: 'k' } },
>> { data: { source: 'j', target: 'g' } },
>> { data: { source: 'e', target: 'j' } },
>> { data: { source: 'e', target: 'k' } },
>> { data: { source: 'k', target: 'j' } },
>> { data: { source: 'k', target: 'e' } },
>> { data: { source: 'k', target: 'g' } },
>> { data: { source: 'g', target: 'j' } }
>> ]
>> },
>> });
>> // just use the regular qtip api but on cy elements
>> cy.elements().qtip({
>> content: function(){ return 'Example qTip on ele ' + this.id() },
>> position: {
>> my: 'top center',
>> at: 'bottom center'
>> },
>> style: {
>> classes: 'qtip-bootstrap',
>> tip: {
>> width: 16,
>> height: 8
>> }
>> }
>> });
>> });
>> </script>
>>
>> On Thu, Feb 18, 2016 at 9:50 AM, moon soo Lee <mo...@apache.org> wrote:
>>
>>> I tried a little more to make the qtip work, but no luck so for.
>>> Please share once you made it work.
>>>
>>> Thanks,
>>> moon
>>>
>>>
>>> On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <
>>> balachandar.ra@gmail.com> wrote:
>>>
>>>> Hi moon,
>>>> Thanks for the effort. I will check that. Initially, I just copied the
>>>> example demo code in a plain notepad and saved it as .html. When I opened
>>>> this file in the browser, I could see the tooltip exactly as explained in
>>>> the github sources.
>>>>
>>>> Now, when I ported this code in zeppelin, i could not see it working.
>>>> Perhaps, if you can replicate what I have done, you may observe few more
>>>> information. Nevertheless, I will come back to you once I see the error in
>>>> my side.
>>>>
>>>> Thanks
>>>> Bala
>>>>
>>>> On 18 February 2016 at 14:29, moon soo Lee <mo...@apache.org> wrote:
>>>>
>>>>> With proper cytoscape-qtip address, i'm getting following error.
>>>>>
>>>>> Uncaught TypeError: cy.elements(...).qtip is not a function
>>>>>
>>>>> You can also see error in Developer console in your browser, when you
>>>>> run zeppelin-web in devmode.
>>>>>
>>>>> (see Run the application in dev mode
>>>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
>>>>> for devmode)
>>>>>
>>>>> Thanks,
>>>>> moon
>>>>>
>>>>>
>>>>> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
>>>>> balachandar.ra@gmail.com> wrote:
>>>>>
>>>>>> Hi moon,
>>>>>>
>>>>>> My bad. Here is the link
>>>>>> https://github.com/cytoscape/cytoscape.js-qtip.
>>>>>>
>>>>>> The whole cytoscape-qtip project is hosted here and you can find the
>>>>>> js file in the below link
>>>>>>
>>>>>>
>>>>>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>>>>>
>>>>>> regards
>>>>>> Bala
>>>>>>
>>>>>>
>>>>>> Thanks
>>>>>>
>>>>>> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>>>>>>
>>>>>>> Hi Bala,
>>>>>>>
>>>>>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>>>>>> accessible. Could you check if it is correct address?
>>>>>>>
>>>>>>> Thanks,
>>>>>>> moon
>>>>>>>
>>>>>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>>>>>> balachandar.ra@gmail.com> wrote:
>>>>>>>
>>>>>>>> I am trying reciprocate the example seen in the link
>>>>>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip
>>>>>>>> GUI extension for cytoscape, As a standalone code, this works. But, when I
>>>>>>>> port this code in zeppelin paragraph, I do not see the tooltip. Here is
>>>>>>>> the code I tested. Any hint will be highly appreciated. Thanks
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> %angular
>>>>>>>>
>>>>>>>> <meta name="viewport" content="width=device-width,
>>>>>>>> user-scalable=no, initial-scale=1, maximum-scale=1">
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> <link rel="stylesheet" type="text/css" href="
>>>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> <script src="
>>>>>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>>>>>> "></script>
>>>>>>>>
>>>>>>>> <script src="
>>>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>>>>>> "></script>
>>>>>>>>
>>>>>>>> <script src="
>>>>>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>>>>>> "></script>
>>>>>>>>
>>>>>>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>>>>>>
>>>>>>>> <div id="cy">
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> <style>
>>>>>>>>
>>>>>>>> body {
>>>>>>>>
>>>>>>>>
>>>>>>>> font-family: helvetica;
>>>>>>>>
>>>>>>>>
>>>>>>>> font-size: 14px;
>>>>>>>>
>>>>>>>>
>>>>>>>> width: 100%;
>>>>>>>>
>>>>>>>>
>>>>>>>> height: 1000px;
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> #cy {
>>>>>>>>
>>>>>>>>
>>>>>>>> width: 100%;
>>>>>>>>
>>>>>>>>
>>>>>>>> height: 1000px;
>>>>>>>>
>>>>>>>>
>>>>>>>> position: absolute;
>>>>>>>>
>>>>>>>>
>>>>>>>> left: 0;
>>>>>>>>
>>>>>>>>
>>>>>>>> top: 0;
>>>>>>>>
>>>>>>>>
>>>>>>>> z-index: 999;
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> h1 {
>>>>>>>>
>>>>>>>>
>>>>>>>> opacity: 0.5;
>>>>>>>>
>>>>>>>> font-size:
>>>>>>>> 1em;
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> </style>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> <script>
>>>>>>>>
>>>>>>>> $(function(){
>>>>>>>>
>>>>>>>> var
>>>>>>>> cy = window.cy = cytoscape({
>>>>>>>>
>>>>>>>>
>>>>>>>> container: document.getElementById('cy'),
>>>>>>>>
>>>>>>>>
>>>>>>>> ready: function(){
>>>>>>>>
>>>>>>>>
>>>>>>>> },
>>>>>>>>
>>>>>>>>
>>>>>>>> style: [ // the stylesheet for the graph
>>>>>>>>
>>>>>>>> {
>>>>>>>>
>>>>>>>> selector: 'node',
>>>>>>>>
>>>>>>>> style: {
>>>>>>>>
>>>>>>>> 'background-color': '#666',
>>>>>>>>
>>>>>>>> 'label': 'data(name)'
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> },
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> {
>>>>>>>>
>>>>>>>> selector: 'edge',
>>>>>>>>
>>>>>>>> style: {
>>>>>>>>
>>>>>>>> 'width': 1,
>>>>>>>>
>>>>>>>> 'line-color': '#aaa',
>>>>>>>>
>>>>>>>> 'target-arrow-color': '#ccc',
>>>>>>>>
>>>>>>>> 'target-arrow-shape': 'triangle'
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> ],
>>>>>>>>
>>>>>>>>
>>>>>>>> elements: {
>>>>>>>>
>>>>>>>>
>>>>>>>> nodes: [
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { id: 'g', name: 'George' } }
>>>>>>>>
>>>>>>>>
>>>>>>>> ],
>>>>>>>>
>>>>>>>>
>>>>>>>> edges: [
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'j', target: 'e' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'j', target: 'k' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'j', target: 'g' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'e', target: 'j' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'e', target: 'k' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'k', target: 'j' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'k', target: 'e' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'k', target: 'g' } },
>>>>>>>>
>>>>>>>>
>>>>>>>> { data: { source: 'g', target: 'j' } }
>>>>>>>>
>>>>>>>>
>>>>>>>> ]
>>>>>>>>
>>>>>>>>
>>>>>>>> },
>>>>>>>>
>>>>>>>> });
>>>>>>>>
>>>>>>>> //
>>>>>>>> just use the regular qtip api but on cy elements
>>>>>>>>
>>>>>>>>
>>>>>>>> cy.elements().qtip({
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>>>>>
>>>>>>>>
>>>>>>>> position: {
>>>>>>>>
>>>>>>>>
>>>>>>>> my: 'top center',
>>>>>>>>
>>>>>>>>
>>>>>>>> at: 'bottom center'
>>>>>>>>
>>>>>>>>
>>>>>>>> },
>>>>>>>>
>>>>>>>>
>>>>>>>> style: {
>>>>>>>>
>>>>>>>>
>>>>>>>> classes: 'qtip-bootstrap',
>>>>>>>>
>>>>>>>>
>>>>>>>> tip: {
>>>>>>>>
>>>>>>>>
>>>>>>>> width: 16,
>>>>>>>>
>>>>>>>>
>>>>>>>> height: 8
>>>>>>>>
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> });
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> });
>>>>>>>>
>>>>>>>> </script>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> regards
>>>>>>>>
>>>>>>>> Bala
>>>>>>>>
>>>>>>>
>>>>>>
>>>>
>>
>
Re: Cytoscape-qtip and zeppelin
Posted by "Balachandar R.A." <ba...@gmail.com>.
Hi
The below code snippet helped. I could see the tooltip now.
cy2.on('mouseover', 'node', function(event) {
var node = event.cyTarget;
node.qtip({
content: 'hello',
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout unfocus'
}
}, event);
});
I have the below headers in the beginning of my paragraph
<script src="
https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.1/cytoscape.min.js
"></script>
<link rel="stylesheet" type="text/css" href="
http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="
http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script src="
http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
"></script>
<script src="http://40.221.94.235/cytoscape-qtip.js"></script>
Hope this helps
regards
Bala
On 19 February 2016 at 01:59, Corneau Damien <co...@gmail.com> wrote:
> I took a shot at it, and improved the code to make sure things would go
> well.
> However, I couldn't make it work.
> All the libraries are included and both *qtip* and *cytoscape* are
> working fine,
> However *cytoscape.js-qtip *is not doing anything, even using `
> cytoscape-qtip` in the console would throw an error
>
> Here is my code in case:
>
> %angular
>
> <div id="cy"></div>
>
> <style>
> body {
> font-family: helvetica;
> font-size: 14px;
> width: 100%;
> height: 1000px;
> }
>
> #cy {
> width: 100%;
> height: 400px;
> z-index: 999;
> }
>
> h1 {
> opacity: 0.5;
> font-size: 1em;
> }
> </style>
>
> <script>
>
>
> //
> // LOADING THE COMPONENT
> //
>
> // Include the component css
> if (!jQuery("link[href$='jquery.qtip.css']").length) {
> var fileref=document.createElement("link");
> fileref.setAttribute("rel", "stylesheet");
> fileref.setAttribute("type", "text/css");
> fileref.setAttribute("href", '//
> cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.css');
> if (typeof fileref!="undefined")
> document.getElementsByTagName("head")[0].appendChild(fileref);
> }
>
> // Remove some CSS from Zeppelin so that the component renders well
> var id =
> document.getElementById("cy").parentElement.getAttribute('id');
> document.getElementById(id).style.overflow = "visible";
>
> // Load the js and render the component after
> jQuery.when(
> // Load the js
> jQuery.getScript('//
> cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.min.js',
> function( data, textStatus, jqxhr ) {
> console.log( jqxhr.status ); // 200
> console.log( "Qtip Load was performed." );
> }),
> jQuery.getScript('//
> cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.3/cytoscape.js', function(
> data, textStatus, jqxhr ) {
> console.log( jqxhr.status ); // 200
> console.log( "Cytoscape Load was performed." );
> }),
> jQuery.getScript('//
> cdn.rawgit.com/cytoscape/cytoscape.js-qtip/master/cytoscape-qtip.js',
> function( data, textStatus, jqxhr ) {
> console.log( jqxhr.status ); // 200
> console.log( "CytoscapeQtip Load was performed." );
> }),
> jQuery("#cy").ready,
> jQuery.Deferred(function( deferred ){
> jQuery( deferred.resolve );
> })
> ).done(function(){
> var cy = window.cy = cytoscape({
> container: document.getElementById('cy'),
> ready: function(){
> console.log('ready yes');
> },
> style: [
> {
> selector: 'node',
> style: {
> 'background-color': '#666',
> 'label': 'data(name)'
> }
> },
> {
> selector: 'edge',
> style: {
> 'width': 1,
> 'line-color': '#aaa',
> 'target-arrow-color': '#ccc',
> 'target-arrow-shape': 'triangle'
> }
> }
> ],
> elements: {
> nodes: [
> { data: { id: 'j', name: 'Jerry' } },
> { data: { id: 'e', name: 'Elaine' } },
> { data: { id: 'k', name: 'Kramer' } },
> { data: { id: 'g', name: 'George' } }
> ],
> edges: [
> { data: { source: 'j', target: 'e' } },
> { data: { source: 'j', target: 'k' } },
> { data: { source: 'j', target: 'g' } },
> { data: { source: 'e', target: 'j' } },
> { data: { source: 'e', target: 'k' } },
> { data: { source: 'k', target: 'j' } },
> { data: { source: 'k', target: 'e' } },
> { data: { source: 'k', target: 'g' } },
> { data: { source: 'g', target: 'j' } }
> ]
> },
> });
> // just use the regular qtip api but on cy elements
> cy.elements().qtip({
> content: function(){ return 'Example qTip on ele ' + this.id() },
> position: {
> my: 'top center',
> at: 'bottom center'
> },
> style: {
> classes: 'qtip-bootstrap',
> tip: {
> width: 16,
> height: 8
> }
> }
> });
> });
> </script>
>
> On Thu, Feb 18, 2016 at 9:50 AM, moon soo Lee <mo...@apache.org> wrote:
>
>> I tried a little more to make the qtip work, but no luck so for.
>> Please share once you made it work.
>>
>> Thanks,
>> moon
>>
>>
>> On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <
>> balachandar.ra@gmail.com> wrote:
>>
>>> Hi moon,
>>> Thanks for the effort. I will check that. Initially, I just copied the
>>> example demo code in a plain notepad and saved it as .html. When I opened
>>> this file in the browser, I could see the tooltip exactly as explained in
>>> the github sources.
>>>
>>> Now, when I ported this code in zeppelin, i could not see it working.
>>> Perhaps, if you can replicate what I have done, you may observe few more
>>> information. Nevertheless, I will come back to you once I see the error in
>>> my side.
>>>
>>> Thanks
>>> Bala
>>>
>>> On 18 February 2016 at 14:29, moon soo Lee <mo...@apache.org> wrote:
>>>
>>>> With proper cytoscape-qtip address, i'm getting following error.
>>>>
>>>> Uncaught TypeError: cy.elements(...).qtip is not a function
>>>>
>>>> You can also see error in Developer console in your browser, when you
>>>> run zeppelin-web in devmode.
>>>>
>>>> (see Run the application in dev mode
>>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
>>>> for devmode)
>>>>
>>>> Thanks,
>>>> moon
>>>>
>>>>
>>>> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
>>>> balachandar.ra@gmail.com> wrote:
>>>>
>>>>> Hi moon,
>>>>>
>>>>> My bad. Here is the link
>>>>> https://github.com/cytoscape/cytoscape.js-qtip.
>>>>>
>>>>> The whole cytoscape-qtip project is hosted here and you can find the
>>>>> js file in the below link
>>>>>
>>>>>
>>>>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>>>>
>>>>> regards
>>>>> Bala
>>>>>
>>>>>
>>>>> Thanks
>>>>>
>>>>> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>>>>>
>>>>>> Hi Bala,
>>>>>>
>>>>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>>>>> accessible. Could you check if it is correct address?
>>>>>>
>>>>>> Thanks,
>>>>>> moon
>>>>>>
>>>>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>>>>> balachandar.ra@gmail.com> wrote:
>>>>>>
>>>>>>> I am trying reciprocate the example seen in the link
>>>>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>>>>>> extension for cytoscape, As a standalone code, this works. But, when I port
>>>>>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>>>>>> code I tested. Any hint will be highly appreciated. Thanks
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> %angular
>>>>>>>
>>>>>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>>>>>> initial-scale=1, maximum-scale=1">
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <link rel="stylesheet" type="text/css" href="
>>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <script src="
>>>>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>>>>> "></script>
>>>>>>>
>>>>>>> <script src="
>>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>>>>> "></script>
>>>>>>>
>>>>>>> <script src="
>>>>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>>>>> "></script>
>>>>>>>
>>>>>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>>>>>
>>>>>>> <div id="cy">
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <style>
>>>>>>>
>>>>>>> body {
>>>>>>>
>>>>>>>
>>>>>>> font-family: helvetica;
>>>>>>>
>>>>>>>
>>>>>>> font-size: 14px;
>>>>>>>
>>>>>>>
>>>>>>> width: 100%;
>>>>>>>
>>>>>>>
>>>>>>> height: 1000px;
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> #cy {
>>>>>>>
>>>>>>>
>>>>>>> width: 100%;
>>>>>>>
>>>>>>>
>>>>>>> height: 1000px;
>>>>>>>
>>>>>>>
>>>>>>> position: absolute;
>>>>>>>
>>>>>>>
>>>>>>> left: 0;
>>>>>>>
>>>>>>> top:
>>>>>>> 0;
>>>>>>>
>>>>>>>
>>>>>>> z-index: 999;
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> h1 {
>>>>>>>
>>>>>>>
>>>>>>> opacity: 0.5;
>>>>>>>
>>>>>>> font-size:
>>>>>>> 1em;
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> </style>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <script>
>>>>>>>
>>>>>>> $(function(){
>>>>>>>
>>>>>>> var
>>>>>>> cy = window.cy = cytoscape({
>>>>>>>
>>>>>>>
>>>>>>> container: document.getElementById('cy'),
>>>>>>>
>>>>>>>
>>>>>>> ready: function(){
>>>>>>>
>>>>>>>
>>>>>>> },
>>>>>>>
>>>>>>>
>>>>>>> style: [ // the stylesheet for the graph
>>>>>>>
>>>>>>> {
>>>>>>>
>>>>>>> selector: 'node',
>>>>>>>
>>>>>>> style: {
>>>>>>>
>>>>>>> 'background-color': '#666',
>>>>>>>
>>>>>>> 'label': 'data(name)'
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> },
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> {
>>>>>>>
>>>>>>> selector: 'edge',
>>>>>>>
>>>>>>> style: {
>>>>>>>
>>>>>>> 'width': 1,
>>>>>>>
>>>>>>> 'line-color': '#aaa',
>>>>>>>
>>>>>>> 'target-arrow-color': '#ccc',
>>>>>>>
>>>>>>> 'target-arrow-shape': 'triangle'
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> ],
>>>>>>>
>>>>>>>
>>>>>>> elements: {
>>>>>>>
>>>>>>>
>>>>>>> nodes: [
>>>>>>>
>>>>>>>
>>>>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { id: 'g', name: 'George' } }
>>>>>>>
>>>>>>>
>>>>>>> ],
>>>>>>>
>>>>>>>
>>>>>>> edges: [
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'j', target: 'e' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'j', target: 'k' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'j', target: 'g' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'e', target: 'j' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'e', target: 'k' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'k', target: 'j' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'k', target: 'e' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'k', target: 'g' } },
>>>>>>>
>>>>>>>
>>>>>>> { data: { source: 'g', target: 'j' } }
>>>>>>>
>>>>>>>
>>>>>>> ]
>>>>>>>
>>>>>>>
>>>>>>> },
>>>>>>>
>>>>>>> });
>>>>>>>
>>>>>>> //
>>>>>>> just use the regular qtip api but on cy elements
>>>>>>>
>>>>>>>
>>>>>>> cy.elements().qtip({
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>>>>
>>>>>>>
>>>>>>> position: {
>>>>>>>
>>>>>>>
>>>>>>> my: 'top center',
>>>>>>>
>>>>>>>
>>>>>>> at: 'bottom center'
>>>>>>>
>>>>>>>
>>>>>>> },
>>>>>>>
>>>>>>>
>>>>>>> style: {
>>>>>>>
>>>>>>>
>>>>>>> classes: 'qtip-bootstrap',
>>>>>>>
>>>>>>>
>>>>>>> tip: {
>>>>>>>
>>>>>>>
>>>>>>> width: 16,
>>>>>>>
>>>>>>>
>>>>>>> height: 8
>>>>>>>
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>>
>>>>>>> }
>>>>>>>
>>>>>>> });
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> });
>>>>>>>
>>>>>>> </script>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> regards
>>>>>>>
>>>>>>> Bala
>>>>>>>
>>>>>>
>>>>>
>>>
>
Re: Cytoscape-qtip and zeppelin
Posted by Corneau Damien <co...@gmail.com>.
I took a shot at it, and improved the code to make sure things would go
well.
However, I couldn't make it work.
All the libraries are included and both *qtip* and *cytoscape* are working
fine,
However *cytoscape.js-qtip *is not doing anything, even using `
cytoscape-qtip` in the console would throw an error
Here is my code in case:
%angular
<div id="cy"></div>
<style>
body {
font-family: helvetica;
font-size: 14px;
width: 100%;
height: 1000px;
}
#cy {
width: 100%;
height: 400px;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
//
// LOADING THE COMPONENT
//
// Include the component css
if (!jQuery("link[href$='jquery.qtip.css']").length) {
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", '//
cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.css');
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
// Remove some CSS from Zeppelin so that the component renders well
var id = document.getElementById("cy").parentElement.getAttribute('id');
document.getElementById(id).style.overflow = "visible";
// Load the js and render the component after
jQuery.when(
// Load the js
jQuery.getScript('//
cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.min.js',
function( data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "Qtip Load was performed." );
}),
jQuery.getScript('//
cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.3/cytoscape.js', function(
data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "Cytoscape Load was performed." );
}),
jQuery.getScript('//
cdn.rawgit.com/cytoscape/cytoscape.js-qtip/master/cytoscape-qtip.js',
function( data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "CytoscapeQtip Load was performed." );
}),
jQuery("#cy").ready,
jQuery.Deferred(function( deferred ){
jQuery( deferred.resolve );
})
).done(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function(){
console.log('ready yes');
},
style: [
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(name)'
}
},
{
selector: 'edge',
style: {
'width': 1,
'line-color': '#aaa',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
});
// just use the regular qtip api but on cy elements
cy.elements().qtip({
content: function(){ return 'Example qTip on ele ' + this.id() },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
});
</script>
On Thu, Feb 18, 2016 at 9:50 AM, moon soo Lee <mo...@apache.org> wrote:
> I tried a little more to make the qtip work, but no luck so for.
> Please share once you made it work.
>
> Thanks,
> moon
>
>
> On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <ba...@gmail.com>
> wrote:
>
>> Hi moon,
>> Thanks for the effort. I will check that. Initially, I just copied the
>> example demo code in a plain notepad and saved it as .html. When I opened
>> this file in the browser, I could see the tooltip exactly as explained in
>> the github sources.
>>
>> Now, when I ported this code in zeppelin, i could not see it working.
>> Perhaps, if you can replicate what I have done, you may observe few more
>> information. Nevertheless, I will come back to you once I see the error in
>> my side.
>>
>> Thanks
>> Bala
>>
>> On 18 February 2016 at 14:29, moon soo Lee <mo...@apache.org> wrote:
>>
>>> With proper cytoscape-qtip address, i'm getting following error.
>>>
>>> Uncaught TypeError: cy.elements(...).qtip is not a function
>>>
>>> You can also see error in Developer console in your browser, when you
>>> run zeppelin-web in devmode.
>>>
>>> (see Run the application in dev mode
>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
>>> for devmode)
>>>
>>> Thanks,
>>> moon
>>>
>>>
>>> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
>>> balachandar.ra@gmail.com> wrote:
>>>
>>>> Hi moon,
>>>>
>>>> My bad. Here is the link
>>>> https://github.com/cytoscape/cytoscape.js-qtip.
>>>>
>>>> The whole cytoscape-qtip project is hosted here and you can find the js
>>>> file in the below link
>>>>
>>>>
>>>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>>>
>>>> regards
>>>> Bala
>>>>
>>>>
>>>> Thanks
>>>>
>>>> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>>>>
>>>>> Hi Bala,
>>>>>
>>>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>>>> accessible. Could you check if it is correct address?
>>>>>
>>>>> Thanks,
>>>>> moon
>>>>>
>>>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>>>> balachandar.ra@gmail.com> wrote:
>>>>>
>>>>>> I am trying reciprocate the example seen in the link
>>>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>>>>> extension for cytoscape, As a standalone code, this works. But, when I port
>>>>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>>>>> code I tested. Any hint will be highly appreciated. Thanks
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> %angular
>>>>>>
>>>>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>>>>> initial-scale=1, maximum-scale=1">
>>>>>>
>>>>>>
>>>>>>
>>>>>> <link rel="stylesheet" type="text/css" href="
>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>>>>
>>>>>>
>>>>>>
>>>>>> <script src="
>>>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="
>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="
>>>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>>>>
>>>>>> <div id="cy">
>>>>>>
>>>>>>
>>>>>>
>>>>>> <style>
>>>>>>
>>>>>> body {
>>>>>>
>>>>>>
>>>>>> font-family: helvetica;
>>>>>>
>>>>>>
>>>>>> font-size: 14px;
>>>>>>
>>>>>>
>>>>>> width: 100%;
>>>>>>
>>>>>>
>>>>>> height: 1000px;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> #cy {
>>>>>>
>>>>>>
>>>>>> width: 100%;
>>>>>>
>>>>>>
>>>>>> height: 1000px;
>>>>>>
>>>>>>
>>>>>> position: absolute;
>>>>>>
>>>>>> left:
>>>>>> 0;
>>>>>>
>>>>>> top:
>>>>>> 0;
>>>>>>
>>>>>>
>>>>>> z-index: 999;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> h1 {
>>>>>>
>>>>>>
>>>>>> opacity: 0.5;
>>>>>>
>>>>>> font-size:
>>>>>> 1em;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> </style>
>>>>>>
>>>>>>
>>>>>>
>>>>>> <script>
>>>>>>
>>>>>> $(function(){
>>>>>>
>>>>>> var
>>>>>> cy = window.cy = cytoscape({
>>>>>>
>>>>>>
>>>>>> container: document.getElementById('cy'),
>>>>>>
>>>>>>
>>>>>> ready: function(){
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>> style: [ // the stylesheet for the graph
>>>>>>
>>>>>> {
>>>>>>
>>>>>> selector: 'node',
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>> 'background-color': '#666',
>>>>>>
>>>>>> 'label': 'data(name)'
>>>>>>
>>>>>> }
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>>
>>>>>> {
>>>>>>
>>>>>> selector: 'edge',
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>> 'width': 1,
>>>>>>
>>>>>> 'line-color': '#aaa',
>>>>>>
>>>>>> 'target-arrow-color': '#ccc',
>>>>>>
>>>>>> 'target-arrow-shape': 'triangle'
>>>>>>
>>>>>> }
>>>>>>
>>>>>> }
>>>>>>
>>>>>> ],
>>>>>>
>>>>>>
>>>>>> elements: {
>>>>>>
>>>>>>
>>>>>> nodes: [
>>>>>>
>>>>>>
>>>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'g', name: 'George' } }
>>>>>>
>>>>>>
>>>>>> ],
>>>>>>
>>>>>>
>>>>>> edges: [
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'e' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'k' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'g' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'e', target: 'j' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'e', target: 'k' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'j' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'e' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'g' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'g', target: 'j' } }
>>>>>>
>>>>>>
>>>>>> ]
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>> });
>>>>>>
>>>>>> //
>>>>>> just use the regular qtip api but on cy elements
>>>>>>
>>>>>>
>>>>>> cy.elements().qtip({
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>>>
>>>>>>
>>>>>> position: {
>>>>>>
>>>>>>
>>>>>> my: 'top center',
>>>>>>
>>>>>>
>>>>>> at: 'bottom center'
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>>
>>>>>> classes: 'qtip-bootstrap',
>>>>>>
>>>>>>
>>>>>> tip: {
>>>>>>
>>>>>>
>>>>>> width: 16,
>>>>>>
>>>>>>
>>>>>> height: 8
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>> });
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> });
>>>>>>
>>>>>> </script>
>>>>>>
>>>>>>
>>>>>>
>>>>>> regards
>>>>>>
>>>>>> Bala
>>>>>>
>>>>>
>>>>
>>
Re: Cytoscape-qtip and zeppelin
Posted by moon soo Lee <mo...@apache.org>.
I tried a little more to make the qtip work, but no luck so for.
Please share once you made it work.
Thanks,
moon
On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <ba...@gmail.com>
wrote:
> Hi moon,
> Thanks for the effort. I will check that. Initially, I just copied the
> example demo code in a plain notepad and saved it as .html. When I opened
> this file in the browser, I could see the tooltip exactly as explained in
> the github sources.
>
> Now, when I ported this code in zeppelin, i could not see it working.
> Perhaps, if you can replicate what I have done, you may observe few more
> information. Nevertheless, I will come back to you once I see the error in
> my side.
>
> Thanks
> Bala
>
> On 18 February 2016 at 14:29, moon soo Lee <mo...@apache.org> wrote:
>
>> With proper cytoscape-qtip address, i'm getting following error.
>>
>> Uncaught TypeError: cy.elements(...).qtip is not a function
>>
>> You can also see error in Developer console in your browser, when you run
>> zeppelin-web in devmode.
>>
>> (see Run the application in dev mode
>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
>> for devmode)
>>
>> Thanks,
>> moon
>>
>>
>> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
>> balachandar.ra@gmail.com> wrote:
>>
>>> Hi moon,
>>>
>>> My bad. Here is the link https://github.com/cytoscape/cytoscape.js-qtip
>>> .
>>>
>>> The whole cytoscape-qtip project is hosted here and you can find the js
>>> file in the below link
>>>
>>>
>>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>>
>>> regards
>>> Bala
>>>
>>>
>>> Thanks
>>>
>>> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>>>
>>>> Hi Bala,
>>>>
>>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>>> accessible. Could you check if it is correct address?
>>>>
>>>> Thanks,
>>>> moon
>>>>
>>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>>> balachandar.ra@gmail.com> wrote:
>>>>
>>>>> I am trying reciprocate the example seen in the link
>>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>>>> extension for cytoscape, As a standalone code, this works. But, when I port
>>>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>>>> code I tested. Any hint will be highly appreciated. Thanks
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> %angular
>>>>>
>>>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>>>> initial-scale=1, maximum-scale=1">
>>>>>
>>>>>
>>>>>
>>>>> <link rel="stylesheet" type="text/css" href="
>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>>>
>>>>>
>>>>>
>>>>> <script src="
>>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>>> "></script>
>>>>>
>>>>> <script src="
>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>>> "></script>
>>>>>
>>>>> <script src="
>>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>>> "></script>
>>>>>
>>>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>>>
>>>>> <div id="cy">
>>>>>
>>>>>
>>>>>
>>>>> <style>
>>>>>
>>>>> body {
>>>>>
>>>>>
>>>>> font-family: helvetica;
>>>>>
>>>>>
>>>>> font-size: 14px;
>>>>>
>>>>> width:
>>>>> 100%;
>>>>>
>>>>>
>>>>> height: 1000px;
>>>>>
>>>>> }
>>>>>
>>>>> #cy {
>>>>>
>>>>> width:
>>>>> 100%;
>>>>>
>>>>>
>>>>> height: 1000px;
>>>>>
>>>>>
>>>>> position: absolute;
>>>>>
>>>>> left:
>>>>> 0;
>>>>>
>>>>> top: 0;
>>>>>
>>>>>
>>>>> z-index: 999;
>>>>>
>>>>> }
>>>>>
>>>>> h1 {
>>>>>
>>>>>
>>>>> opacity: 0.5;
>>>>>
>>>>> font-size:
>>>>> 1em;
>>>>>
>>>>> }
>>>>>
>>>>> </style>
>>>>>
>>>>>
>>>>>
>>>>> <script>
>>>>>
>>>>> $(function(){
>>>>>
>>>>> var cy
>>>>> = window.cy = cytoscape({
>>>>>
>>>>>
>>>>> container: document.getElementById('cy'),
>>>>>
>>>>>
>>>>> ready: function(){
>>>>>
>>>>>
>>>>> },
>>>>>
>>>>>
>>>>> style: [ // the stylesheet for the graph
>>>>>
>>>>> {
>>>>>
>>>>> selector: 'node',
>>>>>
>>>>> style: {
>>>>>
>>>>> 'background-color': '#666',
>>>>>
>>>>> 'label': 'data(name)'
>>>>>
>>>>> }
>>>>>
>>>>> },
>>>>>
>>>>>
>>>>>
>>>>> {
>>>>>
>>>>> selector: 'edge',
>>>>>
>>>>> style: {
>>>>>
>>>>> 'width': 1,
>>>>>
>>>>> 'line-color': '#aaa',
>>>>>
>>>>> 'target-arrow-color': '#ccc',
>>>>>
>>>>> 'target-arrow-shape': 'triangle'
>>>>>
>>>>> }
>>>>>
>>>>> }
>>>>>
>>>>> ],
>>>>>
>>>>>
>>>>> elements: {
>>>>>
>>>>>
>>>>> nodes: [
>>>>>
>>>>>
>>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>>
>>>>>
>>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>>
>>>>>
>>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>>
>>>>>
>>>>> { data: { id: 'g', name: 'George' } }
>>>>>
>>>>>
>>>>> ],
>>>>>
>>>>>
>>>>> edges: [
>>>>>
>>>>>
>>>>> { data: { source: 'j', target: 'e' } },
>>>>>
>>>>>
>>>>> { data: { source: 'j', target: 'k' } },
>>>>>
>>>>>
>>>>> { data: { source: 'j', target: 'g' } },
>>>>>
>>>>>
>>>>> { data: { source: 'e', target: 'j' } },
>>>>>
>>>>>
>>>>> { data: { source: 'e', target: 'k' } },
>>>>>
>>>>>
>>>>> { data: { source: 'k', target: 'j' } },
>>>>>
>>>>>
>>>>> { data: { source: 'k', target: 'e' } },
>>>>>
>>>>>
>>>>> { data: { source: 'k', target: 'g' } },
>>>>>
>>>>>
>>>>> { data: { source: 'g', target: 'j' } }
>>>>>
>>>>>
>>>>> ]
>>>>>
>>>>>
>>>>> },
>>>>>
>>>>> });
>>>>>
>>>>> //
>>>>> just use the regular qtip api but on cy elements
>>>>>
>>>>>
>>>>> cy.elements().qtip({
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>>
>>>>>
>>>>> position: {
>>>>>
>>>>>
>>>>> my: 'top center',
>>>>>
>>>>>
>>>>> at: 'bottom center'
>>>>>
>>>>>
>>>>> },
>>>>>
>>>>> style:
>>>>> {
>>>>>
>>>>>
>>>>> classes: 'qtip-bootstrap',
>>>>>
>>>>>
>>>>> tip: {
>>>>>
>>>>>
>>>>> width: 16,
>>>>>
>>>>>
>>>>> height: 8
>>>>>
>>>>>
>>>>> }
>>>>>
>>>>>
>>>>> }
>>>>>
>>>>> });
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> });
>>>>>
>>>>> </script>
>>>>>
>>>>>
>>>>>
>>>>> regards
>>>>>
>>>>> Bala
>>>>>
>>>>
>>>
>
Re: Cytoscape-qtip and zeppelin
Posted by "Balachandar R.A." <ba...@gmail.com>.
Hi moon,
Thanks for the effort. I will check that. Initially, I just copied the
example demo code in a plain notepad and saved it as .html. When I opened
this file in the browser, I could see the tooltip exactly as explained in
the github sources.
Now, when I ported this code in zeppelin, i could not see it working.
Perhaps, if you can replicate what I have done, you may observe few more
information. Nevertheless, I will come back to you once I see the error in
my side.
Thanks
Bala
On 18 February 2016 at 14:29, moon soo Lee <mo...@apache.org> wrote:
> With proper cytoscape-qtip address, i'm getting following error.
>
> Uncaught TypeError: cy.elements(...).qtip is not a function
>
> You can also see error in Developer console in your browser, when you run
> zeppelin-web in devmode.
>
> (see Run the application in dev mode
> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
> for devmode)
>
> Thanks,
> moon
>
>
> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
> balachandar.ra@gmail.com> wrote:
>
>> Hi moon,
>>
>> My bad. Here is the link https://github.com/cytoscape/cytoscape.js-qtip.
>>
>> The whole cytoscape-qtip project is hosted here and you can find the js
>> file in the below link
>>
>>
>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>
>> regards
>> Bala
>>
>>
>> Thanks
>>
>> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>>
>>> Hi Bala,
>>>
>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>> accessible. Could you check if it is correct address?
>>>
>>> Thanks,
>>> moon
>>>
>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>> balachandar.ra@gmail.com> wrote:
>>>
>>>> I am trying reciprocate the example seen in the link
>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>>> extension for cytoscape, As a standalone code, this works. But, when I port
>>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>>> code I tested. Any hint will be highly appreciated. Thanks
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> %angular
>>>>
>>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>>> initial-scale=1, maximum-scale=1">
>>>>
>>>>
>>>>
>>>> <link rel="stylesheet" type="text/css" href="
>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>>
>>>>
>>>>
>>>> <script src="
>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>> "></script>
>>>>
>>>> <script src="
>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>> "></script>
>>>>
>>>> <script src="
>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>> "></script>
>>>>
>>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>>
>>>> <div id="cy">
>>>>
>>>>
>>>>
>>>> <style>
>>>>
>>>> body {
>>>>
>>>>
>>>> font-family: helvetica;
>>>>
>>>>
>>>> font-size: 14px;
>>>>
>>>> width:
>>>> 100%;
>>>>
>>>> height:
>>>> 1000px;
>>>>
>>>> }
>>>>
>>>> #cy {
>>>>
>>>> width:
>>>> 100%;
>>>>
>>>> height:
>>>> 1000px;
>>>>
>>>>
>>>> position: absolute;
>>>>
>>>> left: 0;
>>>>
>>>> top: 0;
>>>>
>>>>
>>>> z-index: 999;
>>>>
>>>> }
>>>>
>>>> h1 {
>>>>
>>>>
>>>> opacity: 0.5;
>>>>
>>>> font-size:
>>>> 1em;
>>>>
>>>> }
>>>>
>>>> </style>
>>>>
>>>>
>>>>
>>>> <script>
>>>>
>>>> $(function(){
>>>>
>>>> var cy
>>>> = window.cy = cytoscape({
>>>>
>>>>
>>>> container: document.getElementById('cy'),
>>>>
>>>>
>>>> ready: function(){
>>>>
>>>>
>>>> },
>>>>
>>>>
>>>> style: [ // the stylesheet for the graph
>>>>
>>>> {
>>>>
>>>> selector: 'node',
>>>>
>>>> style: {
>>>>
>>>> 'background-color': '#666',
>>>>
>>>> 'label': 'data(name)'
>>>>
>>>> }
>>>>
>>>> },
>>>>
>>>>
>>>>
>>>> {
>>>>
>>>> selector: 'edge',
>>>>
>>>> style: {
>>>>
>>>> 'width': 1,
>>>>
>>>> 'line-color': '#aaa',
>>>>
>>>> 'target-arrow-color': '#ccc',
>>>>
>>>> 'target-arrow-shape': 'triangle'
>>>>
>>>> }
>>>>
>>>> }
>>>>
>>>> ],
>>>>
>>>>
>>>> elements: {
>>>>
>>>>
>>>> nodes: [
>>>>
>>>>
>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>
>>>>
>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>
>>>>
>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>
>>>>
>>>> { data: { id: 'g', name: 'George' } }
>>>>
>>>>
>>>> ],
>>>>
>>>>
>>>> edges: [
>>>>
>>>>
>>>> { data: { source: 'j', target: 'e' } },
>>>>
>>>>
>>>> { data: { source: 'j', target: 'k' } },
>>>>
>>>>
>>>> { data: { source: 'j', target: 'g' } },
>>>>
>>>>
>>>> { data: { source: 'e', target: 'j' } },
>>>>
>>>>
>>>> { data: { source: 'e', target: 'k' } },
>>>>
>>>>
>>>> { data: { source: 'k', target: 'j' } },
>>>>
>>>>
>>>> { data: { source: 'k', target: 'e' } },
>>>>
>>>>
>>>> { data: { source: 'k', target: 'g' } },
>>>>
>>>>
>>>> { data: { source: 'g', target: 'j' } }
>>>>
>>>>
>>>> ]
>>>>
>>>>
>>>> },
>>>>
>>>> });
>>>>
>>>> // just
>>>> use the regular qtip api but on cy elements
>>>>
>>>>
>>>> cy.elements().qtip({
>>>>
>>>>
>>>>
>>>>
>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>
>>>>
>>>> position: {
>>>>
>>>>
>>>> my: 'top center',
>>>>
>>>>
>>>> at: 'bottom center'
>>>>
>>>>
>>>> },
>>>>
>>>> style: {
>>>>
>>>>
>>>> classes: 'qtip-bootstrap',
>>>>
>>>>
>>>> tip: {
>>>>
>>>>
>>>> width: 16,
>>>>
>>>>
>>>> height: 8
>>>>
>>>>
>>>> }
>>>>
>>>>
>>>> }
>>>>
>>>> });
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> });
>>>>
>>>> </script>
>>>>
>>>>
>>>>
>>>> regards
>>>>
>>>> Bala
>>>>
>>>
>>
Re: Cytoscape-qtip and zeppelin
Posted by moon soo Lee <mo...@apache.org>.
With proper cytoscape-qtip address, i'm getting following error.
Uncaught TypeError: cy.elements(...).qtip is not a function
You can also see error in Developer console in your browser, when you run
zeppelin-web in devmode.
(see Run the application in dev mode
https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
for devmode)
Thanks,
moon
On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <ba...@gmail.com>
wrote:
> Hi moon,
>
> My bad. Here is the link https://github.com/cytoscape/cytoscape.js-qtip.
>
> The whole cytoscape-qtip project is hosted here and you can find the js
> file in the below link
>
>
> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>
> regards
> Bala
>
>
> Thanks
>
> On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
>
>> Hi Bala,
>>
>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>> accessible. Could you check if it is correct address?
>>
>> Thanks,
>> moon
>>
>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>> balachandar.ra@gmail.com> wrote:
>>
>>> I am trying reciprocate the example seen in the link
>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>> extension for cytoscape, As a standalone code, this works. But, when I port
>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>> code I tested. Any hint will be highly appreciated. Thanks
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> %angular
>>>
>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>> initial-scale=1, maximum-scale=1">
>>>
>>>
>>>
>>> <link rel="stylesheet" type="text/css" href="
>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>>
>>>
>>>
>>> <script src="
>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>> "></script>
>>>
>>> <script src="
>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>> "></script>
>>>
>>> <script src="
>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>> "></script>
>>>
>>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>>
>>> <div id="cy">
>>>
>>>
>>>
>>> <style>
>>>
>>> body {
>>>
>>>
>>> font-family: helvetica;
>>>
>>>
>>> font-size: 14px;
>>>
>>> width:
>>> 100%;
>>>
>>> height:
>>> 1000px;
>>>
>>> }
>>>
>>> #cy {
>>>
>>> width:
>>> 100%;
>>>
>>> height:
>>> 1000px;
>>>
>>>
>>> position: absolute;
>>>
>>> left: 0;
>>>
>>> top: 0;
>>>
>>> z-index:
>>> 999;
>>>
>>> }
>>>
>>> h1 {
>>>
>>> opacity:
>>> 0.5;
>>>
>>> font-size:
>>> 1em;
>>>
>>> }
>>>
>>> </style>
>>>
>>>
>>>
>>> <script>
>>>
>>> $(function(){
>>>
>>> var cy =
>>> window.cy = cytoscape({
>>>
>>>
>>> container: document.getElementById('cy'),
>>>
>>>
>>> ready: function(){
>>>
>>>
>>> },
>>>
>>>
>>> style: [ // the stylesheet for the graph
>>>
>>> {
>>>
>>> selector: 'node',
>>>
>>> style: {
>>>
>>> 'background-color': '#666',
>>>
>>> 'label': 'data(name)'
>>>
>>> }
>>>
>>> },
>>>
>>>
>>>
>>> {
>>>
>>> selector: 'edge',
>>>
>>> style: {
>>>
>>> 'width': 1,
>>>
>>> 'line-color': '#aaa',
>>>
>>> 'target-arrow-color': '#ccc',
>>>
>>> 'target-arrow-shape': 'triangle'
>>>
>>> }
>>>
>>> }
>>>
>>> ],
>>>
>>>
>>> elements: {
>>>
>>>
>>> nodes: [
>>>
>>>
>>> { data: { id: 'j', name: 'Jerry' } },
>>>
>>>
>>> { data: { id: 'e', name: 'Elaine' } },
>>>
>>>
>>> { data: { id: 'k', name: 'Kramer' } },
>>>
>>>
>>> { data: { id: 'g', name: 'George' } }
>>>
>>>
>>> ],
>>>
>>>
>>> edges: [
>>>
>>>
>>> { data: { source: 'j', target: 'e' } },
>>>
>>>
>>> { data: { source: 'j', target: 'k' } },
>>>
>>>
>>> { data: { source: 'j', target: 'g' } },
>>>
>>>
>>> { data: { source: 'e', target: 'j' } },
>>>
>>>
>>> { data: { source: 'e', target: 'k' } },
>>>
>>>
>>> { data: { source: 'k', target: 'j' } },
>>>
>>>
>>> { data: { source: 'k', target: 'e' } },
>>>
>>>
>>> { data: { source: 'k', target: 'g' } },
>>>
>>>
>>> { data: { source: 'g', target: 'j' } }
>>>
>>>
>>> ]
>>>
>>>
>>> },
>>>
>>> });
>>>
>>> // just
>>> use the regular qtip api but on cy elements
>>>
>>>
>>> cy.elements().qtip({
>>>
>>>
>>>
>>>
>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>
>>>
>>> position: {
>>>
>>>
>>> my: 'top center',
>>>
>>>
>>> at: 'bottom center'
>>>
>>>
>>> },
>>>
>>> style: {
>>>
>>>
>>> classes: 'qtip-bootstrap',
>>>
>>>
>>> tip: {
>>>
>>>
>>> width: 16,
>>>
>>>
>>> height: 8
>>>
>>>
>>> }
>>>
>>>
>>> }
>>>
>>> });
>>>
>>>
>>>
>>>
>>>
>>> });
>>>
>>> </script>
>>>
>>>
>>>
>>> regards
>>>
>>> Bala
>>>
>>
>
Re: Cytoscape-qtip and zeppelin
Posted by "Balachandar R.A." <ba...@gmail.com>.
Hi moon,
My bad. Here is the link https://github.com/cytoscape/cytoscape.js-qtip.
The whole cytoscape-qtip project is hosted here and you can find the js
file in the below link
https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
regards
Bala
Thanks
On 18 February 2016 at 13:47, moon soo Lee <mo...@apache.org> wrote:
> Hi Bala,
>
> The file http://40.221.94.235/cytoscape-qtip.js looks like not
> accessible. Could you check if it is correct address?
>
> Thanks,
> moon
>
> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
> balachandar.ra@gmail.com> wrote:
>
>> I am trying reciprocate the example seen in the link
>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>> extension for cytoscape, As a standalone code, this works. But, when I port
>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>> code I tested. Any hint will be highly appreciated. Thanks
>>
>>
>>
>>
>>
>>
>>
>> %angular
>>
>> <meta name="viewport" content="width=device-width, user-scalable=no,
>> initial-scale=1, maximum-scale=1">
>>
>>
>>
>> <link rel="stylesheet" type="text/css" href="
>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>>
>>
>>
>> <script src="
>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>> "></script>
>>
>> <script src="
>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>> "></script>
>>
>> <script src="
>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>> "></script>
>>
>> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>>
>> <div id="cy">
>>
>>
>>
>> <style>
>>
>> body {
>>
>>
>> font-family: helvetica;
>>
>>
>> font-size: 14px;
>>
>> width:
>> 100%;
>>
>> height:
>> 1000px;
>>
>> }
>>
>> #cy {
>>
>> width:
>> 100%;
>>
>> height:
>> 1000px;
>>
>> position:
>> absolute;
>>
>> left: 0;
>>
>> top: 0;
>>
>> z-index:
>> 999;
>>
>> }
>>
>> h1 {
>>
>> opacity:
>> 0.5;
>>
>> font-size:
>> 1em;
>>
>> }
>>
>> </style>
>>
>>
>>
>> <script>
>>
>> $(function(){
>>
>> var cy =
>> window.cy = cytoscape({
>>
>>
>> container: document.getElementById('cy'),
>>
>>
>> ready: function(){
>>
>>
>> },
>>
>>
>> style: [ // the stylesheet for the graph
>>
>> {
>>
>> selector: 'node',
>>
>> style: {
>>
>> 'background-color': '#666',
>>
>> 'label': 'data(name)'
>>
>> }
>>
>> },
>>
>>
>>
>> {
>>
>> selector: 'edge',
>>
>> style: {
>>
>> 'width': 1,
>>
>> 'line-color': '#aaa',
>>
>> 'target-arrow-color': '#ccc',
>>
>> 'target-arrow-shape': 'triangle'
>>
>> }
>>
>> }
>>
>> ],
>>
>>
>> elements: {
>>
>>
>> nodes: [
>>
>>
>> { data: { id: 'j', name: 'Jerry' } },
>>
>>
>> { data: { id: 'e', name: 'Elaine' } },
>>
>>
>> { data: { id: 'k', name: 'Kramer' } },
>>
>>
>> { data: { id: 'g', name: 'George' } }
>>
>>
>> ],
>>
>>
>> edges: [
>>
>>
>> { data: { source: 'j', target: 'e' } },
>>
>>
>> { data: { source: 'j', target: 'k' } },
>>
>>
>> { data: { source: 'j', target: 'g' } },
>>
>>
>> { data: { source: 'e', target: 'j' } },
>>
>>
>> { data: { source: 'e', target: 'k' } },
>>
>>
>> { data: { source: 'k', target: 'j' } },
>>
>>
>> { data: { source: 'k', target: 'e' } },
>>
>>
>> { data: { source: 'k', target: 'g' } },
>>
>>
>> { data: { source: 'g', target: 'j' } }
>>
>>
>> ]
>>
>>
>> },
>>
>> });
>>
>> // just
>> use the regular qtip api but on cy elements
>>
>>
>> cy.elements().qtip({
>>
>>
>>
>>
>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>
>>
>> position: {
>>
>>
>> my: 'top center',
>>
>>
>> at: 'bottom center'
>>
>>
>> },
>>
>> style: {
>>
>>
>> classes: 'qtip-bootstrap',
>>
>>
>> tip: {
>>
>>
>> width: 16,
>>
>>
>> height: 8
>>
>>
>> }
>>
>>
>> }
>>
>> });
>>
>>
>>
>>
>>
>> });
>>
>> </script>
>>
>>
>>
>> regards
>>
>> Bala
>>
>
Re: Cytoscape-qtip and zeppelin
Posted by moon soo Lee <mo...@apache.org>.
Hi Bala,
The file http://40.221.94.235/cytoscape-qtip.js looks like not accessible.
Could you check if it is correct address?
Thanks,
moon
On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <ba...@gmail.com>
wrote:
> I am trying reciprocate the example seen in the link
> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
> extension for cytoscape, As a standalone code, this works. But, when I port
> this code in zeppelin paragraph, I do not see the tooltip. Here is the
> code I tested. Any hint will be highly appreciated. Thanks
>
>
>
>
>
>
>
> %angular
>
> <meta name="viewport" content="width=device-width, user-scalable=no,
> initial-scale=1, maximum-scale=1">
>
>
>
> <link rel="stylesheet" type="text/css" href="
> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
>
>
>
> <script src="
> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
> "></script>
>
> <script src="
> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
> "></script>
>
> <script src="
> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
> "></script>
>
> <script src="http://40.221.94.235/cytoscape-qtip.js"></script>
>
> <div id="cy">
>
>
>
> <style>
>
> body {
>
>
> font-family: helvetica;
>
> font-size:
> 14px;
>
> width:
> 100%;
>
> height:
> 1000px;
>
> }
>
> #cy {
>
> width:
> 100%;
>
> height:
> 1000px;
>
> position:
> absolute;
>
> left: 0;
>
> top: 0;
>
> z-index:
> 999;
>
> }
>
> h1 {
>
> opacity:
> 0.5;
>
> font-size:
> 1em;
>
> }
>
> </style>
>
>
>
> <script>
>
> $(function(){
>
> var cy =
> window.cy = cytoscape({
>
>
> container: document.getElementById('cy'),
>
>
> ready: function(){
>
>
> },
>
>
> style: [ // the stylesheet for the graph
>
> {
>
> selector: 'node',
>
> style: {
>
> 'background-color': '#666',
>
> 'label': 'data(name)'
>
> }
>
> },
>
>
>
> {
>
> selector: 'edge',
>
> style: {
>
> 'width': 1,
>
> 'line-color': '#aaa',
>
> 'target-arrow-color': '#ccc',
>
> 'target-arrow-shape': 'triangle'
>
> }
>
> }
>
> ],
>
>
> elements: {
>
>
> nodes: [
>
>
> { data: { id: 'j', name: 'Jerry' } },
>
>
> { data: { id: 'e', name: 'Elaine' } },
>
>
> { data: { id: 'k', name: 'Kramer' } },
>
>
> { data: { id: 'g', name: 'George' } }
>
>
> ],
>
>
> edges: [
>
>
> { data: { source: 'j', target: 'e' } },
>
>
> { data: { source: 'j', target: 'k' } },
>
>
> { data: { source: 'j', target: 'g' } },
>
>
> { data: { source: 'e', target: 'j' } },
>
>
> { data: { source: 'e', target: 'k' } },
>
>
> { data: { source: 'k', target: 'j' } },
>
>
> { data: { source: 'k', target: 'e' } },
>
>
> { data: { source: 'k', target: 'g' } },
>
>
> { data: { source: 'g', target: 'j' } }
>
>
> ]
>
>
> },
>
> });
>
> // just
> use the regular qtip api but on cy elements
>
>
> cy.elements().qtip({
>
>
>
>
> content: function(){ return 'Example qTip on ele ' + this.id() },
>
>
> position: {
>
>
> my: 'top center',
>
>
> at: 'bottom center'
>
>
> },
>
> style: {
>
>
> classes: 'qtip-bootstrap',
>
>
> tip: {
>
>
> width: 16,
>
>
> height: 8
>
>
> }
>
>
> }
>
> });
>
>
>
>
>
> });
>
> </script>
>
>
>
> regards
>
> Bala
>