jpwahle / cs-insights-frontend Goto Github PK

Is your feature request related to a problem? Please describe.
The tools of the boxplot have no effect, besides moving the plot to the side.

Describe the solution you'd like

• Remove the five tools that are not needed, but keep the export functionality.
• Remove the y-offset from the toolbar, as it will now fit next to the title again.

Describe alternatives you've considered
Make the toolbar function properly, i.e. make the zoom available for the vertical direction and not just the horizontal.

Is your feature request related to a problem? Please describe.
We need to lint the code for code quality and consistency.

Describe the solution you'd like
Include the solution from this link.

Describe alternatives you've considered
Other linting solutions are welcome.

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the citations in our dataset.

Describe the solution you'd like
Implement the following in the view for citations:

• Scatterplot with ingoing citations over time
• Scatterplot with outgoing citations over time

Describe alternatives you've considered
Instead of scatterplots we might use line charts. If these plots turn out to be less interesting, we can remove them and the view.

Additional context
Backend issue: jpwahle/cs-insights-backend#34

Is your feature request related to a problem? Please describe.
We would like to filter by the keywords used in the title and abstract. There should be an option to select if the user wants to consider keywords in the title, abstract, or both.

Describe the solution you'd like
Implement a textfield and 2 checkboxes, where the user can decide between filtering by titles, abstracts, both, or nothing.

Additional context
Backend issue: jpwahle/cs-insights-backend#37

Is your feature request related to a problem? Please describe.
Unit tests are still missing.

Describe the solution you'd like
Add tests according to the docs here

Is your feature request related to a problem? Please describe.
We want to allow users to perform more fine grained analysis, which requires the ability to filter the data.

Describe the solution you'd like
Implement the following filters:

• Year of publication (from - to)
• Author (any position in the paper)
• Venue
• Affiliation
• Access type
• Paper type
• Publisher
• Fields of study

Additional context
Backend issue: jpwahle/cs-insights-backend#26

Is your feature request related to a problem? Please describe.
We want to give the user more information when using the filters.

Describe the solution you'd like
All filters should have the following features (except year of publication):

• All empty values are aggregated to "Unknown"
• Return the top entries and their respective amount of "hits"
• Maybe show these top entries outside the autocomplete/search field, without having to click in it

Additional context
Backend issue: jpwahle/cs-insights-backend#53

Is your feature request related to a problem? Please describe.
We can export the all charts made using ApexCharts as CSV, PNG, and SVG. We can only export the Grid as CSV.

Describe the solution you'd like
Add PNG and SVG export options to the Grid, similar to the other charts. There might be a package to export images of UI components.

Describe the bug
On some dashboards the labels on the TreeMap are not readable, because the text is too long. If the label is too long ApexCharts makes the label very small. There are also some overflow issues on some dashboards.

To Reproduce
Steps to reproduce the behavior:

1. Go to Papers dashboard
2. Click on "Apply Filters/Fetch Data"
3. See the small labels in the TreeMap

Expected behavior
The label should be readable. The label size can be increased using some commented out code in the App.css. This causes even more overflow issues, as the labels are now too large.
Here are some possible fixes:

• Make all labels the same size, so they cannot be too small
• Make the labels larger, but only show the first few letters if there is no space left
• Show nothing if the field is too small

Screenshots

Taken on a normal 1080p monitor.

Desktop (please complete the following information):

• OS: Linux Mint 20.3
• Browser: Chrome Version 103

Additional context
The commented out code mentioned:

.treemap .apexcharts-datalabel {
  overflow: scroll;
  overflow-wrap: break-word;
  font-size: 14px !important;
}

Is your feature request related to a problem? Please describe.
We are required to include certain things like the "Impressum" and privacy policy etc. on the website.

Describe the solution you'd like
Include an "Impressum" (including copyright) and all the other necessary legal stuff that a website in Germany and the EU requires.

Is your feature request related to a problem? Please describe.
Currently we can select filters (e.g., an author) but not say that we want to see all data except a filter (e.g., a single author)-

Describe the solution you'd like
We want to be able to filter according to some types that we exclude. Basically this can be implemented as a "logical not" checkbox on a filter.

Is your feature request related to a problem? Please describe.
Every time there is a new release, an automatic upstream to firebase should happen and re-route the traffic to the new release version.

Describe the solution you'd like
GitHub actions should automatically recognize when there is a new release and use the repository secrets to upstream the code to firebase.

Describe alternatives you've considered
Later we might want to serve this tool from the DKE server directly, but firebase is easier to use in the first place.

Additional context
None

Is your feature request related to a problem? Please describe.
Every query to the backend requires that the user is authenticated. This in return requires the user to be able to create an account (register) and then login.

Describe the solution you'd like

• Add a route where the user can register
• Add a route where the user can login
• Optional: Add a "remember me" button, so the user can stay logged in

Describe alternatives you've considered
Instead of adding routes, use dialogues or something similar.

Describe the bug
The default value of the metric switch is "#Papers". This will also affect the papers dashboard, even though the switch cannot be changed in that dashboard. This results in the boxplot and treemap incorrectly showing "#Papers". There is no error in the processed data, as the backend ignores the selected metric for papers.

To Reproduce
Steps to reproduce the behavior:

1. Go to the papers dashboard
2. See "#Papers" on the boxplot and treemap

Expected behavior
When entering the papers dashboard, the metric switch should be automatically set to "#Citations", as that is the only supported metric for the papers dashboard.

Desktop (please complete the following information):

• OS: Linux Mint 20.3
• Browser: Chrome Version 103

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the topics (word based analysis) in our dataset.

Describe the solution you'd like
Implement the following in the view for topics:

• Top unigrams over time (percentage based or total)
• Bar chart with most used unigrams in titles
• Bar chart with most used unigrams in abstracts
• Optional: a toggle to show the same charts for bigrams

Additional context
Backend issue: jpwahle/cs-insights-backend#35

Is your feature request related to a problem? Please describe.
If an invalid token is set in localStorage the user can access app, but not query the backend. This might confuse the user.

Describe the solution you'd like
If the frontend gets a 401 Unauthorized response, delete the token in localStorage and send the user back to the login page. Additionally inform the user of what happend.

Additional context
Related issue: #28

Is your feature request related to a problem? Please describe.
Currently all strings are hardcoded. In the future we might want to add more languages than English, so we have to replace all those hardcoded strings.

Describe the solution you'd like
Implement I18n and L10n for English.

Additional context
A library like react-i18next could be used.

Needs to be done after jpwahle/cs-insights-backend#64

Is your feature request related to a problem? Please describe.
To get started we would like to get some basic things implemented first.

Describe the solution you'd like
Implement the following:

• Basic layout (what goes where)
• Authorization with the backend
• Papers view
  • Line chart with papers over time
  • Table to view top papers

Additional context
Backend issue: jpwahle/cs-insights-backend#23

Please send me some screenshots on slack and I will update the READMEs

Is your feature request related to a problem? Please describe.
Some queries can be quite expensive, so it would save some resources, if we could notify the backend of any aborted query, e.g. because the user refetched with new filters, selected other parameters (e.g. changed grid ordering), or switched to another dashboard.

Describe the solution you'd like
Implement a way to notify the backend of any aborted query. The AbortSignal of react-query should be a good way to do this.

Describe alternatives you've considered
Do not cancel any aborted queries, as react-query will still cache the results and the user might still want that information later on.

Additional context
We recommend to solve this after #65, to be better able to judge the effect of cancelling queries.
Backend issue: jpwahle/cs-insights-backend#66

Is your feature request related to a problem? Please describe.
The app currently has 8 tabs in the AppBar: papers, ... , topics. There is also an icon to the right and our name to the left. This takes up a lot of space in the AppBar and might cause issues on smaller monitors.

Describe the solution you'd like
Find a better solution, like grouping specific tabs into MUI Autocomplete/Select components.

Describe alternatives you've considered
Other solutions are also welcome.

Is your feature request related to a problem? Please describe.
Currently, all the options shown for filters act independent of each other. They do not consider, if the current set of filters would still include this option.

Describe the solution you'd like

• Filter the suggestions shown in an Autocomplete
• Change the static filters, so all filters get their results from the backend
• Make sure the filtering does not take too long (especially authors have a long query time)
• If ids are sent for authors or venues, make sure the export of the visualizations correctly transforms objects into strings

Additional context
Backend issue: jpwahle/cs-insights-backend#59
Related issue: #35

Is your feature request related to a problem? Please describe.
In our papers tab the user can sort the grid manually by all columns. This only sorts the grid for the items on the current page (most of the times 100), but not the items on other pages.

Describe the solution you'd like
The sort buttons query the backend to retrieve paged data that is sorted by the selected column.

Describe alternatives you've considered
Remove the sort buttons, so the user does not get confused, by the current behavior.

Additional context
Backend issue: jpwahle/cs-insights-backend#42

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the paper types in our dataset.

Describe the solution you'd like
Implement the following in the view for paper types:

• Line chart with paper types over time
• Table to view top paper types by papers
• Boxplot to show papers by paper types
• Treemap to show the distribution of papers over paper types

