Opened 6 years ago

Closed 4 years ago

Last modified 4 years ago

#288 closed New feature (fixed)

UI: Provide a site selector that would scale to thousands of websites (inline search, auto suggest, ajax)

Reported by: mauser Owned by: mauser
Priority: critical Milestone: Piwik 0.6.5
Component: Core Keywords:
Cc: mauser Sensitive: no

Description

Create interactive site chooser.

See attachment.

How should it work?

  1. when you click on dropdown menu it shows list of sites from piwik installation and and one special item (the first one) called "Search..."
  2. when you click "Search..." we transform dropdown menu (select) into input text box
  3. in input box we got "x" icon to switch back to dropdown menu (it is already implemented in data tables interface when you want to cancel your search, see screenshot)
  4. when you type it displays results and highlight search keyword in javascript popup below, like in compose message in gmail (see screenshot)
  5. you can either choose site or cancel search by clicking "x" icon

Attachments (7)

close search.png (25.8 KB) - added by mauser 6 years ago.
already implemented interface in data table visualization
search results.png (46.7 KB) - added by mauser 6 years ago.
gmail interactive dropdown
search ui.png (32.3 KB) - added by mauser 6 years ago.
project of site choose UI
google-reader-selector.jpg (27.5 KB) - added by matt 6 years ago.
google reader did exactly the same dropdown already! it works great. we should the same :-)
autocompleter.tar.gz (10.4 KB) - added by mauser 5 years ago.
autocompleter v2.zip (17.6 KB) - added by mauser 5 years ago.
autocompleter v3.zip (18.3 KB) - added by mauser 5 years ago.

Download all attachments as: .zip

Change History (35)

Changed 6 years ago by mauser (zawadzinski)

already implemented interface in data table visualization

Changed 6 years ago by mauser (zawadzinski)

gmail interactive dropdown

Changed 6 years ago by mauser (zawadzinski)

project of site choose UI

comment:1 Changed 6 years ago by mauser (zawadzinski)

see search UI.png attachment for detailed use case

Changed 6 years ago by matt (mattab)

google reader did exactly the same dropdown already! it works great. we should the same :-)

comment:2 Changed 5 years ago by matt (mattab)

  • Milestone changed from DigitalVibes to Stable release

comment:3 Changed 5 years ago by mauser (zawadzinski)

  • Cc mauser added

comment:4 Changed 5 years ago by matt (mattab)

  • Milestone changed from Stable release to Features requests - after Piwik 1.0

comment:5 Changed 5 years ago by matt (mattab)

  • Summary changed from create UI for topmenu site chooser to UI: Provide a site selector that would scale to thousands of websites (inline search, auto suggest, ajax)

comment:6 Changed 5 years ago by matt (mattab)

  • Type changed from Task to New feature

comment:7 Changed 5 years ago by mauser (zawadzinski)

  • Sensitive unset

attached an autocompleter after some minor patches, IE compatible now.

comment:8 Changed 5 years ago by matt (mattab)

Cool new feature - here is my code review

  • the query to select a website on name matching should reside in the website API rather than CoreController
  • pressing enter without selecting a website leads to 404, instead it should trigger the search for the entered keyword
  • is the initial load loading all websites? I don't think it is expected, what would happen if the piwik has 10000 websites? Instead, could it load only the first N websites?
  • when no result is found, the Loading... should be replaced with "No website found for '$SEARCHED_STRING'"
  • on firefox, the arrow on the right is on top the vertical bar on its left, which looks a bit funny
  • the font looks different from the font used elsewhere in the UI, should reuse the same CSS class?

When this is bug free, we can integrate this with core, nice new feature.

comment:9 Changed 5 years ago by mauser (zawadzinski)

New version (v3), bug fixed, improvements made.

comment:10 Changed 4 years ago by matt (mattab)

  • Milestone changed from Features requests - after Piwik 1.0 to 1 - Piwik 0.5.1

comment:11 Changed 4 years ago by vipsoft (robocoder)

From a maintenance perspective, I'm a little concerned that the jSuggest developer's site has been marked as unsafe. There's also jSuggest "Enhanced", http://www.rajavarma.com/wp-content/uploads/2009/07/jquery.jSuggest.1.1.js which we should diff against for bug fixes.

Alternatively, see if https://jqueryui.pbworks.com/Autocomplete (in the development stage) can be used instead of jSuggest.

comment:12 Changed 4 years ago by matt (mattab)

  • Priority changed from major to normal

comment:13 Changed 4 years ago by matt (mattab)

Maciej, what is the status of the site selector? Is this something you are happy pushing to Piwik core? Please validate and I will do the code review.

comment:14 Changed 4 years ago by matt (mattab)

  • Milestone changed from 1 - Piwik 0.5.5 to 1 - Piwik 0.5.6

comment:15 Changed 4 years ago by matt (mattab)

  • Owner set to mauser

comment:16 Changed 4 years ago by vnese

This is to inform you that jQuery UI 1.8 has hit stable release and autocomplete is included, i dont know if we should switch to using it.

comment:18 Changed 4 years ago by matt (mattab)

it would be great to switch to jquery UI, is anyone keen to make the code change (shouldn't be difficult I don't think)?

comment:19 Changed 4 years ago by matt (mattab)

Note: the HTML is now done in trunk, the JS + PHP has to be ported in trunk, from the plugin attached to this ticket.

comment:21 Changed 4 years ago by matt (mattab)

  • Priority changed from normal to critical

comment:22 Changed 4 years ago by ts77

Could this be added / implemented also for the websites administration?
That one is awfully slow (and sometimes timinig out) with 6000 sites ;)

comment:23 Changed 4 years ago by mauser (zawadzinski)

  • Resolution set to fixed
  • Status changed from new to closed

(In [2720]) fixes #288

comment:24 Changed 4 years ago by matt (mattab)

(In [2723]) Refs #288 Fixing build

comment:25 Changed 4 years ago by matt (mattab)

(In [2724]) Refs #288 Adding css file but still missing

but still missing the autocomplete.js which I don't have - Maciej?

comment:26 Changed 4 years ago by mauser (zawadzinski)

(In [2727]) fixes #288
added missing autocomplete.js

comment:28 Changed 4 years ago by matt (mattab)

ts77, can you please contact me at matt att piwik.org? would love to hear a bit more about your use case of 6k sites, how is your experience with Piwi, and how we can improve it with that many websites. Thanks

Note: See TracTickets for help on using tickets.