Collections Operations UI Design Patterns

[thorwhalen]

See comments:

• List of list and key-value UI design patterns and react packages
• Mapping examples between collection types and material UI components

A significant portion of UI components can be distilled down to a handful of operations performed on a limited set of data types. This abstraction allows for a more streamlined and efficient design process, as well as a more consistent user experience. Our goal is to develop versatile UI components that can be readily utilized once these abstractions are determined.

To illustrate:

• Consider a "stream-view" UI component. We aim to design this component such that it can accept a stream of objects and display them in a manner determined by the parameters we set. For instance, with one set of parameters, it could present these objects in a paginated format, similar to Google search results. Alternatively, with a different set of parameters, it could display an unending scroll of an image gallery.
• Similarly, we could have a "key-value-exploration" UI component. When provided with an API to a key-value store, this component could generate an interface for exploring the store. The nature of this interface could vary based on the parameters we provide. For example, it could create a file-system-like interface or a tree view of the key-value store.
• We could design a "form-builder" UI component. This component could take a schema of a data object as input and generate a form for creating or updating instances of that object. The layout and style of the form could be customized through parameters.

Where this fits in the i2mint stack

Whenever possible (and not a ridiculous stretch) we chose our facade's base/inner_facing interface from python builtin interfaces (for example, from the abstract methods of python collections).

Packages like dol and creek to help us to create these python-like facades to various data systems and formats. On the other hand, with py2http we can create consistent web-service APIs to these collections methods (see the Mapping python collections builtin methods to REST API patterns discussion) and with http2py or http2js, make consistent python or JS interfaces to even third party APIs that can be abstracted to some collections methods. Finally, the front provides an abstract base to create such web-services as py2http does, but also GUIs (for example, using streamlitfront)

This "collections operations" UI effort is just the next step of that stack.

Collection Explorers: Design Dimensions and Considerations

Data Aspects

1. Structure:

• Flat vs. Nested: Determines how data is organized and accessed. Nested data may require expandable UI components or drill-down views.
• Schema:
  • Fixed vs. Dynamic: A fixed schema has a predetermined structure, while a dynamic schema can change over time.
  • Interpretation: Refers to the meaning or context of the data. For instance, the same data structure can represent different things based on its interpretation (e.g., coordinates vs. indices).

2. Size and Volume:

• Known vs. Unknown Size: Determines pagination strategies and how data is fetched and displayed.
• Data Volume: High data volume might necessitate efficient search, filter, and sort functionalities.

3. Data Source:

• Static vs. Real-time: Real-time data might require web sockets or periodic polling, while static data can be fetched once.

Front-end Aspects

1. Navigation:

• Implicit Navigation: Actions like infinite scrolling where more data is fetched automatically.
• Explicit Navigation: User-triggered actions like "Next" or "Previous" buttons.

2. Data Loading:

• Lazy Loading: Load data on demand, improving initial load times.
• Eager Loading: Load all data upfront, which might be suitable for smaller datasets.

3. Feedback and Interactivity:

• Loading Indicators: Provide feedback during data fetch operations.
• Error Handling: Display meaningful messages for failed operations or issues.

4. Customizability:

• Theming and Styling: Allow customization of appearance to fit different applications.
• Configurable Behavior: Let developers or users tweak component behavior as per their needs.

Examples of UI flavors

Examples of UIs to for lists/streams/sequences:

• Search Engine Results: At their core, search engine results can be viewed as the process of displaying lists of information objects that are relevant to a user's query. These lists are dynamically generated based on the search terms entered by the user. Each item in the list represents a unique piece of information that matches the search criteria. This information could be a webpage, an image, a video, or any other type of content. The list is typically sorted by relevance, with the most relevant results appearing at the top. This allows users to quickly scan through the list and select the most appropriate results.
• Image Galleries: Image galleries are a way to view collections of images. Each image in the gallery represents a data object with attributes like the image file, title, description, and possibly others. Galleries allow users to browse through the images and view each image in detail.
• Timelines: Timelines are a way to represent sequential data. Each event on the timeline corresponds to a data object with a time attribute. Timelines allow users to understand the sequence and timing of events.
• Graphs and Charts: Graphs and charts are used to represent numerical data and the relationships between different data points or sets. For example, a bar chart could be used to compare the sales of different products, with each bar representing a product and the height of the bar representing the sales.

Examples of UIs to for key-value data:

