Search sidebar UI (#665)

* Search sidebar UI * Remove drag and drop logic * Fix hooks * Add tests * Fix title syntax * Update changelog * Update the empty state message * Fix cut off UI elements in Safari * Fix cursor over expanded search result info
aws · Nov 12, 2024 · a2d55e9 · a2d55e9
1 parent 0e6b8d6
commit a2d55e9
Show file tree

Hide file tree

Showing 58 changed files with 1,718 additions and 1,446 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -2,6 +2,8 @@
 
 ## Upcoming
 
+- **Improved** search discoverability and ergonomics by moving the UI in to the
+  sidebar [#665](https://github.com/aws/graph-explorer/pull/665)
 - **Improved** UI responsiveness by using map instead of array for large data
   sets [#658](https://github.com/aws/graph-explorer/pull/658)
 - **Improved** connection selection can now happen on any part of the connection

diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json
@@ -25,6 +25,10 @@
     "@mantine/dates": "^7.13.2",
     "@mantine/emotion": "^7.13.2",
     "@mantine/hooks": "^7.13.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@react-aria/button": "3.9.8",
     "@react-aria/checkbox": "3.14.6",
@@ -66,14 +70,14 @@
     "framer-motion": "^11.11.7",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.454.0",
     "memoize-one": "^6.0.0",
     "papaparse": "^5.4.1",
     "query-string": "^9.1.1",
     "rc-tabs": "^15.3.0",
     "re-resizable": "^6.10.0",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -85,8 +89,8 @@
     "react-transition-group": "^4.4.5",
     "react-virtuoso": "^4.10.4",
     "recoil": "^0.7.7",
-    "swiper": "^11.1.14",
     "tailwind-merge": "^2.5.3",
+    "tailwindcss-animate": "^1.0.7",
     "use-deep-compare-effect": "^1.8.1",
     "uuid": "^10.0.0",
     "zod": "^3.23.8"

diff --git a/packages/graph-explorer/src/components/AdvancedList/AdvancedList.tsx b/packages/graph-explorer/src/components/AdvancedList/AdvancedList.tsx
@@ -32,7 +32,6 @@ export type AdvancedListItemType<T extends object> = {
   items?: AdvancedListItemType<T>[];
   properties?: T;
   titleComponent?: ReactNode;
-  defaultItemType?: string;
   className?: string;
   wrapperElement?: ComponentType<PropsWithChildren<Record<string, unknown>>>;
 };
@@ -46,7 +45,6 @@ export type AdvancedListProps<T extends object> = {
   items: AdvancedListItemType<T>[];
   className?: string;
   selectedItemsIds?: string[];
-  draggable?: boolean;
   search?: string;
   searchPlaceholder?: string;
   isLoading?: boolean;
@@ -78,7 +76,6 @@ export type AdvancedListProps<T extends object> = {
     noElementsSubtitle?: ReactNode;
     noElementsIcon?: ReactNode;
   };
-  defaultItemType?: string;
   hideFooter?: boolean;
   hideCount?: boolean;
   hideEmptyState?: boolean;
@@ -109,15 +106,13 @@ const AdvancedList = <T extends object>(
     searchPlaceholder,
     onCategoryChange,
     category = "all",
-    draggable = false,
     onItemClick,
     onItemMouseOver,
     onItemMouseOut,
     onItemMouseEnter,
     onItemMouseLeave,
     selectedItemsIds,
     isLoading,
-    defaultItemType,
     hideFooter,
     hideCount,
     hideEmptyState,
@@ -230,14 +225,12 @@ const AdvancedList = <T extends object>(
                 items={items}
                 search={debouncedSearch}
                 category={category}
-                draggable={draggable}
                 selectedItemsIds={selectedItemsIds}
                 onItemClick={onItemClick}
                 onItemMouseOver={onItemMouseOver}
                 onItemMouseOut={onItemMouseOut}
                 onItemMouseEnter={onItemMouseEnter}
                 onItemMouseLeave={onItemMouseLeave}
-                defaultItemType={defaultItemType}
                 hideFooter={hideFooter}
                 hideCount={hideCount}
                 renderPopover={renderPopover}
@@ -277,13 +270,11 @@ const AdvancedList = <T extends object>(
                             onMouseLeave={event =>
                               onItemMouseLeave?.(event, index)
                             }
-                            draggable={draggable}
                             isSelected={
                               !!item.id && selectedItemsIds?.includes(item.id)
                             }
                             key={item.id}
                             overrideTitle={item.titleComponent}
-                            defaultItemType={defaultItemType}
                             renderPopover={renderPopover}
                             hidePopover={hidePopover}
                           />
@@ -305,13 +296,11 @@ const AdvancedList = <T extends object>(
                             ? (event, item) => onItemClick?.(event, item, index)
                             : undefined
                         }
-                        draggable={draggable}
                         isSelected={
                           !!item.id && selectedItemsIds?.includes(item.id)
                         }
                         key={item.id}
                         overrideTitle={item.titleComponent}
-                        defaultItemType={defaultItemType}
                         renderPopover={renderPopover}
                         hidePopover={hidePopover}
                       />

diff --git a/packages/graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListItem.tsx b/packages/graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListItem.tsx
@@ -1,7 +1,6 @@
 import { cn } from "@/utils";
-import type { DragEvent, MouseEvent, ReactNode, RefObject } from "react";
+import type { MouseEvent, ReactNode, RefObject } from "react";
 import { useRef } from "react";
-import { useDrag } from "react-dnd";
 import { useHover } from "react-laag";
 import { CodeIcon } from "@/components/icons";
 import ListItem from "@/components/ListItem";
@@ -32,14 +31,7 @@ type AdvancedListItemProps<T extends object> = {
   item: AdvancedListItemType<T>;
   group?: AdvancedListItemType<T>;
   isSelected?: boolean;
-  draggable?: boolean;
-  onDragStart?: (
-    item: AdvancedListItemType<T>,
-    group: AdvancedListItemType<T> | undefined,
-    event: DragEvent<unknown>
-  ) => void;
   overrideTitle?: ReactNode;
-  defaultItemType?: string;
   renderPopover?: (
     item: AdvancedListItemType<any>,
     itemRef: RefObject<HTMLDivElement>
@@ -56,24 +48,14 @@ const AdvancedListItem = <T extends object>({
   onMouseLeave,
   className,
   item,
-  draggable,
   isSelected,
   isActive = false,
-  onDragStart,
   overrideTitle,
-  group,
-  defaultItemType,
   hidePopover,
   renderPopover,
 }: AdvancedListItemProps<T>) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [{ isDragging }, dragRef] = useDrag({
-    type: defaultItemType || "none",
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: item.properties,
-  });
+
   const [isOver, hoverProps] = useHover({
     delayEnter: 400,
     delayLeave: 100,
@@ -97,15 +79,10 @@ const AdvancedListItem = <T extends object>({
         startAdornment={item.icon || <CodeIcon />}
         secondary={item.subtitle}
         endAdornment={item.endAdornment}
-        onDragStart={event => onDragStart?.(item, group, event)}
       >
         {overrideTitle || item.title}
       </ListItem>
-      {isOver &&
-        !isDragging &&
-        !!renderPopover &&
-        !hidePopover &&
-        renderPopover(item, ref)}
+      {isOver && !!renderPopover && !hidePopover && renderPopover(item, ref)}
     </div>
   );
 
@@ -116,19 +93,9 @@ const AdvancedListItem = <T extends object>({
     InnerItem
   );
 
-  if (!draggable) {
-    return (
-      <div className={cn(className, "advanced-list-item-wrapper")}>
-        {WrappedElement}
-      </div>
-    );
-  }
-
   return (
-    <div className={"advanced-list-item-wrapper"}>
-      <div ref={dragRef} className={className}>
-        {WrappedElement}
-      </div>
+    <div className={cn(className, "advanced-list-item-wrapper")}>
+      {WrappedElement}
     </div>
   );
 };

diff --git a/.../graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListWithGroups.tsx b/.../graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListWithGroups.tsx
@@ -1,7 +1,6 @@
 import { cn } from "@/utils";
 import groupBy from "lodash/groupBy";
 import type {
-  DragEvent,
   ForwardedRef,
   MouseEvent,
   PropsWithChildren,
@@ -30,7 +29,6 @@ type ElementsListWithGroupsProps<T extends object> = {
   items: AdvancedListItemType<T>[];
 
   selectedItemsIds?: string[];
-  draggable?: boolean;
   search?: string;
   category?: string;
   onItemClick?: (
@@ -50,11 +48,6 @@ type ElementsListWithGroupsProps<T extends object> = {
   ) => void;
   onItemMouseEnter?: AdvancedListMouseEvent;
   onItemMouseLeave?: AdvancedListMouseEvent;
-  onDragStart?: (
-    item: AdvancedListItemType<T>,
-    group: AdvancedListItemType<T> | undefined,
-    event: DragEvent<unknown>
-  ) => void;
   emptyState?: {
     noSearchResultsTitle?: string;
     noSearchResultsSubtitle?: string;
@@ -63,7 +56,6 @@ type ElementsListWithGroupsProps<T extends object> = {
     noElementsSubtitle?: string;
     noElementsIcon?: string;
   };
-  defaultItemType?: string;
   hideFooter?: boolean;
   hideCount?: boolean;
   renderPopover?: (
@@ -80,16 +72,13 @@ const AdvancedListWithGroups = <T extends object>(
 
     search,
     category = "all",
-    draggable,
     onItemClick,
     onItemMouseOver,
     onItemMouseOut,
     onItemMouseEnter,
     onItemMouseLeave,
     selectedItemsIds,
     emptyState,
-    onDragStart,
-    defaultItemType,
     hideFooter,
     hideCount,
     renderPopover,
@@ -283,14 +272,11 @@ const AdvancedListWithGroups = <T extends object>(
                 onMouseEnter={event => onItemMouseEnter?.(event, index)}
                 onMouseLeave={event => onItemMouseLeave?.(event, index)}
                 group={group}
-                draggable={draggable}
                 isSelected={
                   !!innerItem.id && selectedItemsIds?.includes(innerItem.id)
                 }
                 isActive={activeItemIds?.includes(innerItem.id)}
                 key={innerItem.id}
-                onDragStart={onDragStart}
-                defaultItemType={defaultItemType}
                 renderPopover={renderPopover}
                 hidePopover={hidePopover}
                 overrideTitle={innerItem.titleComponent}

diff --git a/packages/graph-explorer/src/components/Carousel/Carousel.styles.ts b/packages/graph-explorer/src/components/Carousel/Carousel.styles.ts