may provide better accessibility and a better experience on some screen sizes. might be nicer than
just cmd + browser zoom

for accessibility and scannability purposes i'd bump up the font sizes for 'block-description' to 18/24 and 'block user' to 14/18

taking this advice, working back to the problem statement, and imagining a different solution. increasing the size of the block description and the block user text without increasing the size of the block result card doesn't look quite right 🤔

inspired by #12

User Story:

As a Blockbuilder Search user, I want the thumbnail filter state (the boolean corresponding to the checkbox) to be part of the URL, so that I can share links to results pages that only include thumbnails.

Desired behavior:

• Clicking the checkbox for including thumbnails should update the URL
• The checkbox should be initialized based on the flag presence in the URL

Related: #5 #29

parse twitter feedback into github issues

good ideas from @nbremer and @monfera about improving our search and filtering

https://twitter.com/NadiehBremer/status/1039100202865582081

should probably url-encode the space as %20

current: http://blockbuilder.org/search#text=tidy tree

desired: http://blockbuilder.org/search#text=tidy%20tree

prettier format the codebase https://prettier.io

at http://blockbuilder.org/search

precompute function list and module list

while we can get these from an elastic live search query, it is likely a better user experience if the list is precomputed and already loaded when the user clicks on the d3 API function or d3-modules dropdown menu.

since the list probably does not change too often, it should be safe to precompute server-side.

broken off from #12

for the block elements [on the search results page], you could also try adding a slightly opaque white filter above the visualization preview image, so that content is more legible, this will help will accessibility down the road

as suggested by @dezein

allow user to optionally sort empty-search-term latest results by most recently updated

support for sorting blocks by most recently update would be nice. (the current default sort is most recently created blocks)

design advice from @dezein

as of right now the filter inputs look like text fields, which threw me off when i clicked them and they functioned like a dropdown menu, perhaps style them like a dropdown menu so their affordance is conveyed to the user

inspired by #12

filter search results by block license

a feature request from @y3l2n

user story

as a user, I want to search for blocks with permissive licenses like MIT or Apache-2.0

add missing bundle by running yarn build

add missing bundle.js omitted in this PR #64

infinite scroll

the client issue for enjalot/blockbuilder-search-index#45

details and motivation there

queries

checked queries have been tested to work with Elasticsearch v6.4.0

• page load: show 512 recent blocks
• keyword search, no filters
• keyword search, username filter #31 (comment)
• fetch list of d3 API functions

docs for modified queries

Filtered query https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-filtered-query.html

Disjoint max query https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-dis-max-query.html

do this to reduce query latency by dropping big, unused fields

figure out why we commit bundle.js to git

inspired by this PR comment #62 (review)

investigate queries that return a result containing the same gist id twice

#60 (comment)

steps to reproduce

search for the query force
https://blockbuilder.org/search#text%3Dforce

log out the key for the result div in the components/results.js

May 2016 Elasticsearch 2.3.4 is a known working version

related to #15

investigate how elasticsearch handles case in queries for keyword fields

earlier I thought that elasticsearch stored all the usernames as lower-cased strings. now that I look more closely at this dejavu UI for our elasticsearch index, that does not seem to be true:

