@ -4,7 +4,6 @@ requirejs.config({
@@ -4,7 +4,6 @@ requirejs.config({
'highlight-julia' : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia.min' ,
'headroom' : 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/headroom.min' ,
'jqueryui' : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min' ,
'minisearch' : 'https://cdn.jsdelivr.net/npm/minisearch@6.1.0/dist/umd/index.min' ,
'katex-auto-render' : 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min' ,
'jquery' : 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min' ,
'headroom-jquery' : 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/jQuery.headroom.min' ,
@ -103,9 +102,10 @@ $(document).on("click", ".docstring header", function () {
@@ -103,9 +102,10 @@ $(document).on("click", ".docstring header", function () {
} ) ;
} ) ;
$ ( document ) . on ( "click" , ".docs-article-toggle-button" , function ( ) {
$ ( document ) . on ( "click" , ".docs-article-toggle-button" , function ( event ) {
let articleToggleTitle = "Expand docstring" ;
let navArticleToggleTitle = "Expand all docstrings" ;
let animationSpeed = event . noToggleAnimation ? 0 : 400 ;
debounce ( ( ) => {
if ( isExpanded ) {
@ -116,7 +116,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
@@ -116,7 +116,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
isExpanded = false ;
$ ( ".docstring section" ) . slideUp ( ) ;
$ ( ".docstring section" ) . slideUp ( animationSpeed ) ;
} else {
$ ( this ) . removeClass ( "fa-chevron-down" ) . addClass ( "fa-chevron-up" ) ;
$ ( ".docstring-article-toggle-button" )
@ -127,7 +127,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
@@ -127,7 +127,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
articleToggleTitle = "Collapse docstring" ;
navArticleToggleTitle = "Collapse all docstrings" ;
$ ( ".docstring section" ) . slideDown ( ) ;
$ ( ".docstring section" ) . slideDown ( animationSpeed ) ;
}
$ ( this ) . prop ( "title" , navArticleToggleTitle ) ;
@ -224,15 +224,93 @@ $(document).ready(function () {
@@ -224,15 +224,93 @@ $(document).ready(function () {
} )
////////////////////////////////////////////////////////////////////////////////
require ( [ 'jquery' , 'minisearch' ] , function ( $ , minisearch ) {
require ( [ 'jquery' ] , function ( $ ) {
$ ( document ) . ready ( function ( ) {
let meta = $ ( "div[data-docstringscollapsed]" ) . data ( ) ;
if ( meta ? . docstringscollapsed ) {
$ ( "#documenter-article-toggle-button" ) . trigger ( {
type : "click" ,
noToggleAnimation : true ,
} ) ;
}
} ) ;
} )
////////////////////////////////////////////////////////////////////////////////
require ( [ 'jquery' ] , function ( $ ) {
/ *
To get an in - depth about the thought process you can refer : https : //hetarth02.hashnode.dev/series/gsoc
PSEUDOCODE :
Searching happens automatically as the user types or adjusts the selected filters .
To preserve responsiveness , as much as possible of the slow parts of the search are done
in a web worker . Searching and result generation are done in the worker , and filtering and
DOM updates are done in the main thread . The filters are in the main thread as they should
be very quick to apply . This lets filters be changed without re - searching with minisearch
( which is possible even if filtering is on the worker thread ) and also lets filters be
changed _while _ the worker is searching and without message passing ( neither of which are
possible if filtering is on the worker thread )
SEARCH WORKER :
Import minisearch
// In general, most search related things will have "search" as a prefix.
// To get an in-depth about the thought process you can refer: https://hetarth02.hashnode.dev/series/gsoc
Build index
let results = [ ] ;
let timer = undefined ;
On message from main thread
run search
find the first 200 unique results from each category , and compute their divs for display
note that this is necessary and sufficient information for the main thread to find the
first 200 unique results from any given filter set
post results to main thread
let data = documenterSearchIndex [ "docs" ] . map ( ( x , key ) => {
MAIN :
Launch worker
Declare nonconstant globals ( worker _is _running , last _search _text , unfiltered _results )
On text update
if worker is not running , launch _search ( )
launch _search
set worker _is _running to true , set last _search _text to the search text
post the search query to worker
on message from worker
if last _search _text is not the same as the text in the search field ,
the latest search result is not reflective of the latest search query , so update again
launch _search ( )
otherwise
set worker _is _running to false
regardless , display the new search results to the user
save the unfiltered _results as a global
update _search ( )
on filter click
adjust the filter selection
update _search ( )
update _search
apply search filters by looping through the unfiltered _results and finding the first 200
unique results that match the filters
Update the DOM
* /
/////// SEARCH WORKER ///////
function worker _function ( documenterSearchIndex , documenterBaseURL , filters ) {
importScripts (
"https://cdn.jsdelivr.net/npm/minisearch@6.1.0/dist/umd/index.min.js"
) ;
let data = documenterSearchIndex . map ( ( x , key ) => {
x [ "id" ] = key ; // minisearch requires a unique for each object
return x ;
} ) ;
@ -348,9 +426,9 @@ const stopWords = new Set([
@@ -348,9 +426,9 @@ const stopWords = new Set([
"your" ,
] ) ;
let index = new minis earch( {
let index = new MiniS earch( {
fields : [ "title" , "text" ] , // fields to index for full-text search
storeFields : [ "location" , "title" , "text" , "category" , "page" ] , // fields to return with searc h results
storeFields : [ "location" , "title" , "text" , "category" , "page" ] , // fields to return with results
processTerm : ( term ) => {
let word = stopWords . has ( term ) ? null : term ;
if ( word ) {
@ -358,180 +436,58 @@ let index = new minisearch({
@@ -358,180 +436,58 @@ let index = new minisearch({
word = word
. replace ( /^[^a-zA-Z0-9@!]+/ , "" )
. replace ( /[^a-zA-Z0-9@!]+$/ , "" ) ;
word = word . toLowerCase ( ) ;
}
return word ? ? null ;
} ,
// add . as a separator, because otherwise "title": "Documenter.Anchors.add!", would not find anything if searching for "add!", only for the entire qualification
// add . as a separator, because otherwise "title": "Documenter.Anchors.add!", would not
// find anything if searching for "add!", only for the entire qualification
tokenize : ( string ) => string . split ( /[\s\-\.]+/ ) ,
// options which will be applied during the search
searchOptions : {
prefix : true ,
boost : { title : 100 } ,
fuzzy : 2 ,
processTerm : ( term ) => {
let word = stopWords . has ( term ) ? null : term ;
if ( word ) {
word = word
. replace ( /^[^a-zA-Z0-9@!]+/ , "" )
. replace ( /[^a-zA-Z0-9@!]+$/ , "" ) ;
}
return word ? ? null ;
} ,
tokenize : ( string ) => string . split ( /[\s\-\.]+/ ) ,
} ,
} ) ;
index . addAll ( data ) ;
let filters = [ ... new Set ( data . map ( ( x ) => x . category ) ) ] ;
var modal _filters = make _modal _body _filters ( filters ) ;
var filter _results = [ ] ;
$ ( document ) . on ( "keyup" , ".documenter-search-input" , function ( event ) {
// Adding a debounce to prevent disruptions from super-speed typing!
debounce ( ( ) => update _search ( filter _results ) , 300 ) ;
} ) ;
$ ( document ) . on ( "click" , ".search-filter" , function ( ) {
if ( $ ( this ) . hasClass ( "search-filter-selected" ) ) {
$ ( this ) . removeClass ( "search-filter-selected" ) ;
} else {
$ ( this ) . addClass ( "search-filter-selected" ) ;
}
// Adding a debounce to prevent disruptions from crazy clicking!
debounce ( ( ) => get _filters ( ) , 300 ) ;
} ) ;
/ * *
* A debounce function , takes a function and an optional timeout in milliseconds
*
* @ function callback
* @ param { number } timeout
* Used to map characters to HTML entities .
* Refer : https : //github.com/lodash/lodash/blob/main/src/escape.ts
* /
function debounce ( callback , timeout = 300 ) {
clearTimeout ( timer ) ;
timer = setTimeout ( callback , timeout ) ;
}
const htmlEscapes = {
"&" : "&" ,
"<" : "<" ,
">" : ">" ,
'"' : """ ,
"'" : "'" ,
} ;
/ * *
* Make / Update the search component
*
* @ param { string [ ] } selected _filters
* Used to match HTML entities and HTML characters .
* Refer : https : //github.com/lodash/lodash/blob/main/src/escape.ts
* /
function update _search ( selected _filters = [ ] ) {
let initial _search _body = `
< div class = "has-text-centered my-5 py-5" > Type something to get started ! < / d i v >
` ;
let querystring = $ ( ".documenter-search-input" ) . val ( ) ;
if ( querystring . trim ( ) ) {
results = index . search ( querystring , {
filter : ( result ) => {
// Filtering results
if ( selected _filters . length === 0 ) {
return result . score >= 1 ;
} else {
return (
result . score >= 1 && selected _filters . includes ( result . category )
) ;
}
} ,
} ) ;
let search _result _container = ` ` ;
let search _divider = ` <div class="search-divider w-100"></div> ` ;
if ( results . length ) {
let links = [ ] ;
let count = 0 ;
let search _results = "" ;
results . forEach ( function ( result ) {
if ( result . location ) {
// Checking for duplication of results for the same page
if ( ! links . includes ( result . location ) ) {
search _results += make _search _result ( result , querystring ) ;
count ++ ;
}
links . push ( result . location ) ;
}
} ) ;
let result _count = ` <div class="is-size-6"> ${ count } result(s)</div> ` ;
search _result _container = `
< div class = "is-flex is-flex-direction-column gap-2 is-align-items-flex-start" >
$ { modal _filters }
$ { search _divider }
$ { result _count }
< div class = "is-clipped w-100 is-flex is-flex-direction-column gap-2 is-align-items-flex-start has-text-justified mt-1" >
$ { search _results }
< / d i v >
< / d i v >
` ;
} else {
search _result _container = `
< div class = "is-flex is-flex-direction-column gap-2 is-align-items-flex-start" >
$ { modal _filters }
$ { search _divider }
< div class = "is-size-6" > 0 result ( s ) < / d i v >
< / d i v >
< div class = "has-text-centered my-5 py-5" > No result found ! < / d i v >
` ;
}
if ( $ ( ".search-modal-card-body" ) . hasClass ( "is-justify-content-center" ) ) {
$ ( ".search-modal-card-body" ) . removeClass ( "is-justify-content-center" ) ;
}
$ ( ".search-modal-card-body" ) . html ( search _result _container ) ;
} else {
filter _results = [ ] ;
modal _filters = make _modal _body _filters ( filters , filter _results ) ;
if ( ! $ ( ".search-modal-card-body" ) . hasClass ( "is-justify-content-center" ) ) {
$ ( ".search-modal-card-body" ) . addClass ( "is-justify-content-center" ) ;
}
$ ( ".search-modal-card-body" ) . html ( initial _search _body ) ;
}
}
const reUnescapedHtml = /[&<>"']/g ;
const reHasUnescapedHtml = RegExp ( reUnescapedHtml . source ) ;
/ * *
* Make the modal filter html
*
* @ param { string [ ] } filters
* @ param { string [ ] } selected _filters
* @ returns string
* Escape function from lodash
* Refer : https : //github.com/lodash/lodash/blob/main/src/escape.ts
* /
function make _modal _body _filters ( filters , selected _filters = [ ] ) {
let str = ` ` ;
filters . forEach ( ( val ) => {
if ( selected _filters . includes ( val ) ) {
str += ` <a href="javascript:;" class="search-filter search-filter-selected"><span> ${ val } </span></a> ` ;
} else {
str += ` <a href="javascript:;" class="search-filter"><span> ${ val } </span></a> ` ;
}
} ) ;
let filter _html = `
< div class = "is-flex gap-2 is-flex-wrap-wrap is-justify-content-flex-start is-align-items-center search-filters" >
< span class = "is-size-6" > Filters : < / s p a n >
$ { str }
< / d i v >
` ;
return filter _html ;
function escape ( string ) {
return string && reHasUnescapedHtml . test ( string )
? string . replace ( reUnescapedHtml , ( chr ) => htmlEscapes [ chr ] )
: string || "" ;
}
/ * *
* Make the result component given a minisearch result data object and the value of the search input as queryString .
* To view the result object structure , refer : https : //lucaong.github.io/minisearch/modules/_minisearch_.html#searchresult
* Make the result component given a minisearch result data object and the value
* of the search input as queryString . To view the result object structure , refer :
* https : //lucaong.github.io/minisearch/modules/_minisearch_.html#searchresult
*
* @ param { object } result
* @ param { string } querystring
@ -547,7 +503,7 @@ function make_search_result(result, querystring) {
@@ -547,7 +503,7 @@ function make_search_result(result, querystring) {
display _link += ` ( ${ result . page } ) ` ;
}
let textindex = new RegExp ( ` \\ b ${ querystring } \\ b ` , "i" ) . exec ( result . text ) ;
let textindex = new RegExp ( ` ${ querystring } ` , "i" ) . exec ( result . text ) ;
let text =
textindex !== null
? result . text . slice (
@ -559,11 +515,13 @@ function make_search_result(result, querystring) {
@@ -559,11 +515,13 @@ function make_search_result(result, querystring) {
)
: "" ; // cut-off text before and after from the match
text = text . length ? escape ( text ) : "" ;
let display _result = text . length
? "..." +
text . replace (
new RegExp ( ` \\ b ${ querystring } \\ b ` , "i" ) , // For first occurrence
'<span class="search-result-highlight p-1">$&</span>'
new RegExp ( ` ${ escape ( querystring ) } ` , "i" ) , // For first occurrence
'<span class="search-result-highlight py -1">$&</span>'
) +
"..."
: "" ; // highlights the match
@ -581,7 +539,7 @@ function make_search_result(result, querystring) {
@@ -581,7 +539,7 @@ function make_search_result(result, querystring) {
< div class = "w-100 is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-flex-start" >
< div class = " search - result - title has - text - weight - bold $ {
in _code ? "search-result-code-title" : ""
} " > $ { result . title } < / d i v >
} " > $ { escape ( result . title ) } < / d i v >
< div class = "property-search-result-badge" > $ { result . category } < / d i v >
< / d i v >
< p >
@ -601,14 +559,213 @@ function make_search_result(result, querystring) {
@@ -601,14 +559,213 @@ function make_search_result(result, querystring) {
return result _div ;
}
self . onmessage = function ( e ) {
let query = e . data ;
let results = index . search ( query , {
filter : ( result ) => {
// Only return relevant results
return result . score >= 1 ;
} ,
} ) ;
// Pre-filter to deduplicate and limit to 200 per category to the extent
// possible without knowing what the filters are.
let filtered _results = [ ] ;
let counts = { } ;
for ( let filter of filters ) {
counts [ filter ] = 0 ;
}
let present = { } ;
for ( let result of results ) {
cat = result . category ;
cnt = counts [ cat ] ;
if ( cnt < 200 ) {
id = cat + "---" + result . location ;
if ( present [ id ] ) {
continue ;
}
present [ id ] = true ;
filtered _results . push ( {
location : result . location ,
category : cat ,
div : make _search _result ( result , query ) ,
} ) ;
}
}
postMessage ( filtered _results ) ;
} ;
}
// `worker = Threads.@spawn worker_function(documenterSearchIndex)`, but in JavaScript!
const filters = [
... new Set ( documenterSearchIndex [ "docs" ] . map ( ( x ) => x . category ) ) ,
] ;
const worker _str =
"(" +
worker _function . toString ( ) +
")(" +
JSON . stringify ( documenterSearchIndex [ "docs" ] ) +
"," +
JSON . stringify ( documenterBaseURL ) +
"," +
JSON . stringify ( filters ) +
")" ;
const worker _blob = new Blob ( [ worker _str ] , { type : "text/javascript" } ) ;
const worker = new Worker ( URL . createObjectURL ( worker _blob ) ) ;
/////// SEARCH MAIN ///////
// Whether the worker is currently handling a search. This is a boolean
// as the worker only ever handles 1 or 0 searches at a time.
var worker _is _running = false ;
// The last search text that was sent to the worker. This is used to determine
// if the worker should be launched again when it reports back results.
var last _search _text = "" ;
// The results of the last search. This, in combination with the state of the filters
// in the DOM, is used compute the results to display on calls to update_search.
var unfiltered _results = [ ] ;
// Which filter is currently selected
var selected _filter = "" ;
$ ( document ) . on ( "input" , ".documenter-search-input" , function ( event ) {
if ( ! worker _is _running ) {
launch _search ( ) ;
}
} ) ;
function launch _search ( ) {
worker _is _running = true ;
last _search _text = $ ( ".documenter-search-input" ) . val ( ) ;
worker . postMessage ( last _search _text ) ;
}
worker . onmessage = function ( e ) {
if ( last _search _text !== $ ( ".documenter-search-input" ) . val ( ) ) {
launch _search ( ) ;
} else {
worker _is _running = false ;
}
unfiltered _results = e . data ;
update _search ( ) ;
} ;
$ ( document ) . on ( "click" , ".search-filter" , function ( ) {
if ( $ ( this ) . hasClass ( "search-filter-selected" ) ) {
selected _filter = "" ;
} else {
selected _filter = $ ( this ) . text ( ) . toLowerCase ( ) ;
}
// This updates search results and toggles classes for UI:
update _search ( ) ;
} ) ;
/ * *
* Make / Update the search component
* /
function update _search ( ) {
let querystring = $ ( ".documenter-search-input" ) . val ( ) ;
if ( querystring . trim ( ) ) {
if ( selected _filter == "" ) {
results = unfiltered _results ;
} else {
results = unfiltered _results . filter ( ( result ) => {
return selected _filter == result . category . toLowerCase ( ) ;
} ) ;
}
let search _result _container = ` ` ;
let modal _filters = make _modal _body _filters ( ) ;
let search _divider = ` <div class="search-divider w-100"></div> ` ;
if ( results . length ) {
let links = [ ] ;
let count = 0 ;
let search _results = "" ;
for ( var i = 0 , n = results . length ; i < n && count < 200 ; ++ i ) {
let result = results [ i ] ;
if ( result . location && ! links . includes ( result . location ) ) {
search _results += result . div ;
count ++ ;
links . push ( result . location ) ;
}
}
if ( count == 1 ) {
count _str = "1 result" ;
} else if ( count == 200 ) {
count _str = "200+ results" ;
} else {
count _str = count + " results" ;
}
let result _count = ` <div class="is-size-6"> ${ count _str } </div> ` ;
search _result _container = `
< div class = "is-flex is-flex-direction-column gap-2 is-align-items-flex-start" >
$ { modal _filters }
$ { search _divider }
$ { result _count }
< div class = "is-clipped w-100 is-flex is-flex-direction-column gap-2 is-align-items-flex-start has-text-justified mt-1" >
$ { search _results }
< / d i v >
< / d i v >
` ;
} else {
search _result _container = `
< div class = "is-flex is-flex-direction-column gap-2 is-align-items-flex-start" >
$ { modal _filters }
$ { search _divider }
< div class = "is-size-6" > 0 result ( s ) < / d i v >
< / d i v >
< div class = "has-text-centered my-5 py-5" > No result found ! < / d i v >
` ;
}
if ( $ ( ".search-modal-card-body" ) . hasClass ( "is-justify-content-center" ) ) {
$ ( ".search-modal-card-body" ) . removeClass ( "is-justify-content-center" ) ;
}
$ ( ".search-modal-card-body" ) . html ( search _result _container ) ;
} else {
if ( ! $ ( ".search-modal-card-body" ) . hasClass ( "is-justify-content-center" ) ) {
$ ( ".search-modal-card-body" ) . addClass ( "is-justify-content-center" ) ;
}
$ ( ".search-modal-card-body" ) . html ( `
< div class = "has-text-centered my-5 py-5" > Type something to get started ! < / d i v >
` );
}
}
/ * *
* Get selected filters , remake the filter html and lastly update the search modal
* Make the modal filter html
*
* @ returns string
* /
function get _filters ( ) {
let ele = $ ( ".search-filters .search-filter-selected" ) . get ( ) ;
filter _results = ele . map ( ( x ) => $ ( x ) . text ( ) . toLowerCase ( ) ) ;
modal _filters = make _modal _body _filters ( filters , filter _results ) ;
update _search ( filter _results ) ;
function make _modal _body _filters ( ) {
let str = filters
. map ( ( val ) => {
if ( selected _filter == val . toLowerCase ( ) ) {
return ` <a href="javascript:;" class="search-filter search-filter-selected"><span> ${ val } </span></a> ` ;
} else {
return ` <a href="javascript:;" class="search-filter"><span> ${ val } </span></a> ` ;
}
} )
. join ( "" ) ;
return `
< div class = "is-flex gap-2 is-flex-wrap-wrap is-justify-content-flex-start is-align-items-center search-filters" >
< span class = "is-size-6" > Filters : < / s p a n >
$ { str }
< / d i v > ` ;
}
} )
@ -635,6 +792,7 @@ $(document).ready(function () {
@@ -635,6 +792,7 @@ $(document).ready(function () {
////////////////////////////////////////////////////////////////////////////////
require ( [ 'jquery' ] , function ( $ ) {
$ ( document ) . ready ( function ( ) {
let search _modal _header = `
< header class = "modal-card-head gap-2 is-align-items-center is-justify-content-space-between w-100 px-3" >
< div class = "field mb-0 w-100" >
@ -680,8 +838,13 @@ $(document.body).append(
@@ -680,8 +838,13 @@ $(document.body).append(
`
) ;
document . querySelector ( ".docs-search-query" ) . addEventListener ( "click" , ( ) => {
openModal ( ) ;
} ) ;
document . querySelector ( ".close-search-modal" ) . addEventListener ( "click" , ( ) => {
document
. querySelector ( ".close-search-modal" )
. addEventListener ( "click" , ( ) => {
closeModal ( ) ;
} ) ;
@ -729,6 +892,7 @@ document
@@ -729,6 +892,7 @@ document
. addEventListener ( "click" , ( ) => {
closeModal ( ) ;
} ) ;
} ) ;
} )
////////////////////////////////////////////////////////////////////////////////