I am changing the UI design to support picking flexible and inflexible metrics.

I did not have enough time to work on the UI too much - it is not much different than before. I would like another review if possible.

I did not have enough time to work on the UI too much - it is not much different than before. I would like another review if possible.

Sure, I will review.

Hello @MarvinTorres, exist a small problem when the browser is resized. The map doesn’t adjust creating a blank bar below the map.

A first, solution to this problem is to disable the scrollbar on the map. But this solution reduces the responsive.

Solution:
Add the code below in pathfinder/ui/k-toollbar/main.kytos

<style type="text/css">
body{
    overflow-y:hidden;
}
</style>

Result:

I am looking for a better solution.

Thank you @cmagnobarbosa, I will implement your changes. EDIT: It worked!

I managed to add a new component that supports searching for flexible and inflexible metrics. Below is a W.I.P screenshot of its current iteration. Feel free to comment on it - its design is tentative.

Hello everyone, I updated the UI once more. To demonstrate this, I added a GIF that shows the updated UI in the original post.

Kytos also has a "compact view" for the menu. It changes the view when you click on 'Kytos' in the upper left corner.
I think that it will not fit all the options, so you can put just the main filters in there.

@rmotitsuki I would like to add a compact version of this menu. But I was unable to find documentation on how to do so. I could be missing something, though.

I could implement a simplified menu, but I would like to design it such that it does not show up in the uncompacted version. But I have no idea where to begin implementing that design. If you would help me, I would appreciate it.

@rmotitsuki I would like to add a compact version of this menu. But I was unable to find documentation on how to do so. I could be missing something, though.

I could implement a simplified menu, but I would like to design it such that it does not show up in the uncompacted version. But I have no idea where to begin implementing that design. If you would help me, I would appreciate it.

@MarvinTorres
The compact version is mentioned in the Web Interface documentation, but I was unable to find an implementation document.
I will write a document but it may take a while.
You can check the source code of the UI component to understand how it works.
The Textarea component does not appear in the compacted format. It uses a class no-compact in the HTML template to hide it.
The Input component is displayed in the compacted format, so there is a compacted class in the style tag.

@rmotitsuki Thank you for your help! I will look up the source files as you suggested.

If I have any more questions I will let you know.

Hello @MarvinTorres, I was testing your user interface and it's great, thanks bro! I have a question: If I selected an Undesired Link, can I deselect it?

@gleybersonandrade I messed with the UI a bit and found that I could unselect an option by clicking on it while holding ctrl.

@MarvinTorres sure, so simple! :) Thanks man

@gleybersonandrade @rmotitsuki @josemauro @cmagnobarbosa I would like to merge the Best Path and Best Constrained Path accordion items into one menu. Let me know what you think of that idea.