feat: querybuilder component that can be used to create valid query strings for the ena api #310

[Smeds]

Here’s the first version of a query builder component for constructing valid query strings for the ENA REST API. It still needs some refinements:

1. The UI could use some styling improvements.
2. The dialog for selecting fields and setting values needs:
   1. Styling enhancements.
   2. Support for displaying field descriptions.
   3. The ability to provide example values or validation hints.
3. would be great if we could extend runReadFields.json with information about possible values and improved type validation.

Screenshoot

Example of usage

viewBuilders.ts

export const buildGenomePrimaryData = (
  genome: BRCDataCatalogGenome
): ComponentProps<typeof C.QueryBuilder> => {
  return {
    initialQuery: `tax_id=${genome.speciesTaxonomyId}`,
    onQueryChange: (query: string): void => {
      console.log(query);
    },
  };
};

analysisMethodMainColumn.ts

export const mainColumn: ComponentsConfig = [
  {
    children: [
      {
        component: C.AnalysisMethodsCatalog,
        viewBuilder: V.buildGenomeAnalysisMethods,
      },
      {
        component: C.QueryBuilder,
        viewBuilder: V.buildGenomePrimaryData,
      },
    ],
    component: C.BackPageContentMainColumn,
  },
];

onQueryChange

Implement a version of onQueryChange that will query our API to fetch data and populate a table with this information.