Coder Social home page Coder Social logo

visualixir's Introduction

Visualixir

Visualixir is a toy process visualizer for remote BEAM nodes, written in Phoenix/Elixir/d3, with live message sequence charts.

It's largely intended as a teaching tool, to give newer BEAM programmers a look into the process ecosystem living inside their nodes. However, it may prove of some amusement/use to more experienced folks (it's kinda neat to trace iex and the io system).

A huge gif is worth a thousand words:

Demo Image

Here's Visualixir tracing some messages through the Riemann application. Riemann Demo Image

Getting Going

  1. Clone this repository.
  2. Compile: mix deps.get && mix compile && cd assets && npm install
  3. Start 'er up: elixir --sname visualixir --hidden -S mix phoenix.server
  4. Navigate to the GUI

If you want to visualize other BEAM nodes, you'll need to start them up with the --sname <unique_name_here> option.

I suggest you use Chrome for Visualixir, Safari's SVG performance seems to be lacking.

There's a simple PingPong module included, for demo purposes.

Usage

Selecting Nodes

On the upper left of the terrible GUI is a list of nodes that Visualixir curently knows about, including itself. You can click on a node's name to visualize it, or you can add a new node by entering it in the text box.

Moving Around

Drag the background to pan around.

Move processes around and pin them down by dragging and dropping. To un-pin, double click.

Zoom by scrolling (mousewheel or two-finger swipe).

Message Tracing

Option-clicking (alt-clicking), will start message tracing the selected process. Its outline will change to red to remind you that you're tracing it. You can click the Stop Msg Tracing button to halt all message tracing.

Event Log

The log at the bottom keeps a brief history of a limited set of events on the node: spawns, exits, links, messages, etc..

Live Message Sequence Charts

The live message sequence charts have a configurable fade time, but there's no GUI for it yet, see web/static/js/message_sequence.js

The charting library is here, and it'd love some pull requests. <3

Warning

Do not run Visualixir on production nodes, seriously. I've tried to make it somewhat safe, but I suspect you can get into some bad message-tracing scenarios that'll compromise your node.

Caveats

I think Visualixir is a decent starting place for other BEAM visualization tools. I'd love to see what folks come up with, PR's are gladly accepted! ๐Ÿ’• (the GUI needs a lot of help)

Riak

It'd be really cool to watch Riak through Visualixir, but I'm afraid that isn't possible right now. Riak ships with a custom BEAM version that's rather old. Visualixir needs BEAM version parity between itself and the node being visualized. If you can find a decent way around this, I'd love to hear it. :)

visualixir's People

Contributors

bbalser avatar diasbruno avatar koudelka avatar lpil avatar luc-tielen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.