search

crits / crits_services

CRITs Services Collection
183 stars 129 forks source link

Editing in vis.js #129

Open ckane opened 9 years ago

ckane commented 9 years ago

I've added edit mode and reworked the "Add Campaign" functionality to the fork of this project in our 513 group: https://github.com/Security513/crits_services/tree/visjs-editmode

Only per-node "delete" is really implemented at this time.

Curious if anyone has time to play with it a bit. Now, in addition to the float which can control what the graph-wide node-discovery query is, you can select individual nodes to delete using the edit control built into vis.js. You can use the edit menu to delete them. This enables you to use the graph to more surgically apply modifications to the data-set.

There are a lot of avenues to go with this, and other common "bulk actions" to be applied. I have some still-brewing thoughts about how these types of visual/edit UX stuff could be done. Because of that, I may create different parallel project forks to offer up competing options to the community.

Anyhow, if you have time, please play with what I've got now and dump feedback / ideas into here. Let me know how it goes.

ckane commented 9 years ago

Example:

First begin with a relationship graph for a TLO. In this case, to demonstrate the existing behavior still working, I used the list of types in the float to the right side to have the graph NOT display any TLO's of type 'Indicator'. This renders a graph of 4 objects: Two IPs, a Domain, and a Backdoor. In this case, the Domain is currently selected in vis.js.

visjs_graph_no_indicators

Next, I use the edit menu at top to click "Delete Selected" and the Domain node (as well as connecting edges) are removed from the rendered graph, leaving the remaining three TLO's to comprise the new "working graph":

visjs_graph_deleted_domain

Next, I selected "Test campaign 1" and "high" in the form for the "Add Campaign" float, then clicked the "Add Campaign" button. It tells me "3 nodes processed", which matches what I intended. I then click "Update" in the upper-right float, to re-render the graph with the new information I added to the repository (because the current functionality doesn't force a redraw yet). You can see that the original 4 nodes (before I took the delete action) are rendered again, as well as a fifth node: the campaign bubble for "Test campaign 1". Inspecting the connections, you can see that this new node is only connected to the three nodes I requested it to be connected to: The two IPs, and the backdoor. The Domain name which I deleted from the graph was also excluded from the "Add Campaign" modification:

visjs_added_campaign_no_indicators

Finally, here's the graph rendered to include the Indicator TLOs. You can see that the Indicator TLO's also do not have a link to the Campaign, as designed, and the campaign still only links to the three nodes I requested it to connect to. Meanwhile, the existing other interrelationships are preserved, as not editing was applied to them by my actions.

visjs_edited_full_graph

mgoffin commented 9 years ago

I'm really liking what you are doing here. As I was reading I was wondering if the "Delete Node" actually deleted the TLO or just hid it from the graph. Looks like it just hides it. Maybe it would be useful to rename it so people aren't confused? I can see people wanting hard-changes like deleting or adding so if we go that way in the future it would be good to have this named something more accurate.

ckane commented 9 years ago

Yep good input. I think that the button naming is easily changeable in the library. Your comment about deleting the TLO brings up another good point - Would this be at all helpful to use for performing more (potentially) drastic actions to the underlying dataset? At the moment I'm mainly experimenting with using it to relate/unrelate TLO's. The campaign "relationship" is kinda an odd one out since each TLO actually retains a "copy" of the campaign within, rather than a relationship to a reference to a campaign TLO.

I could definitely see using this, plus the existing "Add {TLO}" dialogs to facilitate the creation of new TLO objects and relate them to an existing cluster in one go.

I think vis.js also supports multiple-select, which could also lend itself to this.

mgoffin commented 9 years ago

I think this would be a great tool for more drastic changes. It would be awesome to create an Event, go to its Relationships tab, and build out a graph of all of the TLOs involved. This would basically be the "Maltego-like" interface I was thinking of. I don't know how we can add a node without it being connected to the graph and allow someone to build the relationships as they see fit. Does vis.js support that?

ckane commented 9 years ago

Yes, it does. I've been brainstorming this in the back of my head. There's a really nice API for adding/editing/removing nodes from the graph, and you can even hook event handlers to these actions.

My thoughts are:

I'll brainstorm this some more, and hope to incorporate it into my next code binge.

mgoffin commented 9 years ago

I was thinking something similar but like this:

Just spewing ideas so maybe we hit on something awesome :)

Does the current graph show the actual relationship type if you select the link between nodes? I didn't try but that would be kind of neat as well.

ckane commented 9 years ago

I don't incorporate that today into the DataSet, but the information is there and definitely would like to incorporate that into the tool. Thanks for the thought showering / idea vomit.