Development Guide

[codefuturedalao]

Sorry to interrrupt u
i am not familiar with web app, so which ide should i use or how should i configure the environment to to run the code. i want to see the change after i do something to the source code.
i have cloned the repo to local, but i cannot open the html(src/index.html) directly.
i will appreciate a lot if u could give me some help

[sabertazimi]

Development Guide

Node.js

Install Node.js v14 or v16.

After installation success, you can see version printed out via below commands.

node -v
npm -v

Development

Install Yarn Package Manager

npm install --global yarn

Clone Forked Repository

git clone https://github.com/codefuturedalao/dblp
cd dblp

Start Local Development Server

yarn # Install dependencies
yarn start # Visit http://localhost:2333/

IDE

Any text editor or IDE. e.g VSCode or WebStorm.

[codefuturedalao]

thanks very much

[codefuturedalao]

作者您好，知道您是华科学子（好巧，我是武大的🤣），因此直接采用中文阐述我的问题。
之前提到我之前没怎么接触过web开发，目前JavaScript的一些操作也超出了我之前的知识范围，所以以我的能力不足以对这个项目更新新的feature，还是需要您的帮助。
这几天我详细调查了如何添加citations，在这里提供我的调查，如果之后您想要增加这个功能的话，希望可以这些资料可以向您提供一些帮助。

1. 如何获取citations？
   可以使用semantic scholar提供的api，网址如下：https://www.semanticscholar.org/product/api，我的思路是

   1. 首先根据dblp的title，使用下面url查找paper，解析json信息，目的是得到paper的id（semantic独有的id），因为dblp不能直接获取论文的doi，所以才出此下策。

   

   2. 得到paper的id后，使用api获取citations

   

   需要注意的是，semantic scholar官网上说普通的用户使用api5分钟只能发送100个请求，多的话会被封ip一段时间（已亲测）。如果想要发送更高频率的请求，需要进行填表认证，我填了表，但是好像没什么反应，应该要等一段时间审核。
   
   其他获取citations的方式暂未探索，主要是觉得semantic的数据可信。

2. 我的工作
   看您的代码，我照葫芦画瓢，修改了TableResult.jsx增加了一列citations，同时也修改了normalize函数，主要是对hit的每一个info进行了额外处理，根据info.title获取paperID，然后获取citations。

return hit.map(({ info }) => {
        let citation = 0;

        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Accept', 'application/json');
        // headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
        headers.append('Origin', 'http://localhost:3000');

        fetch(SCQueryForID(info.title), {
          method: 'GET',
          mode: 'cors',
          headers,
        })
          .then(response => {
            console.log('get response');
            if (response.ok) {
              return response.json();
            }
            return null;
          })
          .then(data => {
            if (!data) {
              return null;
            } else {
              return data.data[0].paperId;
            }
          })
          .then(paperId => {
            if (!paperId) {
              // eslint-disable-next-line no-console
              console.log('no paperID');
            } else {
              console.log('query about citation');
              sleep(300);     //avoid access too frequently

               //get papaerid
              fetch(SCQueryForCitations(paperId), {
                method: 'GET',
                mode: 'cors',
                headers,
              })
                .then(response => {
                  if (response.ok) {
                    return response.json();
                  }
                  return null;
                })
                .then(data => {
                  if (!data) {
                    // eslint-disable-next-line no-console
                    console.log('no citations');
                    return 0;
                  } else {
                    return data.data.length;
                  }
                })
                .then(length => {
                  // eslint-disable-next-line no-console
                  console.log(`the citations is ${length}`);
                  citation = length;
                });
            }
          });

        console.log(`the citation is ${citation}`);
        return {
          key: KEY++,
          title: info.title,
          venue: info.venue,
          year: info.year,
          url: info.ee,
          citations: citation,
        };
      });

3. 遇到的问题
   我后来在探索中发现由于fetch是异步的，因此还没有当我获得citation时，整个页面已经更新了数据，导致获取的citations没有更新上（通过打印发现citations是正确获取的，只是没更新上）
   
   由于不是特别熟悉js的异步机制，我已经在这里卡了很久了，我一开始的想法是修改setTimeout函数

setTimeout(() => {
          //sleep(255);
          dispatch(receiveData(normalized(data)));
        }, 255);

增大时间间隔，但是这种静态的设置导致数据小时延迟过大，数据量大时又无法正常显示，想了很久仍没有很好的解决思路，因此这个问题目前确实超出了自己的能力范畴，所以过来向您请教。

如果您后续想要加这个功能，请通知我一下；如果没有兴趣或过于忙碌，或许可以再指点我一二，在此表示感谢🙏。

[sabertazimi]

建议 Rebase 一下然后提交一个 PR, 我可以帮忙完善功能。