BUR Visualizer/Creator

https://yiff.today/burs (if you are unable to click the title for whatever reason)

A small tool to view or create BURs with a visual representation of what's happening.

Usage

The main purpose of this tool is to create BURs with the visual representation. But you can also import existing BURs to visualize them and edit them.

The view

The view is constructed using visjs' Network graph. Click and drag in empty space to pan, mouse wheel to zoom in and out.

Creating a BUR

To create a BUR, first you obviously need tags. To add a tag, click while you're in the "Adding tag" mode. This will prompt you for the name of the tag, and then creates a little tag bubble that you can click and drag to move while in tag mode.

By clicking the buttons, or using the hotkeys listed in the site instructions (scroll down to see them), you switch into the different modes. Click and dragging between two nodes (tags) will create the relationship between those two tags. It will also update the script on the right to reflect the new relationship.

You can add a tag while in any of the modes by holding CTRL then clicking empty space.

You can delete a tag by clicking on it then pressing the DELETE key on your keyboard, this will remove all references to it in the script.

There is a few simple validation rules put into it, but not much, scripts it generates may violate some validation rules on-site.

Importing an existing BUR

There are two ways to import a BUR, the first is just manually writing the BUR script, and the other is to paste a link to the BUR request on e621. BUR request links must link to the actual BUR request, not the forum topic. So https://e621.net/bulk_update_requests/1566 (notice, no trailing slash) is acceptable, while https://e621.net/forum_topics/31385 is not.

Once you have done either of these, click "Import script"

Importing a script skips my site's custom validation rules.

Bugs and feedback

This isn't an official tool and I made it mostly for fun, but I will still fix simple bugs and explore simple feedback. I will not be doing anything to specifically support mobile, if it works already great, if it doesn't, then I won't be adding it.

tarrgon said:
(scroll down to see them)

Suggestion: You might consider making the "mode switch" buttons appear on the initial page for more users. I have a browser window sized to approximately 1590x850 (on a 1920x1080 display) and I couldn't quite figure out what to do after I added a tag. There's some air above and below the main "Visual BUR Editor" title that could probably be reduced; the next action would be to reduce the height of the "Script" box.

Alternatively, make the "main" box (where the graph displays) not as wide, keep the "Script" box as it is, and display the "mode switch" buttons to the right of the Script box.

I am on desktop, Firefox 115.12.0.

Works great on mobile, I have to say.

Though for manually typing a BUR in, it's missing the fact that the BUR stores the first word when writing an implication as implicate and not imply

snpthecat said:
Works great on mobile, I have to say.

Though for manually typing a BUR in, it's missing the fact that the BUR stores the first word when writing an implication as implicate and not imply

The help message for BURs says imply:

unalias aaa -> bbb
unimply aaa -> bbb
alias aaa -> bbb
imply aaa -> bbb
update aaa -> bbb
category tag_name -> category_name

however since both work, I'll add support for it as well.

Support added, though the line validator will change it to imply in the script window. Which will also work when copy pasting the BUR.

kora_viridian said:
Suggestion: You might consider making the "mode switch" buttons appear on the initial page for more users. I have a browser window sized to approximately 1590x850 (on a 1920x1080 display) and I couldn't quite figure out what to do after I added a tag. There's some air above and below the main "Visual BUR Editor" title that could probably be reduced; the next action would be to reduce the height of the "Script" box.

Alternatively, make the "main" box (where the graph displays) not as wide, keep the "Script" box as it is, and display the "mode switch" buttons to the right of the Script box.

I am on desktop, Firefox 115.12.0.

And yeah I made it for my 1920x1080 screen, I didn't even actually consider other screen sizes. I'll look into this.

Edit: Alright, so 1590 is a very weird width to work with since I don't actually do any of the css myself, it's all done by bulma classes, of which it doesn't actually have a breakpoint that high, and the highest one is 1408px and above, so it's hard for me to break it up at that screen size without custom styling, which I am not good with (my web dev is awful). I'll see if I can find a way to add custom breakpoints.

tarrgon said:
And yeah I made it for my 1920x1080 screen, I didn't even actually consider other screen sizes.

It's not really the screen size - it just that I don't usually run my browser full-screen. Depending on how I'm sitting, my eyeballs are roughly 14 to 20 inches (35 to 50 cm) from my monitor, which is a 24" (61 cm) diagonal LCD. If I'm reading, like here on the forums, or the news headlines, or whatever, I find that having the browser full-screen tends to require me to move my eyes back and forth more as I read, which gets uncomfortable after a while. Keeping the browser slightly narrower than 1920 seems to help with that.

For movies (which I don't often watch on this screen) or video games, I let them run at full-screen. Then again, most movies and games are framed so that the important stuff happens somewhere near the middle.

I'll look into this.

I know you can get extensions for both Firefox and Chrome that give you buttons to resize the browser window to a specific size, which might be useful. Firefox also has the built-in ability to show you a page in recent phone and tablet screen sizes; open the dev tools and click the button along the top edge of the tools that looks like a phone in front of a tablet. At the top of the screen there's a box to pick a phone or tablet model.

kora_viridian said:
.

Yeah I just use dev tools to emulate screen sizes, that isn't the issue. The issue is the CSS framework I use doesn't offer breakpoints at that width, so anything to support it would need to be something I make.

FYI for the implicate/imply bit, BURs accept many different strings for each line:
https://github.com/e621ng/e621ng/blob/70cacaf9dbb5d2ac95abb404562a65348050a399/app/logical/bulk_update_request_importer.rb#L24-L56
It then normalizes them back later on:
https://github.com/e621ng/e621ng/blob/70cacaf9dbb5d2ac95abb404562a65348050a399/app/logical/bulk_update_request_importer.rb#L58-L86

donovan_dmc said:
FYI for the implicate/imply bit, BURs accept many different strings for each line:
https://github.com/e621ng/e621ng/blob/70cacaf9dbb5d2ac95abb404562a65348050a399/app/logical/bulk_update_request_importer.rb#L24-L56
It then normalizes them back later on:
https://github.com/e621ng/e621ng/blob/70cacaf9dbb5d2ac95abb404562a65348050a399/app/logical/bulk_update_request_importer.rb#L58-L86

Yeah I was looking at that, then said "nah"