Uploaded image for project: 'Camunda Optimize'
  1. Camunda Optimize
  2. OPT-1356

Improve UI of view, groupBy and visualization option selection for report creation

    Details

    • Type: Task
    • Status: Done
    • Priority: L3 - Default
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: 2.2.0-alpha1, 2.2.0
    • Component/s: frontend
    • Labels:
      None

      Description

      AT:

      • The select components of the report control panel are replaced with dropdown components
      • The view dropdown contains submenus for Frequency Count, Process Instance Duration and Flownode Duration
      • The group by dropdown contains submenus for Start Date and Variables
      • The Variables submenu follows the specification found at https://zpl.io/Vk51n08
      • It is still impossible to create invalid combinations, by disabling certain dropdown entries and providing an autocomplete wizard for unambiguous choices

        Issue Links

          Activity

          Hide
          omran.abazeed Omran Abazeed added a comment -

          In term functionality, I believe it is working correctly according to my testing but it was very hard to understand what is happening
          I have a few comments :

          • The dropdown menu could be displayed on hover instead of click, I think it will be more natural this way
          • I suggest hiding menu items that are not possible instead of disabling them for simpler menus
          • regarding AT 4: I have to log in to see the specification
          • I find the methods in reportConfig very complex and very hard to maintain, I do not know if there is any way to simplify or maybe documenting all the possible situations that could occur
          • in reportConfig.js I suggest to create an object from the variables line 35-53 and include the line 59 also in the object, and then maybe call it something like groupToVizLinks. It was confusing to me at first especially the line 59
          • I do not if that is done already but I suggest creating a new ticket for separating the variable dropdown into another component
          Show
          omran.abazeed Omran Abazeed added a comment - In term functionality, I believe it is working correctly according to my testing but it was very hard to understand what is happening I have a few comments : The dropdown menu could be displayed on hover instead of click, I think it will be more natural this way I suggest hiding menu items that are not possible instead of disabling them for simpler menus regarding AT 4: I have to log in to see the specification I find the methods in reportConfig very complex and very hard to maintain, I do not know if there is any way to simplify or maybe documenting all the possible situations that could occur in reportConfig.js I suggest to create an object from the variables line 35-53 and include the line 59 also in the object, and then maybe call it something like groupToVizLinks. It was confusing to me at first especially the line 59 I do not if that is done already but I suggest creating a new ticket for separating the variable dropdown into another component
          Hide
          sebastian.stamm Sebastian Stamm added a comment -

          For your first two points, I would suggest talking to Franz as this is an UX topic and not only an implementation issue. We can do so in the team meeting and create new tickets if we want to change any behavior.

          regarding AT 4: I have to log in to see the specification

          I think Franz can set this up for you.

          I find the methods in reportConfig very complex and very hard to maintain, I do not know if there is any way to simplify or maybe documenting all the possible situations that could occur.

          I tried to document them via the tests. So for every scenario where these methods may be used there should be a test showing the input and output. If you have any other idea how we can improve it, I am happy to discuss and implement that

          in reportConfig.js I suggest to create an object from the variables line 35-53 and include the line 59 also in the object, and then maybe call it something like groupToVizLinks. It was confusing to me at first especially the line 59

          Good idea; I created an object called combinations for that.

          I do not if that is done already but I suggest creating a new ticket for separating the variable dropdown into another component

          I created OPT-1376 for that.

          Show
          sebastian.stamm Sebastian Stamm added a comment - For your first two points, I would suggest talking to Franz as this is an UX topic and not only an implementation issue. We can do so in the team meeting and create new tickets if we want to change any behavior. regarding AT 4: I have to log in to see the specification I think Franz can set this up for you. I find the methods in reportConfig very complex and very hard to maintain, I do not know if there is any way to simplify or maybe documenting all the possible situations that could occur. I tried to document them via the tests. So for every scenario where these methods may be used there should be a test showing the input and output. If you have any other idea how we can improve it, I am happy to discuss and implement that in reportConfig.js I suggest to create an object from the variables line 35-53 and include the line 59 also in the object, and then maybe call it something like groupToVizLinks. It was confusing to me at first especially the line 59 Good idea; I created an object called combinations for that. I do not if that is done already but I suggest creating a new ticket for separating the variable dropdown into another component I created OPT-1376 for that.
          Hide
          franz.heidl Franz Heidl added a comment - - edited

          A couple of things that need fixing or looking into:

          • The input in the top right (typeahead) has a visible margin to the right. There is no width defined for the input, I suggest setting the width of the input to 100% in the context of its container.
          • the font-size in the menu is set to 1em which results in 16px, should be 14px.
          • the checkmark denoting a selected entry seems to hang too low in relation to the text labels, this might be ok when the font-size has been fixed.
          • I have added the svg files for the arrow icon (left, up, right, down) to the project, please use these.
          Show
          franz.heidl Franz Heidl added a comment - - edited A couple of things that need fixing or looking into: The input in the top right (typeahead) has a visible margin to the right. There is no width defined for the input, I suggest setting the width of the input to 100% in the context of its container. the font-size in the menu is set to 1em which results in 16px, should be 14px. the checkmark denoting a selected entry seems to hang too low in relation to the text labels, this might be ok when the font-size has been fixed. I have added the svg files for the arrow icon (left, up, right, down) to the project, please use these.
          Hide
          sebastian.stamm Sebastian Stamm added a comment -

          Franz Heidl: Thanks for the feedback! I created a new ticket to implement the suggested changes: OPT-1392

          Show
          sebastian.stamm Sebastian Stamm added a comment - Franz Heidl : Thanks for the feedback! I created a new ticket to implement the suggested changes: OPT-1392

            People

            • Assignee:
              Unassigned
              Reporter:
              sebastian.stamm Sebastian Stamm
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: