open-genes/open-genes-frontend

Open Genes is a database of human genes associated with aging and lifespan.

Changelog

Open Genes — Frontend

Start locally

Before you start

Don't forget to install Angular CLI first

npm install -g @angular/cli

For more information please visit Angular official guide

npm i

Frontend

npm run start

https://localhost:3000/

Storybook

npm run storybook

https://localhost:6006/

IDE settings for development

Please install and set up the following plugins:

• ESLint
• Prettier
• REST Client to support .http file extension which is used in a models folder (IDEA, VSCode)

Build and deploy

Build frontend

• Developers stand test build: npm run build-dev
• Demo stand build: npm run build-demo
• Production AOT build: npm run build-prod

The bundle is being deployed with GitHub Actions. Workflow configs for each environment are here:

.github/workflows

Build storybook

npm run build-storybook

Storybook is being deployed with a special GitHub action you can enable in your repository settings.

open-genes-frontend's Issues

Separate view for mobile search

Во время поиска отображается экран поиска.
В нем строка поиска всегда наверху, под ней половину экрана занимают подсказки. Ниже выводятся результаты поиска из таблицы.
Возможно их придется упростить, чтобы их не приходилось скроллить по горизонтали.

When all columns are visible in the data table, the content goes out of the page viewport

Develop Gene Ontology API service

This task has not yet been formulated properly.

Methods:

• Obtain a diagram of the relationship of processes by GO id from GO CAM.

• Get a list of genes by GO id of a process, function, or compartment

Refactor FavouritesService to NGRX

Check and fix: TS types assertion

Check and fix TypeScript types assertion across the project to provide strong typing for all entities.

Reference links on a gene page — refactoring

Develop an Angular pipe or directive to transform text occurrences found with regexp in the description into links.

The description is a plain text value we get from the fields such as commentAging and commentEvolution with links inside square braces.

PubMed id (PMID/PMCID) examples:

PMID: [23509288]
PMCID: [PMC3531190]

DOI examples:

