Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input Field Enhancments #2025

Draft
wants to merge 68 commits into
base: master
Choose a base branch
from
Draft

Conversation

capricornunicorn123
Copy link
Collaborator

@capricornunicorn123 capricornunicorn123 commented Apr 22, 2024

Prerequisites

  • Reviewed the checklist

  • Reviewed feedback from the "Sonar Cloud" bot. Note that you have to wait
    for the "CI / Unit Tests") to complete first. Failed Unit tests can be
    debugged by adding the label "verbose logging" to the GitHub PR.

Description of the Change

This PR aims to address limitations with the current implementation of input fields in Constellation. A suite of classes will be introduced to provide a custom implementation of various input field utilized in constellation. This will provide a number of benefits including increasing reusability, increasing visual consistency and increasing the effectiveness of their use.

Each input field will be based off of a "Magic-Wand" Style input field classed as the abstract ConstelationInputFild

BaseField

This Base ConstellationInputField enables a rich framework for facilitating a number of use cases. These Include:

  • AutoComplete An auto complete context menu is attempted to be created on each change to the value of a ConstellationInputField. All implementation of ConstellationInputField's must be able to provide a list of MenuItem's which have a defines action that modifies the value of the Input Field if the option is selected. This allows for an implementation specific autocomplete functionality.
  • DropDownMenus A drop down menu can be extended by implementations of the ConstellationInputField

Following the above image, the base class can be adapted and extended to suit any input field utilized in constellation.

The following rules will be used to ensure consistent appearance and use.

  • All input fields will have a text area where free text can be added.
  • The text area shall fill the space of the entire input field unless trigger buttons are present.
  • Input fields may have 0, 1 or 2 trigger buttons.
  • Input fields requiring only one trigger button shall place the button on the right side of the field.
  • Buttons that trigger a context menu shall be grey
  • Buttons that trigger a change in the appearance/formatting of the input field shall be grey
  • Buttons that trigger a pop-up window shall be blue
  • Buttons that trigger a pop-up widow shall be placed on the right.
  • Input fields shall have no more than 1 pop-up triggering button.

Below are the new input fields and their current completion level:

Password Input - PasswordInputField (In Progress)
password

Single Line Text Input - TextInputField(TextType.SINGLELINE) (In Progress)
image

Multi Line Text Input - TextInputField(TextType.MULTILINE) (In Progress)

File Chooser Input - FileInput(FileKind.OPEN) (In Progress)
image

Single Choice Input - ChoiceInputField(ChoiceType.SINGLE) (Not Started)
image

Multi Choice Input - ChoiceInputField(ChoiceType.MULTIPLE) (Not Started)
image

Color Input - ColorInputField (In Progress)
image

Number Input - NumberInputField (In Progress)
image

Alternate Designs

Input fields have historically been extended by adding tooltips and adjacent buttons which extend the functionality of the input field. Although this approach is convenient, the intended use of this buttons is not always clear and can lead to different appearances among related input fields

Why Should This Be In Core?

Input fields are a core feature of Constellation

Benefits

Increased interface visual quality
Increasing code reusability
Increasing resilience to change by decoupling the application from external input field providers such as ControlsFX

Possible Drawbacks

Input fields are used throughout Constellation and this change will require the manual updating of each module.

Verification Process

The verification process will need to be thorough as this change has the potential to impact every view, and interactive or Data Access Plugin. In most cases the integration of the new input fields into these vies and plugins will be deliberate so the verification process of each oof these changes can be detailed on a case-by-case- basis.

Applicable Issues

#1877
#1012
#1518

Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
2.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud

@OrionsGuardian
Copy link
Collaborator

Doing some preliminary testing ...

There's an issue with the Prev/Next number input field which replaces the number spinner component:
image
Clicking on "Prev" or "Next" jumps the value to the extreme endpoint value

Also in the number input field, with a fixed range and fixed increment size, there's a rounding error in the resulting values:
image

Multi-line text field isn't big enough to at least show a full 2 lines of text
image

The dropdown box of values displayed when clicking the "Select" button doesn't extend all the way across the size of the component:
image
You should be able to click the Select button and have clickable values directly below the mouse pointer.

The multi-select dropdown window should also stretch across the full component width, and the Select All / Clear All options should be right justified since they are actions rather than data entries.
image

Typing into the select and multi-select fields should do a case insensitive search for matches, and should match anywhere in the string, not just from the beginning.

image

Also, the background shouldn't turn red while typing. It should only turn red if the component loses focus with an invalid value.

The color input field, I'd suggest using the word "Select" instead of "Swatch" as it is the name of the action you are performing.
image

@OrionsGuardian
Copy link
Collaborator

OrionsGuardian commented Jul 5, 2024

The input field for when you can select multiple files doesn't quite look right with an oversized open button:
image

I've mocked up an alternative layout to consider:
image

This will keep the button the same size for all input fields, and the entries can either be in a list, or in a scrollpane.

Similar issue with the Multi-line text areas, where there is an oversized "Recent" button.

@OrionsGuardian
Copy link
Collaborator

OrionsGuardian commented Jul 5, 2024

Found an issue with the Import Graph File plugin, where it doesn't send the currently selected file type to the File Chooser.
image

Copy link

github-actions bot commented Jan 7, 2025

This pull request is stale because it has been open for 6 months with no activity. Consider reviewing and taking an action on this pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants