Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Virtualize the Project Files tree list #2458

Merged
merged 19 commits into from
Dec 6, 2024
Merged

Virtualize the Project Files tree list #2458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
08a3f24
Create start of flat file map
dotNomad Nov 21, 2024
5d2e0bb
Update tooltip functions to use minimal types
dotNomad Nov 21, 2024
183fa6e
Make TreeProjectFiles take flat file map
dotNomad Nov 21, 2024
134c01b
Pass flat file map to TreeProjectFiles component
dotNomad Nov 21, 2024
3d7c57c
Install vue-virtual-scroller in homeView
dotNomad Nov 21, 2024
b0b5fc0
Use RecycleScroller in Vue App
dotNomad Nov 21, 2024
dc8a802
Convert flattenFiles to array instead of Map
dotNomad Nov 21, 2024
b7de66b
Use RecycleScroller in TreeProjectFiles
dotNomad Nov 21, 2024
b3a977e
Separate files into its own store
dotNomad Nov 22, 2024
607c6af
Create ProjectFile component for virtualization
dotNomad Nov 22, 2024
f9c4030
Raise RecycleScroller to ProjectFiles
dotNomad Nov 22, 2024
949eb6d
Add comment about file prop virtual reactivity
dotNomad Nov 22, 2024
7139220
Allow TreeItemCheckbox parent to handle expand
dotNomad Dec 2, 2024
cfd0801
Handle expanded directories in file store
dotNomad Dec 2, 2024
e2f13b2
Reset expanded folders when the base file changes
dotNomad Dec 2, 2024
3a7d90e
Add JSDoc to flattenFiles function
dotNomad Dec 2, 2024
609b154
Change TreeItemCheckbox hover based on if virtual
dotNomad Dec 3, 2024
ca12df1
Add features to TreeItem as well
dotNomad Dec 3, 2024
b8d9eee
Add File store unit tests
dotNomad Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion extensions/vscode/webviews/homeView/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion extensions/vscode/webviews/homeView/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"axios": "1.7.4",
"eventsource": "^2.0.2",
"pinia": "^2.1.7",
"vue": "^3.4.21"
"vue": "^3.4.21",
"vue-virtual-scroller": "^2.0.0-beta.8"
},
"devDependencies": {
"@tsconfig/node20": "^20.1.4",
Expand Down
13 changes: 10 additions & 3 deletions extensions/vscode/webviews/homeView/src/HostConduitService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import {
WebviewToHostMessage,
WebviewToHostMessageType,
} from "../../../src/types/messages/webviewToHostMessages";
import { useHomeStore } from "./stores/home";
import { useFileStore } from "src/stores/file";
import { useHomeStore } from "src/stores/home";
import { vscodeAPI } from "src/vscode";

let hostConduit: HostConduit | undefined = undefined;
Expand Down Expand Up @@ -196,8 +197,14 @@ const onSaveSelectionMsg = () => {
};

const onRefreshFilesMsg = (msg: RefreshFilesMsg) => {
const home = useHomeStore();
home.files = msg.content.files;
const fileStore = useFileStore();

// If the root file has changed, reset the expanded directories
if (msg.content.files.abs !== fileStore.files?.abs) {
fileStore.expandedDirs = new Set();
}
Comment on lines +202 to +205
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The expanded directories only reset when the root changes; meaning switching deployments that have the same directory won't reset it.

This feels like good behavior to me, but I want to highlight it for discussion.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me! 👍


fileStore.files = msg.content.files;
};

const onUpdatePythonPackages = (msg: UpdatePythonPackages) => {
Expand Down
34 changes: 25 additions & 9 deletions extensions/vscode/webviews/homeView/src/components/tree/TreeItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
class="tree-item"
:class="{
'align-icon-with-twisty': alignIconWithTwisty,
collapsible: $slots.default,
collapsible: isExpandable,
'text-list-emphasized': listStyle === 'emphasized',
'text-foreground': listStyle === 'default',
'text-list-deemphasized': listStyle === 'deemphasized',
}"
>
<div
class="tree-item-container"
:class="virtualized ? 'class-hover' : undefined"
:title="tooltip"
v-on="{
click: $slots.default ? toggleExpanded : undefined,
click: isExpandable ? toggleExpanded : undefined,
}"
>
<div class="indent">
Expand All @@ -22,8 +23,8 @@
<div
class="twisty-container text-icon"
:class="[
{ codicon: $slots.default },
$slots.default
{ codicon: isExpandable },
expandable || $slots.default
? expanded
? 'codicon-chevron-down'
: 'codicon-chevron-right'
Expand Down Expand Up @@ -52,13 +53,15 @@
</div>
</div>

<div v-show="$slots.default && expanded" class="tree-item-children">
<div v-show="isExpandable && expanded" class="tree-item-children">
<slot :indent-level="indentLevel + 1" />
</div>
</div>
</template>

