add sort

Author: mintcd

app/tools/paper-graph/PaperList.tsx

@@ -1,5 +1,7 @@
 'use client';
-import React from 'react';
+import { Dropdown } from '@components/molecules';
+import { ArrowDownIcon, ArrowDownUpIcon, ArrowUpIcon } from '@public/icons';
+import { useState } from 'react';
 
 interface Props {
   nodes: GraphNode[];
@@ -8,10 +10,78 @@ interface Props {
   onClick: (node: GraphNode) => void;
 }
 
+const FIELDS: { [key in 'title' | 'year' | 'citationCount']: string } = {
+  title: 'Title',
+  year: 'Year',
+  citationCount: 'Citations',
+}
+
 export default function PaperList({ nodes, hoveredNodeId, onHover, onClick }: Props) {
+  const [sort, setSort] = useState<{
+    open: boolean,
+    field: keyof typeof FIELDS,
+    direction: 'asc' | 'desc'
+  }
+  >({ open: false, field: 'title', direction: 'asc' })
+
+  const sortedNodes = [...nodes].sort((a, b) => {
+    const field = sort.field;
+    const dir = sort.direction === 'asc' ? 1 : -1;
+
+    const aValue = a[field] ?? '';
+    const bValue = b[field] ?? '';
+
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+      return aValue.localeCompare(bValue) * dir;
+    }
+    if (typeof aValue === 'number' && typeof bValue === 'number') {
+      return (aValue - bValue) * dir;
+    }
+
+    return 0; // fallback
+  });
+
   return (
-    <div className='h-[650px] overflow-auto shadow-gray-500 shadow-sm'>
-      {nodes.map((node) => (
+    <div className='paper-list overflow-auto max-h-[80vh] shadow-gray-500 shadow-sm'>
+      <div className={`paper-list-options flex items-center justify-between`}>
+        <span className='font-semibold'>
+          {nodes.length} documents
+        </span>
+        <span className='sort-filter flex items-center gap-2 mx-2'>
+          <Dropdown>
+            <Dropdown.Toggler>
+              <ArrowDownUpIcon
+                size={18}
+                onClick={() => setSort(prev => ({ ...prev, open: !prev.open }))}
+                className='cursor-pointer'
+              />
+            </Dropdown.Toggler>
+            <Dropdown.Content>
+              <div className='flex items-center border-2 bg-white rounded-md'>
+                <span className={`sort-fields mr-10px`}>
+                  {Object.entries(FIELDS).map(([key, value]) => (
+                    <span className={`mr-2 py-[2px] px-[4px] ${sort.field === key ? 'bg-blue-200' : ''} cursor-pointer`} key={key} onClick={() => setSort(prev => ({
+                      ...prev,
+                      field: key as 'title' | 'year' | 'citationCount'
+                    }))}>
+                      {value}
+                    </span>
+                  ))}
+                </span>
+                <span className='sort-order flex items-center gap-[2px] cursor-pointer'>
+                  {sort.direction === 'asc'
+                    ? <ArrowUpIcon size={20} onClick={() => setSort(prev => ({ ...prev, direction: 'desc' }))} />
+                    : <ArrowDownIcon size={20} onClick={() => setSort(prev => ({ ...prev, direction: 'asc' }))} />
+                  }
+
+                </span>
+
+              </div>
+            </Dropdown.Content>
+          </Dropdown>
+        </span>
+      </div>
+      {sortedNodes.map((node) => (
         <div
           key={node.id}
           className={`p-3
@@ -21,10 +91,13 @@ export default function PaperList({ nodes, hoveredNodeId, onHover, onClick }: Pr
           onMouseLeave={() => onHover(null)}
           onClick={() => onClick(node)}
         >
-          <div className="text-sm">{node.title}</div>
+          <div className="text-sm">
+            {node.title}
+          </div>
           <div>
             {(node.tags ?? []).map((tag) =>
-              <span key={tag.name} style={{ backgroundColor: tag.color }} className='mt-2 mr-1 p-1 text-[10px] rounded-sm text-white opacity-60'>
+              <span key={tag.name} style={{ backgroundColor: tag.color }}
+                className='mt-2 mr-1 p-1 text-[10px] rounded-sm text-white opacity-60'>
                 {tag.name}
               </span>)}
           </div>

components/molecules/Dropdown.tsx

@@ -93,7 +93,7 @@ Dropdown.Content = function Content({ children }: ContentProps) {
 
   return (
     <div
-      className={`absolute z-[10] mt-1 w-fit bg-white border border-gray-200 shadow-lg rounded-lg
+      className={`absolute z-[10] mt-1 w-fit
         transition-all duration-300 ease-out ${isOpen ? 'translate-y-0 opacity-100' : 'translate-y-[-10px] opacity-0 pointer-events-none'}`}
     >
       {children}

public/icons/index.ts

@@ -33,13 +33,19 @@ import {
   FaLightbulb as LightbulbIcon
 } from "react-icons/fa";
 
+import {
+  LuArrowDownUp as ArrowDownUpIcon
+
+} from "react-icons/lu";
+
 import {
   HiMiniViewColumns as ViewColumnsIcon,
   HiAdjustmentsHorizontal as AdjustmentsIcon
 } from "react-icons/hi2";
 
 export {
   AddIcon,
+  ArrowDownUpIcon,
   ListIcon,
   AddCircleIcon,
   NavigateNextIcon,