handle remove all filters/columns; other minor cleanup

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
+- [ ] Python
+- [ ] Collabsable hierarchy tree
+- [ ] Wider desktop view
+- [ ] Plot
+- [ ] Auto-fetch button
+- [ ] Handle keyword field (gr8)
+- [ ] Remove child filters
+- [ ] Table query parameters (count, offset, seed)

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 (
     <CellWrapper>

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 <NumericFilterControl />;
     } else if (field_is_enum(metadata)) {
       return <SelectFilterControl />;
+    } else if (metadata.type === `keyword`) {
+      return <StringFilterControl />;
     } 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 = <Katex>{field_node.data.title}</Katex>;
 
   const remove_column_button = (() => {
     // if (is_required) return null;
-    // if (!is_leaf)
-    //   return (
-    //     <LittleTextButton
-    //       onClick={() => {
-    //         dispatch_action({
-    //           type: `remove_child_filters`,
-    //           cell_id,
-    //           filter_id: field_id,
-    //         });
-    //       }}
-    //     >
-    //       remove all
-    //     </LittleTextButton>
-    //   );
+    if (!is_leaf)
+      return (
+        <LittleTextButton
+          onClick={() => {
+            dispatch_action({
+              type: `remove_child_columns`,
+              cell_id,
+              field_id,
+            });
+          }}
+        >
+          remove all
+        </LittleTextButton>
+      );
     return (
       <LittleTextButton
         onClick={() => {
           dispatch_action({
             type: `remove_column`,
             cell_id,
-            column_id: field_id,
+            field_id,
           });
         }}
       >
@@ -471,6 +473,10 @@ function SelectFilterControl() {
   );
 }
 
+function StringFilterControl() {
+  return <div>string</div>;
+}
+
 // function LabelledInput({
 //   label,
 //   value,

flatfront-astro/src/lib/shared.tsx

@@ -78,16 +78,38 @@ export function get_filter_ids(
   const filter_ids_set: Set<string> = 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<string> = 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;

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 =