diff --git a/flatfront-astro/README.md b/flatfront-astro/README.md index 4f369f8b..5629d7a8 100644 --- a/flatfront-astro/README.md +++ b/flatfront-astro/README.md @@ -29,18 +29,25 @@ npm run dev ## To Do -- [ ] Filters / Fields Hierarchy +- [x] Filters / Fields Hierarchy - [x] Top query - [ ] Catalog Info: Description, etc. - [x] Scatterplot x y -- [ ] Collapse cell sections +- [ ] Collapseable cell sections - [x] Add cell - [x] "Show all fields" modal - [ ] Filter with select field - [x] Dark mode switch - [ ] Tailwind: Standardize theme colors -- [ ] Allow typing numbers on range slider +- [x] Allow typing numbers on range slider - [ ] Handle very large numbers -- [ ] Number format switch +- [ ] Number format switch? - [ ] Filter dropdowns -- [ ] Python \ No newline at end of file +- [ ] Python +- [ ] Collabsable hierarchy tree +- [ ] Wider desktop view +- [ ] Plot +- [ ] Auto-fetch button +- [ ] Handle keyword field (gr8) +- [ ] Remove child filters +- [ ] Table query parameters (count, offset, seed) \ No newline at end of file diff --git a/flatfront-astro/src/lib/components/Cells.tsx b/flatfront-astro/src/lib/components/Cells.tsx index dadee6d6..2cb4f613 100644 --- a/flatfront-astro/src/lib/components/Cells.tsx +++ b/flatfront-astro/src/lib/components/Cells.tsx @@ -103,17 +103,11 @@ function CatalogCell() { const catalog_id = hooks.useStore(stores.catalog_id_by_cell_id).get(cell_id); - const catalog_metadata_query_observer = hooks - .useStore(stores.catalog_metadata_query_observer_by_catalog_id) + const catalog_metadata_wrapper = hooks + .useStore(stores.catalog_metadata_wrapper_by_catalog_id) .get(catalog_id); - const catalog_metadata_query = useQueryObserver( - catalog_metadata_query_observer - ); - - const catalog_metadata = catalog_metadata_query?.data ?? null; - - const catalog_title = catalog_metadata?.title; + const catalog_title = catalog_metadata_wrapper?.metadata?.title; return ( diff --git a/flatfront-astro/src/lib/components/FieldCard.tsx b/flatfront-astro/src/lib/components/FieldCard.tsx index 2120f88b..bdc473ae 100644 --- a/flatfront-astro/src/lib/components/FieldCard.tsx +++ b/flatfront-astro/src/lib/components/FieldCard.tsx @@ -66,13 +66,13 @@ export function FieldCard(): React.JSX.Element { dispatch_action({ type: `remove_filter`, cell_id, - filter_id: field_id, + field_id, }); } else { dispatch_action({ type: `add_filter`, cell_id, - filter_id: field_id, + field_id, }); } }; @@ -127,7 +127,7 @@ export function FilterCard() { dispatch_action({ type: `remove_child_filters`, cell_id, - filter_id: field_id, + field_id, }); }} > @@ -140,7 +140,7 @@ export function FilterCard() { dispatch_action({ type: `remove_filter`, cell_id, - filter_id: field_id, + field_id, }); }} > @@ -167,6 +167,8 @@ export function FilterCard() { return ; } else if (field_is_enum(metadata)) { return ; + } else if (metadata.type === `keyword`) { + return ; } else { log(metadata); throw new Error(`Unknown field type: ${metadata.type}`); @@ -195,34 +197,34 @@ export function ColumnCard() { throw new Error(`Could not find node for ${field_id}`); } - // const is_leaf = field_node.children === undefined; + const is_leaf = field_node.children === undefined; // const is_required = field_node.data.required; const field_title = {field_node.data.title}; const remove_column_button = (() => { // if (is_required) return null; - // if (!is_leaf) - // return ( - // { - // dispatch_action({ - // type: `remove_child_filters`, - // cell_id, - // filter_id: field_id, - // }); - // }} - // > - // remove all - // - // ); + if (!is_leaf) + return ( + { + dispatch_action({ + type: `remove_child_columns`, + cell_id, + field_id, + }); + }} + > + remove all + + ); return ( { dispatch_action({ type: `remove_column`, cell_id, - column_id: field_id, + field_id, }); }} > @@ -471,6 +473,10 @@ function SelectFilterControl() { ); } +function StringFilterControl() { + return
string
; +} + // function LabelledInput({ // label, // value, diff --git a/flatfront-astro/src/lib/shared.tsx b/flatfront-astro/src/lib/shared.tsx index d57b0bff..c36acc8f 100644 --- a/flatfront-astro/src/lib/shared.tsx +++ b/flatfront-astro/src/lib/shared.tsx @@ -78,16 +78,38 @@ export function get_filter_ids( const filter_ids_set: Set = new Set(initial_filter_ids); const filter_list_actions = actions.filter( (action): action is FilterListAction => { - return action.type === `add_filter` || action.type === `remove_filter`; + return ( + action.type === `add_filter` || + action.type === `remove_filter` || + action.type === `remove_child_filters` + ); } ); for (const action of filter_list_actions) { - if (action.type === `remove_filter`) { - filter_ids_set.delete(action.filter_id); - } else if (action.type === `add_filter`) { - filter_ids_set.add(action.filter_id); - } else { - throw new Error(`unknown filter action type: ${action.type}`); + switch (action.type) { + case `remove_filter`: + filter_ids_set.delete(action.field_id); + break; + case `add_filter`: + filter_ids_set.add(action.field_id); + break; + case `remove_child_filters`: + const node = nodes.find( + (node) => get_field_id(node.data) === action.field_id + ); + if (!node) { + throw new Error( + `Could not find node for filter ${action.field_id} in hierarchy` + ); + } + const to_remove = node.leaves().map((node) => get_field_id(node.data)); + for (const id of to_remove) { + filter_ids_set.delete(id); + } + break; + default: + action.type satisfies never; + throw new Error(`Unknown filter action type: ${action.type}`); } } return filter_ids_set; @@ -104,15 +126,35 @@ export function get_column_ids( const column_ids_set: Set = new Set(initial_column_ids); const column_list_actions = actions.filter( (action): action is ColumnListAction => - action.type === `add_column` || action.type === `remove_column` + action.type === `add_column` || + action.type === `remove_column` || + action.type === `remove_child_columns` ); for (const action of column_list_actions) { - if (action.type === `remove_column`) { - column_ids_set.delete(action.column_id); - } else if (action.type === `add_column`) { - column_ids_set.add(action.column_id); - } else { - throw new Error(`unknown filter action type: ${action.type}`); + switch (action.type) { + case `remove_column`: + column_ids_set.delete(action.field_id); + break; + case `add_column`: + column_ids_set.add(action.field_id); + break; + case `remove_child_columns`: + const node = nodes.find( + (node) => get_field_id(node.data) === action.field_id + ); + if (!node) { + throw new Error( + `Could not find node for column ${action.field_id} in hierarchy` + ); + } + const to_remove = node.leaves().map((node) => get_field_id(node.data)); + for (const id of to_remove) { + column_ids_set.delete(id); + } + break; + default: + action.type satisfies never; + throw new Error(`Unknown column action type: ${action.type}`); } } return column_ids_set; diff --git a/flatfront-astro/src/lib/types.ts b/flatfront-astro/src/lib/types.ts index 3f87fc7b..1872f438 100644 --- a/flatfront-astro/src/lib/types.ts +++ b/flatfront-astro/src/lib/types.ts @@ -16,13 +16,13 @@ export type PlotControlAction = ActionBase< >; export type ColumnListAction = ActionBase< - `add_column` | `remove_column`, - { cell_id: CellID; column_id: string } + `add_column` | `remove_column` | `remove_child_columns`, + { cell_id: CellID; field_id: string } >; export type FilterListAction = ActionBase< `add_filter` | `remove_filter` | `remove_child_filters`, - { cell_id: CellID; filter_id: string } + { cell_id: CellID; field_id: string } >; export type CellAction =