sledilnik / zdravniki

Website for showing doctors' availability in Slovenia - https://zdravniki.sledilnik.org/

Zdravniki - available doctors in Slovenia

Develop

For setting up development environment locally run:

1. Install depenencies

   yarn install
   

2. ...TODO

Data source

See .csv files in the csv/ directory of zdravniki-data repository.

Translations

We use Weblate translation service. Your contributions are welcome.

Current translation status:

Libraries

Notable:

• Map: Leaflet via React Leaflet
• Internationalisation (i18n): i18next
• ...TODO...

All used libraries can be seen on GitHub dependancies.

Linting

CLI Usage

yarn lint

If you also want to automatically fix the project errors:

yarn lint --fix

IDE Usage

VSCode

Have a look at step 3 of this article from DigitalOcean

WebStorm

Tests

Unit Tests

Runs unit tests.

yarn test:unit

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

E2E Tests

Documentation: Playwright VS Code extension

Runs the end-to-end tests.

yarn playwright test

or

yarn test:e2e

Other helpful cli commands:

Starts the interactive UI mode

yarn playwright test --ui

Runs the tests only on Desktop Chrome

yarn playwright test --project=chromium

Runs the tests in a specific file.

yarn playwright test example

Runs the tests in debug mode.

yarn playwright test --debug

Auto generate tests with Codegen.

yarn playwright codegen

Generic React App instructions (to be removed or minimized)

This project was bootstrapped with Create React App.

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

zdravniki's Issues

Add error page when CSV data cannot be loaded

During the recent github outage the CSV file couldn't be loaded and the page stayed empty.

Report error: add sub-page

We should have sub-page with title + description for Report error. We should present [email protected] address there and present as mailto: link there.

Footer with source and copyright info missing

Fix copy url in FAQ

Copy url for each faq and glossary item in FAQ was lost with refactoring.

Before it worked as here: https://covid-19.sledilnik.org/sl/faq

Search text box not showing current search

1. Visit homepage https://stage-zdravniki.sledilnik.org/sl/
2. search eg for "gojimir"
3. See one search result
4. click on icon to see doctor's card
5. click back ("nazaj na imenik") on the card
6. see one search result
7. search text box is empty❗
8. user can't clear the search criteria to see other doctors❗

Add structured data info (JSON LD or Microdata)

Unrelated to basic #36 we could annotate per-doctor page with microdata for their

• contact (name, occupation. address, phone...)
• location (latitude and longitude)
• ...

Either as JSON-LD or Microdata

https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
https://w3c.github.io/json-ld-bp/
https://www.npmjs.com/package/jsonld

Console errors

On current master branch, doctor card button is misaligned (regarding to phone and location button) and there are bunch of console errors:

Filter by doctor type: add pediatrician

We should change controls for doctor type selector to have 4 options:

1. GP - Družinski zdravnik
2. Pediatrician - Pediater
3. Dentist - Zobozdravnik
4. Gynecologist - Ginekolog

We should offer selection of sub-type (Adults/Youth/Students) only for Dentists

For Pediatrician use existing Youth icon

Phone ("tel:" schema) links should not have target="_blank" attribute

on mobile it makes an extra screen flash (opens new tab and then closes it)
on desktop it opens a new tab, asking user what to do:

Support multiple phone numbers

Some doctors have multiple phone numbers listed with , as separator: we should present this as two numbers with tel: shema URL

Mobile: do not show adults/youth/students icon for gyn

Gynecologist does not have sub-type, therefore we should not show icon for adult/youth/student in filter selection below:

See also #123 which will also remove the sub-type selector for general practitioner

FAQ subpage

We would like to have FAQ subpage, similar as we have here for Sledilnik (done by @miaerbus):
https://pr-983.preview.sledilnik.org/sl/faq-vaccines

We could enter all the FAQ texts into backend.sledilnik.org:
https://docs.google.com/document/d/1m2sDOBa9ht7rK8ZWDJdxydwd-IjvulPiUnWWiPx-D5Q/edit#

Markdown bugs

• When a paragraph starts with <span>..</span>, it doesn't treat <span>..</span> as part of a paragraph
• Support markdown in title html attribute

Limit map bounds

Limit min & max latitude and longitude so that user doesn't accidentally wander too far off into the dangerous areas without doctors.

FAQ: Speed up tooltip display & visually differentiate them from links

Port sledilnik/website#999 to this project

Filter loses sync with current language

After some navigating the filter element is not switching the language anymore

1. visit Home page
2. About (via menu)
3. Switch language, eg to English in language dropdown
4. Home page (via menu)
5. Switch language, back eg to Slovenian in language dropdown
6. End up with mix:
   

Favicon and icon for social media

We need favicon and green icon for social media (square, no text)

Mobile: Map should fit better to Slovenia on initial load