Describe alternatives you've considered
Should some plots be not so interesting we could remove them or we drop the view entirely and only add the treemap in the papers view.

Additional context
Backend issue: jpwahle/cs-insights-backend#32

Is your feature request related to a problem? Please describe.
Sometimes an errors occurs, which could crash the frontend. We must catch these errors and handle them gracefully.

Describe the solution you'd like
Implement error handling for

• When the server cannot be reached
• Responses with an HTTP error code
• Rendering errors with an ErrorBoundary
• Other possible errors that might occur in the backend (UnhandledRejection)

Describe the bug
The treemap re-renders every time the user changes a filter and there will be a short flickering, because it is redrawing the chart. Other charts, like the barchart do not have this problem. Multiple filter changes in quick succession will also make the app lag for a few seconds. This is the reason we added debounce to every textfield, as every change in the field would trigger a re-render.

To Reproduce
Steps to reproduce the behavior:

1. Go to the "papers" dashboard
2. Click in the textfield "To" under " Year of publication"
3. Type in any number and wait one second.
4. See the flickering in the treemap

Expected behavior
The treemap should not re-render on filter changes.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux Mint 20.3
• Browser: Chrome 103.0.5060.114

Is your feature request related to a problem? Please describe.
Currently the login is persisted by writing it to a context during login. The token is also saved to local storage, if the user selects "remember me" during login. If you do not select "remember me" during login, any navigation outside of the website, will clear the context and the user is logged out again. The token appears to also be stored indefinitely and never be invalidated.

Describe the solution you'd like
Find and implement a solution that will properly persist the login for the user using the context or in another way, both if "remember me" is checked and also if it is not checked. If local storage is deemed not viable or too insecure for this, it can be replaced. Additionally, the approach should deal with the problem of non-expiring tokens.

Describe alternatives you've considered
One possible solution could involve cookies as storage solution and refresh tokens to deal with the problem of "old" tokens.

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the authors in our dataset.

Describe the solution you'd like
Implement the following in the view for authors:

• Line chart with authors over time
• Table to view top authors by papers
• Boxplot to show papers by authors
• Treemap to show the distribution of papers over authors

Additional context
Backend issue: jpwahle/cs-insights-backend#27

Is your feature request related to a problem? Please describe.
To keep track of which version of the frontend we are serving we should display the release number on the frontend page.
Also, a link to GitHub would be nice for people to check out the repo and contribute.

Describe the solution you'd like
Add both on all pages, e.g. in the header or footer.

Describe alternatives you've considered
Add only on the main page.

Is your feature request related to a problem? Please describe.
We only link to our GitHub on the home page. It would be nice, if we could add the link and some other links to all pages.

Describe the solution you'd like

• Add a GitHub icon that link to our GitHub repo, to the right of the AppBar, next to the settings cion.
• Add other Links (e.g. to the paper) to the AppBar

Describe alternatives you've considered
Other suitable locations could be selected.

Is your feature request related to a problem? Please describe.
We can export the all charts and grids, but we cannot export the visualization from the topic model in any way. The visualization from pyLDAvis can be exported as HTML file or JSON.

Describe the solution you'd like

• Add an export option to the topic model visualization, that behaves similar to the export of pyLDAvis. The added export button should look similar to the other export buttons, so the user immediately knows he can export the visualization.
• Optional: Add an export option to export as JSON. We get the data in that format from the backend, but the user cannot really use the data outside of pyLDAvis anyway, so this option is probably not necessary.

Is your feature request related to a problem? Please describe.
We currently use 2 systems for .envs.

Describe the solution you'd like
Clean it up, so we only uses one. Additionally update the README to reflect the changes to the setup of the frontend.

Is your feature request related to a problem? Please describe.
Currently, all 4 views are in the same route. This works, because all views share the same charts, but some views in the future might have different charts.

Describe the solution you'd like
Implement each view in a separate route.

Describe the bug
When reloading the page, while it runs on the server, the browser will show 404 for every route that is not the home page.

To Reproduce
Steps to reproduce the behavior:

1. Go to our version of cs-insights, that runs on a server
2. Click on "login"
3. Hit F5 to reload the page
4. See 404 error

Expected behavior
The page reloads without error.

Desktop (please complete the following information):

• OS: Linux Mint 20.3
• Browser Chrome 103

Additional context
Known issue and solutions: https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually

Is your feature request related to a problem? Please describe.
Currently, the metric switch is handled as just another filter and thus added to every query, even for charts that are not affected by the metric switch. This allows the metric switch to trigger the "unapplied filters" warning.

