GUI improvements

[jayeclark]

Partially fixes #3

The UI tweaks that I made in PR #8 are independent of the React refactoring/modularization, so I thought I'd open a PR for them here. I've only applied them to index.html but if they look good I can add an additional commit applying them to index2.html as well! I added a few more adjustments to make the whole UI look a little more polished. I was thinking it's probably best to keep the UI changes separated from the backend refactoring. Eventually it would be good to convert the site to be a bit more responsive, in case someone wants to interact with it using a tablet (or even a phone) or likes to tile their browser windows.

Probably the biggest formatting change is that the SVG and the controls for it have a slightly different background color to distinguish that area from the inputs that control the data being passed to the graphic and how the data is being merged. Basically those items are what would become the Diagram module (with the export and font size / opacity menus being optional config options, ie showExport: true or showFormattingOptions: true. Once packaged/built, the Diagram module script will work exactly as you described - users will be able to add a Diagram component to their website or generate a graphic simply by passing a dataset (and some optional config options) to the module script.

Edit: forgot to add the demo gif!

[heberleh]

It looks great!

There are only two small details that I would change:

1. The colored buttons now are getting a lot of attention, more than the diagrams (the beauty of the website). The green at the top (start, <>) itself is discreet, but when I saw the rest with green/red it bothered me a bit (as a Visualization researcher). In Visualization green/red is something controversial ☄️ that we tend to avoid. I understand the reason you used green/red, but for example, depending on culture red is perceived as "positive". I can play with colors later. For now, I can think of letting all buttons gray, and maybe when they are "negative" (reset, clear) you use it as red, but maybe a more transparent red, grayish red? Or possibly all buttons with this discreet highlight? I feel like the fewer colors the better because the diagram is already too colorful. I'm really not sure, and you don't have to bother about this. I love the design, it looks so much better! ❤️
2. The background of the svg should be white. White is a standard background in scientific papers (where the users use the diagram). Actually, an option to change the background could be a good thing too, but TBH, no one ever asked me to add this feature. I get e-mails from people from time to time. This reminds me to add some new feature requests in the pool. Now, if the background is white, then we need to check if the rest can be kept gray, but I like the idea of separating what is diagram from what is menu. That is also wonderful.

[jayeclark]

Hmm, I hear you on the buttons. I tried out a yellow 'warning' style but that didn't really look very good. And at first I had only the 'wait do you really want to do this?' buttons as red (I used the same red as in the header), but then those buttons became so prominent that I felt like I had to adjust the 'good' buttons to balance them out. I do think some visual clue as to what some of the buttons do is helpful, but it can definitely be toned down and the hover idea is one that seems interesting to explore. Really, as a user, I just want the 'start' button to have an added visual cue to reassure me that 'hey something good is going to happen', and for the reset buttons to have an added visual cue to make me think twice about whether I really want to reset everything.

I can play around with the default graph colors too. There are probably some color palettes out there that would maintain adequate contrast while coming across as less 'colorful' and also being a little more friendly toward colorblind users.

I'll test it some more to make sure, but the diagram should still be exporting with a white background - the background color is established within the containing div and doesn't affect the SVG. Though, I guess it could cause problems if someone wants to screenshot a diagram as opposed to exporting it. I'll see if maybe adding a border & box shadow instead of changing the background color can accomplish the same effect.

[heberleh]

I like the idea of color when mouse-over and the idea of highlight the start button!
Maybe a dialog to confirm the drastic actions may help?
Possibly repositioning the buttons may help too.

haha you read my mind, I avoided talking about colorblindness because I already write too much :D
But yes, I was considering redesign the colors of the diagrams too. There are metrics for color-preference, color-difference (perceived difference, by humans, including colorblindness). Here, because the colors mix, possibly a "continuous" palette might be safer? However, I would vote for a palette with the highest color difference, and yet with good pair-color preference, aka, looking pretty (they want pretty graphics!). Another option is also having palettes to choose. I will log this possible new feature.

Yes, they should be the same color. Users are from very very very different backgrounds and level of experience with digital technology. Some, even with the Inkscape message, were "hacking" the position of labels or something like that using the Console (??) XD I discovered that when I was in a conference and saw it in a poster: oh this is done with InteractiVenn! Let me ask about his experience 😄

[heberleh]

I thought about adding "color palettes" but I regret the thought.
I think having 1 color palette is nice because it becomes the signature of the tool.
It is already a signature of the tool, like I quickly identified it during a conference.

You are welcome to propose color palettes and the "order" of the colors. But this is very time-consuming, so I would put as the last thing to do.