The map shows too much of the rest of Europe on initial load.

Empty list when no search result

bug: Missing footer, which normally looks like:

Optional feature: there could be a "No results, try adjusting your filter or search in whole map" with possibly the "search in whole map" resetting the map zoom and position.

Map attribution out of view

The bottom edge of the map is out of the desktop viewport, making the attributions almost invisible:

Also note, we don't strictly need to attribute Leaflet, just OpenStreetMap.

Implement linting

@stefanb @lukarenko @miaerbus @mihaerzen @overlordtm @bananica
First of all I would like to thank you all for your contribution so far and that you are patient with me :).

Before I or someone else really tackle #24 and #30 I would like to have code as clean as possible in given moment. I am afraid of large number of conflicts. The second reason is very annoying. Switching between linting and other branches requires, at least from my experience, deleting /node_modules and re-installing them and I would really love to have linting enabled.

Unless there is better way, I suggest that we merge all open PRs, even thou they might not completely solve issues or implement new features. Apply linting and then continue.

If we decide so, @mihaerzen, when should we turn on rules that are currently turned off? I assume immediately after previously rule is applied. And after all rules are applied we should continue with fixing issues and implementing new features. Will it take too long to apply all the rules? What would you do?

List, popup: Useless link on institution name

Link on institution name to institution webpage in providers list is not active anymore since clicking anywhere takes the user to the doctor card.

Same in map popup.

Not sure if this is intended or not.
If so remove the link from the institution name, otherwise make the link work if user clicks/taps it.

Mobile menu disables scrolling on content page

1. Visit https://stage-zdravniki.sledilnik.org/sl/about on mobile or a very narrow screen
2. Scroll up and down
3. Open the 🍔 menu on top right
4. close the menu (click X or anywhere outside the menu)
5. Page is visible again, but scrolling on it is not possible

Opening the cluster doesn't filter doctors

When I click on a dot which opens the cluster, the list of doctors remains the same.

Doctors page: zoom and quotient

Glavarinski količnik should not be shown next to availability % - it is linked to accepts/reject.

I suggest that we show these in two lines:

• Accepts/Rejects
• Availability %

Zoom on the map should show street-level and we should allow zoom in/out controls (but no pan of map?)

doctor-name/edit pages may get indexed

Either

• remove a special /edit URL for editing (so the url stays doctor-name)
  or
• add a meta tag to header:
  <meta name="robots" content="noindex">

Watch out for cases with edit in doctor's name, like
https://stage-zdravniki.sledilnik.org/sl/gp/aladic-edit

Cluster marker colors are misleading

Cluster markers use green/yellow/red to encode the size of the cluster, which interferes with individual doctors’ markers that use green and red for ne/sprejema.

I suggest using a different color scheme for clusters, e.g.:

• all clusters are blue regardless of size; or
• clusters are colored using average of ne/sprejema for all doctors inside (green if all doctors are available, red if none of them are, yellow-orange in between)

Doctor card for all gynecologists shows "undefined" type

Eg: https://stage-zdravniki.sledilnik.org/sl/ginekolog/al-mahdawi-leyla shows:

Linting and prettier

Hi!

I went ahead and had a look at some of the pull requests. The first thing I noticed is there are different coding styles used between different authors. As this is an open-source project which will hopefully have many contributors I would suggest adding some linting to enforce a certain coding style. I believe this will increase readability and make pull request reviews easier.

Personally, I would vote to adopt eslint airbnb-typescript as I think it fits what I have seen in the code so far. I would also add this to the CI so it will run when pull request is created.

Let me know what you think!

Thank you for your amazing contributions so far! 👏🏼

Search also in institution name

...and possibly other available fields

Eg searching for "dent" yields no results when searching for dentists even if it appears in many providers' names.

Doctor page disregarding doctor type

Eg https://zdravniki.sledilnik.org/sl/den-s/sustercic-rok finds the doctor for adults:

instead for students as defined in URL path.

The data in doctors.csv contains both:

Mechanism for accepting structured corrections

In addition to #84 we could make the process easier to moderate.

For accepting and fixing errors in the data of specific doctors a gform could be more useful:

• linked on doctor's detail page
• automagically prefilled all current data
• input fields for correct data
• saved to Google sheet
• moderator reviews and approves/rejects the change in a separate column in the gsheet
• data project takes the approved rows from gsheet to CSV
• data project merges the CSV with data from ZZZS, overriding invalid data

Originally posted by @stefanb in #84 (comment)

Change of filters should not reset zoom of map

I find it annoying that zoom-out happens every time I change the filter.

I think if user did zoom-in, we should respect this and only show results matching the map.

Click on ZDRAVNIKI logo could reset zoom (like go-home)

Trim down data loaded into browsers

