1607 add llm genrated tag

components/search/HierarchicalMenuWidget.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from "react"
+import styled from "styled-components"
+
+const StyledMenu = styled.div`
+  font-family: "Nunito";
+
+  .category {
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    margin: 8px 0;
+    padding: 8px;
+    background-color: white;
+    border-radius: 4px;
+    border-bottom: dashed 1px;
+    display: flex;
+    align-items: center;
+  }
+
+  .category:hover {
+    background-color: #f5f5f5;
+  }
+
+  .category--expanded::before {
+    content: "-";
+    margin-right: 10px;
+    font-size: 20px;
+    color: var(--bs-blue);
+  }
+
+  .category--collapsed::before {
+    content: "+";
+    margin-right: 10px;
+    font-size: 20px;
+    color: var(--bs-blue);
+  }
+
+  .child-list {
+    padding-left: 1rem;
+    margin-top: 8px;
+    list-style-type: none;
+    background-color: white;
+    border-radius: 4px;
+    padding: 1rem;
+    border: 1px solid #ddd;
+  }
+
+  .child-item {
+    margin: 4px 0;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .child-item input {
+    margin-right: 8px;
+  }
+
+  .child-item:hover {
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    padding: 4px;
+  }
+
+  .child-item--selected {
+    font-weight: bold;
+    color: var(--bs-blue);
+  }
+`
+
+export interface HierarchicalItem {
+  id: string
+  label: string
+  items: { value: string; label: string; isSelected?: boolean }[]
+}
+
+interface HierarchicalMenuWidgetProps {
+  categories: HierarchicalItem[]
+  onSelectionChange?: (
+    categoryId: string,
+    selectedItems: { value: string; label: string }[]
+  ) => void
+}
+
+const HierarchicalMenuWidget: React.FC<HierarchicalMenuWidgetProps> = ({
+  categories,
+  onSelectionChange
+}) => {
+  const [expandedCategories, setExpandedCategories] = useState<string[]>([])
+
+  const toggleCategory = (id: string) => {
+    setExpandedCategories(prev =>
+      prev.includes(id) ? prev.filter(catId => catId !== id) : [...prev, id]
+    )
+  }
+
+  const handleChildSelection = (
+    categoryId: string,
+    selectedItem: { value: string; label: string },
+    isSelected: boolean
+  ) => {
+    if (onSelectionChange) {
+      const updatedItem = { ...selectedItem, isSelected }
+      onSelectionChange(categoryId, [updatedItem])
+    }
+  }
+
+  return (
+    <StyledMenu>
+      {categories.map(category => (
+        <div key={category.id}>
+          {/* Category */}
+          <div
+            className={`category ${
+              expandedCategories.includes(category.id)
+                ? "category--expanded"
+                : "category--collapsed"
+            }`}
+            onClick={() => toggleCategory(category.id)}
+          >
+            {category.label}
+          </div>
+
+          {/* Child Items */}
+          {expandedCategories.includes(category.id) && (
+            <ul className="child-list">
+              {category.items.map(item => (
+                <li
+                  key={item.value}
+                  className={`child-item ${
+                    item.isSelected ? "child-item--selected" : ""
+                  }`}
+                  onClick={() =>
+                    handleChildSelection(category.id, item, !item.isSelected)
+                  }
+                >
+                  <input
+                    type="checkbox"
+                    checked={item.isSelected || false}
+                    onChange={e =>
+                      e.stopPropagation()
+                    } /* Prevent click propagation */
+                  />
+                  {item.label}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+    </StyledMenu>
+  )
+}
+
+export default HierarchicalMenuWidget

components/search/SearchContainer.tsx

@@ -146,4 +146,66 @@ export const SearchContainer = styled.div`
   .ais-RefinementList-label {
     border-bottom: dashed 1px;
   }
+
+  .ais-HierarchicalMenu-list {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+    max-height: 250px;
+    overflow-y: auto;
+  }
+
+  .ais-HierarchicalMenu-item {
+    font-size: 1rem;
+    border-bottom: dashed 1px;
+  }
+
+  .ais-HierarchicalMenu-label {
+    white-space: normal;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .ais-HierarchicalMenu-count {
+    background: var(--bs-blue);
+    color: white;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    padding-right: 10px;
+    padding-left: 10px;
+    border: none;
+  }
+
+  .ais-HierarchicalMenu-list .ais-HierarchicalMenu-list--child {
+    display: block;
+    display: inline-block;
+    overflow-y: visible;
+    margin: 0;
+    padding: 0 0 0 0rem;
+    width: 100%;
+  }
+  .ais-HierarchicalMenu-link::before {
+    content: "+";
+    background-image: none;
+    font-size: 35px;
+    color: var(--bs-blue);
+    vertical-align: middle;
+    line-height: -3;
+    margin-bottom: 1rem;
+  }
+  .ais-HierarchicalMenu-link--selected::before {
+    content: "-";
+    background-image: none;
+    font-size: 50px;
+    color: var(--bs-blue);
+    vertical-align: middle;
+    line-height: -3;
+    margin-bottom: 1rem;
+  }
+
+  .ais-HierarchicalMenu-list--child .ais-HierarchicalMenu-item:last-child {
+    border-top: none; /* Remove top border for the last child */
+  }
 `

components/search/bills/useBillRefinements.tsx

@@ -6,6 +6,14 @@ import { useRefinements } from "../useRefinements"
 export const useBillRefinements = () => {
   const baseProps = { limit: 500, searchable: true }
   const propsList = [
+    {
+      attribute: "topics.lvl0",
+      ...baseProps
+    },
+    {
+      attribute: "topics.lvl1",
+      ...baseProps
+    },
     {
       transformItems: useCallback(
         (i: RefinementListItem[]) =>

components/search/useRefinements.tsx

@@ -1,11 +1,19 @@
-import { RefinementList, useInstantSearch } from "react-instantsearch"
+import {
+  HierarchicalMenu,
+  HierarchicalMenuProps,
+  RefinementList,
+  useInstantSearch
+} from "react-instantsearch"
 import { faFilter } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useCallback, useEffect, useState } from "react"
 import styled from "styled-components"
 import { useMediaQuery } from "usehooks-ts"
 import { Button, Col, Offcanvas } from "../bootstrap"
 import { SearchContainer } from "./SearchContainer"
+import HierarchicalMenuWidget, {
+  HierarchicalItem
+} from "./HierarchicalMenuWidget"
 
 export const FilterButton = styled(Button)`
   font-size: 1rem;
@@ -14,7 +22,6 @@ export const FilterButton = styled(Button)`
   padding: 0.25rem 0.5rem 0.25rem 0.5rem;
   align-self: flex-start;
 `
-
 const useHasRefinements = () => {
   const { results } = useInstantSearch()
   const refinements = results.getRefinements()
@@ -31,14 +38,17 @@ export const useRefinements = ({
   const handleClose = useCallback(() => setShow(false), [])
   const handleOpen = useCallback(() => setShow(true), [])
 
-  useEffect(() => {
-    if (inline) setShow(false)
-  }, [inline])
-
   const refinements = (
     <>
-      {refinementProps.map((p, i) => (
-        <RefinementList className="mb-4" key={i} {...(p as any)} />
+      <HierarchicalMenu
+        attributes={[
+          refinementProps[0].attribute,
+          refinementProps[1].attribute
+        ]}
+        sortBy={["count:desc"]}
+      />
+      {refinementProps.slice(2).map((p, i) => (
+        <RefinementList className="mb-4" key={i + 1} {...(p as any)} />
       ))}
     </>
   )