Describe the solution you'd like
Remove the metric switch from the filters and handle its state somewhere else. Make sure it is only sent to endpoints that need it (currently only the treemap and boxplot).

Additional context
We recommend to first resolve #65

Is your feature request related to a problem? Please describe.
If you have made some changes and want to reload your charts, you have to click the button "Fetch Data/Apply Filters". Every GET request is already using the useNetworkGet() hook, which in return uses react-query. There, we disabled automatic fetching and build our own logic to refresh the data for all the charts, to save server resources.

Describe the solution you'd like
Enable the automatic requests again, and deal with any bugs that might occur. Also, remove the logic written for refreshing/refetching data, as it is not needed anymore (e.g. the RefreshProvider or the "Unapplied filters" warning).
Be aware, that there is a high likelihood of React getting stuck in render loops, that you will have to fix, once you remove the manual fetching.

Additional context
We recommend to resolve the following issues right after this one:
#66
#67 (and jpwahle/cs-insights-backend#66)

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the affiliations in our dataset.

Describe the solution you'd like
Implement the following in the view for affiliations:

• Line chart with affiliations over time
• Table to view top venues by affiliations
• Boxplot to show papers by affiliations
• Treemap to show the distribution of papers over affiliations

Additionally:

• Add an affiliations filter to the sidebar, similar to venues and authors

Additional context
Backend issue: jpwahle/cs-insights-backend#29

Is your feature request related to a problem? Please describe.
Currently this repository does not use any GitHub actions workflows besides a deploy script. It would be nice if the workflows from the backend or NLPLand could also be implemented here.

Describe the solution you'd like

• Implement workflow to create issues branches Use the Create a branch function on the right panel of the issue under Development instead
• Implement pull request workflow for unit tests, typing, linting, and automatic documentation.
• Implement workflow that creates releases and deploys them (deploy main branch to firebase-dev, deploy releases to firebase)
• Add/fix all badges in the README

Describe alternatives you've considered
Copying everything from the backend or NLPLand repository might also work.
👆🏻 This is probably the preferred solution to avoid work 👆🏻

Additional context
Related to #4

Is your feature request related to a problem? Please describe.
Currently, the user can only filter for one author and one venue.

Describe the solution you'd like
Allow multiple values to be filtered for. Combine them in an OR way, meaning the filter should find all items that match one or more values selected in the filter. The connection between the author and venue filter should stay as AND.

Additional context
Backend issue: jpwahle/cs-insights-backend#44

Is your feature request related to a problem? Please describe.
When you visit the website you might not want to be immediately shown all the filters, views etc. Considering the user also must first login, we should add a homepage as additional route, which the user sees first.

Describe the solution you'd like

• Add a homepage where the user can register, login, and continue to the website. This website should also tell the user he needs to login.
• Maybe the user can also be automatically redirected here, if he is not logged in.
• We might want to link the GitHub repositories of our projects or other things here.

Is your feature request related to a problem? Please describe.
Allow users to switch the metric with a dropdown menu. This should switch the counts based on the amount of papers to the amount of citations.

Describe the solution you'd like
Add a dropdown menu, which allows to switch the metric between papers and citations. This should influence all currently displayed charts.

Additional context
Backend issue: jpwahle/cs-insights-backend#30

Is your feature request related to a problem? Please describe.
The definition of CSS styles is inconsistent. Some styles are defined on the styles or sx attribute, and some over className.

Describe the solution you'd like
Decide on one way to style everything, and change all styling to match that.

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the venues in our dataset.

Describe the solution you'd like
Implement the following in the view for venues:

• Line chart with venues over time
• Table to view top venues by papers
• Boxplot to show papers by venues
• Treemap to show the distribution of papers over venues

Additional context
Backend issue: jpwahle/cs-insights-backend#28

Is your feature request related to a problem? Please describe.
Currently, some types are defined directly on the functions and some in the file types.ts.

Describe the solution you'd like
Decide on one way to type everything, and change all typing to match that. This is meant especially for the props.

Is your feature request related to a problem? Please describe.
Allow the users to perform analysis on the publishers in our dataset.

Describe the solution you'd like
Implement the following in the view for publishers:

• Line chart with publishers over time
• Table to view top publishers by papers
• Boxplot to show papers by publishers
• Treemap to show the distribution of papers over publishers

Describe alternatives you've considered
Considering we do not have information about the publishers for most papers we might remove this view entirely.

Additional context
Backend issue: jpwahle/cs-insights-backend#33

Is your feature request related to a problem? Please describe.
We need a platform-independent docker environment to run the app locally and on the server.

Describe the solution you'd like
VSCode docker dev container.