styled paper graph

Author: mintcd

app/tools/paper-graph/PaperDetail.tsx

@@ -125,7 +125,7 @@ export default function PaperDetail({ paper }: { paper: Paper | null }) {
                           className="text-blue-600 text-sm mt-2"
                           onClick={() => setVisibleReferenceCount(c => c + 10)}
                         >
-                          Show 10 more
+                          More
                         </button>
                       )}
                     </>
@@ -150,7 +150,7 @@ export default function PaperDetail({ paper }: { paper: Paper | null }) {
                           className="text-blue-600 text-sm mt-2"
                           onClick={() => setVisibleCitationCount(c => c + 10)}
                         >
-                          Show 10 more
+                          More
                         </button>
                       )}
                     </>

app/tools/paper-graph/PaperList.tsx

@@ -10,20 +10,20 @@ interface Props {
 
 export default function PaperList({ nodes, hoveredNodeId, onHover, onClick }: Props) {
   return (
-    <div className='border-gray-300'>
+    <div className='h-[650px] overflow-auto shadow-gray-500 shadow-sm'>
       {nodes.map((node) => (
         <div
           key={node.id}
-          className={`p-3 border border-b-gray-300 
+          className={`p-3
             ${hoveredNodeId === node.id ? 'bg-gray-100' : 'bg-white'} 
-            rounded-lg shadow-sm cursor-pointer`}
+            cursor-pointer border-b-gray-300 border-b-[1px]`}
           onMouseOver={() => onHover(node.id)}
           onMouseLeave={() => onHover(null)}
           onClick={() => onClick(node)}
         >
           <div className="text-sm">{node.title}</div>
           <div>
-            {node.tags.map((tag) =>
+            {(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'>
                 {tag.name}
               </span>)}

app/tools/paper-graph/Search.tsx

@@ -14,8 +14,7 @@ import useClickOutside from '@hooks/useClickOutside';
 type Suggestion = {
   id: string;
   title: string;
-  abstract: string;
-  year: string;
+  authorsYear: string;
 };
 
 export default function Search({
@@ -54,6 +53,7 @@ export default function Search({
 
     setQuery('');
     setSuggestions([]);
+    setModalOpen(false);
     setStatus('Fetching paper...');
     const paper = await fetchFromSemanticScholar(id);
 
@@ -99,7 +99,7 @@ export default function Search({
 
   return (
     <>
-      <div className='search flex items-center justify-between'>
+      <div className='search flex items-center justify-between w-full'>
         <button
           onClick={() => setModalOpen(true)}
           className="p-2 rounded-full bg-gray-100 hover:bg-gray-200"
@@ -113,25 +113,16 @@ export default function Search({
 
 
       {modalOpen && (
-        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
-          <div ref={ref} className="bg-white rounded-lg shadow-lg w-full max-w-md p-4 relative">
-            <button
-              onClick={() => setModalOpen(false)}
-              className="absolute top-2 right-3 text-gray-400 hover:text-gray-600 text-xl"
-            >
-              ×
-            </button>
-
+        <div className="fixed inset-0 z-200 bg-black/40 flex items-center justify-center">
+          <div ref={ref} className="bg-white rounded-lg shadow-lg w-[50%] p-4 relative">
             <h2 className="text-lg font-semibold mb-1">Search Paper</h2>
-            <p className="text-sm text-gray-500 mb-3">{status}</p>
-
             <input
               type="search"
               value={query}
               placeholder="Type paper title and press Enter..."
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-              className="border p-2 w-full rounded mb-2"
+              className="border p-2 w-full rounded mb-2 text-[20px]"
               autoFocus
             />
 
@@ -140,17 +131,22 @@ export default function Search({
               : suggestions.length === 0 && query.trim() !== '' ? (
                 searched && <p className="text-sm text-gray-500 mt-2">No results</p>
               ) : (
-                <ul className="border max-h-60 overflow-auto rounded bg-white">
+                <ul className=" max-h-60 overflow-auto">
                   {suggestions.map((s) => (
                     <li
                       key={s.id}
                       className={`p-2 ${knownIds.has(s.id)
                         ? 'bg-gray-100 text-gray-400 cursor-default'
                         : 'hover:bg-blue-100 cursor-pointer'
-                        }`}
+                        } border-b-[1px] border-b-gray-200`}
                       onClick={() => !knownIds.has(s.id) && handleSelect(s.id)}
                     >
-                      {s.title}
+                      <div className='text-[14px]'>
+                        {s.title}
+                      </div>
+                      <div className='text-[12px]'>
+                        {s.authorsYear}
+                      </div>
                     </li>
                   ))}
                 </ul>

app/tools/paper-graph/page.tsx

@@ -10,6 +10,9 @@ import { Loading } from '@components/atoms';
 
 const MIN_SIZE = 5;
 const MAX_SIZE = 20;
+const GRAPH_WIDTH = 800;
+const GRAPH_HEIGHT = 700;
+
 
 export default function PaperGraph() {
   const svgRef = useRef<SVGSVGElement | null>(null);
@@ -23,9 +26,6 @@ export default function PaperGraph() {
     const svg = d3.select(svgRef.current);
     svg.selectAll('*').remove(); // Clear previous renders
 
-    const width = 800;
-    const height = 600;
-
     const citationCounts = data.nodes.map(d => d.citationCount ?? 0);
     const minCite = d3.min(citationCounts) ?? 0;
     const maxCite = d3.max(citationCounts) ?? 1;
@@ -52,11 +52,11 @@ export default function PaperGraph() {
       .alphaDecay(0.08)
       .force('link', d3.forceLink(data.links)
         .id((d: any) => d.id)
-        .distance(80)
+        .distance(150)
         .strength(0.7)
       )
       .force('charge', d3.forceManyBody().strength(-30))
-      .force('center', d3.forceCenter(width / 2, height / 2));
+      .force('center', d3.forceCenter(GRAPH_WIDTH / 2, GRAPH_HEIGHT / 2));
 
     const link = zoomGroup
       .append('g')
@@ -85,7 +85,8 @@ export default function PaperGraph() {
         .on('start', (event: any, d: any) => {
           if (!event.active) {
             simulation.alphaTarget(0.3).restart();
-            simulation.force('center', null);
+            simulation.force('center', null)
+              .force('charge', null)
           }
           d.fx = d.x;
           d.fy = d.y;
@@ -107,7 +108,7 @@ export default function PaperGraph() {
       .data(data.nodes)
       .join('text')
       .text(d => `${d.authors[0].name}, ${d.year}`)
-      .attr('font-size', 10)
+      .attr('font-size', 9)
       .attr('fill', '#000');
 
     simulation.on('tick', () => {
@@ -187,7 +188,7 @@ export default function PaperGraph() {
         </div>
 
         <div className='w-[75%]'>
-          <svg ref={svgRef} width="100%" height={800}></svg>
+          <svg ref={svgRef} width="100%" height={GRAPH_HEIGHT}></svg>
         </div>
 
         <div