Implement SamplesTableManagerContext and useSamplesTableManager

[nozomione]

Context

As with the existing refine.bio, we want to be able to display a list of samples from the user-selected experiment in a data table and provide users with the ability to filter and sort the samples they wish to save or remove from their customized dataset.

Problem or idea

Using the context API, we'll create a samples table manager context SamplesTableManagerContext and implement its hook useSamplesTableManager which includes methods for filtering, sorting, adding and removing samples from users' dataset as well as updating data in the table based on their performed action.

The general strategy should be to have a single context that;

• manages user-requested queries and maintains the accuracy of the table data
• allows users to add or remove specific samples from their dataset

This context and its hook should manage the following:

• common queries (i.e., limit, offset)
• filter term (via text search)
• sort order (by column)

Each exposed method of this manager should correspond to the behavior of the application and indirectly communicates with the API using the refinebio-js helper.

The implementation details and pseudocode is as follows:

❚ API Supported Query Parameters

(keys marked with * are required):

// samples table query object
{
 limit*: number; 
 offset*: number;
 ordering: string;
 filter_by: string;
}

Common

These are common queries that are always sent to the API.	Key	Value	Description
limit*	number	the number of results per page with predefined options 10 (by default), 20, and 50
offset*	number	the starting index for returning API results (0 by default)

Filter term

Key	Value	Description
filter_by	string	a value used to return the results

Sort order

Key	Value	Description
ordering	string	a field name used to return the results. The sort order can be ascending, descending, or omitted (by default).

❚ State Management

Context State

The SamplesTableManagerContext contains the following states that are shared across the application.

config: (an object) the default configuration for the samples table setConfig: an async method for setting config

samplesTable: (an object) the currently specified samples table query object setSamplesTable: an async method for setting samplesTable

Hook State

tableData: (an object) the table data fetched from API setTableData: an async method for setting tableData

loading: (boolean) the loading indicator for the table data setLoading: an async method for setting loading

hasError: (boolean) the network error check for the table data setHasError: an async method for setting hasError

❚ Constant / Method

The useSamplesTableManager hook contains the following constants and methods. They are primarily called in the UI and each one corresponds to a specific application behavior.

Constant

hasSamples: boolean returns true if any samples in the table data, otherwise false

hasSamplesInDataset: boolean returns true if any samples in the table data were added to the user's dataset, otherwise false

totalPages: numbers returns the total number of pages

Method

(Parameters marked with * are required).

Common

resetCommonQueries() return void resets the common queries to the default values

resetPage() return void resets the current page number to the default value

resetPageSize() return void resets the current page size to the default value

updatePage(newPage*) return void

• sets the page number with the given value
• calls updateSamplesTableQuery

updatePageSize(newPageSize*) return void

• set the page size with the given option
• calls updateSamplesTableQuery

Filter term

updateFilterBy(newFilterTerm*) return void

• sets the filter term with the given value
• calls updateSamplesTableQuery

Sort order

updateSortBy(newSortOrder*) return void

• sets the sort order with the given value
• calls updateSamplesTableQuery

Other

addSample(id*) return void

• add the given sample to the user's dataset

removeSample(id*) return void

• remove the given sample from the user's dataset

getSamplesTableData(newQuery*) return void

• calls the helper's get method
• calls setLoading
• calls setHasError
• calls setTableData

updateSamplesTableQuery(reset = false) return void

• updates the samples table query object with the most recent users request
• when reset is set to true, it resets the current page number to the default value

Example: To render the table data, we can call the following method from a component:

getSamplesTableData()

Solution or next step

Based on the above requirements, implement the manager and its hook.