@@ -123,67 +131,70 @@
$shiftWidth: 1.25rem;
$gap: 0.25rem;
- [role='treeitem'] {
- border-radius: var(--border-radius);
+ li[role='treeitem'] {
+ --indent-size: calc(var(--tree-node-nested-level) * #{$shiftWidth});
+
+ --scope-size: calc(var(--icon-inline-size) + #{$gap} - 1px);
+ &.disable-scope {
+ --scope-size: 0px;
+ :global([data-scope-button]) {
+ display: none;
+ }
+ }
&[tabindex='0']:focus {
box-shadow: none;
> .label {
- box-shadow: var(--focus-box-shadow);
+ box-shadow: var(--focus-shadow-inner);
}
}
- }
- .loading {
- // Indent with two rem since loading represents next nested level
- margin-left: calc(var(--tree-node-nested-level) * #{$shiftWidth} + 2 * var(--icon-inline-size) + 2 * #{$gap});
- margin-top: 0.25rem;
- }
+ .label {
+ display: flex;
+ gap: $gap;
+ padding: 0.2rem $gap;
+ align-items: center;
- .label {
- display: flex;
- gap: $gap;
- padding: 0.2rem $gap;
- justify-content: space-between;
- align-items: center;
+ // Change icon color based on selected item state
+ --icon-color: var(--tree-node-expand-icon-color);
+ color: var(--tree-node-label-color, var(--text-body));
- // Change icon color based on selected item state
- --icon-color: var(--tree-node-expand-icon-color);
- color: var(--tree-node-label-color, var(--text-body));
-
- li[data-treeitem][aria-selected='true'] > & {
- --icon-color: currentColor;
- --file-icon-color: currentColor;
-
- color: var(--tree-node-label-color, var(--body-bg));
- }
-
- :global([data-scope-button]) {
- visibility: hidden;
- margin-right: calc(var(--tree-node-nested-level) * #{$shiftWidth});
- }
-
- &.expandable:hover,
- &.expandable:focus {
:global([data-scope-button]) {
- visibility: visible;
+ visibility: hidden;
+ }
+
+ &.expandable:hover,
+ &.expandable:focus {
+ :global([data-scope-button]) {
+ visibility: visible;
+ }
+ }
+
+ .indented {
+ display: inherit;
+ gap: inherit;
+ margin-left: var(--indent-size);
}
}
- }
- ul {
- position: relative;
- isolation: isolate;
- &::before {
- position: absolute;
- content: '';
- border-left: 1px solid var(--secondary);
- height: 100%;
- transform: translateX(
- calc(var(--tree-node-nested-level) * #{$shiftWidth} + var(--icon-inline-size) * 1.5 + #{$gap} + 2px)
- );
- z-index: 1;
+ .loading {
+ // Indent with two rem since loading represents next nested level
+ margin-left: calc(var(--scope-size) + var(--indent-size) + 2 * #{$gap});
+ margin-top: 0.25rem;
+ }
+
+ ul {
+ position: relative;
+ isolation: isolate;
+ &::before {
+ position: absolute;
+ content: '';
+ border-left: 1px solid var(--secondary);
+ height: 100%;
+ transform: translateX(calc(#{$gap} + var(--scope-size) + var(--icon-inline-size) / 2 - 1px));
+ z-index: 1;
+ }
}
}
diff --git a/client/web-sveltekit/src/lib/TreeView.ts b/client/web-sveltekit/src/lib/TreeView.ts
index c65b99f46e0..bf3a315f481 100644
--- a/client/web-sveltekit/src/lib/TreeView.ts
+++ b/client/web-sveltekit/src/lib/TreeView.ts
@@ -7,7 +7,7 @@ export interface TreeProvider
{
*/
getEntries(): T[]
/**
- * Whether or not the provided entry is has (possibly) children or not.
+ * Whether or not the provided entry has (possibly) children or not.
*/
isExpandable(entry: T): boolean
/**
@@ -29,6 +29,7 @@ export interface SingleSelectTreeState {
focused: string
selected: string
expandedNodes: Set
+ disableScope: boolean
}
export type TreeState = SingleSelectTreeState
@@ -38,6 +39,7 @@ export function createEmptySingleSelectTreeState(): SingleSelectTreeState {
focused: '',
selected: '',
expandedNodes: new Set(),
+ disableScope: false,
}
}
diff --git a/client/web-sveltekit/src/lib/codenav/ExplorePanel.gql b/client/web-sveltekit/src/lib/codenav/ExplorePanel.gql
new file mode 100644
index 00000000000..2e53038b45c
--- /dev/null
+++ b/client/web-sveltekit/src/lib/codenav/ExplorePanel.gql
@@ -0,0 +1,50 @@
+query ExplorePanel_Usages(
+ $repoName: String!
+ $revspec: String!
+ $filePath: String!
+ $rangeStart: PositionInput!
+ $rangeEnd: PositionInput!
+ $symbolComparator: SymbolComparator
+ $first: Int!
+ $afterCursor: String
+) {
+ usagesForSymbol(
+ symbol: $symbolComparator
+ range: { repository: $repoName, revision: $revspec, path: $filePath, start: $rangeStart, end: $rangeEnd }
+ first: $first
+ after: $afterCursor
+ ) {
+ ...ExplorePanel_UsageConnection
+ pageInfo {
+ hasNextPage
+ endCursor
+ }
+ }
+}
+
+fragment ExplorePanel_UsageConnection on UsageConnection {
+ nodes {
+ ...ExplorePanel_Usage
+ }
+}
+
+fragment ExplorePanel_Usage on Usage {
+ provenance
+ usageRange {
+ repository
+ revision
+ path
+ range {
+ start {
+ line
+ character
+ }
+ end {
+ line
+ character
+ }
+ }
+ }
+ surroundingContent
+ usageKind
+}
diff --git a/client/web-sveltekit/src/lib/codenav/ExplorePanel.stories.svelte b/client/web-sveltekit/src/lib/codenav/ExplorePanel.stories.svelte
new file mode 100644
index 00000000000..4c2e13a7880
--- /dev/null
+++ b/client/web-sveltekit/src/lib/codenav/ExplorePanel.stories.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/web-sveltekit/src/lib/codenav/ExplorePanel.svelte b/client/web-sveltekit/src/lib/codenav/ExplorePanel.svelte
new file mode 100644
index 00000000000..431114b35ae
--- /dev/null
+++ b/client/web-sveltekit/src/lib/codenav/ExplorePanel.svelte
@@ -0,0 +1,427 @@
+
+
+
+
+{#if $inputs.activeOccurrence === undefined}
+
+
+
Select a symbol in the code panel to view references.
+
+
+
+
+
+ {:else}
+ connection?.fetchMore()}>
+ {#if displayGroups.length > 0}
+
+ {#each displayGroups as pathGroup}
+ -
+
+
+ {/each}
+
+ {#if loading}
+
+ {/if}
+ {:else}
+ No results.
+ {/if}
+
+ {/if}
+
+
+{/if}
+
+
diff --git a/client/web-sveltekit/src/lib/codenav/ExplorePanelFileUsages.svelte b/client/web-sveltekit/src/lib/codenav/ExplorePanelFileUsages.svelte
new file mode 100644
index 00000000000..8be60a91858
--- /dev/null
+++ b/client/web-sveltekit/src/lib/codenav/ExplorePanelFileUsages.svelte
@@ -0,0 +1,173 @@
+
+
+ (visible = visible || event.detail)}
+>
+
+
+ {#each usageExcerpts as excerpt}
+
+
+
+ {/each}
+
+
-
-
-
- {#if !$references.fetching && !$references.error && locations.length === 0}
-
- {/if}
-
- {#each locations as location (location.canonicalURL)}
- {@const selected = selectedLocation?.canonicalURL === location.canonicalURL}
-
- - (selectedLocation = selected ? null : location)}
- >
-
-
-
-
-
-
- {location.resource.name}
-
-
-
- {#if location.range}
- :{location.range.start.line + 1}:{location.range.start.character + 1}
- {/if}
-
- {/each}
-
- {#if $references.fetching}
-
- {:else if $references.error}
-
-
Unable to load references: {$references.error.message}
-
-
(visible = visible || event.detail)}>
-
-
-{:else}
- (no content information)
-{/if}
diff --git a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/layout.gql b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/layout.gql
index f218540d090..003778ebab9 100644
--- a/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/layout.gql
+++ b/client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/layout.gql
@@ -38,36 +38,3 @@ fragment GitHistory_HistoryConnection on GitCommitConnection {
endCursor
}
}
-
-query RepoPage_PreciseCodeIntel(
- $repoName: String!
- $revspec: String!
- $filePath: String!
- $line: Int!
- $character: Int!
- $first: Int
- $afterCursor: String
-) {
- repository(name: $repoName) {
- id
- commit(rev: $revspec) {
- id
- blob(path: $filePath) {
- canonicalURL
- lsif {
- references(line: $line, character: $character, first: $first, after: $afterCursor) {
- ...RepoPage_ReferencesLocationConnection
- }
- }
- }
- }
- }
-}
-
-fragment RepoPage_ReferencesLocationConnection on LocationConnection {
- ...ReferencePanel_LocationConnection
- pageInfo {
- hasNextPage
- endCursor
- }
-}
diff --git a/client/web-sveltekit/src/routes/svelte-overrides.scss b/client/web-sveltekit/src/routes/svelte-overrides.scss
index 511568e0faa..a1ebef52355 100644
--- a/client/web-sveltekit/src/routes/svelte-overrides.scss
+++ b/client/web-sveltekit/src/routes/svelte-overrides.scss
@@ -21,6 +21,7 @@ body {
--font-size-tiny: 0.8125rem;
--code-font-size: 13px;
--border-radius: 4px;
+ --focus-shadow-inner: 0 0 0 2px var(--primary-2) inset;
input::placeholder {
color: var(--text-muted);
diff --git a/client/web/src/repo/blob/codemirror/codeintel/occurrences.ts b/client/web/src/repo/blob/codemirror/codeintel/occurrences.ts
index 443621e2bb4..b1e1a3eca73 100644
--- a/client/web/src/repo/blob/codemirror/codeintel/occurrences.ts
+++ b/client/web/src/repo/blob/codemirror/codeintel/occurrences.ts
@@ -6,7 +6,7 @@ import { Occurrence, Position, nonOverlappingOccurrences } from '@sourcegraph/sh
// we can't reference that type from here since it is generated by
// Svelte-specific build tooling.
export interface CodeGraphData {
- provenance: string
+ provenance: Provenance
commit: string
toolInfo: {
name: string | null
@@ -16,6 +16,8 @@ export interface CodeGraphData {
occurrences: Occurrence[]
}
+export type Provenance = 'PRECISE' | 'SYNTACTIC' | 'SEARCH_BASED'
+
// IndexedCodeGraphData adds an occurrence index to the code graph
// data, which guarantees things like non-overlapping ranges, sorted
// ranges, and a line index for faster lookups.