(the project is https://github.com/appbaseio/dejavu)

it would be nice to be able to filter blockbuilder search results to show only blocks that have (or do not have) some combination of these conventionally named image files:

thumbnail.png
preview.png

when I use elasticsearch-5.4.3,

I see this elasticsearch error when I click on the

input box

[terms] failed to parse field [size]

I'll make this issue as a bookmark for some enterprising soul to perhaps upgrade this project to a recent version of elastic search sometime in the future 😅

improve project structure

put source code in a src directory, and generally follow community conventions for react apps to make blockbuilder-search more accessible to new contributors.

before we used views (handlebar views) and react (react components) as directory names, to organize code by technology.

something like this perhaps

from file in this React tutorial repo

https://github.com/micahstubbs/complete-intro-to-react/blob/db693085493584ffc56a9da50d0ddaf7565090d2/js/Search.jsx

if you refresh with user=fil in the title bar, it doesnt populate the text

expected behavior

the query string in the title bar should match the search and filter selections in the UI

before refresh

after refresh

http://www.r-graph-gallery.com

https://twitter.com/R_Graph_Gallery/status/915092693977460741

header text occludes buttons at narrow widths

feature idea 💡

add a "search on observable" button that would take the current search query and open a new browser window (tab) with an observable hq search for that current blockbuilder.org/search search query

here is the url format for the observable search page
https://beta.observablehq.com/search?query=isometric%20logos

add eslint for code quality https://eslint.org/

http://blockbuilder.org/search#user=fil

contrast with

http://bl.ocks.org/fil

review linting config

perhaps it's a bit too strict in some cases?

#72 (comment)

search code, text, and block images in a common vector space, with an approach like described in this post https://towardsdatascience.com/semantic-code-search-3cd6d244a39c

this component should be much more complete than what I hacked together
https://jedwatson.github.io/react-select/

mixed content warning - replace http links with https links

d3.js:1999 Mixed Content: The page at 'https://blockbuilder.org/search' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://christopheviau.com/block_screenshot/screenshot_list.json'. This request has been blocked; the content must be served over HTTPS.

repro steps

• visit https://blockbuilder.org/search
• open the browser console

find some mouse and/or keyboard actions that are intuitive and play nicely with existing blockbuilder search UI and existing browser hotkeys

related to #6

perhaps with font-awesome?

http://fontawesome.io/icon/plus/

http://fontawesome.io/get-started/

current state:

inspired by #12

as requested by @curran is there any way to search for multiple users on Blockbuilder search? e.g. enjalot OR micahstubbs http://blockbuilder.org/search#user%3Denjalot%20OR%20micahstubbs

as mentioned by @enjalot in this blockbuilder PR conversation enjalot/blockbuilder#209

perhaps a cmd+click and/or ctrl+click on the block thumnbail image could open the example on bl.ocks.org?

single clicking could retain it's current open-in-blockbuilder-editor behavior

make url hash more human-readable

what if instead of this

http://[::]:8889/search#textt%3Dforce

we had this:

http://[::]:8889/search#text=force

?

to make it easier to find d3 examples that have some level of documentation

related to #6

a collaborative filtering recommendation engine that learns from user search behaviors and recommends search results based on the search behavior of similar users.

update footer credits

make username search case-insensitive

🎨 design

searching for Fil should return the same results as fil

searching for RobertDelgado should return the same results as robertdelgado

so for example, both:

fil and Fil would return results for github user Fil:

http://blockbuilder.org/search#user=fil
http://blockbuilder.org/search#user=Fil

assumption to validate: that github doesn't allow usernames with the same characters in different case

caused by #8

inspired by #5

imagine a search interface that returns similar blocks when you specify the github gist id of a certain block. this search feature would offer a low-cognitive-load way for users to see more blocks that are similar to a certain block.

Oh, I like that. Show me more blocks like that!

a working definition of similarity could be all blocks within 2 degrees of the searched block. the number of degrees to search could be user-configurable.

the search should return blocks that are similar across all graphs indexed by blockbuilder search. today, these metadata graphs are

• README.md links graph data
• d3 functions used
• colors used
• functions-call-functions
• block similarity
• svg shape used
• similar svg path used
• shared source data
• shared geography files
• common svg text, e.g. population

other networks of interactions or shared properties of d3js blocks

some of the data use to construct these graphs is collected at blockbuilder-search-index/data/parsed

the graph used to return search results should also be user-configurable

processed versions of the checked graphs can be found at: https://github.com/micahstubbs/blockbuilder-graph-search-index/tree/master/data/csv-graphs-for-neo4j

add gcp credit to the footer on the search results page