Summary:
Changelog: Standardized DataList component
This diff standardizes the DataList component, by reusing the DataList. This is done to be able to take full advantage of all its features like virtualisation, keyboard support, datasource support, etc.
Also cleaned up DataTable properties a bit, by prefixing all flags with `enableXXX` and setting clear defaults
Reviewed By: passy
Differential Revision: D28119721
fbshipit-source-id: b7b241ea18d788bfa035389cc8c6ae7ea95ecadb
Summary:
Code blocks are quite common in Flipper, and a bit verbose in Ant, so let's standardize!
Changelog: Standardize CodeBlock component
Reviewed By: passy
Differential Revision: D28117560
fbshipit-source-id: 5a5538a49b59ef40c814d22055fac56e7598cbbb
Summary:
Increase the mouse target for copying values from the the tree in a data inspector to the full row, not just the text.
Not sure if bringing reversing the order here has any unintended side-effects, but in testing it seems to work fine.
Reviewed By: mweststrate
Differential Revision: D28185064
fbshipit-source-id: b9b86a7e181bfd0083f2a3bcb24c571b5ec4647e
Summary:
Noticed a regression in sticky scrolling not being sticky. I suspect this is caused by pixel inaccuracy + rounding, but our offset from bottom calculation consistently now reports `1` when being at the end of the scrollable region.
Too bad it is really hard to protect against these kind of regressions automated.
Reviewed By: passy
Differential Revision: D28095803
fbshipit-source-id: 1dbd57d84fb308023c2300c543aca344bf27ec28
Summary: This fixes an earlier reported issue with Messages plugin, if no column widths are set values can jump around per row
Reviewed By: passy
Differential Revision: D28090807
fbshipit-source-id: be124b94f507584cf177710816035cd280a5ef01
Summary:
Noticed in reviews during the convertathon there is still quite some boilerplate in things that happen on the boundary of UI and plugin state, such as setting up menu entries and providing common functionality like clear, master/detail layout, etc.
This diff introduces the `MasterDetail` component, which takes a higher level approach by merely needing to provide the state atoms and desired features, and taking care of the wiring.
Applied it to createTablePlugin, to prove that going from `createTablePlugin` to `MasterDetail` will be a much smaller step now.
Verified on the funnel logger plugin
Reviewed By: passy
Differential Revision: D28090362
fbshipit-source-id: 146f8c315fea903901ad4e3e46711642f16cf0e6
Summary: This diff exposes the createTablePlugin from flipper-plugin, so that createTablePlugin based plugins can be converted to Sandy as well
Reviewed By: jknoxville
Differential Revision: D28031227
fbshipit-source-id: 8e9c82da08a83fddab740b46be9917b6a1023117
Summary: Having time / async / non-blocking behavior in components in unit tests is really annoying, as it makes unit tests async without an easy way to determine 'done'. This diff makes sure that DataTable & DataInspector don't break down their work in smaller tasks, but do everything block if they are running in a unit test.
Reviewed By: nikoant
Differential Revision: D28054487
fbshipit-source-id: 72c3b519e092ad69ed71eb1731e1fed80022f91f
Summary:
Two minor renames:
* `DataInspector` => `DataInspectorNode`
* `ManagedDataInspector` => `DataInspector`
This aligns the internal and public name of the component, and better captures the meaning of the original `DataInspector` class.
The diff looks quite hefty, but that seems to be a phabricator issue caused by the filename swap; barely a thing changed :)
Reviewed By: jknoxville
Differential Revision: D28028554
fbshipit-source-id: d3d61fcb50abffaeae4bd1d26966604cece37b03
Summary: Moved Toolbar to flipper-plugin. No further changes.
Reviewed By: nikoant
Differential Revision: D28027334
fbshipit-source-id: 35de13d87734ae3a8af037166945b1a669106274
Summary:
Introduced the `scrollable={false}` option to DataTable, that gives the table its natural size, while still having all the other gimmicks of DataTable, like search, filter, etc etc.
To implement this, a non-virtualizing rendering is needed, which is handled by the `StaticDataSourceRenderer`
Also introduced the option to hide the searchbar.
Reviewed By: nikoant
Differential Revision: D28036469
fbshipit-source-id: 633c4f7f3fabfa99efa2839059aaa59b0a407ada
Summary: This diff allows using a DataTable without setting up a full datasource, which is simpler in case the dataset is small and/or fixed. For an continuously growing dataset a DataSource should still be set up.
Reviewed By: jknoxville
Differential Revision: D28037897
fbshipit-source-id: 2e56b1970e19f967c3752a78737b8f7a3f934b87
Summary:
Ant'd tabs didn't allow for vertical fill out. Introduced our own tiny wrapper that has `grow` by default.
Also made sure the users last selection is remembered.
Reviewed By: cekkaewnumchai
Differential Revision: D28026345
fbshipit-source-id: 7703bc241cd1427336b7c917bdb5be9f56bba9b9
Summary: Introduce the DataList component. Not feature complete yet, but core functionality is present so that people can use it during the convertathon. It is used to implement the route list in the network mock dialog
Reviewed By: priteshrnandgaonkar
Differential Revision: D27046716
fbshipit-source-id: a247ce7032b350b31bf55962ca4268e30f43471a
Summary: Expose a Panel api from Sandy, which is quite similar to the old one, except that it uses Antd, and it will remember the users closed / open preference through sessions, a much requested feature.
Reviewed By: nikoant
Differential Revision: D27966607
fbshipit-source-id: 9b18df377215c1e6c5844d0bf972058c8c574cbb
Summary:
Some styling fixes and minor improvements in DataTable, used by network plugin:
- be able to customise the context menu
- be able to customise how entire rows are copied and presented on the clipboard to be able to deviate from the standard JSON
- deeplink handling was made async, this gives the plugin the opportunity to first handle initial setup and rendering before trying to jump somewhere which is a typical use case for deeplinking
Reviewed By: passy
Differential Revision: D27947186
fbshipit-source-id: a56f081d60520c4bc2ad3c547a8ca5b9357e71a1
Summary:
This fixes an issue where `Layout.Top/Right/Left/Bottom` would not render its secondary child in the remaining size, if the primary child is empty (`null`). This is caused by React not rendering anything for null children, and as a result the CSS rules for the primary child would then match the second child.
In the example below making the component tree invisible if there are no bundles in the NT/Bloks plugin. Fixed by rendering a zero sized element instead.
Reviewed By: jknoxville
Differential Revision: D27793382
fbshipit-source-id: 1e76b51986c30a6a0d98e9356fcad4dd8d5d5f91
Summary:
Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/
Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible.
Changelog: [Layout] Make the layer selection more prominent
Reviewed By: priteshrnandgaonkar
Differential Revision: D27708650
fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f
Summary:
This diff fixes some more perf bottlenecks in the layout inspector (see the diffs earlier in the stack for the total picture). Mostly:
1. Pass down stable refs from the root for callbacks and configuration
2. Remove the deep-equality check in the sidebar section rendering, which has a pretty significant constant overhead, especially if the selection didn't change
3. If the selection changes, the correct semantics is to reset the sidebar rather than trying to reconcile the elements. (A consequence of this is that Panel collapse state isn't preserved atm after changing selection, will address that in a later diff)
This reduces average render time for sidebar from ~20 to ~2 ms.
Reviewed By: priteshrnandgaonkar
Differential Revision: D27677353
fbshipit-source-id: ba183b7e3d778c0b3c8e7ca0d51535ce99a097ca
Summary:
Changelog: [Layout] Addressed several performance issues in the layout plugin
This diff and a few of the next stuff fix some performance issues in the Layout plugin. This diff fixes an issue where computing the context menu will cause all rows to render at all times, make the responiveness of the plugin quite slugish.
The fix in this case is to build up the context menu lazily, and pass a stable ref to the function through the tree, rather than a new menu every time the root component renders.
The changes in this diff and the next ones in total reduces the time (in prod builds) to draw a frame from ~200ms to ~5ms.
Reviewed By: cekkaewnumchai
Differential Revision: D27685983
fbshipit-source-id: a48b2ce2cdd1db31bb13122924617cbc3b6c198a
Summary:
This diff moves the core of ElementsInspector to flipper-plugin and decouples it from legacy design system and Electron, without any significant improvements or API changes yet, which will follow later.
Colors and docs will be added later in this stack.
Reviewed By: passy
Differential Revision: D27660300
fbshipit-source-id: 96abfa3b3174fa852cf04ae119c23c3d629fee74
Summary:
This diff moves the rest of the DataInspector jungle to flipper-plugin. No actual improvements are made yet, but the code is decoupled from Electron and the legacy theming. For example by using Antd based context menus.
Note that `ManagedDataInspector` is now rebranded `DataInspector`, as that is the only variation that should (and is) used publicly.
For the interactionTracker removal, see next diff.
SearchableDataInspector will be addressed in a next diff
Reviewed By: passy
Differential Revision: D27603125
fbshipit-source-id: 188bd000260e4e4704202ce02c7fc98319f0bc22
Summary:
Another utility component used by DataInspector.
Colors have been hardcoded for now, to decouple from the classic Flipper color palette. Will organize this better later in this stack, and when addressing / adding support for dark mode.
Buttons, checkboxes, selects have been replaced by Antd's counterpart.
Unlike ManagedDataTable, the DataInspector is primarily moved rather than copied & adapted, as the underlying abstraction / API won't change significantly. So the changes here will immediately affect all plugins in Flipper using this component.
Reviewed By: passy
Differential Revision: D27603126
fbshipit-source-id: bacd48c9af2b591033e7f2352627f11acb4df589
Summary: This stack moves the DataInspector component to flipper-plugin. The first diffs will move some utility abstractions to turn this into smaller steps
Reviewed By: passy
Differential Revision: D27591890
fbshipit-source-id: d0285ca31b6c9b334000dd15c722b9bda7638d73
Summary: just a rename, as we will have `data-inspector` folder as well in next diffs.
Reviewed By: passy
Differential Revision: D27591891
fbshipit-source-id: b1fe92cbf4be1633e623e59b694efc3f687c3413
Summary: Message truncated worked in devs build, but failed in production build, as it JSON formatted React elements in prod build (incorreclty), while it didn't do so in Dev builds, as in dev that generates an exception (undesired) meaning the serialisation gets skipped (desired).
Reviewed By: passy, nikoant, priteshrnandgaonkar
Differential Revision: D27467280
fbshipit-source-id: 1f8e0ca4750464c778c33b69a8cf13d05f019143
Summary:
Changelog: Added an explicit autoscroll indicator in logs and fixed snapping
We got several reports that auto scrolling was to aggressive, so revisited the implementation and the new one is a lot more reliable. Also added an explicit indicator / button to toggle tailing.
Exposed ant's active color as well in our theme, as it gives better contrast on the buttons than Flipper purple.
Reviewed By: passy
Differential Revision: D27397506
fbshipit-source-id: 5e82939de4b2f8b89380bd55009e3fa2a7c10ec9
Summary:
Fixed a longer standing issue where after a horizontal resize the rows wouldn't redraw until new data arrives (or the user scrolls), resulting in rendering artefacts.
Also introduced a hook to force a reflow of contents if the contents of a hook changes. It's a bit leaky abstraction, but does keep the virtualization performant if dynamic heights are used.
Reviewed By: passy
Differential Revision: D27395516
fbshipit-source-id: 1691af3ec64f1a476969a318553d83e22239997c
Summary:
Changelog: Logs plugin will now automatically truncate long lines
...for a more pleasant experience where long messages don't distort things to much. (Made the buttons purple in a next diff for better contrast)
Reviewed By: passy
Differential Revision: D27395517
fbshipit-source-id: 733cd6329b979453ef3b428693be8c47c37adf4d
Summary: This moves `<DetailSidebar>` component to `flipper-plugin` and documents it. No semantic changes.
Reviewed By: passy
Differential Revision: D27234575
fbshipit-source-id: 74640602d718f84ad999f5dac0420089796ed7fb
Summary:
This diff deprecates the Sidebar concept, and copies the implementation to Sandy (tried moving first, but since existing plugins use the Sidebar in non-flex (Layout) contexts, that the layout of several plugins, so rather deprecated the old implementation.
Instead of exposing `Sidebar` explicitly, one can now put the `resizable` flag on a Layout.Top/Left/Bottom/Right, which makes building layouts even simpler, see demo.
The gutter logic was moved to the new implementation, since that was only used by the Sandy chrome anyway.
Changelog: Layout.Top / Left / Bottom / Right now support a resizable option
Reviewed By: passy
Differential Revision: D27233899
fbshipit-source-id: fbbdeb2ebf30d49d0837705a00ea86bb07fc2ba2
Summary: This diffs refactors tsc projects structure and structure of our custom typings to allow producing typescript typings for "flipper" package. In next diffs I'm going to use the produced typings to check compatibility of plugins with certain versions of Flipper, e.g. to check whether plugin is compatible with current "stable" and "insiders" version.
Reviewed By: passy
Differential Revision: D26997158
fbshipit-source-id: a0416c7139bf08ec9d175730da4c4c2a8768eeb7
Summary:
Performance fine tuning.
Did some performance fine-tuning primarily by creating a production build, and verifying the responsiveness of searching, tailing etc in the logs plugin while generating a lot of load, and finetuned based on that. For example stopped using requestAnimationFrame which is too sensitive of starving Flipper under high load, as it doesn't leave room for other events to be processed. Also made scrolling smoother by making an append 'high prio' update while taililng.
Also debounced changing the (search) filters, as that is an expensive operation we don't want to trigger on every key press
Reviewed By: passy
Differential Revision: D27046726
fbshipit-source-id: c3efe59eb26e2d9e518325d85531a0e4a6b245ca
Summary: Exposed the `pluginKey` to sandy plugins (which we will use later for storing table preferences per plugin). And a little moving code around because circular deps problem roared its ugly head again.
Reviewed By: nikoant
Differential Revision: D27009721
fbshipit-source-id: 7ad29e72ff8028c9daae270c4749b657bd8ff049
Summary:
This diff is primarily cosmetic, just pushing code around to make the API more intuitive. Most importantly, DataSource was split into DataSource and DataSourceView classes, the latter being accessible through `datasource.view`.
The benefit of this is two fold:
1. Conceptually it is much clearer now which operations operate on the _source_ records, and which ones on the derived _view_.
2. This will make it easier in the future to support multiple views to be based on a single data source.
This refactoring also nicely found 2 cases where datasource logic and view logic were mixed.
The only semantic change in this diff is that both DataSource and DataSourceView are now iterable, so that one can do a `for (const record of ds)` / `for (const record of ds.view)`
Reviewed By: nikoant
Differential Revision: D26976838
fbshipit-source-id: 3726e92b3c6ee3417dc66cbbe6e288797eecf70e
Summary: Make sure that DataSources can be serialized directly with a single setting, just like plain state atoms
Reviewed By: nikoant
Differential Revision: D26944954
fbshipit-source-id: 2b0d625d7d67f27a7c2e33dd7c4b534dfa4d3e82
Summary: ..and some earlier reviews comments has been processed + some fine tuning on the ui
Reviewed By: priteshrnandgaonkar
Differential Revision: D26816559
fbshipit-source-id: adf2586763be185ee8e7cc22b2827ecefe4e4cab
Summary:
This diff implements the remaining features in the logs plugin:
- deeplinking
- merging duplicate rows
The logs plugin source code has now been reduced from originally `935` to `285` LoC. All optimisation code has been removed from the plugin:
* debouncing data processing
* pre-rendering (and storing!) all rows
Finally applied some further styling tweaks and applied some renames to DataTable / DataSource + types finetuning. Some more will follow.
Fixed a emotion warning in unit tests which was pretty annoying.
Reviewed By: passy
Differential Revision: D26666190
fbshipit-source-id: e45e289b4422ebeb46cad927cfc0cfcc9566834f
Summary:
Added styling / coloring to the new logs plugin, to bring it closer to feature completeness. Made the colum headers slightly more compact
Also made the API more foolproof by introducing the `useAssertStableRef` hook, that will protect against accidentally passing in props that would invalidate rendering every time.
Reviewed By: passy
Differential Revision: D26635063
fbshipit-source-id: 60b2af8db3cc3c12d8d25d922cf1735aed91dd2c
Summary:
Per title. Give the user some feedback on why he doesn't see any records (filtering to aggressive vs there are simply no records).
Fixes the old Flipper behavior where tables are merely empty, which always looks kinda broken to me. (Didn't it work, or is there nothing?)
Reviewed By: nikoant
Differential Revision: D26611173
fbshipit-source-id: 7ac798bd7d5c31f6d9fbacf30c6727d2e0e94570
Summary:
This diff has some jak-shaving UX improvements after playing with the DataTable a bit more:
Selection
* deselecting a row from a larger set will make the last selected item the default selection
* re-selecting an item in a single selection will unselect it
Column Filtering
* Introduced button to toggle between filtering on all, nothing, and the values present in the current selection
Column sorting
* The up / down arrows are now inidividually clickable, rather than action as a general toggle
* Title still works as a general toggle between asc / desc / not sorted
Context menu
* I found the context menu for column selection and on the selected rows itself a bit finicky to find and click and not super intuitive for noob users. Merged both menus instead into a single hamburger menu adjacent to the search bar
Reviewed By: passy
Differential Revision: D26580038
fbshipit-source-id: 220f501a1d996acbd51088c08ea866caed768572
Summary:
Make sure DataTable supports multiselection, which works largely the same as before, with a few changes
* shift + click and ctrl + click work as expected
* shift + keyboard navigation works as expected
* drag selection works as expected
* drag selection when dragging accross screens, or Shift icmw with HOME / END / PageUp / PageDown works as expect
* text selection stil works as expected
The context menu items have been updated as well
* filter will filter on all the distinct values in the selection
* copying cells will copy all cells of the given column in the selection, separated by newline
* copying rows / creating a past will create a json array of the selection
Not done yet
- Shifting the selection after inserting rows hasn't been implemented yet
- I'm not entirely happy with the context menu trigger, maybe a hamburger button in the toolbar will be better
Reviewed By: nikoant
Differential Revision: D26548228
fbshipit-source-id: 5d1cddd6aad02ce9649d7980ab3a223e222da893
Summary:
Introduced a context menu for DataTable with some default options. Opted to put it under a visible hovered dropdown instead of on right-click, since this better alings with Ant's design guides (we don't have context clicks anywhere else I think), but if it isn't convincing we can still change it.
Included some default actions, to set up quick filters, and to copy values. For copying rows, implemented it to by default take the JSON from a row, rather than space separated values like in ManagedTable, as many existing plugins customize the onCopy handler to just do that, so it seemed like a better default since it is a richer format. If there are good use cases for the previous behavior, we'll probably find out after the old release :)
Introduced utility to copy text to clipboard in FlipperLib, but decoupled it from Electron.
Didn't include multi select yet, that will be done in a next diff.
Reviewed By: nikoant
Differential Revision: D26513161
fbshipit-source-id: b2b1b20b0a6f4ada9de2566bf6b02171f722c4aa
