Git Product home page Git Product logo

sdmx-faceted-search-ui's Introduction

SDMX-Faceted-Search-UI

styled with prettier Build Status codecov

SDMX-Faceted-Search-UI is a graphical front end made with the react ecosystem to search and navigate with facets on SDMX Meta data.

Install

$ npm install -g yarn codecov
$ yarn
$ yarn start // dev mode
$ yarn build // and follow instructions ...

Build Docker Image

$ build  -t redpelicans/sdmx-faceted-search-ui .
$ docker run -it -p <port>:80 redpelicans/sdmx-faceted-search-ui:latest

Client config is under `src/params.js', to change server connexion setup juste mount a new file on it before starting docker image.

sdmx-faceted-search-ui's People

Contributors

abarriel avatar eric-basley avatar lcharvol avatar maissa-b avatar nicolas-briemant avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

lcharvol maissa-b

sdmx-faceted-search-ui's Issues

UI > SidePanel : tooltip

Add a tooltip on burger button when SidePanel is closed 'Click to navigate on facets'
A traduire en fct de la langue.

UI > DimensionCategory

1/ display count right side (like for Category)
2/ Justify text left
3/ highlight text + count when mouse is over (like Tree)

UI > preferences : replace by lang

Replace preference icon/menu by a menu dedicated for locales

  • replace icon by string indicating current locale
  • replace menu by one dedicated to locales switch (the last level in existing one)

UI > setLocale + Lang

1/ send request search when locale is changed (even the first time when intl.locale is first set by config action)
2/ add { ...body, lang: intl.locale } in request body

Dataflows > UI

1/ display MainPanel 100% width
2/ display 3 dataflows per line (on large screen, one par line on small)
3/ Add link on ID (not on name)
4/ display description field in popover
5/ displaying a popover must never scroll page (use a dynamic position rather than always bottom)

Search > null value

if user is entering null value in Search bar, we should launch a search (add onEnter)

Server > escape speical characters

Escape is done before calling axios, but then JSON.stringify (called by axios) add extra '', so if request is about '', after escaping we have '\', but '\\*' is sent and managed by solr as a filter value !!!!

UI > Facets :

  • Normalize highlight between CategoryFacet and others (not same height, not same width)
  • Truncate label with CSS ellipsis / display full name in popover : to be checked)

PopHoverElem : Warning

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of PopHoverElem

Search > Popover

should not display popover over link (name)
In case window is resized (devtool) displaying a popover will scroll window, display an other popover, that will sroll again and display .... => fix or popover only on an eye icon
debounce popvover display

UI > Result Panel size

ResultPanel shoulf fit in Page even if SidePanel is Open => resize it instead of translating it

client > params

Review params setup : cannot use server config system due to:
1/ require with expression and webpack
2/ lack of NODE_ENV

=> use simple params.js

CORS

Client must use CORS to request server, so for one request we have 2, one OPTIONS and POST | GET.
Check if by using 'Content-Type' = 'application/x-www-form-urlencoded' we can bypass this ?

UI > language Selector

1/ inactive and highlight selected language in menu, add a tick icon in front of selected lang
2/ close menu when a click is made outside of it
3/ inline menu inside a popover widget

UI > Pager : last

if we change params.search.count (ex: 12 instead of 10)

1/ we still have 10 dataflows instead of new value (12)
2/ last link do not work correctly

For first and last we have only 2 pages to click on instead of 3
Pager'size (ex: 3) must be setup in params.js

UI > splash page

If server is down nothing is rendered
=> instead of returning null or

return a static page with an error

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.