<script setup lang="ts">
import { computed } from "vue";

import ActionToolbar, { ActionButton } from "src/components/ActionToolbar.vue";

export type TreeItemStyle = "emphasized" | "default" | "deemphasized";
Expand All @@ -74,22 +77,33 @@ interface Props {
codicon?: string;
actions?: ActionButton[];
indentLevel?: number;
expandable?: boolean;
virtualized?: boolean;
}

withDefaults(defineProps<Props>(), {
const props = withDefaults(defineProps<Props>(), {
listStyle: "default",
indentLevel: 1,
expandable: false,
virtualized: false,
});

defineSlots<{
const slots = defineSlots<{
default(props: { indentLevel: number }): any;
description(): any;
postDecor(): any;
}>();

const emits = defineEmits(["expand", "collapse"]);

const toggleExpanded = () => {
expanded.value = !expanded.value;
emits(expanded.value ? "expand" : "collapse");
};

const isExpandable = computed((): Boolean => {
return Boolean(slots.default || props.expandable);
});
</script>

<style lang="scss" scoped>
Expand Down Expand Up @@ -192,7 +206,8 @@ const toggleExpanded = () => {
flex-grow: 100;
}

&:hover {
.hover &.class-hover,
&:not(.class-hover):hover {
color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
background-color: var(--vscode-list-hoverBackground);

Expand All @@ -209,7 +224,8 @@ const toggleExpanded = () => {
}
}

&:hover .actions,
.hover &.class-hover .actions,
&:not(.class-hover):hover .actions,
&:focus-within .actions {
display: initial;
}
Expand Down
39 changes: 28 additions & 11 deletions extensions/vscode/webviews/homeView/src/components/tree/TreeItemCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,32 @@
class="tree-item"
:class="{
'align-icon-with-twisty': alignIconWithTwisty,
collapsible: $slots.default,
collapsible: isExpandable,
'text-list-emphasized': listStyle === 'emphasized',
'text-foreground': listStyle === 'default',
'text-list-deemphasized': listStyle === 'deemphasized',
}"
>
<div class="tree-item-container" :title="tooltip">
<div
class="tree-item-container"
:class="virtualized ? 'class-hover' : undefined"
:title="tooltip"
>
<div class="indent">
<div v-for="_ in indentLevel - 1" class="indent-guide"></div>
</div>
<div
class="twisty-container text-icon"
:class="[
{ codicon: $slots.default },
$slots.default
{ codicon: isExpandable },
expandable || $slots.default
? expanded
? 'codicon-chevron-down'
: 'codicon-chevron-right'
: undefined,
]"
v-on="{
click: $slots.default ? toggleExpanded : undefined,
click: isExpandable ? toggleExpanded : undefined,
}"
/>
<vscode-checkbox
Expand All @@ -46,13 +50,15 @@
</div>
</div>

<div v-show="$slots.default && expanded" class="tree-item-children">
<div v-show="isExpandable && expanded" class="tree-item-children">
<slot :indent-level="indentLevel + 1" />
</div>
</div>
</template>

<script setup lang="ts">
import { computed } from "vue";

import ActionToolbar, { ActionButton } from "src/components/ActionToolbar.vue";

export type TreeItemStyle = "emphasized" | "default" | "deemphasized";
Expand All @@ -69,23 +75,32 @@ interface Props {
alignIconWithTwisty?: boolean;
actions?: ActionButton[];
indentLevel?: number;
expandable?: boolean;
virtualized?: boolean;
}

withDefaults(defineProps<Props>(), {
const props = withDefaults(defineProps<Props>(), {
listStyle: "default",
indentLevel: 1,
expandable: false,
virtualized: false,
});

defineSlots<{
const slots = defineSlots<{
default(props: { indentLevel: number }): any;
postDecor(): any;
}>();

defineEmits(["check", "uncheck"]);
const emits = defineEmits(["check", "uncheck", "expand", "collapse"]);

const toggleExpanded = () => {
expanded.value = !expanded.value;
emits(expanded.value ? "expand" : "collapse");
};

const isExpandable = computed((): Boolean => {
return Boolean(slots.default || props.expandable);
});
</script>

<style lang="scss" scoped>
Expand Down Expand Up @@ -174,7 +189,8 @@ const toggleExpanded = () => {
flex-grow: 100;
}

&:hover {
.hover &.class-hover,
&:not(.class-hover):hover {
color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
background-color: var(--vscode-list-hoverBackground);

Expand All @@ -191,7 +207,8 @@ const toggleExpanded = () => {
}
}

&:hover .actions,
.hover &.class-hover .actions,
&:not(.class-hover):hover .actions,
&:focus-within .actions {
display: initial;
}
Expand Down
Loading
Loading