unable to get navigator working

[codeyourweb]

Hi,

I'm trying to implement cytoscape-navigator in a React.js app. I'm pretty new in javascript development, so it's probably not an issue from your library but something i didn't understood. I've check many things but i don't know how to solve this issue: birds eye works correctly and when i move nodes in my cytoscape div, it's also refreshed in the navigator. However impossible to get other features from navigator (like moving/zooming). Any help would be appreciated to solve this issue.

-- jquery@3.5.1 -- react@16.13.1 -- cytoscape@3.15.2 -- cytoscape-navigator@2.0.1

let navigatorDefaults = {
    container: '#investigation-navigator',
    viewLiveFramerate: 0,
    thumbnailEventFramerate: 30,
    thumbnailLiveFramerate: false,
    dblClickDelay: 200,
    removeCustomContainer: false,
    rerenderDelay: 100
};

#investigation-navigator{
    cursor: default;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: #ffffff 1px solid;
    border-radius: 2px;
    background-color: #444444;
    height: 200px;
    width: 200px;   
    z-index: 1000;
}

[JoshuaeKaiser]

Have similar issue. Dom elements seem to be rendered with 0 height and width. Mutating these values directly seems to have no effect either.

[HEmile]

I'm having this issue as well. Rendering just fine, but no interactivity at all. Using cytoscape@3.17.1 EDIT: Just figured it out. Using this CSS:

div.cy-navigator {
    width: 175px;
    height: 175px;
    position: fixed;
    z-index: 3;
    bottom: 10px;
    right: 27px;
    border: #828282 1px solid;
    border-radius: 2px;
    background-color: rgba(130, 130, 130, 0.1);
    cursor: default;
    overflow: hidden;
}

.cy-navigator > img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.8;

}
.cytoscape-navigatorView{
    position: relative;
    top: 0;
    left: 0;
    cursor: move;
    background: #828282;
    -moz-opacity: 0.40;
    opacity: 0.40;
    width: 50%;
    height: 50%;
    z-index: 0;
}

.cytoscape-navigatorOverlay{
    position: relative;
    top: 0;
    left: 0;
    z-index: 103;
    width: 100%;
    height: 100%;
}

[Nicolas-PredictaLab]

There is a missing part in the documentation, you have to import the style too. import 'cytoscape-navigator/cytoscape.js-navigator.css'

[maxkfranz]

That’s a webpack-specific way of doing things with the provided CSS. You’re free to use the provided CSS or to use your own CSS if you choose.

If you’d like to update the readme with general CSS instructions, you’re welcome to put up a PR.