microsoft / essex-toolkit

Provides a set of useful tools, utilities, reusable components, and React hooks that are designed to capture common components and utilities common among Essex Alpha team projects.

essex-toolkit

Provides a set of useful tools, utilities, reusable components, and React hooks built to support our team built library ecosystem Packages are designed to capture common components and utilities common among projects See individual package README for specific information

Packages

@essex/hooks

Provides a set of useful react hooks to address common use-cases in webGL/canvas/svg applications

@essex/msal-interactor

A wrapper around @azure/msal-browser.

@essex/hierarchy-browser

This component creates tables to view connected data, allowing theming with Thematic.

@essex/thematic-lineup

This component uses the standard LineUp.js table, and does (a) injection of Thematic, (b) cleans it up a little bit, and (c) adds a custom filtering mechanism ThematicLineupStory displays a LineUp instance, while also applying default thematic styles and data colors. Use it for a React-style JSX wrapper around LineUp that has more potential flexibility than the very configuration limited version exposed by the LineUp project. This allows arbitrary column configurations via jsx, and a set of global filters if desired.

@essex/components

Provides a set of React components Works in harmony with Thematic library styling and contains ready-to-use data visuals

@essex/toolbox

Provides is a collection of helper functions

@essex/boolean-expression-component

An expression component to view and toggle filters

Tests

Limited tests are provided within the packages and most components/functions are experimental

License

Licensed under the MIT License.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

essex-toolkit's Issues

Configurable columns in hierarchy browser tables

Right now the data tables display all of the known properties as columns. This could be configurable via a prop so that we can create custom views or allow users to edit their display preference.

Unify Background Color for Neighbor Column Bars

Use color selection based on theme variant as either nominal+ or nominal muted, and replace multiple colors in background image gradient with single color for clarity. Look into replacing CSS with SVG rect or div implementation.

Use command pattern for table header bar buttons

We have two fixed buttons on each table header: toggle filter and download data CSV. However, different applications may want these or other commands to operate on each table. Using the command design pattern (with buttons on a command bar) would allow us to provide custom header actions.

Remove useDebounceCallback

The useDebounceCallback function, and the debounce function in the toolkit replicate functionality available in more popular and tested frameworks (lodash, ahooks). These hooks, and hooks that are similar in that their functionality is well implemented elsewhere, should be removed.

User Selection for Sorting Neighbors

Currently the sorting for neighbor communities is based on number of connections but allowing users to select either number of connections or size (members) as table order.

Table order top-down or bottom-up

The hierarchy is represented bottom-up by displaying the leaf table at the top of the browser list, and walking up the tree as you scroll down the tables (with the tree root being the bottom table). This is the default because starting from a leaf provides a predictable path to the root from a known starting point, whereas starting at the root could require navigation decisions at each level to find a leaf. For our common use cases, we are starting from a known row item that we can trace to a leaf, and showing the leaf table at the top is the finest granularity (smallest community) they are a member of - typically the preferred list to explore first.

That said, top-down is a much more common way of navigating trees so there may be times when it is desirable to represent the tree in a more traditional manner.

Ability to expand/collapse the neighbors list

In Hierarchy Browser, if an edge list is present the connected neighbors show automatically and can't be closed. This panel should have a button to expand/collapse as desires.

Visual hierarchy indicators

The hierarchy browser displays a "flat" list of tables that represent each level. Many tree representations (such as folder browsers) include indentation lines, expand/collapse buttons, and so on to allow browsability and hints on the tree structure. We should explore optional visual treatments that make the hierarchy more clear (and align with commonly understood tree representations).

Allow selected row sync

Allow for prop to highlight row in table

Allow optional column label for HiearchyBrowser

Right now the communityId field is used to display the community headers (see here). However, this ID is often system-generated, and applications might have other labels for the community that are more meaningful to users. An optional label field, falling back to communityId if missing, would allow customization.