• File Explorers: File explorers can be abstracted as tools that enable navigation through nested key-value objects. These objects represent the file system's hierarchical structure, with directories (keys) containing files or other directories (values). Users can navigate this structure by expanding and collapsing directories, viewing the contents of files, and performing actions such as moving, copying, renaming, or deleting files. This hierarchical key-value structure provides a clear and intuitive way for users to manage their files.
• Tree Views: Tree views are used to represent hierarchical data. Each node in the tree corresponds to a data object, and the parent-child relationships between nodes represent the hierarchy in the data. Tree views allow users to explore the hierarchy and navigate to different levels of detail.

Examples of UIs for fixed-schema data:

• Tables: Tables are a common way to view vectorial data, i.e., data that adheres to a fixed schema. Each row in the table represents a unique data object, and each column represents a specific attribute of the data. This structure allows users to easily compare data objects based on their attributes. Tables often provide additional features such as sorting, filtering, and pagination to help users manage and analyze the data.
• Forms: Forms can be seen as an interface for creating or updating structured data objects. Each form field corresponds to an attribute of the data object, and the form as a whole represents the object itself. When the user submits the form, the data object is either created (in the case of a "New" form) or updated (in the case of an "Edit" form).

In conclusion, by abstracting UI components to basic operations on simple data types, we can better understand their functionality and design more effective user interfaces. This approach also highlights the commonalities between different components, potentially leading to reusable design patterns and components.

[thorwhalen]

Lists/Streams

UI design patterns for lists and streams of objects

Here are some resources on UI design patterns for viewing and exploring lists of objects:

1. Guide to list UI design: principles and examples - Justinmind: This guide shows you how to create the best list UI designs to fit your purpose.
2. List-detail | UI Design & Patterns - User Experience Toolkit for Insights Hub and Industrial IoT: The list-detail pattern is used when you want to initially display a big set of domain objects without additional information in the first step.
3. UI-Patterns.com: A User Interface Design Pattern Library. UI patterns for web designers. See screenshot examples and learn how to do great design like the pros.
4. Design patterns - UI-Patterns.com: User Interface Design patterns are recurring solutions that solve common design problems. Design patterns provide a common language between designers.
5. The Best Collections of Real UX/UI Design Patterns - DesignerUp: This list includes some of the best sites to learn from and get inspired by real UI and UX design patterns in live.
6. List Item designs, themes, templates and downloadable graphic elements on Dribbble: Inspirational designs, illustrations, and graphic elements from the world's best designers.
7. Nested List designs, themes, templates and downloadable graphic elements on Dribbble: Inspirational designs, illustrations, and graphic elements from the world's best designers.
8. Lists - UI UX Design Patterns :: Mobile Patterns - Simform: Animated Lists UI UX Patterns for iOS and Android.
9. Web Layout Best Practices: 12 Timeless UI Patterns Analyzed - UXPin: In this piece, they explore examples, best practices, and common scenarios for 12 successful web layout patterns.
10. Discover mobile patterns: part 1. Introduction | by Valentyn Skliarov | UX Planet: This is Part 1 from a series of articles about discovering mobile patterns. They talk about Search, Filtering, and Sorting.

ReactJS packages for lists and streams of objects

Here are some ReactJS packages that you can use to create UIs for lists and streams of objects:

1. React-Window: React-Window is a complete rewrite of React-Virtualized. It provides several reusable components for efficiently rendering large lists and tabular data.
2. React-Virtualized: React-Virtualized is a set of React components for efficiently rendering large lists and tabular data.
3. React-List: A versatile infinite scroll React component that can render huge lists and tabular data with no lag.
4. React-Infinite-Scroller: This package provides an infinite scroll component for React, making it easy to load more content as a user scrolls down the page.
5. React-Table: React-Table is a lightweight, fast, and extendable data-grid built for React. It's great for displaying lists of data.
6. React-Select: A flexible and customizable Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
7. React-Grid-Layout: React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.
8. React-Beautiful-DnD: Beautiful, accessible drag and drop for lists with React.js.
9. React-Draggable: React-Draggable is a simple drag and drop library for React which uses the more stable 'react-dom' instead of 'react'.
10. React-Sortable-Hoc: A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.

key-value stores

UI design patterns for key-value stores

Here are some resources on UI design patterns for viewing and exploring key-value stores of objects:

1. Key value | UI Design & Patterns | User Experience Toolkit for Insights Hub and Industrial IoT: This page discusses the key-value pattern in UI design, which is used to display data that is stored and identified.
2. What are User Interface (UI) Design Patterns? | IxDF - Interaction Design Foundation: This article explains what UI design patterns are and how they are used to solve common problems in user interface design.
3. Data Management Patterns - Design Patterns for Cloud Native Applications: This book chapter discusses data management patterns, including those for key-value stores.
4. Design Patterns Key-value data stores application layer - Stack Overflow: This Stack Overflow thread discusses design patterns for key-value data stores at the application layer.
5. Software design patterns for data management features in web-based information systems: This paper introduces five design patterns for different data management features in web-based information systems.
6. JavaScript Design Patterns – Explained with Examples - freeCodeCamp: This article explains what design patterns are and why they're useful, including patterns for key-value stores.
7. Create Objects With Creational Design Patterns - Use MVC, SOLID Principles, and Design Patterns in Java - OpenClassrooms: This chapter explores the benefits and applications of using creational design patterns, which can be used for key-value stores.
8. 5 Common UI Design Patterns | Part 1 - YouTube: This video discusses five of the most common and useful UI design patterns.
9. Badge UI design exploration — Tips & tricks, usability, and use cases review - Setproduct: This blog post reviews purposes, use-cases, UX patterns, and other things to consider for badge UI design, which can be used for key-value stores.

ReactJS packages for key-value stores

Here are some ReactJS packages and resources that you can use to create UIs for key-value stores:

1. React-Table: React-Table is a lightweight, fast, and extendable data-grid built for React. It's great for displaying key-value pairs in a table format.
2. React-Json-View: This React component is used for viewing JSON data in a neat tree view, which can be useful for exploring key-value stores.
3. Zustand: Zustand is a small, fast and scaleable bearbones state-management solution. It has a straightforward API with both global and component state.
4. Redux: Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
5. React-Localstorage: React-Localstorage is a simple wrapper for the LocalStorage API. It's useful for storing key-value pairs in the browser's local storage.
6. React Context: React Context provides a way to pass data through the component tree without having to pass props down manually at every level.
7. React-Grid-Layout: React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.
8. React-Virtualized: React-Virtualized is a set of React components for efficiently rendering large lists and tabular data.

[thorwhalen]

Most of our python backend objects are designed to have interfaces taken from the collections abstract classes: https://docs.python.org/3/library/collections.abc.html#collections-abstract-base-classes

We want to map those objects, and (some of) the methods to interact with them, to UI components from material UI: https://mui.com/material-ui/

For example:

• a single dict (or Mapping interface) could be rendered as a form (where some of the elements could be editable, others not, if we have a MutableMapping).
• if this Mapping is heavily nested, we may want to chose a Tree View or some kind of file-explorer component
• if we have an iterable of Mappings, on the other hand, we may want to chose represent each mapping (say dict) item of the iterable with a Card, contained in a List, or Grid
• if these Mapping items of an iterable have a fixed-schema (all the same keys and value types), then a Table would be appropriate.

More

(With Geppetto; take with grain of salt)

This relationship is a many-to-many relationship, and will depend on the data characteristics, design choices, and context. Here are some more examples of different uses cases where we map some python objects to UI components to view, or even mutate these objects.

