fix: various search fixes

Author: RomanHotsiy

src/common-elements/index.ts

@@ -8,3 +8,4 @@ export * from './dropdown';
 export * from './mixins';
 export * from './tabs';
 export * from './samples';
+export * from './perfect-scrollbar';

src/components/Endpoint/styled.elements.ts

@@ -3,6 +3,7 @@ import styled, { withProps } from '../../styled-components';
 export const OperationEndpointWrap = styled.div`
   cursor: pointer;
   position: relative;
+  margin-bottom: 5px;
 `;
 
 export const ServerRelativeURL = styled.span`

src/components/Redoc/Redoc.tsx

@@ -24,7 +24,7 @@ export class Redoc extends React.Component<RedocProps> {
   };
 
   componentDidMount() {
-    this.props.store.menu.updateOnHash();
+    this.props.store.onDidMount();
   }
 
   componentWillUnmount() {

src/components/SearchBox/SearchBox.tsx

@@ -82,13 +82,20 @@ export interface SearchBoxProps {
   marker: MarkerService;
   getItemById: (id: string) => IMenuItem | undefined;
   onActivate: (item: IMenuItem) => void;
+
+  className?: string;
 }
 
 export interface SearchBoxState {
   results: any;
   term: string;
 }
 
+interface SearchResult {
+  item: IMenuItem;
+  score: number;
+}
+
 export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {
   constructor(props) {
     super(props);
@@ -145,8 +152,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
   };
 
   render() {
-    const items: IMenuItem[] = this.state.results.map(res => this.props.getItemById(res.id));
-    items.sort((a, b) => (a.depth > b.depth ? 1 : a.depth < b.depth ? -1 : 0));
+    const results: SearchResult[] = this.state.results.map(res => ({
+      item: this.props.getItemById(res.id),
+      score: res.score,
+    }));
+    results.sort(
+      (a, b) =>
+        a.item.depth > b.item.depth ? 1 : a.item.depth < b.item.depth ? -1 : b.score - a.score,
+    );
 
     return (
       <div>
@@ -158,14 +171,14 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
           type="text"
           onChange={this.search}
         />
-        {items.length > 0 && (
+        {results.length > 0 && (
           <SearchResultsBox>
-            {items.map(item => (
+            {results.map(res => (
               <MenuItem
-                item={item}
+                item={res.item}
                 onActivate={this.props.onActivate}
                 withoutChildren={true}
-                key={item.id}
+                key={res.item.id}
               />
             ))}
           </SearchResultsBox>

src/components/index.ts

@@ -2,6 +2,7 @@ export * from './RedocStandalone';
 export * from './Redoc/Redoc';
 // export * from './Redoc/elements';
 export * from './Schema/';
+export * from './SearchBox/SearchBox';
 export * from './Operation/Operation';
 export * from './RedocStandalone';
 

src/services/AppStore.ts

@@ -59,15 +59,21 @@ export class AppStore {
     this.spec = new SpecStore(spec, specUrl, this.options);
     this.menu = new MenuStore(this.spec, this.scroll);
 
-    this.search = new SearchStore(this.spec);
+    this.search = new SearchStore();
+    this.search.indexItems(this.menu.items);
+    this.search.done();
 
     this.disposer = observe(this.menu, 'activeItemIdx', change => {
       this.updateMarkOnMenu(change.newValue as number);
     });
   }
 
+  onDidMount() {
+    this.menu.updateOnHash();
+    this.updateMarkOnMenu(this.menu.activeItemIdx);
+  }
+
   updateMarkOnMenu(idx: number) {
-    console.log('update marker');
     const start = Math.max(0, idx);
     const end = Math.min(this.menu.flatItems.length, start + 5);
 

src/services/MarkerService.ts

@@ -34,7 +34,6 @@ export class MarkerService {
   }
 
   mark(term?: string) {
-    console.log('mark', term);
     if (!term && !this.prevTerm) return;
     this.map.forEach(val => {
       val.unmark();

src/services/MenuStore.ts

@@ -16,6 +16,7 @@ export interface IMenuItem {
   id: string;
   absoluteIdx?: number;
   name: string;
+  description?: string;
   depth: number;
   active: boolean;
   items: IMenuItem[];

src/services/SearchStore.ts

@@ -1,21 +1,18 @@
-import { SpecStore } from '../index';
-import { GroupModel, OperationModel } from './models';
+import { OperationModel } from './models';
 import worker from './SearchWorker.worker';
+import { IMenuItem } from './MenuStore';
 
 export class SearchStore {
   searchWorker = new worker();
 
-  constructor(private spec: SpecStore) {
-    this.indexGroups(this.spec.operationGroups);
-    this.done();
-  }
+  constructor() {}
 
-  indexGroups(groups: Array<GroupModel | OperationModel>) {
+  indexItems(groups: Array<IMenuItem | OperationModel>) {
     groups.forEach(group => {
       if (group.type !== 'group') {
         this.add(group.name, group.description || '', group.id);
       }
-      this.indexGroups(group.items);
+      this.indexItems(group.items);
     });
   }
 

src/services/SearchWorker.worker.ts

@@ -13,6 +13,10 @@ export interface SearchDocument {
   id: string;
 }
 
+export interface SearchResult extends SearchDocument {
+  score: number;
+}
+
 const store: { [id: string]: SearchDocument } = {};
 
 let resolveIndex: (v: lunr.Index) => void;
@@ -39,7 +43,7 @@ export async function done() {
   resolveIndex(builder.build());
 }
 
-export async function search(q: string): Promise<SearchDocument[]> {
+export async function search(q: string): Promise<SearchResult[]> {
   if (q.trim().length === 0) {
     return [];
   }
@@ -54,5 +58,5 @@ export async function search(q: string): Promise<SearchDocument[]> {
           t.term(exp, {});
         });
     })
-    .map(res => store[res.ref]);
+    .map(res => ({ ...store[res.ref], score: res.score }));
 }