GitLab

Implement the basic wizard framework for mapping Dataset information to Amphibian tables. The base route is at /dashboard/amphibian/{dataset}.

First page

Note: This page does not use the stepper layout, just displays the dataset information.

The base route /dashboard/amphibian/{dataset} requires the dataset uuid. It loads the Dataset information from the service and displays the title and description of the dataset and the list of dataset.repositoryFiles.

If Dataset is successfully loaded, then try loading existing mapping information (DatasetTable) from const amphData = amphibianService.getDataset(dataset.uuid). If it does not exist, create it with amphibianService.createDataset(dataset.uuid).

The purpose is to select a repository file to work with. User clicks on one repository file which starts the wizard for the selected repo file. The information for the selected file is in const amphFileInfo = amphData.sources[file.uuid].

If form data is modified between steps, update the DatasetTable with amphibianService.updateDataset(amphData).

Wrapper component

The wrapper component lists the sheets of the selected file (retrieved from Amphibian) as tabs:

This wrapper effectively controls the selected sheet and opens the sheet mapping route /dashboard/amphibian/{dataset}/{file}/{sheet}/edit

Step 1: Basic information

/dashboard/amphibian/{dataset}/{file}/{sheet}/edit route is the Step 1 of the wizard for the selected sheet of the selected file (uuid).

This step controls some of the model/amphibian/DataSource of amphData.sources[file]:

class DataSource {
  public data: boolean;
  public firstRow: number;
  public headers: string[];
  ...
}

Form elements:

1. Checkbox for variable data with label "This sheet contains data"
2. Preview of first 10 rows for this sheet from Amphibian
   
3. Number input firstRow with label "Index of first row of data"

When firstRow is set, reload the preview and fill headers: string[] with data from firstRow - 1.

Next step

Step 2: Accession identity

Route: /dashboard/amphibian/{dataset}/{file}/{sheet}/id

This step allows the user to select the index of column that contain data for:

• Dropdown doi with label "Accession DOI"
• Dropdown acceNumb with label "Accession number"
• Dropdown genus with label "Genus"
• Dropdown instCode with label "Institute code"

This step controls some of the model/amphibian/DataSource of amphData.sources[file]:

class DataSource {
  ...
  public doi: number;
  public acceNumb: number;
  public genus: number;
  public instCode: number;
  ...
}

The dropdown is a a list of values from amphData.sources[file].headers, filled in previous step.

The default option is empty, meaning null (not mapped).

Next step

Step 3: Trait data

Route: /dashboard/amphibian/{dataset}/{file}/{sheet}/traits

This step allows the user to select the index of column that contains the data for each of the dataset.descriptors.

The UI renders one "editor" for each of the headers in amphData.sources[file].headers. It displays the header text and a dropdown with the list of dataset.descriptors (uuid is key).

This step controls the traits element where map key is the UUID of the selected Descriptor and the value is the selected column index:

class DataSource {
  ...
  public traits: Map<string, number>;
  ...
}

Last step: Preview

TBD, for now just display "The End".