Check which columns from https://github.com/sledilnik/zdravniki-data/tree/main/csv are not used and either use them (eg in search) or remove them from cvs

dict-institutions.csv:

• id_inst
• zzzsSt (will become a key, when we manage to match everything)
• name
• unit ?
• address
• post
• city
• municipality ?
• lat,lon
• phone
• website

We could also add statistical region name if needed.

doctors.csv:

• id (synthetic id, not really useful, best to not use it and remove it from CSV)
• doctor
• type
• accepts
• availability
• load
• id_inst

Map tooltip show and hides on mobile/narrow screen or is partially visible

If marker's tooltip height is near map height, tooltip pushes marker outside the map and consequently disappears (fully zoomed in).

Steps to recreate:

1. go mobile or narrow screen (viewport height around 590px)
2. find "Ribič Bojan"
3. click on marker icon in doctor card (it will fully zoom in and position marker in center.
4. try to get tooltip

Video was recorded on iPhone SE 2.

tooltip-too-big.mp4

When map is zoomed out then due to map max bounds tooltip pushes marker down trying to fit on the map and then marker snaps back and tooltip is not fully visible.

Steps to recreate:

1. steps 1 - 3 from previous (viewport height around 736px - iPhone 6,7,8 plus)
2. fully zoom out
3. try to get tooltip

Do not request Location permission

Not much benefit, just risk of push back due to privacy concerns

iPad , Safari and Chrome issue in landscape

When taping on the map, user enters a "view" where only reload of the whole page exits from that view.
Zoom out pinch does not help.
In portrait it works fine as it works on handsets.
Examples of the view before and after taping on the map in Safari on iPad.

Rgds,
Kesma

Provide links to doctors' cards

Currently the business card icon is implemented using HTML <button> element, making it less likely for crawlers to click.

For better discoverability by crawlers it should either become a HTML link (<a href=....>) or we should provide a sitemap.xml file.

Tooltip for accepts/availability does not work on mobile

I have added tooltip also on Accepts/Rejects, so now we have two tooltips.
Problem is that they only show up on desktop browser, was unable to get to tooltip on mobile.

Phone number position and maybe icon?

Currently it looks like part of institution name, would move it away from it, maybe also add phone icon in front.

Improved tooltip for doctor

The new design looks great. We only need to now improve the looks of tooltip to match the new design (Sprejema, doctor type...). Also, we need to add at least a button to go to Doctor page as this is very useful for mobile, to go directly to doctor page from the map (default) view (which does not show cards anymore)

Missing SEO metadata

TODO:

• meta title and description with sane hardcoded defaults
• opengraph title and description with sane hardcoded defaults
• meta title and description localized in runtime with translations
• opengraph title and description localized in runtime with translations
• canonical links pointing to same URL but on production hostname zdravniki.sledilnik.org with all query string and hash striped (remove everything after ? or # inclusive
• hreflang links between same pages in different languages (language part of the url replaced with target language, cleaned of varying parts as above)

All external links should open in new tab

At least

• FAQ
• About

...and possibly others

Add target="_blank" and possibly rel="noopener noreferrer" to the <a> html element in DOM

Preserve current filter in URL

Preserve all search parameters, including current map position & zoom in the URL hash.

Specifically:

• doctor type should be preserved in URL path, same as doctors card, eg /en/den-y, /sl/gp, /sl/gp-y
• other parameters (search, accepts) as either query string parameters or in hash
• map position in URL hash
  For this I am happy with https://github.com/mlevans/leaflet-hash but maybe something else from
  https://leafletjs.com/plugins.html#bookmarked-panzoom is better fitted for our case

Doctor card keep loading if URL is invalid

Eg: https://stage-zdravniki.sledilnik.org/sl/zdravnik/neveljavno-ime

should show a not found (possibly 404 to prevent page from being indexed) and offer the user a link to search page with preselected doctor type

Empty menu stays open after window resize

1. Open any page in a narrow screen
2. open the hamburger menu
3. resize the page to desktop size
4. menu stays open on the right, with no options:
   

User can click left of the menu to close it and use the menu options in the top bar

Report error improvements

• Input fields validation
• we should probably add icon (maybe a flag 🏴 by @bananica) on search result. When clicked, we could simply open doctor page in report error mode.
• I would add free-form entry of additional Note where user can write freely what is wrong. For example "doctor is currently on maternity leave and does not accept patients"
• if we have Flag to report problem on each search results, then we can remove Prijavi napako from navigation bar
• we need type of doctor in the form results, as some doctors are working in multiple setups (adults and youth)

Bundle leaflet library instead of loading it from unpkg.com

For privacy (possibly getting cookies) and performance

After release: add link somewhere to covid sledilnik website

Fix language detection

When a user provides a language flag in url (e.g. https://stage-zdravniki.sledilnik.org/en/), it should always load the page in this language.