Introduce categories into navbar tags/search dropdown

[jywarren]

plots2/app/controllers/tag_controller.rb

Lines 398 to 405 in 77188ba

	def suggested
	if !params[:id].empty? && params[:id].size > 2
	@suggestions = SearchService.new.search_tags(params[:id])
	render json: @suggestions.collect { |tag| tag.name }.uniq
	else
	render json: []
	end
	end

So when typing water this endpoint returns:

[
  "water",
  "water-samples",
  "waterkeepers",
  "water-sampling",
  "wateristic",
  "wateristics",
  "water-monitoring-network",
  "water-monitoring",
  "water-monitor",
  "water-sensing"
]

My guess from this code: https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/fc2d5dce4a5406d9b924224e395d5647918707c7/bootstrap3-typeahead.js#L335-L352

...is that if an item has an attribute "category" then they will be sorted by that category.

But above they are just strings. We should switch to the JSON type shown here: https://github.com/bassjobsen/Bootstrap-3-Typeahead#using-json-objects-instead-of-simple-strings

So we will need to modify def suggested above - and will have to be careful that doesn't break anything else (some other systems may depend on it returning a string -- https://github.com/publiclab/plots2/search?q=suggested shows a few!)

So as not to break anything else, maybe we should use a params flag like params[:json] and the request should be like: https://publiclab.org/tag/suggested/water?json=true?

[jywarren]

Actually i believe that this line shows that it doesn't sort the results at all -- it only shows a category header if the previous item is not of the same category type as the current one:

https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/fc2d5dce4a5406d9b924224e395d5647918707c7/bootstrap3-typeahead.js#L339

That may mean that we can introduce the "search" option from the Ruby side, whether or not we use categories -- JavaScript really isn't re-ordering the returned results!

[jywarren]

So the steps would be:

• change the suggested method to look for params[:json] and return json if it's the case (probably by creating a Ruby hash (associative array) and then returning it with something like:

render json: items

• modify the Ruby method to append a category to each item
• add a new item to the "beginning" of the hash, with a category like "search"]
• modify the logic here to run a search instead of look up a tag for the newly added item, by changing line 56 to look for "category" of "search" as well:

  plots2/app/assets/javascripts/restfulTypeahead.js

  Lines 55 to 73 in ec2b994

  	updater: function (item) {
  	if (item.hasOwnProperty('showAll') && item.showAll) {
  	var query = this.value;
  	window.location = window.location.origin + "/search/?q=" + query;
  	}
  	else if (item.hasOwnProperty('doc_url') && item.doc_url) {
  	window.location = window.location.origin + item.doc_url;
  	} else {
  	window.location = window.location.origin + '/tag/' + item.doc_title;
  	}
  	item = item.doc_title;
  	return item;
  	},
  	addItem: {
  	doc_title: 'Search all content',
  	showAll: true
  	}
  	});

I may have missed some steps but that sounds like a good start! Does it make sense?

[jywarren]

@KarishmaVanwari let me know what you think about this!

[KarishmaVanwari]

Hi @jywarren!
Apologies for delayed response. I have been reading this and went through the details as mentioned. It's been difficult for me to figure out this complete task, since it sounds a little complicated (it seems so, I'm not sure though). I guess I'll need time to figure this out. Also can we discuss this over the meet this Tuesday? I need some input to understand this better.
Thanks!

[jywarren]

Yes we can def. discuss Tuesday! It is a bit complex. I would break it into parts:

1. get the JSON format response working first, test it manually
2. get the navbar autocomplete code to request the JSON format by adding the ?json=true flag
3. get the navbar autocomplete code to read JSON format by setting that using https://github.com/bassjobsen/Bootstrap-3-Typeahead#using-json-objects-instead-of-simple-strings

We could make a PR here and merge it if you want since it's all working OK at this point!

4. now try introducing a new item into the list by adding it in Ruby in the def suggested method. It may take some trial and error to correctly add it. Monitor the results by manually fetching them in the JS console from any PublicLab.org page using $.post('https://publiclab.org/tag/suggested/water').done(function(r){console.log(r)})
5. Once you figure it out, you should be able to try searching in your local dev environment by just typing into the navbar typeahead field!
6. Now, we adjust what we want it to say and where it should link to

Now we could do another PR and merge

7. Now we can try adding the "category" value, so that the JSON ends up looking something like the below:

[
    {id: "typeahead-search", name: "Search for 'water'", category: "search"},
    {id: "typeahead-water-quality", name: "water-quality", category: "tags"},
    {id: "typeahead-water-pollution", name: "water-pollution", category: "tags"}
]

This will probably mean editing the outgoing Ruby Hash, doing something like this: https://stackoverflow.com/a/16573500

OK, this is a lot... let me know if it makes any sense, but the big message is, do it in small pieces and ask for clarifications along the way! You don't have to understand the whole thing at once, and you're learning a lot of moving pieces at the same time, so it's OK to solve one piece at a time. 🎉

[jesutobi]

Good day my name is jesutobi, i am an outreachy applicant, i would like to contribute on this issue

[nawed2611]

Hey, can I work on this issue?