solve? 02 Backend GraphQL backend to make data available. 03 Frontend Web-frontend for the users to interact with. 04 Demo Show the interactive web- ui. Building a Graph User-Interface for Malware-Analysis Overview
Analyzed in sandboxes ▪ All results are stored in a graph database ▪ JanusGraph + Scylla Building a Graph User-Interface for Malware-Analysis Domain Sandbox (VM) Analysis Potentially Malicious Data GRID (Graph Intelligence DB) Static Analysis Analysis
▪ Should be interactive ▪ Reflect the underlying graph structure ▪ Targeted at Malware Analysts Building a Graph User-Interface for Malware-Analysis Domain
to REST due to its nature as a full query language. type Project { name: String tagline: String contributors: [User] } { project(name: "GrapQL") { tagline } } { "project": { "tagline": "A query language for APIs" } } Type: Query: Result:
Technologies Cytoscape.js: Open-source graph theory (a.k.a. network) library written in JS. You can use Cytoscape.js for graph analysis and visualization. Tabulator: Create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data. Apollo Client: A complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI.
Open Source: Permissive open source license (MIT) • Battle Tested: Large suite of tests that can be run in the browser or the terminal. • Pick a Graph Style: Directed graphs, undirected graphs, mixed graphs, loops, multigraphs, compound graphs, etc. • Good Documentation: Includes live code examples. • Graph Layout Capabilities: Uses layouts for automatically or manually positioning nodes. • Ease of filtering and styling: Supports selectors for terse filtering and graph querying. • Touch Events: Abstracted and unified touch events on top of a familiar event model.
Declarative data fetching: Write a query and receive data without manually tracking loading states • Excellent developer experience: Enjoy helpful tooling for TypeScript, Chrome DevTools, and VS Code • Designed for modern React: Take advantage of the latest React features, such as hooks • Incrementally adoptable: Drop Apollo into any JavaScript app seamlessly • Universally compatible: Use any build setup and any GraphQL API • Community driven: Share knowledge with thousands of developers, thanks to our active open source community
we can also layout the graph. • This is useful when we give the ability to change layouts to a user. const layout = cy.layout({name: 'grid'}); layout.run();
Preset: Puts nodes in the positions you specify manually. • Grid: Places nodes in a well-spaced grid. • Circle: The circle layout puts nodes in a circle. • Concentric: Positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels • Breadthfirst: Puts nodes in a hierarchy, based on a breadthfirst traversal of the graph. • Cose: Uses a physics simulation to lay out graphs.
to nodes and/or edges in Cytoscape graph • Use the animate function with a node/edge or group Animates a node’s opacity to 0 from its current value const aNode = cy.nodes()[0]; aNode.animate({ duration: 500, style: { opacity: 0 }, easing: 'ease-in-sine', });
• Whoa, what about the edge? • We need to also animate the connected edges belonging to the node being hidden Animates a node's edges' opacity to 0 from its current value. … aNode.connectedEdges().animate({ duration: 500, style: { opacity: 0 }, easing: 'ease-in-sine' })
several strategies we used to help performance and usability • The minimal dataset to accomplish the problem rendered to the screen. (don't render everything) • Search functionality to find nodes of interest. • Ability to hide and show nodes along with collapsing and expanding nodes. • Ability to save a snapshot for sharing or later use. • Ability to only request the x number of connected nodes (in/out). → This was a big one • Ability to remove/add aggregation nodes which are not always helpful to analysts.