-
- {repo !== undefined ? (
- <>
- }
- cssVariables={styleProps?.cssVariables}
- dimMergeCommits={graphConfig?.dimMergeCommits}
- downstreamsByUpstream={downstreams}
- enabledRefMetadataTypes={graphConfig?.enabledRefMetadataTypes}
- enabledScrollMarkerTypes={graphConfig?.scrollMarkerTypes}
- enableShowHideRefsOptions
- enableMultiSelection={graphConfig?.enableMultiSelection}
- excludeRefsById={excludeRefsById}
- excludeByType={excludeTypes}
- formatCommitDateTime={getGraphDateFormatter(graphConfig)}
- getExternalIcon={getIconElementLibrary}
- graphRows={rows}
- hasMoreCommits={pagingHasMore}
- // Just cast the { [id: string]: number } object to { [id: string]: boolean } for performance
- highlightedShas={searchResults?.ids as GraphContainerProps['highlightedShas']}
- highlightRowsOnRefHover={graphConfig?.highlightRowsOnRefHover}
- includeOnlyRefsById={includeOnlyRefsById}
- scrollRowPadding={graphConfig?.scrollRowPadding}
- showGhostRefsOnRowHover={graphConfig?.showGhostRefsOnRowHover}
- showRemoteNamesOnRefs={graphConfig?.showRemoteNamesOnRefs}
- isContainerWindowFocused={windowFocused}
- isLoadingRows={isLoading}
- isSelectedBySha={selectedRows}
- nonce={nonce}
- onColumnResized={handleOnColumnResized}
- onDoubleClickGraphRow={handleOnDoubleClickRow}
- onDoubleClickGraphRef={handleOnDoubleClickRef}
- onGraphColumnsReOrdered={handleOnGraphColumnsReOrdered}
- onGraphMouseLeave={handleOnGraphMouseLeave}
- onGraphRowHovered={handleOnGraphRowHovered}
- onGraphRowUnhovered={handleOnGraphRowUnhovered}
- onRowContextMenu={handleRowContextMenu}
- onSettingsClick={handleToggleColumnSettings}
- onSelectGraphRows={handleSelectGraphRows}
- onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick}
- onEmailsMissingAvatarUrls={handleMissingAvatars}
- onRefsMissingMetadata={handleMissingRefsMetadata}
- onShowMoreCommits={handleMoreCommits}
- onGraphVisibleRowsChanged={minimap.current ? handleOnGraphVisibleRowsChanged : undefined}
- platform={clientPlatform}
- refMetadataById={refsMetadata}
- rowsStats={rowsStats}
- rowsStatsLoading={rowsStatsLoading}
- searchMode={searchQuery?.filter ? 'filter' : 'normal'}
- shaLength={graphConfig?.idLength}
- shiftSelectMode="simple"
- suppressNonRefRowTooltips
- themeOpacityFactor={styleProps?.themeOpacityFactor}
- useAuthorInitialsForAvatars={!graphConfig?.avatars}
- workDirStats={workingTreeStats}
- />
-
- ) : (
- No repository is selected
- )}
-
-
- );
-}
-
-function formatCommitDateTime(
- date: number,
- style: DateStyle = 'absolute',
- format: DateTimeFormat | string = 'short+short',
- source?: CommitDateTimeSources,
-): string {
- switch (source) {
- case CommitDateTimeSources.Tooltip:
- return `${formatDate(date, format)} (${fromNow(date)})`;
- case CommitDateTimeSources.RowEntry:
- default:
- return style === 'relative' ? fromNow(date) : formatDate(date, format);
- }
-}
-
-function getClosestSearchResultIndex(
- results: GraphSearchResults,
- query: SearchQuery | undefined,
- activeRow: string | undefined,
- next: boolean = true,
-): [number, string | undefined] {
- if (results.ids == null) return [0, undefined];
-
- const activeInfo = getActiveRowInfo(activeRow);
- const activeId = activeInfo?.id;
- if (activeId == null) return [0, undefined];
-
- let index: number | undefined;
- let nearestId: string | undefined;
- let nearestIndex: number | undefined;
-
- const data = results.ids[activeId];
- if (data != null) {
- index = data.i;
- nearestId = activeId;
- nearestIndex = index;
- }
-
- if (index == null) {
- const activeDate = activeInfo?.date != null ? activeInfo.date + (next ? 1 : -1) : undefined;
- if (activeDate == null) return [0, undefined];
-
- // Loop through the search results and:
- // try to find the active id
- // if next=true find the nearest date before the active date
- // if next=false find the nearest date after the active date
-
- let i: number;
- let id: string;
- let date: number;
- let nearestDate: number | undefined;
- for ([id, { date, i }] of Object.entries(results.ids)) {
- if (next) {
- if (date < activeDate && (nearestDate == null || date > nearestDate)) {
- nearestId = id;
- nearestDate = date;
- nearestIndex = i;
- }
- } else if (date > activeDate && (nearestDate == null || date <= nearestDate)) {
- nearestId = id;
- nearestDate = date;
- nearestIndex = i;
- }
- }
-
- index = nearestIndex == null ? results.count - 1 : nearestIndex + (next ? -1 : 1);
- }
-
- index = getNextOrPreviousSearchResultIndex(index, next, results, query);
-
- return index === nearestIndex ? [index, nearestId] : [index, undefined];
-}
-
-function getNextOrPreviousSearchResultIndex(
- index: number,
- next: boolean,
- results: GraphSearchResults,
- query: SearchQuery | undefined,
-) {
- if (next) {
- if (index < results.count - 1) {
- index++;
- } else if (query != null && results?.paging?.hasMore) {
- index = -1; // Indicates a boundary that we should load more results
- } else {
- index = 0;
- }
- } else if (index > 0) {
- index--;
- } else if (query != null && results?.paging?.hasMore) {
- index = -1; // Indicates a boundary that we should load more results
- } else {
- index = results.count - 1;
- }
- return index;
-}
-
-function getSearchResultIdByIndex(results: GraphSearchResults, index: number): string | undefined {
- // Loop through the search results without using Object.entries or Object.keys and return the id at the specified index
- const { ids } = results;
- for (const id in ids) {
- if (ids[id].i === index) return id;
- }
- return undefined;
-
- // return Object.entries(results.ids).find(([, { i }]) => i === index)?.[0];
-}
-
-function getActiveRowInfo(activeRow: string | undefined): { id: string; date: number } | undefined {
- if (activeRow == null) return undefined;
-
- const [id, date] = activeRow.split('|');
- return {
- id: id,
- date: Number(date),
- };
-}
-
-function getSearchResultModel(state: State): {
- results: GraphSearchResults | undefined;
- resultsError: GraphSearchResultsError | undefined;
-} {
- let results: GraphSearchResults | undefined;
- let resultsError: GraphSearchResultsError | undefined;
- if (state.searchResults != null) {
- if ('error' in state.searchResults) {
- resultsError = state.searchResults;
- } else {
- results = state.searchResults;
- }
- }
- return { results: results, resultsError: resultsError };
-}
diff --git a/src/webviews/apps/plus/graph/actions/gitActionsButtons.tsx b/src/webviews/apps/plus/graph/actions/gitActionsButtons.tsx
index ee4436ac5eec6..10b83bcd1076a 100644
--- a/src/webviews/apps/plus/graph/actions/gitActionsButtons.tsx
+++ b/src/webviews/apps/plus/graph/actions/gitActionsButtons.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { fromNow } from '../../../../../system/date';
import type { BranchState, State } from '../../../../plus/graph/protocol';
import { FetchButton } from './fetchButton';
@@ -18,7 +18,25 @@ export const GitActionsButtons = ({
const remote = branchState?.upstream ?