Skip to content
This repository has been archived by the owner on Sep 16, 2022. It is now read-only.

Commit

Permalink
searchTerm & dragstart event listenner stays if changing tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmydjabali
jimmydjabali committed Oct 13, 2021
1 parent 42c9738 commit aac124e
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 34 deletions.
3 changes: 2 additions & 1 deletion src/app/modules/gb-side-panel-module/gb-side-panel.component.html
View file
Expand Up @@ -14,7 +14,8 @@
</div>
<gb-tree-nodes *ngIf="ontologyNavbarService.isBrowse"></gb-tree-nodes>
<form class="term-search" *ngIf="ontologyNavbarService.isTermSearch">
<input class="ui-inputtext" (input)="termSearchService.onTermChange($event)" placeholder="Search in Ontology (min. 3 characters)" />
<input value="{{termSearchService.searchTerm}}" class="ui-inputtext" (input)="termSearchService.onTermChange($event)" placeholder="Search in Ontology (min. 3 characters)" />
<span class="no-result-text" *ngIf="termSearchService.isNoResults">No results</span>
<p-accordionTab *ngFor="let ontologyElement of termSearchService.results" draggable="true"
class="ui-ontology-elements">
<p-header class="ui-ontology-elements">
Expand Down
2 changes: 1 addition & 1 deletion src/app/services/api/medco-node/explore-search.service.ts
View file
Expand Up @@ -77,7 +77,7 @@ export class ExploreSearchService {
*
* @returns {Observable<Object>}
*/
exploreSearchTerm(searchString: string, limit: number = 10): Observable<TreeNode[]> {
exploreSearchTerm(searchString: string, limit: number = 20): Observable<TreeNode[]> {
return this.exploreSearch(searchString, limit);
}

Expand Down
6 changes: 5 additions & 1 deletion src/app/services/ontologyNavbar.service.ts
View file
Expand Up @@ -10,6 +10,7 @@

import { Injectable } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { TermSearchService } from './termSearchService.service';

@Injectable()
export class OntologyNavbarService {
Expand All @@ -20,7 +21,7 @@ export class OntologyNavbarService {
private _isBrowse = true;
private _isTermSearch = false;

constructor() {
constructor(private termSearchService: TermSearchService) {
this.items = [
{ label: 'Browse', command: this.setItem.bind(this) },
{ label: 'Term Search', command: this.setItem.bind(this) }
Expand All @@ -33,6 +34,9 @@ export class OntologyNavbarService {
this.isBrowse = event.item.label === 'Browse';
this.isTermSearch = event.item.label === 'Term Search';
this.activeItem = this.items[this.isBrowse ? 0 : 1];
if (this.isTermSearch) {
this.termSearchService.addHandlers();
}
}

get items(): MenuItem[] {
Expand Down
109 changes: 78 additions & 31 deletions src/app/services/termSearchService.service.ts
View file
Expand Up @@ -23,15 +23,18 @@ interface NodeFullPath {
interface ResultType {
name: string;
fullPath: NodeFullPath[];
handleFuncStart?: EventListenerObject;
}

const rootPath = '/I2B2'; /* I2B2 / CLINICAL_SENSITIVE */

const getPathList = (path: string) => {
const splittedPath = path.split('/').filter(value => value !== '');

const pathList: string[] = [];

splittedPath.forEach((_, index) => {
pathList.push(splittedPath.slice(0, index + 1).reduce((result, value) => `${result}${value}/`, '/I2B2/'));
pathList.push(splittedPath.slice(0, index + 1).reduce((result, value) => `${result}${value}/`, `${rootPath}/`));
});

return pathList;
Expand All @@ -40,11 +43,12 @@ const getPathList = (path: string) => {
@Injectable()
export class TermSearchService {

private _termSearch = '';
private _searchTerm = '';

private exploreSearchService: ExploreSearchService;
private _results: ResultType[];
private _isLoading = false;
private _isNoResults = false;

constructor(private treeNodeService: TreeNodeService,
private injector: Injector) {
Expand All @@ -54,15 +58,28 @@ export class TermSearchService {
}

addInResults(node: TreeNode, displayNameList: string[], nodesSize: number, searchConceptInfo?: TreeNode[]) {
const formattedResult = {
const dataObject = {
...node,
...((searchConceptInfo?.length > 0) ? { appliedConcept: searchConceptInfo[0] } : {}),
dropMode: DropMode.TreeNode,
metadata: undefined,
path: `${rootPath}${node.path}`,
isModifier: () => !!searchConceptInfo
};

const formattedResult: ResultType = {
name: node.name,
fullPath: displayNameList.reverse().reduce((result, displayName) => [
...result, {
name: displayName,
isBold: !result.find(({ isBold }) => isBold) && displayName.toLowerCase().indexOf(this.termSearch.toLowerCase()) !== -1

}], []).reverse()
isBold: !result.find(({ isBold }) => isBold) && displayName.toLowerCase().indexOf(this.searchTerm.toLowerCase()) !== -1
}], []).reverse(),
handleFuncStart: (function (event) {
event.stopPropagation();
this.treeNodeService.selectedTreeNode = dataObject;
}).bind(this)
};

let resultIndex = -1;
if (!this.results.find(({ name: resultName }) => resultName === node.name)) { // Not found in this.results, add
resultIndex = this.results.push(formattedResult) - 1;
Expand All @@ -73,50 +90,72 @@ export class TermSearchService {
resultIndex = this.results.findIndex(({ name: resultName }) => resultName === node.name);
this.results[resultIndex] = formattedResult;
}
const dataObject = {
...node,
...((searchConceptInfo?.length > 0) ? { appliedConcept: searchConceptInfo[0] } : {}),
dropMode: DropMode.TreeNode,
metadata: undefined,
path: `/I2B2${node.path}`,
isModifier: () => !!searchConceptInfo
};

this.addHandlers();
}

addHandlers() {
setTimeout(() => {
const elems = document.querySelectorAll('.term-search p-accordionTab.ui-ontology-elements');
const elem = elems[resultIndex];
const handleDragstart = (function (event) {
event.stopPropagation();
this.treeNodeService.selectedTreeNode = dataObject;
}).bind(this);
elem.addEventListener('dragstart', handleDragstart);
console.log('add handlers for', elems.length, 'elements');
this.results.forEach((result, resultIndex) => {
const elem = elems[resultIndex];
elem.addEventListener('dragstart', result.handleFuncStart);
})
}, 0);
}

search() {
this.results = [];
this.isLoading = true;
this.isNoResults = false;

this.exploreSearchService.exploreSearchTerm(this.termSearch).subscribe((nodes) => {
const searchTerm = this.searchTerm;

this.exploreSearchService.exploreSearchTerm(this.searchTerm).subscribe((nodes) => {
if (searchTerm !== this.searchTerm) {
return;
}
if (nodes.length === 0) {
this.isNoResults = true;
this.isLoading = false;
}
nodes.forEach((node) => {
const pathList = [
...(node.appliedPath !== '@' ? getPathList(node.appliedPath) : []),
...getPathList(node.path)
];

let displayNameList: string[] = new Array(pathList.length);
console.log('node.path', node.path);

console.log('Full node', node);
console.log('------------------');

let displayNameListLength = pathList.length;

let displayNameList: string[] = [];

pathList.forEach((value, pathListIndex) => {
this.exploreSearchService.exploreSearchConceptInfo(value).subscribe((searchResult) => {
displayNameList[pathListIndex] = searchResult[0].displayName;
if (displayNameList.filter((_value) => !!_value).length === pathList.length) {
if (searchTerm !== this.searchTerm) {
return;
}
if (searchResult.length > 0) {
displayNameList[pathListIndex] = searchResult[0].displayName;
} else {
displayNameListLength--;
}
if (displayNameList.filter((_value) => !!_value).length === displayNameListLength) {
if (node.nodeType.toLowerCase().indexOf('modifier') === -1) {
this.addInResults(node, displayNameList, nodes.length);
} else {
if (node.appliedPath[node.appliedPath.length - 1] !== '/') {
node.appliedPath = `${node.appliedPath}/`;
}
this.exploreSearchService.exploreSearchConceptInfo(`/I2B2${node.appliedPath}`).subscribe((searchConceptInfo) => {
this.exploreSearchService.exploreSearchConceptInfo(`${rootPath}${node.appliedPath}`).subscribe((searchConceptInfo) => {
if (searchTerm !== this.searchTerm) {
return;
}
this.addInResults(node, displayNameList, nodes.length, searchConceptInfo);
})
}
Expand All @@ -130,18 +169,18 @@ export class TermSearchService {
}

onTermChange(event: any) {
this.termSearch = event.target.value;
if (this.termSearch.length > 2) {
this.searchTerm = event.target.value;
if (this.searchTerm.length > 2) {
this.search();
}
}

get termSearch(): string {
return this._termSearch;
get searchTerm(): string {
return this._searchTerm;
}

set termSearch(value: string) {
this._termSearch = value;
set searchTerm(value: string) {
this._searchTerm = value;
}

get results(): ResultType[] {
Expand All @@ -159,4 +198,12 @@ export class TermSearchService {
set isLoading(value: boolean) {
this._isLoading = value;
}

get isNoResults(): boolean {
return this._isNoResults;
}

set isNoResults(value: boolean) {
this._isNoResults = value;
}
}
4 changes: 4 additions & 0 deletions src/styles/styles.css
View file
Expand Up @@ -441,6 +441,10 @@ form.term-search .loading-blink {
margin-bottom: 0px;
}

form.term-search .no-result-text {
margin-top: 12px;
}

form.term-search .ui-accordion-content {
border: none;
padding: 0.5em;
Expand Down

0 comments on commit aac124e

Please sign in to comment.