(Note, the Form and Carousel components are not from Material UI (didn't find them there), but point to a list of possible react choices for them).

Synopsis table

Python Collections	Material UI Components
Mapping	Form, TreeView, Card, List, Table
MutableMapping	Form
Sequence	List, Card, Table, Carousel, Accordion
MutableSequence	List with draggable items
Set	ChipGroup
Container	ChipGroup
Callable	Button
Iterable	List, Card, Grid, Table, ButtonGroup

Details

1. Sequence of Simple Values: If you have a Sequence (like a list or tuple) of simple values (like strings or numbers), you could represent each item with a ListItem in a List component. This would allow users to view the sequence in a straightforward, linear format.
2. Sequence of Complex Values: If you have a Sequence of complex values (like objects or dictionaries), you could represent each item with a Card in a Grid component. Each Card could display key information about the item, and users could click on a Card to view more details.
3. Set: If you have a Set of items, you could represent each item with a Chip in a ChipGroup component. This would allow users to view all the items in the set at a glance.
4. Mapping with Simple Values: If you have a Mapping (like a dictionary) with simple values, you could represent each key-value pair with a ListItem in a List component. The key could be the primary text of the ListItem, and the value could be the secondary text.
5. Mapping with Complex Values: If you have a Mapping with complex values, you could represent each key-value pair with a Card in a Grid component. The key could be the title of the Card, and the value could be represented in the Card's content.
6. Nested Mapping: If you have a Mapping that is heavily nested, you could represent it with a TreeView component. Each key-value pair could be a TreeItem, with the key as the label and the value as the children.
7. Iterable of Sequences: If you have an Iterable of Sequences, you could represent it with a Table component. Each Sequence could be a row in the table, and each item in the Sequence could be a cell.
8. Iterable of Mappings: If you have an Iterable of Mappings with a fixed schema, you could represent it with a Table component. Each Mapping could be a row in the table, and each key-value pair could be a cell.
9. MutableMapping: If you have a MutableMapping, you could represent it with a Form component. Each key-value pair could be a form field, with the key as the label and the value as the default value. Users could edit the values and submit the form to update the MutableMapping.
10. MutableSequence: If you have a MutableSequence, you could represent it with a List component with draggable ListItems. Users could rearrange the items in the MutableSequence by dragging and dropping the ListItems.
11. Container with Unique Values: If you have a Container (like a set or dictionary) with unique values, you```
    could represent each item with a Chip in a ChipGroup component. Users could remove items from the Container by deleting the `Chip`s.
12. Callable: If you have a Callable, you could represent it with a Button component. When the user clicks the Button, the Callable is invoked.
13. Iterable of Callables: If you have an Iterable of Callables, you could represent each Callable with a Button in a ButtonGroup component. When the user clicks a Button, the corresponding Callable is invoked.
14. Iterable of Tuples: If you have an Iterable of tuples, where each tuple represents a pair of related values, you could represent it with a Table component. Each tuple could be a row in the table, and each item in the tuple could be a cell.
15. Sequence of Images: If you have a Sequence of image URLs, you could represent each image with an Image component in a Carousel component. This would allow users to view the images one at a time and navigate through them.
16. Mapping of Sequences: If you have a Mapping where each value is a Sequence, you could represent it with a Tab component for each key and a List component for each value. This would allow users to view the sequences associated with each key by selecting the corresponding tab.
17. Sequence of Mappings: If you have a Sequence of Mappings, you could represent it with an Accordion component. Each Mapping could be an AccordionItem, with the keys and values represented in the content of the AccordionItem.
18. Nested Sequence: If you have a Sequence that is heavily nested, you could represent it with a TreeView component. Each item in the Sequence could be a TreeItem, with the nested items represented as children.
19. Sequence of Sets: If you have a Sequence of Sets, you could represent it with a Table component. Each Set could be a row in the table, and each item in the Set could be a cell.
20. Mapping of Images: If you have a Mapping of image URLs, you could represent each key-value pair with a Card in a Grid component. The key could be the title of the Card, and the value could be represented in the CardMedia.

[valentin-feron]

Regarding implicit and explicit navigation. There is a middle ground between those two (or even a spectrum from one to the other). One common UX between explicit and implicit is having virtual scrolling (what you call infinite scrolling) with the UI displaying the information of loaded data, so the user can have "control" over data loading process. This is actually what has been implemented by @gitOfKumarSathish for the Data Table component. A totally implicit navigation would be having the UI only displaying the total number of items in the collection and virtualize the not loaded (or unloaded items) for features like selection (select all items), aggregated values and so on.

[valentin-feron]

Regarding File Explorers and Tree Views. To me a File Explorer are a concrete implementation of a Tree View. Do you share the same opinion @thorwhalen or do you see consider them as totally different types of components?

[thorwhalen]

Would like to get some definition of the interface of what we call a "UI-component". For example, if we think OO:

Where ChoiceUI, if I write it as a python function, would look like this:

from typing import Callable, Iterable, Dict, Any

ChoiceItem = Dict
Filt = Any
JSXElement = Any
Container = Any
Key = Any

def ChoiceUI(
    src: Callable[[Filt], Iterable[ChoiceItem]], 
    render: Callable[[ChoiceItem], JSXElement],
    layout: Callable[[Iterable[JSXElement]], Container[JSXElement]] = None,
    key: Callable[[ChoiceItem], Key] = lambda choice_item: choice_item,
    **kwargs
):
    """
    Container to show a list of choices of items to the user.
    
    Parameters
    ----------
    src : Callable[[Filt], Iterable[ChoiceItem]]
        A function that returns an iterable of choices. 
        Maybe an array in memory, or a generator of chunks of items, etc.
    render : Callable[[ChoiceItem], JSXElement]
        A function that renders a choice item.
    key : Callable[[ChoiceItem], Key]
        A function that returns a unique key for a choice item.
    layout : Callable[[Iterable[JSXElement]], Container[JSXElement]], optional  
        A function that lays out the rendered choice items.
    """ 

[thorwhalen]

See more in UI Component Interfaces