Analytics + more bug fixes (#144)

* Analytics + more bug fixes * debug deadlock * Fix mostly everything * merge fixes * fix rest * final fixeS
2023-06-19 14:59:06 -07:00
parent 84d731b670
commit 1e78a7b6a8
51 changed files with 1285 additions and 491 deletions
--- a/theseus_gui/src/pages/project/Description.vue
+++ b/theseus_gui/src/pages/project/Description.vue
@@ -23,6 +23,10 @@ export default {

 <style scoped lang="scss">
 .markdown-body {
+  :deep(table) {
+    width: auto;
+  }
+
  :deep(hr),
  :deep(h1),
  :deep(h2) {
--- a/theseus_gui/src/pages/project/Gallery.vue
+++ b/theseus_gui/src/pages/project/Gallery.vue
@@ -93,6 +93,7 @@ import {
  Button,
 } from 'omorphia'
 import { ref } from 'vue'
+import mixpanel from 'mixpanel-browser'

 const props = defineProps({
  project: {
@@ -111,6 +112,10 @@ const nextImage = () => {
    expandedGalleryIndex.value = 0
  }
  expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
+  mixpanel.track('GalleryImageNext', {
+    project_id: props.project.id,
+    url: expandedGalleryItem.value.url,
+  })
 }

 const previousImage = () => {
@@ -119,12 +124,21 @@ const previousImage = () => {
    expandedGalleryIndex.value = props.project.gallery.length - 1
  }
  expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
+  mixpanel.track('GalleryImagePrevious', {
+    project_id: props.project.id,
+    url: expandedGalleryItem.value,
+  })
 }

 const expandImage = (item, index) => {
  expandedGalleryItem.value = item
  expandedGalleryIndex.value = index
  zoomedIn.value = false
+
+  mixpanel.track('GalleryImageExpand', {
+    project_id: props.project.id,
+    url: item.url,
+  })
 }
 </script>

--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -2,7 +2,7 @@
  <div class="root-container">
    <div v-if="data" class="project-sidebar">
      <div v-if="instance" class="small-instance">
-        <div class="instance">
+        <router-link class="instance" :to="`/instance/${encodeURIComponent(instance.path)}`">
          <Avatar
            :src="
              !instance.metadata.icon ||
@@ -22,7 +22,7 @@
              {{ instance.metadata.game_version }}
            </span>
          </div>
-        </div>
+        </router-link>
      </div>
      <Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
        <Avatar size="lg" :src="data.icon_url" />
@@ -32,17 +32,11 @@
        </div>
        <Categories
          class="tags"
-          type=""
-          :categories="[
-            ...categories.filter(
+          :categories="
+            categories.filter(
              (cat) => data.categories.includes(cat.name) && cat.project_type === 'mod'
-            ),
-            ...loaders.filter(
-              (loader) =>
-                data.categories.includes(loader.name) &&
-                loader.supported_project_types?.includes('modpack')
-            ),
-          ]"
+            )
+          "
        >
          <EnvironmentIndicator
            :client-side="data.client_side"
@@ -258,7 +252,7 @@ import {
  KoFiIcon,
  OpenCollectiveIcon,
 } from '@/assets/external'
-import { get_categories, get_loaders } from '@/helpers/tags'
+import { get_categories } from '@/helpers/tags'
 import { install as packInstall } from '@/helpers/pack'
 import {
  list,
@@ -268,7 +262,7 @@ import {
 } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import { installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
@@ -279,9 +273,9 @@ import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
+import mixpanel from 'mixpanel-browser'

 const route = useRoute()
-const router = useRouter()
 const breadcrumbs = useBreadcrumbs()

 const confirmModal = ref(null)
@@ -291,32 +285,46 @@ const incompatibilityWarning = ref(null)
 const options = ref(null)
 const installing = ref(false)

-const [data, versions, members, dependencies, categories, loaders, instance] = await Promise.all([
-  useFetch(`https://api.modrinth.com/v2/project/${route.params.id}`, 'project').then(shallowRef),
-  useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`, 'project').then(
-    shallowRef
-  ),
-  useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`, 'project').then(
-    shallowRef
-  ),
-  useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`, 'project').then(
-    shallowRef
-  ),
-  get_loaders().then(ref).catch(handleError),
-  get_categories().then(ref).catch(handleError),
-  route.query.i ? getInstance(route.query.i, true).then(ref) : Promise.resolve().then(ref),
-])
+const data = shallowRef(null)
+const versions = shallowRef([])
+const members = shallowRef([])
+const dependencies = shallowRef([])
+const categories = shallowRef([])
+const instance = ref(null)

-const installed = ref(
-  instance.value && (await check_installed(instance.value.path, data.value.id).catch(handleError))
-)
+const installed = ref(false)

-breadcrumbs.setName('Project', data.value.title)
+async function fetchProjectData() {
+  ;[
+    data.value,
+    versions.value,
+    members.value,
+    dependencies.value,
+    categories.value,
+    instance.value,
+  ] = await Promise.all([
+    useFetch(`https://api.modrinth.com/v2/project/${route.params.id}`, 'project'),
+    useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`, 'project'),
+    useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`, 'project'),
+    useFetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`, 'project'),
+    get_categories().catch(handleError),
+    route.query.i ? getInstance(route.query.i, true).catch(handleError) : Promise.resolve(),
+  ])
+
+  installed.value =
+    instance.value?.path &&
+    (await check_installed(instance.value.path, data.value.id).catch(handleError))
+  breadcrumbs.setName('Project', data.value.title)
+}
+
+await fetchProjectData()

 watch(
  () => route.params.id,
-  () => {
-    if (route.params.id) router.go()
+  async () => {
+    if (route.params.id && route.path.startsWith('/project')) {
+      await fetchProjectData()
+    }
  }
 )

@@ -356,6 +364,13 @@ async function install(version) {
        data.value.title,
        data.value.icon_url
      ).catch(handleError)
+
+      mixpanel.track('PackInstall', {
+        id: data.value.id,
+        version_id: queuedVersionData.id,
+        title: data.value.title,
+        source: 'ProjectPage',
+      })
    } else {
      confirmModal.value.show(
        data.value.id,
@@ -381,14 +396,26 @@ async function install(version) {
            instance.value,
            data.value.title,
            versions.value,
-            markInstalled
+            markInstalled,
+            data.value.id,
+            data.value.project_type
          )
          installing.value = false
          return
        } else {
          queuedVersionData = selectedVersion
          await installMod(instance.value.path, selectedVersion.id).catch(handleError)
-          installVersionDependencies(instance.value, queuedVersionData)
+          await installVersionDependencies(instance.value, queuedVersionData)
+
+          mixpanel.track('ProjectInstall', {
+            loader: instance.value.metadata.loader,
+            game_version: instance.value.metadata.game_version,
+            id: data.value.id,
+            project_type: data.value.project_type,
+            version_id: queuedVersionData.id,
+            title: data.value.title,
+            source: 'ProjectPage',
+          })
        }
      } else {
        const gameVersion = instance.value.metadata.game_version
@@ -403,12 +430,24 @@ async function install(version) {
        if (compatible) {
          await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
          await installVersionDependencies(instance.value, queuedVersionData)
+
+          mixpanel.track('ProjectInstall', {
+            loader: instance.value.metadata.loader,
+            game_version: instance.value.metadata.game_version,
+            id: data.value.id,
+            project_type: data.value.project_type,
+            version_id: queuedVersionData.id,
+            title: data.value.title,
+            source: 'ProjectPage',
+          })
        } else {
          incompatibilityWarning.value.show(
            instance.value,
            data.value.title,
            [queuedVersionData],
-            markInstalled
+            markInstalled,
+            data.value.id,
+            data.value.project_type
          )
          installing.value = false
          return
@@ -416,13 +455,12 @@ async function install(version) {
      }
      installed.value = true
    } else {
-      if (version) {
-        modInstallModal.value.show(data.value.id, [
-          versions.value.find((v) => v.id === queuedVersionData.id),
-        ])
-      } else {
-        modInstallModal.value.show(data.value.id, versions.value)
-      }
+      modInstallModal.value.show(
+        data.value.id,
+        version ? [versions.value.find((v) => v.id === queuedVersionData.id)] : versions.value,
+        data.value.title,
+        data.value.project_type
+      )
    }
  }

@@ -622,7 +660,7 @@ const handleOptionsClick = (args) => {
  .instance {
    display: flex;
    gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0;

    .title {
      font-weight: 600;
--- a/theseus_gui/src/pages/project/Version.vue
+++ b/theseus_gui/src/pages/project/Version.vue
@@ -1,9 +1,17 @@
 <template>
  <div>
    <Card>
+      <Breadcrumbs
+        :current-title="version.name"
+        :link-stack="[
+          {
+            href: `/project/${route.params.id}/versions`,
+            label: 'Versions',
+          },
+        ]"
+      />
      <div class="version-title">
        <h2>{{ version.name }}</h2>
-        <span v-if="version.featured">Auto-Featured</span>
      </div>
      <div class="button-group">
        <Button color="primary" :action="() => install(version.id)" :disabled="installed">
@@ -11,10 +19,6 @@
          <CheckIcon v-else />
          {{ installed ? 'Installed' : 'Install' }}
        </Button>
-        <Button :link="`/project/${route.params.id}/versions`">
-          <LeftArrowIcon />
-          Back to list
-        </Button>
        <Button>
          <ReportIcon />
          Report
@@ -65,10 +69,15 @@
            </Button>
          </Card>
        </Card>
-        <Card v-if="displayDependencies[0]">
+        <Card v-if="displayDependencies.length > 0">
          <h2>Dependencies</h2>
          <div v-for="dependency in displayDependencies" :key="dependency.title">
-            <router-link v-if="dependency.link" class="btn dependency" :to="dependency.link">
+            <router-link
+              v-if="dependency.link"
+              class="btn dependency"
+              :to="dependency.link"
+              @click="testTest"
+            >
              <Avatar size="sm" :src="dependency.icon" />
              <div>
                <span class="title"> {{ dependency.title }} </span> <br />
@@ -173,17 +182,17 @@ import {
  DownloadIcon,
  FileIcon,
  Avatar,
-  LeftArrowIcon,
  ReportIcon,
  Badge,
  ExternalIcon,
  CopyCode,
  CheckIcon,
+  Breadcrumbs,
  formatBytes,
  renderString,
 } from 'omorphia'
 import { releaseColor } from '@/helpers/utils'
-import { ref, defineProps } from 'vue'
+import { ref, defineProps, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'

@@ -221,9 +230,21 @@ const props = defineProps({
 const version = ref(props.versions.find((version) => version.id === route.params.version))
 breadcrumbs.setName('Version', version.value.name)

-const author = ref(props.members.find((member) => member.user.id === version.value.author_id))
+watch(
+  () => props.versions,
+  async () => {
+    if (route.params.version) {
+      version.value = props.versions.find((version) => version.id === route.params.version)
+      breadcrumbs.setName('Version', version.value.name)
+    }
+  }
+)

-const displayDependencies = ref(
+const author = computed(() =>
+  props.members.find((member) => member.user.id === version.value.author_id)
+)
+
+const displayDependencies = computed(() =>
  version.value.dependencies.map((dependency) => {
    const version = props.dependencies.versions.find((obj) => obj.id === dependency.version_id)
    if (version) {
@@ -236,13 +257,25 @@ const displayDependencies = ref(
        subtitle: `Version ${version.version_number} is ${dependency.dependency_type}`,
        link: `/project/${project.slug}/version/${version.id}`,
      }
-    } else
-      return {
-        icon: null,
-        title: dependency.file_name,
-        subtitle: `Added via overrides`,
-        link: null,
+    } else {
+      const project = props.dependencies.projects.find((obj) => obj.id === dependency.project_id)
+
+      if (project) {
+        return {
+          icon: project?.icon_url,
+          title: project?.title || project?.name,
+          subtitle: `${dependency.dependency_type}`,
+          link: `/project/${project.slug}`,
+        }
+      } else {
+        return {
+          icon: null,
+          title: dependency.file_name,
+          subtitle: `Added via overrides`,
+          link: null,
+        }
      }
+    }
  })
 )
 </script>