# Viszard Readme

## IMPORTANT: PLEASE USE CHROME
Also: Read the entire file before you (try to) upload the datasets!
Our tool is visible at: https://mooie.site

This brings up a homepage with a button that leads to the main tool.

## Getting started:
### Uploading files
In the top right corner of the graph page, there is an upload button which will allow the user to upload a file. Furthermore, 
one can click the download button to load a preloaded dataset. This would be the Bitcoin OTC trust weighted signed network dataset, obtained from https://snap.stanford.edu/data/soc-sign-bitcoin-otc.html.

The tool is front-end based, meaning that the data processing and the graph/matrix rendering will be done using the user's computer, this will prevent the tool from breaking when multiple users use the tool and try to load big graphs.

### Graphs and Matrices
The main/graph page has two viewports and a sidebar to specify interactions and view graphdata.
To load a visualization click the dropdown menu and select the desired graph-layout or matrix reordering.

## Interactions
Currently the viewport supports the following actions to make the graph more interactable:

### viewport
- Dragging/Panning of the viewport (left click drag)
- Zooming (scroll weel)
- Dragging nodes (hold-leftclick node and drag)
- Highlighting edges and nodes when clicked  (left click node/edge)
- Box highlighting, control/shift click and drag to select a box, then release to select.
- Reset viewport (top-right button)
- Take a screenshot by clicking the camera button in the bottom right.

### Sidebar
- Search for nodes and edges (filter tab)
- Filter edges by weight (filter tab)
- Center viewport on node by(target tab, click on center element button next to element ID)
- Choosing a colorscheme, this updates the color scheme. One will need to reload the graphs to take affect. (paintbrush tab)


## Supported layouts
- Radial (circle)
- Concentric
- Breadthfirst
- Force directed
- Virus
- Matrix
- Matrix (king)
- matrix ascending degree
- Matrix Reverse Cuthill-Mckee
- Matrix Cuthill-Mckee
- Matrix Sloan reordering -> This reordering only works properly on fully connected graphs, in case the graph is not fully connected only minimal changes are visible in the matrix.

That is it, happy testing.

## Used libaries and tools
- Cytoscape js for graph rendering and basic layouts
- D3 js for matrix rendering
- Uppy for the file uploader
- Materialize css for buttons