[10.1007/b136753]
[10.1007/978-3-540-46129-6]
[10.1002/jcp.24266]
[10.1073/pnas.1506538112]
[10.5551/jat.41335]
[https://doi.org/10.1007/b136753]
[http://doi.org/10.1007/b136753]

In parsed descriptions links also may come in round braces.
UniProt links format:
(PubMed: 21325134)

Refactor CSS on a Base level

• Body and wrappers
• Main layout blocks
• Content should stay centered vertically if its height is smaller than viewport (use flexbox).
• Close TODO's

Change detection bug in app-news-list component

The skeleton loader is being shown endlessly (though PubMed API response is already retrieved) until Angular detects any changes and updates the view.

Steps to reproduce

1. Open the main page
2. Take a look at "Related articles on PubMed
   " block
3. Change window size or click any button. The loader will disappear and you will see news titles.

Expected result

The loader should disappear right after the data is loaded.

Redirect user to a website after a donation is payed

Redirect user to a website after a donation is done using a hook and show a message "Thank you for donation"

Develop Notification service

Develop a singleton service to create and display notifications.

Methods

• Create notification. Takes parameters: text (string), type (string to enum type: info, warning, success), buttonText (string).
• Get the last notification. Use RxJS operators here.
• Get an array of all notifications displayed before.

В поиске по Gene Ontology приходится два раза нажимать Enter

В поиске по Gene Ontology приходится два раза нажимать Enter в строке поиска чтобы отобразился список.

Воспроизведение:

1. Перейти на https://open-genes.com/ На главной выбрать режим поиска «Аннотации GO»

2. Ввести запрос в поисковую строку. Например "cytokine".

Ожидаемый результат

Выдача поиска появится сразу

Фактический результат

Выдача поиска не отображается, пока пользователь не нажмет "Enter" или не кликнет на кнопку поиска второй раз.

Скорее всего это баг Change Detection.

При первом клике

При втором клике

Fix unused localization keys

• Find all unused keys
• Delete them in ru.json and en.json
• Write a bash script to automate unused localization keys search in the project

Доработать представление с аннотациями GO

Вывести короткие описания

Inject TranslationService right into AppComponent

TranslationService should be injected right into an AppComponent because it's used everywhere in the app.

• Inject TranslationService right into AppComponent.
• Remove its injection from the other components.

Add a custom scroll directive

Develop a directive adding a custom scrollbar to any container.

Correct processing of http requests statuses

Correct processing of statuses of http requests:

• Show spinner when pending
• Show error with a status

Develop Hint component

Click on a term in the article on a gene's page should trigger MatBottomSheet service and open a bottom sheet with a short reference on a term taken from
JSON file by key (similar to TanslationService). The hint should display a text in the selected language (English, Russian).

If there is no key specified, a component uses WikipediaApiService (see task) to retrieve a missing description.

Angular Material

Set up Google Analytics

Show a dummy page if user opens a website in IE11

Show a dummy page with the text "Your browser is outdated" if a user opens a website in IE11

Show a dummy page if a user opens a website on IE11.

• The user should be unable to navigate the website, routing should not work.
• Use IsIeService.
• Use the layout for error blocks already presented in the app. Search for no-content class in the project and you will find it.

---

Example of .no-content block on the website

Add English and Russian translations to "Origin" and "Conservative in" blocks

Now there are Latin phylum names for gene age inside "Origin" and "Conservative in" fields. Put both names inside braces and add actual terms in the user's language.

• Main page
• Gene page

Gene page template

https://www.figma.com/file/6MxgPCuH2FrO2fMm1QelSI/Open-Genes%3A-Gene-Page-Rework?node-id=0%3A1

Fix .no-content block width in Favorites

Steps to reproduce

• Open open-genes.com/favorites
• Clear Favorites if needed

Expected behavior

Block has .container class on it and width accordingly to grid container width.

Clickable gene functions on the gene page

When a user clicks one of the gene function badges in the gene page header, they should be redirected to the main page with the results in the list of the genes filtered by that gene function.

Diseases associated with genes — main page

Output diseases by genes in a new data table on the main page or find the way to include them into the existing data table.
The main column is the name of the gene. Improve the filters so that genes in the data table can be sorted by a disease or a group of diseases.
Improve switching from one data table to another.

Filter genes on the main page by aging theories

Refactor GeneTableRowComponent and GeneCardComponent components and make them stateless

Both components use the same base class GeneTableCardLogic and inject FilterService. This is excessive because their parent component is stateful.

Add missing translations — About page

• Translate About from Russian into English and add localizable strings.
  https://open-genes.com/about

• Make a new release.

Check and fix: Components change detection

Check and fix components change detection strategy.
Remove the OnChange lifecycle hook and replace it with change detection reference where it's needed.

Check and fix: Components subscriptions and unsubscribe

Check and fix all components for unsubscribed subscriptions and unsubscribe.

Better use this pattern:

private ngUnsubscribe = new Subject();

// ...

  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

Let's discuss if we should use a mixin for this.

Diseases associated with genes — gene page

Develop Wikipedia API service

Develop a service for making queries to Wikipedia public API.

Methods:

• Show a short text description of a given term.
  Takes parameters: term (string), language (string to enum type)

Main page: Add a "Selection criteria" column

• Output selection criteria for each gene in the list of the genes
• Make filtering by selecting multiple criteria

Fonts and images preload

• Add static images preload and fonts preload to src/index.html using link rel="preload"

• Check existing links and fix them if it's needed.

Check and fix: A11y

We have to improve accessibility on the website. Let's discuss if anything is missing on a checklist.

• Add alt attribute to img
• Add aria attributes
• Check navigation with the Tab key — does it work and do users see a frame on the focused element while navigating. Fix it.

Favorites counter in the main menu doesn't update until the page reload

The favorites counter in the main menu doesn't update until the page reload.
This bug is related to change detection of the menu component.

Steps to reproduce:

1. On a home page click on the gene menu in the list.
2. Click "Add to Favorites".
3. Open the main menu

Expected result:

The counter on the menu item shows a number of genes added to Favourites.

Познакомиться с рабочим процессом

Работа над задачей

1. До того, как вы приступите к задаче, обратите внимание, что в проекте используются линтеры ESLint и Prettier, а также есть .editorconfig.
   В вашей IDE пожалуйста укажите пути к их конфигурационным файлам:

• tsconfig.json
• .prettierrc.json
• .editorconfig

2. Сделайте форк репозитория.

3. Создайте новую ветку от ветки develop. Ветка именуется по номеру задачи (например: 194 или 193-fix-change-detection-bug).

4. Протестируйте результат, прежде чем закончите работу над задачей. Коммиты мы обычно пишем на английском, формат примерно такой:

193. Fix change detection bug in GO search

Убедительно просим вас избегать названий коммитов типа fix bug.

5. Когда задача готова, запушьте изменения на свою ветку. Создайте PR от своей ветки в ветку develop. 3. По возможности ведите обсуждение задачи на странице пулл реквеста.

6. Ответственный за проект делает мердж в develop, если все хорошо. Если возникнут вопросы, во время код ревью вас могут попросить что-то исправить или доработать.

Translate all comments in the code from Russian to English

Errors on Favorites page when LocalStorage is empty

The bug happens because there is no key in the LocalStorage and there is no handling for the case of null.

Steps to reproduce:

1. Go to https://open-genes.com/favourites
2. If you worked with Favorites before, clear LocalStorage and repeat

Expected result:

Actual result:

Detect the user's language

Develop a service that interacts with TranslateService to detect the browser language and set the corresponding language. Now we have only two languages (English, Russian).

If there is no Russian translation, output descriptions in English

When the Russian language is selected and if there is no Russian translation, output descriptions in English in all templates.

Remove Font Awesome legacy

Get rid of Font Awesome, which takes a few extra fonts and a lot of CSS into the bundle.

Use the new app-icon component and SVG sprites in places where FA is currently used.

Add new SVG sprites to the sprite sheet instead of old FA analogs.

Add documentation for building sprite sheets.

Работа по данным проекта?

Извините, что не в тему. Но не нашел другого места куда написать.
Есть ли возможности как-то взаимодействовать с проектом open-genes в части работы с данными по генам? А то в РТД чате ставят в упрек, что мы пилим что-то свое и не думаем о помощи проектам Open Longevity.
Действительно, надо, как минимум, спросить. Проект ведь у вас замечательный. Может как-то реально помочь, в меру сил и компетенций?

Change the way the "Contents" section forms on a gene page

The "Contents" section does not always coincide with the presence of sections on the page

Не работают легенда и тултип у диаграмы

На ветке OG-864 в компоненте IntersectionPageComponent есть дочерний компонент ChartComponent, который отрисовывает диаграму с пересекающимися кругами по входным данным. Судя по документации библиотеки Chart.js (используется плагин https://github.com/upsetjs/chartjs-chart-venn), которая импортируется в компоненте ChartComponent, при клике на круг должен появляться тултип. Также по умолчанию должна отображаться легенда. Но кажется что Angular не отрисовывает тултип и легенду.

Ожидаемый результат

Тултип отображается при клике не пересечение кругов как на скриншоте из документации. Сверху диаграмы отображается легенда — цветные прямоугольники с подписями.

Фактический результат

Тултип и легенда не отображаются.

Represent a field "descriptionNCBI"

Represent a descriptionNCBI field on a gene page.
The task should be done after geneticists complete their task for Russian descriptions.

After updating locales, web app pages are broken until hard reload

After updating styles or localization keys, web app pages are broken until the user performs a hard reload.

Steps to reproduce

1. Add a localization key, use it on any page
2. Deploy an app
3. Open any page where the changes were made

Expected result

The page or resources shouldn't be cached, it should be up-to-date.

Actual result

Не отображается блок «Не найдено» в поиске по исследованиям

1. При поиске по исследованиям, если ничего не найдено, не отображается блок «Не найдено». Вместо него пустота.
2. Также срабатывает какой-то ивент и при клике в любую область выдачи поиска обновляется view.

Шаблон компонента: src/app/pages/researches/components/research-tab/research-tab.component.html

Воспроизведение

1. Перейти на https://open-genes.com/researches
2. Выбрать любую вкладку, ввести любой поисковый запрос вместо названия генов, по которым осуществляется фильтрация

Ожидаемый результат

Фактический результат

Не отображается блок «Не найдно». При любом клике шаблон возвращается в исходное состояние.

Set up ESLint

• Install Angular ESLint
• Configure ESLint accordingly to Angular style guide
• Setup Prettier (article on Medium)
• Fix all occurrences in code with linter

Empty blocks on a gene page

Info panels on a gene page are not hidden though there is no data. The corresponding fields and the checks should be looked over.

Steps to reproduce

1. Go to https://open-genes.com/gene/NLRP3#function
2. See the screenshots

Gene page — new layout

https://www.figma.com/file/6MxgPCuH2FrO2fMm1QelSI/Open-Genes%3A-Gene-Page-Rework?node-id=0%3A1

Unit testing

We should cover a project with tests on Jasmine.

• Write unit tests for all components and modules
• Write unit tests for all services