Performance improvements (#114)

* Performance improvements

* run fmt

* optimize creation modal

* remove print, fix mod loader editing

* Fix library update

* update extract loading bar

* Update theseus_gui/src-tauri/src/api/metadata.rs

Co-authored-by: triphora <emma@modrinth.com>

* fix cli

---------

Co-authored-by: triphora <emma@modrinth.com>

theseus_gui/src/components/GridDisplay.vue

@@ -103,7 +103,7 @@ const modsRow = ref(null)
     margin-right: auto;
     margin-top: 0.8rem;
     scroll-behavior: smooth;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 

theseus_gui/src/components/modrinth-loading-indicator.js

@@ -63,7 +63,7 @@ export default defineComponent({
             background: props.color || undefined,
             backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
             transition: 'width 0.1s, height 0.4s, opacity 0.4s',
-            zIndex: 99,
+            zIndex: 6,
           },
         },
         slots

theseus_gui/src/components/ui/Instance.vue

@@ -64,7 +64,7 @@ const install = async (e) => {
   )
 
   if (props.instance.project_type === 'modpack') {
-    const packs = Object.values(await list())
+    const packs = Object.values(await list(true))
 
     if (
       packs.length === 0 ||
@@ -125,9 +125,14 @@ await process_listener((e) => {
 
 <template>
   <div class="instance">
-    <Card v-if="props.small" class="instance-small-card button-base">
+    <Card v-if="props.small" class="instance-small-card button-base" @click="seeInstance">
       <Avatar
-        :src="convertFileSrc(props.instance.metadata.icon)"
+        :src="
+          !props.instance.metadata.icon ||
+          (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
+            ? props.instance.metadata.icon
+            : convertFileSrc(instance.metadata?.icon)
+        "
         :alt="props.instance.metadata.name"
         size="sm"
       />
@@ -150,9 +155,10 @@ await process_listener((e) => {
         size="none"
         :src="
           props.instance.metadata
-            ? props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http')
+            ? !props.instance.metadata.icon ||
+              (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
               ? props.instance.metadata.icon
-              : convertFileSrc(props.instance.metadata?.icon)
+              : convertFileSrc(instance.metadata?.icon)
             : props.instance.icon_url
         "
         alt="Mod card"
@@ -166,25 +172,27 @@ await process_listener((e) => {
         </p>
       </div>
     </Card>
-    <div
-      v-if="props.instance.metadata && playing === false && modLoading === false"
-      class="install cta button-base"
-      @click="play"
-    >
-      <PlayIcon />
-    </div>
-    <div v-else-if="modLoading === true && playing === false" class="cta loading">
-      <AnimatedLogo class="loading" />
-    </div>
-    <div
-      v-else-if="playing === true"
-      class="stop cta button-base"
-      @click="stop"
-      @mousehover="checkProcess"
-    >
-      <XIcon />
-    </div>
-    <div v-else class="install cta buttonbase" @click="install"><SaveIcon /></div>
+    <template v-if="!props.small">
+      <div
+        v-if="props.instance.metadata && playing === false && modLoading === false"
+        class="install cta button-base"
+        @click="play"
+      >
+        <PlayIcon />
+      </div>
+      <div v-else-if="modLoading === true && playing === false" class="cta loading">
+        <AnimatedLogo class="loading" />
+      </div>
+      <div
+        v-else-if="playing === true"
+        class="stop cta button-base"
+        @click="stop"
+        @mousehover="checkProcess"
+      >
+        <XIcon />
+      </div>
+      <div v-else class="install cta buttonbase" @click="install"><SaveIcon /></div>
+    </template>
     <InstallConfirmModal ref="confirmModal" />
   </div>
 </template>
@@ -209,10 +217,6 @@ await process_listener((e) => {
       font-weight: bolder;
     }
   }
-
-  .cta {
-    display: none;
-  }
 }
 
 .instance {

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -86,13 +86,13 @@ import {
   CodeIcon,
   Checkbox,
 } from 'omorphia'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { create } from '@/helpers/profile'
 import { open } from '@tauri-apps/api/dialog'
 import { useRouter } from 'vue-router'
 import { tauri } from '@tauri-apps/api'
-import { get_fabric_versions, get_forge_versions } from '@/helpers/metadata'
+import { get_fabric_versions, get_forge_versions, get_quilt_versions } from '@/helpers/metadata'
 
 const router = useRouter()
 
@@ -129,20 +129,27 @@ defineExpose({
   },
 })
 
-const all_game_versions = ref(await get_game_versions())
+const [fabric_versions, forge_versions, quilt_versions, all_game_versions, loaders] =
+  await Promise.all([
+    get_fabric_versions().then(shallowRef),
+    get_forge_versions().then(shallowRef),
+    get_quilt_versions().then(shallowRef),
+    get_game_versions().then(shallowRef),
+    get_loaders()
+      .then((value) =>
+        value
+          .filter((item) => item.supported_project_types.includes('modpack'))
+          .map((item) => item.name.toLowerCase())
+      )
+      .then(ref),
+  ])
 
 const game_versions = computed(() => {
   return all_game_versions.value
     .filter((item) => item.version_type === 'release' || showSnapshots.value)
     .map((item) => item.version)
 })
-const loaders = ref(
-  await get_loaders().then((value) =>
-    value
-      .filter((item) => item.supported_project_types.includes('modpack'))
-      .map((item) => item.name.toLowerCase())
-  )
-)
+
 const modal = ref(null)
 
 const check_valid = computed(() => {
@@ -191,9 +198,6 @@ const reset_icon = () => {
   display_icon.value = null
 }
 
-const fabric_versions = ref(await get_fabric_versions())
-const forge_versions = ref(await get_forge_versions())
-
 const selectable_versions = computed(() => {
   if (game_version.value) {
     if (loader.value === 'fabric') {
@@ -202,6 +206,8 @@ const selectable_versions = computed(() => {
       return forge_versions.value.gameVersions
         .find((item) => item.id === game_version.value)
         .loaders.map((item) => item.id)
+    } else if (loader.value === 'quilt') {
+      return quilt_versions.value.gameVersions[0].loaders.map((item) => item.id)
     }
   }
   return []

theseus_gui/src/components/ui/InstanceInstallModal.vue

@@ -11,14 +11,15 @@ import {
   RightArrowIcon,
   CheckIcon,
 } from 'omorphia'
-import { computed, ref } from 'vue'
-import { add_project_from_version as installMod, list } from '@/helpers/profile'
+import { computed, ref, shallowRef } from 'vue'
+import { add_project_from_version as installMod, check_installed, list } from '@/helpers/profile'
 import { tauri } from '@tauri-apps/api'
 import { open } from '@tauri-apps/api/dialog'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { useRouter } from 'vue-router'
 import { create } from '@/helpers/profile'
-import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
+import { installVersionDependencies } from '@/helpers/utils'
+
 const router = useRouter()
 const versions = ref([])
 const project = ref('')
@@ -33,15 +34,17 @@ const gameVersion = ref(null)
 const creatingInstance = ref(false)
 
 defineExpose({
-  show: (projectId, selectedVersion) => {
+  show: async (projectId, selectedVersion) => {
     project.value = projectId
     versions.value = selectedVersion
     installModal.value.show()
     searchFilter.value = ''
+
+    profiles.value = await getData()
   },
 })
 
-const profiles = ref(await list().then(Object.values))
+const profiles = shallowRef(await getData())
 
 async function install(instance) {
   instance.installing = true
@@ -59,8 +62,10 @@ async function install(instance) {
   instance.installing = false
 }
 
-const filteredVersions = computed(() => {
-  const filtered = profiles.value
+async function getData() {
+  const projects = await list(true).then(Object.values)
+
+  const filtered = projects
     .filter((profile) => {
       return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
     })
@@ -69,17 +74,20 @@ const filteredVersions = computed(() => {
         versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
         versions.value
           .flatMap((v) => v.loaders)
-          .some((value) => value === profile.metadata.loader || value === 'minecraft')
+          .some(
+            (value) =>
+              value === profile.metadata.loader || ['minecraft', 'iris', 'optifine'].includes(value)
+          )
       )
     })
 
-  filtered.map((profile) => {
+  for (let profile of filtered) {
     profile.installing = false
-    profile.installedMod = checkInstalled(profile, project.value)
-  })
+    profile.installedMod = await check_installed(profile.path, project.value)
+  }
 
   return filtered
-})
+}
 
 const toggleCreation = () => {
   showCreation.value = !showCreation.value
@@ -140,7 +148,7 @@ const check_valid = computed(() => {
     <div class="modal-body">
       <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
       <div class="profiles">
-        <div v-for="profile in filteredVersions" :key="profile.metadata.name" class="option">
+        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
           <Button
             color="raised"
             class="profile-button"

theseus_gui/src/helpers/metadata.js

@@ -17,3 +17,9 @@ export async function get_fabric_versions() {
 export async function get_forge_versions() {
   return await invoke('metadata_get_forge_versions')
 }
+
+// Gets the quilt versions from daedalus
+// Returns Manifest
+export async function get_quilt_versions() {
+  return await invoke('metadata_get_quilt_versions')
+}

theseus_gui/src/helpers/profile.js

@@ -32,14 +32,18 @@ export async function remove(path) {
 
 // Get a profile by path
 // Returns a Profile
-export async function get(path) {
-  return await invoke('profile_get', { path })
+export async function get(path, clearProjects) {
+  return await invoke('profile_get', { path, clearProjects })
 }
 
 // Get a copy of the profile set
 // Returns hashmap of path -> Profile
-export async function list() {
-  return await invoke('profile_list')
+export async function list(clearProjects) {
+  return await invoke('profile_list', { clearProjects })
+}
+
+export async function check_installed(path, projectId) {
+  return await invoke('profile_check_installed', { path, projectId })
 }
 
 // Syncs a profile with the disk

theseus_gui/src/helpers/utils.js

@@ -1,4 +1,4 @@
-import { add_project_from_version as installMod } from '@/helpers/profile'
+import { add_project_from_version as installMod, check_installed } from '@/helpers/profile'
 import { ofetch } from 'ofetch'
 
 export const releaseColor = (releaseType) => {
@@ -14,17 +14,13 @@ export const releaseColor = (releaseType) => {
   }
 }
 
-export const checkInstalled = (profile, projectId) => {
-  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === projectId)
-}
-
 export const installVersionDependencies = async (profile, version) => {
   for (const dep of version.dependencies) {
     if (dep.version_id) {
-      if (checkInstalled(profile, dep.project_id)) continue
+      if (await check_installed(profile.path, dep.project_id)) continue
       await installMod(profile.path, dep.version_id)
     } else {
-      if (checkInstalled(profile, dep.project_id)) continue
+      if (await check_installed(profile.path, dep.project_id)) continue
       const depVersions = await ofetch(
         `https://api.modrinth.com/v2/project/${dep.project_id}/version`
       )

theseus_gui/src/pages/Browse.vue

@@ -167,15 +167,17 @@ watch(
         v-if="
           showLoaders &&
           searchStore.projectType !== 'datapack' &&
-          searchStore.projectType !== 'resourcepack' &&
-          searchStore.projectType !== 'shader'
+          searchStore.projectType !== 'resourcepack'
         "
         class="loaders"
       >
         <h2>Loaders</h2>
         <div
-          v-for="loader in loaders.filter((l) =>
-            l.supported_project_types?.includes(searchStore.projectType)
+          v-for="loader in loaders.filter(
+            (l) =>
+              (searchStore.projectType !== 'mod' &&
+                l.supported_project_types?.includes(searchStore.projectType)) ||
+              (searchStore.projectType === 'mod' && ['fabric', 'forge', 'quilt'].includes(l.name))
           )"
           :key="loader"
         >

theseus_gui/src/pages/Index.vue

@@ -16,11 +16,11 @@ const breadcrumbs = useBreadcrumbs()
 
 breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 
-const recentInstances = shallowRef(Object.values(await list()))
+const recentInstances = shallowRef([])
 
 const getInstances = async () => {
   filter.value = ''
-  const profiles = await list()
+  const profiles = await list(true)
   recentInstances.value = Object.values(profiles)
 
   const excludeIds = recentInstances.value.map((i) => i.metadata?.linked_data?.project_id)
@@ -47,8 +47,8 @@ await getInstances()
 await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
 
 const unlisten = await profile_listener(async (e) => {
+  await getInstances()
   if (e.event === 'created' || e.event === 'removed') {
-    await getInstances()
     await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
   }
 })

theseus_gui/src/pages/Library.vue

@@ -4,21 +4,19 @@ import GridDisplay from '@/components/GridDisplay.vue'
 import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { loading_listener } from '@/helpers/events.js'
+import { profile_listener } from '@/helpers/events.js'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
 breadcrumbs.setRootContext({ name: 'Library', link: route.path })
 
-const profiles = await list()
+const profiles = await list(true)
 const instances = shallowRef(Object.values(profiles))
 
-loading_listener(async (profile) => {
-  if (profile.event === 'loaded') {
-    const profiles = await list()
-    instances.value = Object.values(profiles)
-  }
+profile_listener(async () => {
+  const profiles = await list(true)
+  instances.value = Object.values(profiles)
 })
 </script>
 

theseus_gui/src/pages/instance/Index.vue

@@ -5,7 +5,8 @@
         <Avatar
           size="lg"
           :src="
-            instance.metadata.icon && instance.metadata.icon.startsWith('http')
+            !instance.metadata.icon ||
+            (instance.metadata.icon && instance.metadata.icon.startsWith('http'))
               ? instance.metadata.icon
               : convertFileSrc(instance.metadata?.icon)
           "

theseus_gui/src/pages/project/Index.vue

@@ -221,13 +221,13 @@ import {
 } from '@/assets/external'
 import { get_categories, get_loaders } from '@/helpers/tags'
 import { install as packInstall } from '@/helpers/pack'
-import { list, add_project_from_version as installMod } from '@/helpers/profile'
+import { list, add_project_from_version as installMod, check_installed } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
-import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
+import { installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -242,19 +242,19 @@ const breadcrumbs = useBreadcrumbs()
 
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
-const loaders = ref(await get_loaders())
-const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-const [data, versions, members, dependencies] = await Promise.all([
+const [data, versions, members, dependencies, categories, loaders] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
+  get_loaders().then(ref),
+  get_categories().then(ref),
 ])
 
-const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
+const installed = ref(instance.value && (await check_installed(instance.value.path, data.value.id)))
 
 breadcrumbs.setName('Project', data.value.title)
 
@@ -284,7 +284,7 @@ async function install(version) {
   }
 
   if (data.value.project_type === 'modpack') {
-    const packs = Object.values(await list())
+    const packs = Object.values(await list(true))
     if (
       packs.length === 0 ||
       !packs
@@ -317,7 +317,7 @@ async function install(version) {
         await installMod(instance.value.path, queuedVersionData.id)
       }
 
-      installVersionDependencies(instance.value, queuedVersionData)
+      await installVersionDependencies(instance.value, queuedVersionData)
 
       installed.value = true
     } else {