Skip to content

Commit

Permalink
Search and Scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@chidozieononiwu
chidozieononiwu committed Jan 22, 2025
1 parent 694d269 commit 7369fde
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 45 deletions.
92 changes: 49 additions & 43 deletions src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class CodePanelComponent implements OnChanges{
];
}

ngOnChanges(changes: SimpleChanges) {
async ngOnChanges(changes: SimpleChanges) {
if (changes['codePanelRowData']) {
if (changes['codePanelRowData'].currentValue.length > 0) {
this.loadCodePanelViewPort();
Expand All @@ -100,7 +100,7 @@ export class CodePanelComponent implements OnChanges{
}

if (changes['codeLineSearchText']) {
this.searchCodePanelRowData(this.codeLineSearchText!);
await this.searchCodePanelRowData(this.codeLineSearchText!);
}

if (changes['codeLineNavigationDirection']) {
Expand Down Expand Up @@ -441,9 +441,9 @@ export class CodePanelComponent implements OnChanges{
});
}

scrollToNode(
async scrollToNode(
nodeIdHashed: string | undefined = undefined, nodeId: string | undefined = undefined,
highlightRow: boolean = true, updateQueryParams: boolean = true) {
highlightRow: boolean = true, updateQueryParams: boolean = true): Promise<void> {
let index = 0;
let scrollIndex : number | undefined = undefined;
let indexesHighlighted : number[] = [];
Expand Down Expand Up @@ -472,19 +472,21 @@ export class CodePanelComponent implements OnChanges{
if (scrollIndex < this.codePanelRowSource?.adapter?.bufferInfo.firstIndex! ||
scrollIndex > this.codePanelRowSource?.adapter?.bufferInfo.lastIndex!
) {
this.codePanelRowSource?.adapter?.reload(scrollIndex);
await this.codePanelRowSource?.adapter?.reload(scrollIndex);
} else {
this.codePanelRowSource?.adapter?.fix({
await this.codePanelRowSource?.adapter?.fix({
scrollToItem: (item) => item.data.nodeIdHashed === nodeIdHashed,
scrollToItemOpt: { behavior: 'smooth', block: 'center' }
});
}

let newQueryParams = getQueryParams(this.route);
if (updateQueryParams) {
let newQueryParams = getQueryParams(this.route);
newQueryParams[SCROLL_TO_NODE_QUERY_PARAM] = this.codePanelRowData[scrollIndex].nodeId;
this.router.navigate([], { queryParams: newQueryParams, state: { skipStateUpdate: true } });
} else {
newQueryParams[SCROLL_TO_NODE_QUERY_PARAM] = null;
}
this.router.navigate([], { queryParams: newQueryParams, state: { skipStateUpdate: true } });

if (highlightRow) {
setTimeout(() => {
Expand Down Expand Up @@ -721,25 +723,26 @@ export class CodePanelComponent implements OnChanges{
navigator.clipboard.writeText(codeLineText);
}

private searchCodePanelRowData(searchText: string) {
private async searchCodePanelRowData(searchText: string) {
this.searchMatchedRowInfo.clear();
if (!searchText || searchText.length === 0) {
this.clearSearchMatchHighlights();
this.codeLineSearchMatchInfo = null;
this.currentCodeLineSearchMatch = null;
this.codeLineSearchInfo = null;
return;
}

let totalMatches = 0;
let hasMatch = false;
this.codeLineSearchMatchInfo = new DoublyLinkedList<CodeLineSearchMatch>();

this.codePanelRowData.forEach((row, idx) => {
if (row.rowOfTokens && row.rowOfTokens.length > 0) {
let codeLineInfo = convertRowOfTokensToString(row.rowOfTokens);
let codeLineAsString = convertRowOfTokensToString(row.rowOfTokens);
const regex = new RegExp(searchText, "gi");
const matches = [...codeLineInfo.matchAll(regex)];
const matches = [...codeLineAsString.matchAll(regex)];
if (matches.length > 0) {
hasMatch = true;
totalMatches += matches.length;
this.searchMatchedRowInfo.set(row.nodeIdHashed!, matches);
matches.forEach((match, index) => {
const searchMatch = new CodeLineSearchMatch(idx, row.nodeIdHashed!, index);
Expand All @@ -754,8 +757,16 @@ export class CodePanelComponent implements OnChanges{

if (hasMatch) {
this.currentCodeLineSearchMatch = this.codeLineSearchMatchInfo.head;

if (this.currentCodeLineSearchMatch?.value.rowIndex! < this.codePanelRowSource?.adapter?.firstVisible.$index! ||
this.currentCodeLineSearchMatch?.value.rowIndex! > this.codePanelRowSource?.adapter?.lastVisible.$index!) {
// Scroll first match into view
await this.scrollToNode(this.currentCodeLineSearchMatch!.value.nodeIdHashed, undefined, false, false);
await this.codePanelRowSource?.adapter?.relax();
}

currentMatch = this.currentCodeLineSearchMatch!.index + 1;
totalMatchCount = this.codeLineSearchMatchInfo.length + 1;
totalMatchCount = this.codeLineSearchMatchInfo.length;
this.highlightSearchMatches();
this.highlightActiveSearchMatch();
} else {
Expand Down Expand Up @@ -821,11 +832,12 @@ export class CodePanelComponent implements OnChanges{
activeMatch.classList.remove('active');
}
const codeLine = this.elementRef.nativeElement.querySelector(`.code-line[data-node-id="${nodeIdHashed}"]`);

if (codeLine) {
const match = codeLine.querySelector(`.search-match-${matchId}`);
if (match) {
match.classList.add('active');
setTimeout(() => {
this.elementRef.nativeElement.querySelector(`.code-line[data-node-id="${nodeIdHashed}"] .codeline-search-match-highlight.search-match-${matchId}`)!.classList.add('active');
}, 0);
}
}
}
Expand All @@ -838,38 +850,31 @@ export class CodePanelComponent implements OnChanges{
if (this.currentCodeLineSearchMatch) {
const firstVisibleIndex = this.codePanelRowSource?.adapter?.firstVisible.$index!;
const lastVisibleIndex = this.codePanelRowSource?.adapter?.lastVisible.$index!;
let currentMatch = this.codeLineSearchInfo?.currentMatch!;

if (this.currentCodeLineSearchMatch.value.rowIndex <= firstVisibleIndex || this.currentCodeLineSearchMatch.value.rowIndex >= lastVisibleIndex) {
this.scrollToNode(this.currentCodeLineSearchMatch.value.nodeIdHashed);
setTimeout(() => {
this.navigateAndHighlightSearchMatch(previousPosition, newPosition);
}, 1550);
} else {
this.navigateAndHighlightSearchMatch(previousPosition, newPosition);
if (!previousPosition || newPosition > previousPosition) {
this.currentCodeLineSearchMatch = this.currentCodeLineSearchMatch?.next!;
currentMatch++;
} else if (newPosition < previousPosition) {
this.currentCodeLineSearchMatch = this.currentCodeLineSearchMatch?.prev!;
currentMatch--;
}
}
}

private navigateAndHighlightSearchMatch(previousPosition: number, newPosition: number) {
let currentMatch = this.codeLineSearchInfo?.currentMatch!;

if (!previousPosition || newPosition > previousPosition) {
this.currentCodeLineSearchMatch = this.currentCodeLineSearchMatch?.next!;
this.highlightActiveSearchMatch();
currentMatch++;
} else if (newPosition < previousPosition) {
this.currentCodeLineSearchMatch = this.currentCodeLineSearchMatch?.prev!;
if (this.currentCodeLineSearchMatch.value.rowIndex < firstVisibleIndex || this.currentCodeLineSearchMatch.value.rowIndex > lastVisibleIndex) {
this.scrollToNode(this.currentCodeLineSearchMatch.value.nodeIdHashed, undefined, false, false);
this.codePanelRowSource?.adapter?.relax();
}

this.highlightActiveSearchMatch();
currentMatch--;
this.codeLineSearchInfo = {
currentMatch: currentMatch,
totalMatchCount: this.codeLineSearchInfo?.totalMatchCount
};
this.codeLineSearchInfoEmitter.emit(this.codeLineSearchInfo);
}

this.codeLineSearchInfo = {
currentMatch: currentMatch,
totalMatchCount: this.codeLineSearchInfo?.totalMatchCount
};
this.codeLineSearchInfoEmitter.emit(this.codeLineSearchInfo);
}


private clearSearchMatchHighlights() {
this.elementRef.nativeElement.querySelectorAll('.codeline-search-match-highlight').forEach((element) => {
const parent = element.parentNode as HTMLElement;
Expand Down Expand Up @@ -954,8 +959,9 @@ export class CodePanelComponent implements OnChanges{
const viewport = this.elementRef.nativeElement.ownerDocument.getElementById('viewport');
if (viewport) {
viewport.addEventListener('scroll', (event) => {
if (this.codeLineSearchText && this.codeLineSearchText.length > 0) {
if (this.currentCodeLineSearchMatch) {
this.highlightSearchMatches();
this.highlightActiveSearchMatch();
}
});
}
Expand Down Expand Up @@ -1049,4 +1055,4 @@ export class CodePanelComponent implements OnChanges{
this.destroy$.next();
this.destroy$.complete();
}
}
}
2 changes: 1 addition & 1 deletion ...View/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
</ul>
</app-page-options-section>

<app-page-options-section *ngIf="showCommentsSwitch || (isDiffView && contentHasDiff)" sectionName="Page Utils">
<app-page-options-section sectionName="Page Utils">
<ul class="list-group">
<li class="list-group-item">
<p-iconField iconPosition="left" class="w-full">
Expand Down
1 change: 0 additions & 1 deletion ...PIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,6 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges {
*/
navigateSearch(number: 1 | -1) {
const navigationPosition = this.codeLineSearchInfo.currentMatch! + number;
console.log("navigationpos", navigationPosition);
if (navigationPosition >= 1 && navigationPosition <= this.codeLineSearchInfo.totalMatchCount!) {
this.codeLineSearchNaviationEmmiter.emit(navigationPosition!);
}
Expand Down

0 comments on commit 7369fde

Please sign in to comment.