open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf(files): initialize folder tree from current path and store

Browse Source 
Initialize the folder tree based on the current directory.
Also only include views needed.

If possible reuse nodes from files store to prevent API call.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/58277/head
Ferdinand Thiessen 4 months ago committed by Carl Schwan
parent 52df4297b2
commit f258c66e82
No known key found for this signature in database
GPG Key ID: 02325448204E452A
2 changed files with 155 additions and 103 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/files/src/services/FolderTree.ts
  2. 256
      apps/files/src/views/folderTree.ts

2
apps/files/src/services/FolderTree.ts
Unescape View File

@ -112,5 +112,5 @@ export function getSourceParent(source: string): string {
if (parent === sourceRoot) {
return folderTreeId
}
return encodeSource(parent)
return `${folderTreeId}::${encodeSource(parent)}`
}

256
apps/files/src/views/folderTree.ts
Unescape View File

@ -1,17 +1,17 @@
/**
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import type { Folder, Node } from '@nextcloud/files'
import type { IFolder, INode, IView } from '@nextcloud/files'
import type { TreeNode } from '../services/FolderTree.ts'
import FolderMultipleSvg from '@mdi/svg/svg/folder-multiple-outline.svg?raw'
import FolderSvg from '@mdi/svg/svg/folder-outline.svg?raw'
import { emit, subscribe } from '@nextcloud/event-bus'
import { subscribe } from '@nextcloud/event-bus'
import { FileType, getNavigation, View } from '@nextcloud/files'
import { loadState } from '@nextcloud/initial-state'
import { translate as t } from '@nextcloud/l10n'
import { t } from '@nextcloud/l10n'
import { isSamePath } from '@nextcloud/paths'
import PQueue from 'p-queue'
import {
@ -21,70 +21,109 @@ import {
getSourceParent,
sourceRoot,
} from '../services/FolderTree.ts'
import { useFilesStore } from '../store/files.ts'
import { getPinia } from '../store/index.ts'
const isFolderTreeEnabled = loadState('files', 'config', { folder_tree: true }).folder_tree
interface IFolderTreeView extends IView {
loading?: boolean
loaded?: boolean
}
const Navigation = getNavigation()
const queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 200 })
const isFolderTreeEnabled = loadState('files', 'config', { folder_tree: true }).folder_tree
let showHiddenFiles = loadState('files', 'config', { show_hidden: false }).show_hidden
const Navigation = getNavigation()
const folderTreeView: IFolderTreeView = new View({
id: folderTreeId,
const queue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 200 })
name: t('files', 'Folder tree'),
caption: t('files', 'List of your files and folders.'),
const registerQueue = new PQueue({ concurrency: 5, intervalCap: 5, interval: 200 })
icon: FolderMultipleSvg,
order: 50, // Below all other views
getContents,
async loadChildViews(view) {
const treeView = view as IFolderTreeView
if (treeView.loading || treeView.loaded) {
return
}
treeView.loading = true
try {
const dir = new URLSearchParams(window.location.search).get('dir') ?? '/'
const tree = await getFolderTreeNodes(dir, 1, true)
registerNodeViews(tree, dir)
treeView.loaded = true
subscribe('files:node:created', onCreateNode)
subscribe('files:node:deleted', onDeleteNode)
subscribe('files:node:moved', onMoveNode)
subscribe('files:config:updated', onUserConfigUpdated)
} finally {
treeView.loading = false
}
},
})
/**
*
* @param path
* Register the folder tree feature
*/
async function registerTreeChildren(path: string = '/') {
await queue.add(async () => {
// preload up to 2 depth levels for faster navigation
const nodes = await getFolderTreeNodes(path, 2)
const promises = nodes.map((node) => registerQueue.add(() => registerNodeView(node)))
await Promise.allSettled(promises)
})
export async function registerFolderTreeView() {
if (!isFolderTreeEnabled) {
return
}
Navigation.register(folderTreeView)
}
/**
* Helper to register node views in the navigation.
*
* @param node
* @param nodes - The nodes to register
* @param path - The path to expand by default, if any
*/
function getLoadChildViews(node: TreeNode | Folder) {
return async (view: View): Promise<void> => {
// @ts-expect-error Custom property on View instance
if (view.loading || view.loaded) {
return
async function registerNodeViews(nodes: (TreeNode | IFolder)[], path?: string) {
const views: IView[] = []
for (const node of nodes) {
const isRegistered = Navigation.views.some((view) => view.id === `${folderTreeId}::${node.encodedSource}`)
// skip hidden files if the setting is disabled
if (!showHiddenFiles && node.basename.startsWith('.')) {
if (isRegistered) {
// and also remove any existing views for hidden files if the setting was toggled
Navigation.remove(`${folderTreeId}::${node.encodedSource}`)
}
continue
}
// skip already registered views to avoid duplicates when loading multiple levels
if (isRegistered) {
continue
}
// @ts-expect-error Custom property
view.loading = true
await registerTreeChildren(node.path)
// @ts-expect-error Custom property
view.loading = false
// @ts-expect-error Custom property
view.loaded = true
// @ts-expect-error No payload
emit('files:navigation:updated')
// @ts-expect-error No payload
emit('files:folder-tree:expanded')
views.push(generateNodeView(
node,
path === node.path || path?.startsWith(node.path + '/') ? true : undefined,
))
}
Navigation.register(...views)
}
/**
* Generates a navigation view for a given folder tree node or folder.
*
* @param node
* @param node - The folder tree node or folder for which to generate the view.
* @param expanded - Whether the view should be expanded by default.
*/
function registerNodeView(node: TreeNode | Folder) {
const registeredView = Navigation.views.find((view) => view.id === node.encodedSource)
if (registeredView) {
Navigation.remove(registeredView.id)
}
if (!showHiddenFiles && node.basename.startsWith('.')) {
return
}
Navigation.register(new View({
id: node.encodedSource,
function generateNodeView(node: TreeNode | IFolder, expanded?: boolean): IView {
return {
id: `${folderTreeId}::${node.encodedSource}`,
parent: getSourceParent(node.source),
expanded,
loaded: expanded,
// @ts-expect-error Casing differences
name: node.displayName ?? node.displayname ?? node.basename,
@ -98,60 +137,109 @@ function registerNodeView(node: TreeNode | Folder) {
fileid: String(node.fileid), // Needed for matching exact routes
dir: node.path,
},
}))
}
}
/**
* Generates a function to load child views for a given folder tree node or folder.
* This function is used as the `loadChildViews` callback in the navigation view.
*
* @param node - The folder tree node or folder for which to generate the child view loader function.
*/
function getLoadChildViews(node: TreeNode | IFolder) {
return async (view: IView): Promise<void> => {
const treeView = view as IFolderTreeView
if (treeView.loading || treeView.loaded) {
return
}
treeView.loading = true
try {
await updateTreeChildren(node.path)
treeView.loaded = true
} finally {
treeView.loading = false
}
}
}
/**
* Registers child views for the given path. If no path is provided, it registers the root nodes.
*
* @param folder
* @param path - The path for which to register child views. Defaults to '/' for root nodes.
*/
function removeFolderView(folder: Folder) {
async function updateTreeChildren(path: string = '/') {
await queue.add(async () => {
const filesStore = useFilesStore(getPinia())
const cachedNodes = filesStore.getNodesByPath(Navigation.active!.id, path)
if (cachedNodes.length > 0) {
// if there are nodes loaded in the path we dont need to fetch from API
const folders = cachedNodes.filter((node) => node.type === FileType.Folder) as IFolder[]
registerNodeViews(folders, path)
} else {
// otherwise we need to fetch the tree nodes for the path
const nodes = await getFolderTreeNodes(path, 2)
registerNodeViews(nodes)
}
})
}
/**
* Remove a folder view from the navigation.
*
* @param folder - The folder for which to remove the view
*/
function removeFolderView(folder: IFolder) {
const viewId = folder.encodedSource
Navigation.remove(viewId)
}
/**
* Remove a folder view from the navigation by its source URL.
*
* @param source
* @param source - The source URL of the folder for which to remove the view
*/
function removeFolderViewSource(source: string) {
Navigation.remove(source)
}
/**
* Handle node creation events to add new folder tree views to the navigation.
*
* @param node
* @param node - The node that was created
*/
function onCreateNode(node: Node) {
function onCreateNode(node: INode) {
if (node.type !== FileType.Folder) {
return
}
registerNodeView(node)
registerNodeViews([node as IFolder])
}
/**
* Handle node deletion events to remove the corresponding folder tree views from the navigation.
*
* @param node
* @param node - The node that was deleted
*/
function onDeleteNode(node: Node) {
function onDeleteNode(node: INode) {
if (node.type !== FileType.Folder) {
return
}
removeFolderView(node)
removeFolderView(node as IFolder)
}
/**
* Handle node move events to update the folder tree views accordingly.
*
* @param root0
* @param root0.node
* @param root0.oldSource
* @param context - the event context
* @param context.node - The node that was moved
* @param context.oldSource - the old source URL of the moved node
*/
function onMoveNode({ node, oldSource }) {
if (node.type !== FileType.Folder) {
return
}
removeFolderViewSource(oldSource)
registerNodeView(node)
registerNodeViews([node as IFolder])
const newPath = node.source.replace(sourceRoot, '')
const oldPath = oldSource.replace(sourceRoot, '')
@ -165,58 +253,22 @@ function onMoveNode({ node, oldSource }) {
return view.params.dir.startsWith(oldPath)
})
for (const view of childViews) {
// @ts-expect-error FIXME Allow setting parent
view.parent = getSourceParent(node.source)
// @ts-expect-error dir param is defined
view.params.dir = view.params.dir.replace(oldPath, newPath)
view.params!.dir = view.params!.dir!.replace(oldPath, newPath)
}
}
/**
* Handle user config updates, specifically for the "show hidden files" setting,
* to show hidden folders in the folder tree when enabled and hide them when disabled.
*
* @param root0
* @param root0.key
* @param root0.value
* @param context - the event context
* @param context.key - the key of the updated config
* @param context.value - the new value of the updated config
*/
async function onUserConfigUpdated({ key, value }) {
if (key === 'show_hidden') {
showHiddenFiles = value
await registerTreeChildren()
// @ts-expect-error No payload
emit('files:folder-tree:initialized')
}
}
/**
*
*/
function registerTreeRoot() {
Navigation.register(new View({
id: folderTreeId,
name: t('files', 'Folder tree'),
caption: t('files', 'List of your files and folders.'),
icon: FolderMultipleSvg,
order: 50, // Below all other views
getContents,
}))
}
/**
*
*/
export async function registerFolderTreeView() {
if (!isFolderTreeEnabled) {
return
await updateTreeChildren()
}
registerTreeRoot()
await registerTreeChildren()
subscribe('files:node:created', onCreateNode)
subscribe('files:node:deleted', onDeleteNode)
subscribe('files:node:moved', onMoveNode)
subscribe('files:config:updated', onUserConfigUpdated)
// @ts-expect-error No payload
emit('files:folder-tree:initialized')
}

Write Preview
Loading…
Cancel
Save