Count the papers of recommenders

Signed-off-by: Jay Wang <[email protected]>

Author: xiaohk

src/api/semantic-scholar.ts

@@ -10,17 +10,18 @@ import { downloadJSON } from '@xiaohk/utils';
 
 import paperSearchMockJSON from '../../test/api-responses/paper-search.json';
 import citationSearchMockJSON from '../../test/api-responses/citation-search.json';
-import authorCitationSearchMockJSON0 from '../../test/api-responses/author-citation-search-8-0.json';
-import authorCitationSearchMockJSON1 from '../../test/api-responses/author-citation-search-8-1.json';
-import authorCitationSearchMockJSON2 from '../../test/api-responses/author-citation-search-8-2.json';
-import authorCitationSearchMockJSON3 from '../../test/api-responses/author-citation-search-8-3.json';
-import authorCitationSearchMockJSON4 from '../../test/api-responses/author-citation-search-8-4.json';
-import authorCitationSearchMockJSON5 from '../../test/api-responses/author-citation-search-8-5.json';
-import authorCitationSearchMockJSON6 from '../../test/api-responses/author-citation-search-8-6.json';
-import authorCitationSearchMockJSON7 from '../../test/api-responses/author-citation-search-8-7.json';
-import authorCitationSearchMockJSON8 from '../../test/api-responses/author-citation-search-8-8.json';
-
-const MOCK_HTTP_CALL = false;
+import authorCitationSearchMockJSON0 from '../../test/api-responses/author-citation-search-9-0.json';
+import authorCitationSearchMockJSON1 from '../../test/api-responses/author-citation-search-9-1.json';
+import authorCitationSearchMockJSON2 from '../../test/api-responses/author-citation-search-9-2.json';
+import authorCitationSearchMockJSON3 from '../../test/api-responses/author-citation-search-9-3.json';
+import authorCitationSearchMockJSON4 from '../../test/api-responses/author-citation-search-9-4.json';
+import authorCitationSearchMockJSON5 from '../../test/api-responses/author-citation-search-9-5.json';
+import authorCitationSearchMockJSON6 from '../../test/api-responses/author-citation-search-9-6.json';
+import authorCitationSearchMockJSON7 from '../../test/api-responses/author-citation-search-9-7.json';
+import authorCitationSearchMockJSON8 from '../../test/api-responses/author-citation-search-9-8.json';
+import authorCitationSearchMockJSON9 from '../../test/api-responses/author-citation-search-9-9.json';
+
+const MOCK_HTTP_CALL = true;
 
 const paperSearchMock = paperSearchMockJSON as SemanticPaperSearchResponse;
 const citationSearchMock =
@@ -36,7 +37,8 @@ const authorCitationSearchMocks = [
   authorCitationSearchMockJSON5 as SemanticAuthorDetail[],
   authorCitationSearchMockJSON6 as SemanticAuthorDetail[],
   authorCitationSearchMockJSON7 as SemanticAuthorDetail[],
-  authorCitationSearchMockJSON8 as SemanticAuthorDetail[]
+  authorCitationSearchMockJSON8 as SemanticAuthorDetail[],
+  authorCitationSearchMockJSON9 as SemanticAuthorDetail[]
 ];
 
 /**
@@ -104,13 +106,14 @@ export const searchAuthorDetails = async (
   try {
     const response = await fetch(url, options);
     const data = (await response.json()) as SemanticAuthorDetail[];
+
+    // downloadJSON(data, null, 'author.json');
+
     return data;
   } catch (e) {
     console.error('API error', e);
     throw new Error(`Fetch error when getting author details, status: ${e}`);
   }
-
-  // downloadJSON(data, null, 'author.json');
 };
 
 export const getAllPapersFromAuthor = async (authorID: string) => {
@@ -171,7 +174,7 @@ export const getPaperCitations = async (paperIDs: string[]) => {
 
   const baseURL = 'https://api.semanticscholar.org/graph/v1/paper/batch';
   const parameters: Record<string, string> = {
-    fields: 'paperId,citations.authors'
+    fields: 'paperId,citations.authors,citations.title'
   };
   const encodedParameters = new URLSearchParams(parameters);
 

src/components/recommender-view/recommender-view.css

@@ -319,6 +319,14 @@
       gap: 2px;
     }
 
+    &.paper-count {
+      gap: 2px;
+      .svg-icon {
+        width: 0.8em;
+        height: 0.8em;
+      }
+    }
+
     &:hover {
       background-color: var(--gray-200);
     }
@@ -454,17 +462,43 @@ button {
     max-width: 300px;
     max-height: 200px;
     line-height: 1.5;
+
+    padding: 2px 0;
+    box-sizing: border-box;
+    user-select: none;
+    -webkit-user-select: none;
+
+    display: flex;
+    flex-flow: column;
+  }
+
+  .table-title {
+    padding: 0 2px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  .separator {
+    width: 100%;
+    background: var(--gray-600);
+    height: 1px;
+    margin: 3px 0;
+  }
+
+  .paper-table {
+    width: 100%;
+    flex: 1;
+    padding: 0 2px;
+    box-sizing: border-box;
+
     overflow-x: hidden;
     overflow-y: auto;
 
     display: grid;
     grid-template-columns: auto min-content;
     column-gap: 3px;
     row-gap: 2px;
-    padding: 2px;
-
-    user-select: none;
-    -webkit-user-select: none;
   }
 
   .popper-arrow {