From 5ff2719cdab43886dd2b3beff4bd112af51769f2 Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Wed, 8 Nov 2023 23:46:03 -0500
Subject: [PATCH] Various frontend/backend updates

---
 .github/workflows/backend-deploy.yml          |   7 +
 backend/cors.json                             |   2 +-
 backend/deploy.md.example                     |   2 +-
 backend/env.json.example                      |   6 +-
 backend/functions/package-lock.json           |  14 +-
 backend/functions/package.json                |   3 +-
 backend/functions/src/config/index.ts         |  14 +
 backend/functions/src/index.ts                |  25 +-
 .../src/schema/core/helpers/resolver.ts       |   7 +-
 .../src/schema/models/file/typeDef.ts         |   8 +
 .../src/scripts/executeAdminScript.ts         |   8 +
 .../components/common/versionCheckText.vue    |  12 +-
 .../components/dialog/editRecordDialog.vue    |  10 +-
 .../components/dialog/selectOptionDialog.vue  |   2 -
 frontend/components/input/genericInput.vue    |   3 +-
 .../interface/crud/crudRecordInterface.vue    |  20 +-
 .../components/interface/crud/hero/hero.vue   |   3 +-
 .../components/menu/previewRecordMenu.vue     |  38 +-
 frontend/components/navigation/footer.vue     |   2 +-
 frontend/components/page/crudRecordPage.vue   |   7 +-
 frontend/components/page/viewRecordPage.vue   | 565 +-----------------
 .../components/table/nameAvatarColumn.vue     |   5 +-
 frontend/mixins/crud.js                       |  13 +-
 frontend/mixins/hero.js                       |   6 +
 frontend/mixins/viewRecordInterface.js        |   1 -
 frontend/mixins/viewRecordPage.js             | 555 +++++++++++++++++
 frontend/pages/my/view/_type.vue              |  13 +-
 frontend/services/base.ts                     |   2 +
 frontend/services/recordInfo.ts               |   1 +
 frontend/types/index.ts                       |  29 +-
 30 files changed, 731 insertions(+), 652 deletions(-)
 create mode 100644 backend/functions/src/scripts/executeAdminScript.ts
 create mode 100644 frontend/mixins/viewRecordPage.js

diff --git a/.github/workflows/backend-deploy.yml b/.github/workflows/backend-deploy.yml
index 1ab1760..52842da 100644
--- a/.github/workflows/backend-deploy.yml
+++ b/.github/workflows/backend-deploy.yml
@@ -19,6 +19,13 @@ jobs:
       - name: Install Dependencies
         working-directory: ./backend/functions
         run: npm install
+      - name: Set Commit SHA
+        uses: w9jds/firebase-action@master
+        with:
+          args: functions:config:set base.version="${{ github.sha }}"
+        env:
+          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
+          PROJECT_PATH: ./backend/functions
       - name: Deploy to Firebase
         uses: w9jds/firebase-action@master
         with:
diff --git a/backend/cors.json b/backend/cors.json
index 8ac42e4..81c5260 100644
--- a/backend/cors.json
+++ b/backend/cors.json
@@ -1,6 +1,6 @@
 [
   {
-    "origin": ["https://boilerplate.giraffeql.com"],
+    "origin": ["https://boilerplate.giraffeql.com", "http://localhost:3000"],
     "responseHeader": ["Content-Type"],
     "method": ["GET"],
     "maxAgeSeconds": 3600
diff --git a/backend/deploy.md.example b/backend/deploy.md.example
index 0c19f5d..375b637 100644
--- a/backend/deploy.md.example
+++ b/backend/deploy.md.example
@@ -16,7 +16,7 @@ firebase functions:config:set base.origins="https://example.com" base.timeout_se
 
 # set serveImage config
 
-firebase functions:config:set serve_image.bucket="x.appspot.com" serve_image.source_path="source" serve_image.cache_path="cache" serve_image.temp_path="temp"
+firebase functions:config:set serve_image.bucket="x.appspot.com" serve_image.source_path="source" serve_image.cache_path="cache" serve_image.temp_path="temp" serve_image.cdn_url="https://cdn.giraffeql.com"
 
 # set stripe config
 
diff --git a/backend/env.json.example b/backend/env.json.example
index e96debe..5a855c1 100644
--- a/backend/env.json.example
+++ b/backend/env.json.example
@@ -21,7 +21,8 @@
     "bucket": "giraffeql-boilerplate.appspot.com",
     "source_path": "source",
     "cache_path": "cache",
-    "temp_path": "temp"
+    "temp_path": "temp",
+    "cdn_url": "https://cdn.ozycon.com"
   },
   "stripe": {
     "secret_key": "",
@@ -29,6 +30,7 @@
   },
   "base": {
     "origins": "https://boilerplate.giraffeql.com",
-    "timeout_seconds": "60"
+    "timeout_seconds": "60",
+    "version": "DEV"
   }
 }
diff --git a/backend/functions/package-lock.json b/backend/functions/package-lock.json
index 5fbe60d..d72641a 100644
--- a/backend/functions/package-lock.json
+++ b/backend/functions/package-lock.json
@@ -9,7 +9,7 @@
         "axios": "^0.21.4",
         "express": "^4.17.1",
         "firebase-admin": "^11.10.1",
-        "firebase-functions": "^4.4.1",
+        "firebase-functions": "^4.5.0",
         "giraffeql": "^2.0.13",
         "image-resizing": "^0.1.3",
         "knex": "^0.21.21",
@@ -2850,9 +2850,9 @@
       }
     },
     "node_modules/firebase-functions": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-4.4.1.tgz",
-      "integrity": "sha512-3no53Lg12ToNlPSgLZtAFLQAz6si7ilHvzO8NC3/2EybyUwegpj5YhHwNiCw839lmAWp3znjATJDTvADFiZMrg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-4.5.0.tgz",
+      "integrity": "sha512-y6HsasHtGLfXCp3Pfrz+JA19lO9hSzYiNxFDIDMffrfcsG7UbXzv0zfi2ASadMVRoDCaox5ppZBa1QJxZbctPQ==",
       "dependencies": {
         "@types/cors": "^2.8.5",
         "@types/express": "4.17.3",
@@ -8924,9 +8924,9 @@
       }
     },
     "firebase-functions": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-4.4.1.tgz",
-      "integrity": "sha512-3no53Lg12ToNlPSgLZtAFLQAz6si7ilHvzO8NC3/2EybyUwegpj5YhHwNiCw839lmAWp3znjATJDTvADFiZMrg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-4.5.0.tgz",
+      "integrity": "sha512-y6HsasHtGLfXCp3Pfrz+JA19lO9hSzYiNxFDIDMffrfcsG7UbXzv0zfi2ASadMVRoDCaox5ppZBa1QJxZbctPQ==",
       "requires": {
         "@types/cors": "^2.8.5",
         "@types/express": "4.17.3",
diff --git a/backend/functions/package.json b/backend/functions/package.json
index 3ae5906..a2dfd13 100644
--- a/backend/functions/package.json
+++ b/backend/functions/package.json
@@ -9,6 +9,7 @@
     "generate:migration": "set DEV=1 && ts-node src/scripts/generateMigration.ts",
     "generate:model": "set DEV=1 && ts-node src/scripts/generateModel.ts",
     "grantDBPermissions": "set DEV=1 && ts-node src/scripts/grantSchemaPermissions.ts",
+    "executeAdminScript": "set DEV=1 && ts-node src/scripts/executeAdminScript.ts",
     "grantAdmin": "set DEV=1 && ts-node src/scripts/grantAdmin.ts",
     "shell": "npm run build && firebase functions:shell",
     "start": "npm run shell",
@@ -23,7 +24,7 @@
     "axios": "^0.21.4",
     "express": "^4.17.1",
     "firebase-admin": "^11.10.1",
-    "firebase-functions": "^4.4.1",
+    "firebase-functions": "^4.5.0",
     "giraffeql": "^2.0.13",
     "image-resizing": "^0.1.3",
     "knex": "^0.21.21",
diff --git a/backend/functions/src/config/index.ts b/backend/functions/src/config/index.ts
index 200f212..af33f6c 100644
--- a/backend/functions/src/config/index.ts
+++ b/backend/functions/src/config/index.ts
@@ -2,6 +2,8 @@ import * as functions from "firebase-functions";
 
 export const isDev = !!(process.env.FUNCTIONS_EMULATOR ?? process.env.DEV);
 
+export const projectPath = process.env.PROJECT_PATH;
+
 export const env = isDev ? require("../../../env.json") : functions.config();
 
 // defaults to 60 seconds
@@ -9,6 +11,18 @@ export const functionTimeoutSeconds = env.base?.timeout_seconds
   ? Number(env.base.timeout_seconds)
   : 60;
 
+export const allowedOrigins = ["http://localhost:3000"];
+
+// add any additional origins
+if (env.base?.origins) {
+  allowedOrigins.push(
+    ...env.base.origins
+      .split(",")
+      .map((origin) => origin.trim())
+      .filter((origin) => origin)
+  );
+}
+
 export const giraffeqlOptions = {
   debug: !!isDev,
   lookupValue: true,
diff --git a/backend/functions/src/index.ts b/backend/functions/src/index.ts
index a3aa7e0..af9667a 100644
--- a/backend/functions/src/index.ts
+++ b/backend/functions/src/index.ts
@@ -5,7 +5,12 @@ admin.initializeApp();
 
 import { initializeGiraffeql, sendErrorResponse } from "giraffeql";
 import "./schema";
-import { env, functionTimeoutSeconds, giraffeqlOptions } from "./config";
+import {
+  allowedOrigins,
+  env,
+  functionTimeoutSeconds,
+  giraffeqlOptions,
+} from "./config";
 
 import { validateToken, validateApiKey } from "./helpers/auth";
 import { CustomSchemaGenerator } from "./helpers/schema";
@@ -14,17 +19,6 @@ const app = express();
 
 // app.use(express.json()); -- apparently not needed on cloud functions
 
-const allowedOrigins = ["http://localhost:3000"];
-// add any additional origins
-if (env.base?.origins) {
-  allowedOrigins.push(
-    ...env.base.origins
-      .split(",")
-      .map((origin) => origin.trim())
-      .filter((origin) => origin)
-  );
-}
-
 // extract the user ID from all requests.
 app.use(async function (req, res, next) {
   try {
@@ -50,11 +44,18 @@ app.use(async function (req, res, next) {
       "Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control"
     );
 
+    res.header("Access-Control-Expose-Headers", "X-Api-Version");
+
     res.header(
       "Access-Control-Allow-Methods",
       "PUT, POST, GET, DELETE, OPTIONS"
     );
 
+    // if env.base.version is set, send that as a header
+    if (env.base?.version) {
+      res.header("x-api-version", env.base.version);
+    }
+
     const apiKey = req.get("x-api-key");
 
     if (apiKey) {
diff --git a/backend/functions/src/schema/core/helpers/resolver.ts b/backend/functions/src/schema/core/helpers/resolver.ts
index 77681f5..7631cfa 100644
--- a/backend/functions/src/schema/core/helpers/resolver.ts
+++ b/backend/functions/src/schema/core/helpers/resolver.ts
@@ -430,7 +430,8 @@ function retrieveAllRequiredFields(
       throw new Error(`Misconfigured giraffeql`);
     }
 
-    if (resolverNode.typeDef.requiredSqlFields) {
+    // only add the requiredSqlFields if it's not a dataloaded field
+    if (resolverNode.typeDef.requiredSqlFields && !isDataloader) {
       resolverNode.typeDef.requiredSqlFields
         .map((requiredField) =>
           fieldPath.length
@@ -443,8 +444,8 @@ function retrieveAllRequiredFields(
     }
     resolverNode.typeDef.sqlOptions?.joinType;
 
-    // if nested, traverse the tree
-    if (resolverNode.nested) {
+    // if nested and not dataloader, traverse the tree
+    if (resolverNode.nested && !isDataloader) {
       retrieveAllRequiredFields(
         resolverNode.nested,
         !!resolverNode.typeDef.sqlOptions,
diff --git a/backend/functions/src/schema/models/file/typeDef.ts b/backend/functions/src/schema/models/file/typeDef.ts
index fdf9bb0..9b95ae5 100644
--- a/backend/functions/src/schema/models/file/typeDef.ts
+++ b/backend/functions/src/schema/models/file/typeDef.ts
@@ -34,6 +34,14 @@ export default new GiraffeqlObjectType(
         allowNull: false,
         typeDefOptions: { addable: false, updateable: false },
       }),
+      servingUrl: {
+        type: Scalars.url,
+        allowNull: false,
+        requiredSqlFields: ["location"],
+        resolver: ({ parentValue }) => {
+          return `${env.serve_image.cdn_url}/${parentValue.location}`;
+        },
+      },
       downloadUrl: {
         type: Scalars.url,
         allowNull: false,
diff --git a/backend/functions/src/scripts/executeAdminScript.ts b/backend/functions/src/scripts/executeAdminScript.ts
new file mode 100644
index 0000000..10b10d4
--- /dev/null
+++ b/backend/functions/src/scripts/executeAdminScript.ts
@@ -0,0 +1,8 @@
+import "../schema";
+// import { Admin } from "../schema/services";
+
+console.log("start");
+
+(async () => {
+  console.log("done");
+})();
diff --git a/frontend/components/common/versionCheckText.vue b/frontend/components/common/versionCheckText.vue
index 703b3c4..23cb402 100644
--- a/frontend/components/common/versionCheckText.vue
+++ b/frontend/components/common/versionCheckText.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
-    <a @click="copyIdTokenToClipboard()"
-      ><span class="hidden-xs-only">Build </span>{{ buildVersion }}</a
-    >
+  <span :title="currentVersion">
+    <a @click="copyIdTokenToClipboard()">
+      <slot name="text">
+        <span class="hidden-xs-only">Build </span>{{ buildVersion }}
+      </slot>
+    </a>
     <v-icon
       v-if="hasNewerVersion && showNewerVersionIcon"
       title="A newer version of this site is available. Click to reload."
@@ -34,7 +36,7 @@
         </v-btn>
       </template>
     </v-snackbar>
-  </div>
+  </span>
 </template>
 
 <script>
diff --git a/frontend/components/dialog/editRecordDialog.vue b/frontend/components/dialog/editRecordDialog.vue
index c2e6a1f..c86c27f 100644
--- a/frontend/components/dialog/editRecordDialog.vue
+++ b/frontend/components/dialog/editRecordDialog.vue
@@ -22,8 +22,8 @@
     >
       <template v-slot:toolbar>
         <v-toolbar flat color="accent">
-          <v-icon left>{{ icon }}</v-icon>
-          <v-toolbar-title>
+          <v-icon left v-if="!hideTitleMode">{{ icon }}</v-icon>
+          <v-toolbar-title v-if="!hideTitleMode">
             <span class="headline">{{ title }}</span>
           </v-toolbar-title>
           <v-spacer></v-spacer>
@@ -190,6 +190,10 @@ export default {
       return !!this.recordInfo.dialogOptions?.hideRefresh
     },
 
+    hideTitleMode() {
+      return !!this.recordInfo.dialogOptions?.hideTitle
+    },
+
     modeObject() {
       return this.specialMode ?? modesMap[this.computedMode]
     },
@@ -202,7 +206,7 @@ export default {
     },
 
     title() {
-      return this.modeObject.prefix + ' ' + this.recordInfo.name
+      return `${this.modeObject.prefix} ${this.recordInfo.name}`
     },
     icon() {
       return this.modeObject.icon
diff --git a/frontend/components/dialog/selectOptionDialog.vue b/frontend/components/dialog/selectOptionDialog.vue
index 130e5f3..48396ed 100644
--- a/frontend/components/dialog/selectOptionDialog.vue
+++ b/frontend/components/dialog/selectOptionDialog.vue
@@ -34,13 +34,11 @@
 </template>
 
 <script>
-import CircularLoader from '~/components/common/circularLoader.vue'
 import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
 import { getIcon } from '~/services/base'
 
 export default {
   components: {
-    CircularLoader,
     PreviewRecordChip,
   },
 
diff --git a/frontend/components/input/genericInput.vue b/frontend/components/input/genericInput.vue
index 0bf5e3f..88d68bb 100644
--- a/frontend/components/input/genericInput.vue
+++ b/frontend/components/input/genericInput.vue
@@ -252,8 +252,7 @@
       v-else-if="item.inputType === 'textarea'"
       v-model="item.value"
       filled
-      auto-grow
-      rows="1"
+      rows="3"
       dense
       class="py-0"
       :label="item.label + (item.optional ? ' (optional)' : '')"
diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
index 23ee9c3..e7753e8 100644
--- a/frontend/components/interface/crud/crudRecordInterface.vue
+++ b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -51,7 +51,11 @@
           </v-btn>
         </v-toolbar>
       </v-container>
-      <v-container v-if="breadcrumbItems.length" fluid class="px-0">
+      <v-container
+        v-if="breadcrumbMode && !hideBreadcrumbs && breadcrumbItems.length"
+        fluid
+        class="px-0"
+      >
         <v-row>
           <v-breadcrumbs :items="breadcrumbItems">
             <template v-slot:item="{ item }">
@@ -68,7 +72,12 @@
         </v-row>
       </v-container>
 
-      <v-toolbar flat color="accent" dense>
+      <v-toolbar
+        v-if="!recordInfo.paginationOptions.hideToolbar"
+        flat
+        color="accent"
+        dense
+      >
         <v-btn
           v-if="breadcrumbItems.length - 1 > 0"
           icon
@@ -90,8 +99,10 @@
           inset
           vertical
         ></v-divider>
-        <v-icon left>{{ icon || recordInfo.icon || 'mdi-domain' }}</v-icon>
-        <v-toolbar-title>{{
+        <v-icon v-if="!recordInfo.paginationOptions.hideTitle" left>{{
+          icon || recordInfo.icon || 'mdi-domain'
+        }}</v-icon>
+        <v-toolbar-title v-if="!recordInfo.paginationOptions.hideTitle">{{
           title || recordInfo.title || recordInfo.pluralName
         }}</v-toolbar-title>
         <v-divider
@@ -284,6 +295,7 @@
           </span>
         </v-card>
         <v-divider />
+        <slot name="header-text"></slot>
         <v-data-iterator
           v-if="isGrid"
           :items="records"
diff --git a/frontend/components/interface/crud/hero/hero.vue b/frontend/components/interface/crud/hero/hero.vue
index 05219cf..c63c290 100644
--- a/frontend/components/interface/crud/hero/hero.vue
+++ b/frontend/components/interface/crud/hero/hero.vue
@@ -4,6 +4,7 @@
     class="white--text align-end"
     gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
     height="200px"
+    :contain="containMode"
   >
     <template v-slot:placeholder>
       <v-row class="fill-height ma-0" align="center" justify="center">
@@ -11,7 +12,7 @@
       </v-row>
     </template>
     <v-card-title class="subheading font-weight-bold pb-2"
-      ><span class="break-word">{{ previewName }} </span>
+      ><span class="break-word">{{ previewName }}</span>
     </v-card-title>
   </v-img>
 </template>
diff --git a/frontend/components/menu/previewRecordMenu.vue b/frontend/components/menu/previewRecordMenu.vue
index 7371851..17134f3 100644
--- a/frontend/components/menu/previewRecordMenu.vue
+++ b/frontend/components/menu/previewRecordMenu.vue
@@ -14,40 +14,11 @@
     <v-card>
       <div v-if="hasHeroOptions">
         <component
-          v-if="recordInfo.previewOptions.heroOptions.component"
-          :is="recordInfo.previewOptions.heroOptions.component"
+          :is="heroComponent"
           :item="item"
           :record-info="recordInfo"
+          mode="view"
         ></component>
-        <v-img
-          v-else
-          :src="
-            recordInfo.previewOptions.heroOptions.getPreviewImage
-              ? recordInfo.previewOptions.heroOptions.getPreviewImage(item)
-              : item.avatar
-          "
-          class="white--text align-end"
-          gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-          height="100px"
-        >
-          <template v-slot:placeholder>
-            <v-row class="fill-height ma-0" align="center" justify="center">
-              <v-icon size="100" color="grey darken-3">{{
-                recordInfo.icon
-              }}</v-icon>
-            </v-row>
-          </template>
-
-          <v-card-title class="subheading font-weight-bold">
-            <span class="break-word">
-              {{
-                recordInfo.previewOptions.heroOptions.getPreviewName
-                  ? recordInfo.previewOptions.heroOptions.getPreviewName(item)
-                  : item.name
-              }}</span
-            >
-          </v-card-title>
-        </v-img>
       </div>
       <v-list v-if="hasLineItems">
         <v-list-item>
@@ -119,6 +90,7 @@ import { executeGiraffeql } from '~/services/giraffeql'
 import FollowButton from '~/components/button/followButton.vue'
 import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
 import * as simpleModels from '~/models/simple'
+import Hero from '~/components/interface/crud/hero/hero.vue'
 
 export default {
   components: {
@@ -181,6 +153,10 @@ export default {
     isViewButtonHidden() {
       return !!this.recordInfo.previewOptions?.hideViewButton
     },
+
+    heroComponent() {
+      return this.recordInfo.previewOptions?.heroOptions?.component ?? Hero
+    },
   },
 
   watch: {
diff --git a/frontend/components/navigation/footer.vue b/frontend/components/navigation/footer.vue
index c4cd85b..b6ac412 100644
--- a/frontend/components/navigation/footer.vue
+++ b/frontend/components/navigation/footer.vue
@@ -1,7 +1,7 @@
 <template>
   <v-footer v-bind="$attrs">
     <VersionCheckText />
-    <span>&nbsp;&copy; {{ new Date().getFullYear() }}</span>
+    <span class="ml-1">&copy; {{ new Date().getFullYear() }}</span>
     <v-spacer></v-spacer>
     <nuxt-link to="/legal/privacy" class="mr-2 hidden-xs-only">
       Privacy & Terms
diff --git a/frontend/components/page/crudRecordPage.vue b/frontend/components/page/crudRecordPage.vue
index d839a2b..c1821a8 100644
--- a/frontend/components/page/crudRecordPage.vue
+++ b/frontend/components/page/crudRecordPage.vue
@@ -21,8 +21,9 @@
             :poll-interval="pollInterval"
             :parent-item="currentParentItem"
             :breadcrumb-mode="
-              expandTypeObject ? !!expandTypeObject.breadcrumbMode : false
+              expandTypeObject ? !!expandTypeObject.breadcrumbOptions : false
             "
+            :hide-breadcrumbs="hideBreadcrumbs"
             :breadcrumb-items="breadcrumbItems"
             :is-child-component="isChildComponent"
             dense
@@ -134,6 +135,10 @@ export default {
         ? JSON.parse(atob(decodeURIComponent(this.$route.query.pageOptions)))
         : null
     },
+
+    hideBreadcrumbs() {
+      return !!this.expandTypeObject?.breadcrumbOptions?.hideBreadcrumbs
+    },
   },
 
   created() {
diff --git a/frontend/components/page/viewRecordPage.vue b/frontend/components/page/viewRecordPage.vue
index 85dcd1a..00b36fe 100644
--- a/frontend/components/page/viewRecordPage.vue
+++ b/frontend/components/page/viewRecordPage.vue
@@ -138,7 +138,8 @@
               :hidden-filters="hiddenSubFilters"
               :hide-presets="!expandTypeObject.showPresets"
               :parent-item="parentItem"
-              :breadcrumb-mode="!!expandTypeObject.breadcrumbMode"
+              :breadcrumb-mode="!!expandTypeObject.breadcrumbOptions"
+              :hide-breadcrumbs="hideBreadcrumbs"
               :breadcrumb-items="breadcrumbItems"
               :is-child-component="isChildComponent"
               dense
@@ -192,567 +193,9 @@
 </template>
 
 <script>
-import ViewRecordInterface from '~/components/interface/crud/viewRecordInterface.vue'
-import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
-import RecordActionMenu from '~/components/menu/recordActionMenu.vue'
-import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
-import CrudPostInterface from '~/components/interface/crud/crudPostInterface.vue'
-import { executeGiraffeql } from '~/services/giraffeql'
-import {
-  capitalizeString,
-  handleError,
-  serializeNestedProperty,
-  processQuery,
-} from '~/services/base'
-import { generatePreviewRecordInfo } from '~/services/recordInfo'
-import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface.vue'
-import { mapGetters } from 'vuex'
+import viewRecordPageMixin from '~/mixins/viewRecordPage'
 
 export default {
-  components: {
-    ViewRecordInterface,
-    EditRecordDialog,
-    RecordActionMenu,
-    PreviewRecordChip,
-  },
-
-  props: {
-    recordInfo: {
-      type: Object,
-      required: true,
-    },
-    lookupParams: {
-      type: Object,
-      default: () => null,
-    },
-    head: {
-      type: Object,
-      default: () => null,
-    },
-  },
-
-  data() {
-    return {
-      selectedItem: null,
-      currentParentItem: null,
-      expandTypeObject: null,
-      subPageOptions: null,
-
-      generation: 0,
-
-      recordResetInstruction: null,
-
-      dialogs: {
-        editRecord: false,
-        editMode: 'view',
-      },
-
-      loading: {
-        loadRecord: false,
-      },
-
-      recordInfoChanged: false,
-
-      breadcrumbItems: [],
-
-      previewExpandTypes: [],
-    }
-  },
-
-  computed: {
-    ...mapGetters({
-      newUnreadNotifications: 'user/newUnreadNotifications',
-    }),
-
-    isChildComponent() {
-      return this.breadcrumbItems.length > 1
-    },
-
-    postInterface() {
-      return this.recordInfo.postOptions?.component ?? CrudPostInterface
-    },
-
-    postLockedFilters() {
-      return [
-        {
-          field: this.recordInfo.typename,
-          operator: 'eq',
-          value: this.selectedItem.id,
-        },
-      ]
-    },
-
-    recordMode() {
-      return this.$route.query.m === '2'
-        ? 'hidden'
-        : this.$route.query.m === '1'
-        ? 'minimized'
-        : 'show'
-    },
-
-    fullPageMode() {
-      return !!this.recordInfo.pageOptions?.fullPageMode
-    },
-
-    parentItem() {
-      return this.currentParentItem || this.selectedItem
-    },
-
-    isExpanded() {
-      return !!this.expandTypeObject
-    },
-
-    hasComments() {
-      return !!this.recordInfo.postOptions
-    },
-
-    isExpandOrCommentsOpened() {
-      return !!this.expandTypeObject || (this.showComments && this.hasComments)
-    },
-
-    showComments() {
-      return this.$route.query.c !== undefined && this.hasComments
-    },
-
-    currentInterface() {
-      return this.recordInfo.viewOptions.component || ViewRecordInterface
-    },
-    hiddenSubFilters() {
-      if (!this.isExpanded) return []
-
-      return this.getExpandTypeHiddenSubFilters(this.expandTypeObject)
-    },
-    lockedSubFilters() {
-      if (!this.isExpanded) return []
-
-      return this.getExpandTypeSubFilters(this.expandTypeObject)
-    },
-    capitalizedTypename() {
-      return capitalizeString(this.recordInfo.typename)
-    },
-
-    paginationComponent() {
-      return (
-        this.expandTypeObject.component ||
-        this.expandTypeObject.recordInfo.paginationOptions.component ||
-        CrudRecordInterface
-      )
-    },
-
-    // type: CrudPageOptions | null
-    pageOptions() {
-      return this.$route.query.pageOptions
-        ? JSON.parse(atob(decodeURIComponent(this.$route.query.pageOptions)))
-        : null
-    },
-  },
-
-  watch: {
-    '$route.query.e'(val) {
-      this.setExpandTypeObject(val)
-    },
-
-    recordInfo() {
-      this.recordInfoChanged = true
-      this.reset(true)
-    },
-
-    '$route.query.id'() {
-      // if this was triggered in addition to recordInfo change, do nothing and revert recordInfoChange on next tick
-      if (this.recordInfoChanged) {
-        this.$nextTick(() => {
-          this.recordInfoChanged = false
-        })
-        return
-      }
-      this.reset(true)
-    },
-
-    '$route.query.pageOptions'(val) {
-      // if no pageOptions, automatically redirect if there is a defaultPageOptions
-      if (!val && this.recordInfo.paginationOptions.defaultPageOptions) {
-        this.navigateToDefaultRoute()
-      }
-    },
-  },
-
-  created() {
-    this.reset(true)
-  },
-
-  methods: {
-    getExpandTypeComponent(expandTypeObject) {
-      return (
-        expandTypeObject.component ||
-        expandTypeObject.recordInfo.paginationOptions.component ||
-        CrudRecordInterface
-      )
-    },
-
-    getExpandTypeSubFilters(expandTypeObject) {
-      // is there a lockedFilters generator on the expandTypeObject? if so, use that
-      if (expandTypeObject.lockedFilters) {
-        return expandTypeObject.lockedFilters(this, this.parentItem)
-      }
-
-      return [
-        {
-          field: this.recordInfo.typename.toLowerCase() + '.id',
-          operator: 'eq',
-          value: this.parentItem.id,
-        },
-      ]
-    },
-
-    getExpandTypeHiddenSubFilters(expandTypeObject) {
-      // is there an excludeFilters array on the expandTypeObject? if so, use that
-      return [this.recordInfo.typename.toLowerCase() + '.id'].concat(
-        expandTypeObject.excludeFilters ?? []
-      )
-    },
-
-    handleSubmit() {
-      this.loadRecord()
-      this.$emit('handle-submit')
-    },
-
-    async handleReloadParentItem() {
-      if (!this.selectedItem) return
-
-      // force reset of the table component, hiding the loader
-      this.recordResetInstruction = { showLoader: false }
-    },
-
-    handleExpandTypeUpdated(item, expandTypeObject) {
-      // add to breadcrumbs
-
-      this.breadcrumbItems.push({
-        expandTypeObject,
-        item,
-        isRoot: false,
-      })
-
-      this.currentParentItem = item
-      this.expandTypeObject = expandTypeObject
-
-      // set the pageOptions override
-      this.subPageOptions = {
-        search: null,
-        filters: expandTypeObject.initialFilters ?? [],
-        sort: expandTypeObject.initialSortOptions ?? null,
-      }
-    },
-
-    handleBreadcrumbItemClick(breadcrumbItem) {
-      const index = this.breadcrumbItems.indexOf(breadcrumbItem)
-
-      if (index !== -1) {
-        // apply the breadcrumb item and truncate the breadcrumb array at that index
-        this.breadcrumbItems.splice(index + 1)
-
-        const { item, expandTypeObject } = breadcrumbItem
-
-        this.currentParentItem = item
-        this.expandTypeObject = expandTypeObject
-
-        // set the pageOptions override
-        this.subPageOptions = {
-          search: null,
-          filters: expandTypeObject.initialFilters ?? [],
-          sort: expandTypeObject.initialSortOptions ?? null,
-        }
-      }
-    },
-
-    getChipName(item) {
-      return this.recordInfo?.chipOptions?.getName
-        ? this.recordInfo?.chipOptions?.getName(item)
-        : item.name
-    },
-
-    getChipImage(item) {
-      return this.recordInfo?.chipOptions?.getImage
-        ? this.recordInfo.chipOptions.getImage(item)
-        : item.avatar
-    },
-
-    handleExpandClick(expandTypeObject) {
-      this.toggleExpand(expandTypeObject.key)
-    },
-
-    toggleComments(state = true) {
-      const query = {
-        ...this.$route.query,
-      }
-
-      if (state) {
-        query.c = null
-      } else {
-        delete query.c
-      }
-
-      this.$router
-        .replace({
-          path: this.$route.path,
-          query,
-        })
-        .catch((e) => e)
-    },
-
-    handleCustomActionClick(actionObject, item) {
-      actionObject.handleClick(this, item)
-    },
-
-    toggleRecordMinimized(state) {
-      const query = {
-        ...this.$route.query,
-      }
-
-      if (state) {
-        query.m = '1'
-
-        // if minimizing, also hide any comments
-        delete query.c
-      } else {
-        delete query.m
-      }
-
-      // push to route
-      this.$router
-        .replace({
-          path: this.$route.path,
-          query,
-        })
-        .catch((e) => e)
-    },
-
-    openViewRecordDialog() {
-      this.$root.$emit('openEditRecordDialog', {
-        recordInfo: this.recordInfo,
-        selectedItem: {
-          id: this.selectedItem.id,
-        },
-        mode: 'view',
-      })
-    },
-
-    toggleExpand(expandKey) {
-      // if there are breadcrumb items, go back
-      if (this.breadcrumbItems.length > 1 && !expandKey) {
-        this.breadcrumbItems.pop()
-
-        const latestItem = this.breadcrumbItems[this.breadcrumbItems.length - 1]
-
-        this.currentParentItem = latestItem.item
-        this.expandTypeObject = latestItem.expandTypeObject
-
-        this.handleSubPageOptionsUpdated({
-          search: null,
-          filters: this.expandTypeObject.initialFilters ?? [],
-          sort: this.expandTypeObject.initialSortOptions ?? null,
-        })
-
-        return
-      }
-
-      const query = {
-        ...this.$route.query,
-      }
-
-      if (expandKey) {
-        query.e = expandKey
-      } else {
-        delete query.e
-        delete query.pageOptions
-      }
-
-      // push to route
-      this.$router
-        .replace({
-          path: this.$route.path,
-          query,
-        })
-        .catch((e) => e)
-    },
-
-    setExpandTypeObject(expandKey, init = false) {
-      // if expandKey is undefined, unset it
-      if (expandKey === undefined) {
-        this.expandTypeObject = null
-        // also need to unset the pageOptions
-
-        return
-      }
-
-      if (Array.isArray(this.recordInfo.expandTypes)) {
-        // find the expandTypeObject with the matching key
-        // if expandKey === null, set to first expandType
-        const expandTypeObject =
-          expandKey === null
-            ? this.recordInfo.expandTypes[0]
-            : this.recordInfo.expandTypes.find(
-                (expandTypeObject) => expandTypeObject.key === expandKey
-              )
-
-        // if not found, return
-        if (!expandTypeObject) return
-
-        this.expandTypeObject = expandTypeObject
-
-        // if breadcrumb mode and init, also set the initial item
-        if (init && this.expandTypeObject.breadcrumbMode) {
-          this.breadcrumbItems.push({
-            expandTypeObject: this.expandTypeObject,
-            item: this.selectedItem,
-            isRoot: true,
-          })
-        }
-
-        // when item expanded, initialize the filters if not init, or if init and pageOptions not defined
-        if (!init || (init && !this.$route.query.pageOptions)) {
-          this.handleSubPageOptionsUpdated({
-            search: null,
-            filters: expandTypeObject.initialFilters ?? [],
-            sort: expandTypeObject.initialSortOptions ?? null,
-          })
-        }
-      }
-    },
-
-    handleSubPageOptionsUpdated(pageOptions) {
-      // if it's a child component, set the subPageOptions
-      if (this.isChildComponent) {
-        this.subPageOptions = pageOptions
-        return
-      }
-
-      const query = {
-        ...this.$route.query,
-      }
-
-      // check if any valid options
-      if (
-        pageOptions &&
-        (pageOptions.search || pageOptions.filters.length || pageOptions.sort)
-      ) {
-        query.pageOptions = encodeURIComponent(
-          btoa(JSON.stringify(pageOptions))
-        )
-      } else {
-        delete query.pageOptions
-      }
-
-      this.$router
-        .replace({
-          path: this.$route.path,
-          query,
-        })
-        .catch((e) => e)
-      // catches if the query is exactly the same
-    },
-
-    openDialog(dialogName) {
-      if (dialogName in this.dialogs) {
-        this.dialogs[dialogName] = true
-      }
-    },
-
-    openEditDialog(mode) {
-      this.dialogs.editMode = mode
-      this.openDialog('editRecord')
-    },
-
-    async loadRecord() {
-      this.loading.loadRecord = true
-      try {
-        const fields = (this.recordInfo.requiredFields ?? []).concat(
-          this.recordInfo.chipOptions?.fields ?? []
-        )
-
-        // if the record type has name/avatar, also fetch those
-        if (this.recordInfo.hasName) fields.push('name')
-        if (this.recordInfo.hasAvatar) fields.push('avatarUrl')
-
-        const { serializeMap, query } = processQuery(
-          this,
-          this.recordInfo,
-          fields
-        )
-
-        const data = await executeGiraffeql(this, {
-          [`get${this.capitalizedTypename}`]: {
-            ...query,
-            __args: {
-              ...this.lookupParams,
-              ...(this.$route.query.id && { id: this.$route.query.id }),
-            },
-          },
-        })
-
-        // remove any undefined serializeMap elements
-        serializeMap.forEach((val, key) => {
-          if (val === undefined) serializeMap.delete(key)
-        })
-
-        // apply serialization to results
-        serializeMap.forEach((serialzeFn, field) => {
-          serializeNestedProperty(data, field, serialzeFn)
-        })
-
-        this.selectedItem = data
-      } catch (err) {
-        this.selectedItem = null
-        handleError(this, err)
-      }
-      this.loading.loadRecord = false
-    },
-
-    reset(hardReset = false) {
-      if (hardReset) {
-        // must independently verify existence of item
-        this.loadRecord().then(() => {
-          // if expand query param set, set the initial expandTypeObject
-          if (this.$route.query.e !== undefined) {
-            this.setExpandTypeObject(this.$route.query.e, true)
-          }
-
-          const previewExpandTypes =
-            this.recordInfo.pageOptions?.previewExpandTypes
-
-          if (previewExpandTypes) {
-            this.previewExpandTypes = previewExpandTypes
-              .map((ele) =>
-                this.recordInfo.expandTypes.find(
-                  (expandTypeObject) => expandTypeObject.key === ele
-                )
-              )
-              .map((expandTypeObject) => {
-                // replace each recordInfo with the previewRecordInfo
-                return {
-                  expandTypeObject: {
-                    ...expandTypeObject,
-                    recordInfo: generatePreviewRecordInfo({
-                      recordInfo: expandTypeObject.recordInfo,
-                      title: `Latest ${expandTypeObject.recordInfo.pluralName}`,
-                    }),
-                  },
-                  pageOptions: undefined,
-                }
-              })
-          }
-        })
-      }
-
-      this.generation++
-    },
-  },
-
-  head() {
-    return (
-      this.head ?? {
-        title: `View ${this.recordInfo.name}`,
-      }
-    )
-  },
+  mixins: [viewRecordPageMixin],
 }
 </script>
diff --git a/frontend/components/table/nameAvatarColumn.vue b/frontend/components/table/nameAvatarColumn.vue
index 74ba0e7..a5eb570 100644
--- a/frontend/components/table/nameAvatarColumn.vue
+++ b/frontend/components/table/nameAvatarColumn.vue
@@ -1,7 +1,10 @@
 <template>
   <div v-if="currentValue" :title="currentValue.name">
     <v-avatar size="24">
-      <v-img v-if="currentValue.avatar" :src="currentValue.avatar"></v-img>
+      <v-img
+        v-if="currentValue.avatarUrl"
+        :src="currentValue.avatarUrl"
+      ></v-img>
       <v-icon v-else>{{ fallbackIcon }}</v-icon>
     </v-avatar>
     <span v-if="currentValue.name">{{ currentValue.name }}</span>
diff --git a/frontend/mixins/crud.js b/frontend/mixins/crud.js
index 6c0232c..d06bcf9 100644
--- a/frontend/mixins/crud.js
+++ b/frontend/mixins/crud.js
@@ -109,9 +109,14 @@ export default {
       default: false,
     },
 
+    // use the breadcrumb mode?
     breadcrumbMode: {
       type: Boolean,
-      default: false,
+    },
+
+    // hide the breadcrumbs in breadcrumb mode?
+    hideBreadcrumbs: {
+      type: Boolean,
     },
 
     breadcrumbItems: {
@@ -658,7 +663,7 @@ export default {
       }
 
       // if breadcrumb mode, open the expand in the same interface
-      if (expandTypeObject.breadcrumbMode) {
+      if (expandTypeObject.breadcrumbOptions) {
         this.expandTypeObject = expandTypeObject
         this.expandedItem = props.item
 
@@ -684,7 +689,7 @@ export default {
 
     toggleGridExpand(item, expandTypeObject) {
       // if breadcrumb mode, open the expand in the same interface
-      if (expandTypeObject.breadcrumbMode) {
+      if (expandTypeObject.breadcrumbOptions) {
         this.$emit('expand-type-updated', item, expandTypeObject)
       } else {
         this.openExpandDialog(item, expandTypeObject)
@@ -784,7 +789,7 @@ export default {
               ? this.recordInfo.paginationOptions.limitOptions
                   ?.maxInitialRecords
               : null) ??
-            this.recordInfo.paginationOptions.limitOptions?.resultsPerPage ??
+            this.recordInfo.paginationOptions.resultsPerPage ??
             this.resultsPerPage,
           after: this.endCursor ?? undefined,
         }),
diff --git a/frontend/mixins/hero.js b/frontend/mixins/hero.js
index b9b3d80..caa00d7 100644
--- a/frontend/mixins/hero.js
+++ b/frontend/mixins/hero.js
@@ -37,5 +37,11 @@ export default {
 
       return getPreviewName ? getPreviewName(this.item) : this.item.name
     },
+
+    containMode() {
+      return !!this.recordInfo[
+        this.mode === 'view' ? 'viewOptions' : 'paginationOptions'
+      ].heroOptions.containMode
+    },
   },
 }
diff --git a/frontend/mixins/viewRecordInterface.js b/frontend/mixins/viewRecordInterface.js
index 5614579..5362e7c 100644
--- a/frontend/mixins/viewRecordInterface.js
+++ b/frontend/mixins/viewRecordInterface.js
@@ -14,7 +14,6 @@ import { logAnalyticsEvent } from '~/services/analytics'
 export default {
   components: {
     CircularLoader,
-    Hero,
   },
 
   data() {
diff --git a/frontend/mixins/viewRecordPage.js b/frontend/mixins/viewRecordPage.js
new file mode 100644
index 0000000..54b2d81
--- /dev/null
+++ b/frontend/mixins/viewRecordPage.js
@@ -0,0 +1,555 @@
+import ViewRecordInterface from '~/components/interface/crud/viewRecordInterface.vue'
+import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
+import RecordActionMenu from '~/components/menu/recordActionMenu.vue'
+import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
+import CrudPostInterface from '~/components/interface/crud/crudPostInterface.vue'
+import { executeGiraffeql } from '~/services/giraffeql'
+import {
+  capitalizeString,
+  handleError,
+  serializeNestedProperty,
+  processQuery,
+} from '~/services/base'
+import { generatePreviewRecordInfo } from '~/services/recordInfo'
+import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface.vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    ViewRecordInterface,
+    EditRecordDialog,
+    RecordActionMenu,
+    PreviewRecordChip,
+  },
+
+  props: {
+    recordInfo: {
+      type: Object,
+      required: true,
+    },
+    lookupParams: {
+      type: Object,
+      default: () => null,
+    },
+    head: {
+      type: Object,
+      default: () => null,
+    },
+  },
+
+  data() {
+    return {
+      selectedItem: null,
+      currentParentItem: null,
+      expandTypeObject: null,
+      subPageOptions: null,
+
+      generation: 0,
+
+      recordResetInstruction: null,
+
+      dialogs: {
+        editRecord: false,
+        editMode: 'view',
+      },
+
+      loading: {
+        loadRecord: false,
+      },
+
+      recordInfoChanged: false,
+
+      breadcrumbItems: [],
+
+      previewExpandTypes: [],
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      newUnreadNotifications: 'user/newUnreadNotifications',
+    }),
+
+    isChildComponent() {
+      return this.breadcrumbItems.length > 1
+    },
+
+    postInterface() {
+      return this.recordInfo.postOptions?.component ?? CrudPostInterface
+    },
+
+    postLockedFilters() {
+      return [
+        {
+          field: this.recordInfo.typename,
+          operator: 'eq',
+          value: this.selectedItem.id,
+        },
+      ]
+    },
+
+    recordMode() {
+      return this.$route.query.m === '2'
+        ? 'hidden'
+        : this.$route.query.m === '1'
+        ? 'minimized'
+        : 'show'
+    },
+
+    fullPageMode() {
+      return !!this.recordInfo.pageOptions?.fullPageMode
+    },
+
+    parentItem() {
+      return this.currentParentItem || this.selectedItem
+    },
+
+    isExpanded() {
+      return !!this.expandTypeObject
+    },
+
+    hasComments() {
+      return !!this.recordInfo.postOptions
+    },
+
+    isExpandOrCommentsOpened() {
+      return !!this.expandTypeObject || (this.showComments && this.hasComments)
+    },
+
+    showComments() {
+      return this.$route.query.c !== undefined && this.hasComments
+    },
+
+    currentInterface() {
+      return this.recordInfo.viewOptions.component || ViewRecordInterface
+    },
+    hiddenSubFilters() {
+      if (!this.isExpanded) return []
+
+      return this.getExpandTypeHiddenSubFilters(this.expandTypeObject)
+    },
+    lockedSubFilters() {
+      if (!this.isExpanded) return []
+
+      return this.getExpandTypeSubFilters(this.expandTypeObject)
+    },
+    capitalizedTypename() {
+      return capitalizeString(this.recordInfo.typename)
+    },
+
+    paginationComponent() {
+      return (
+        this.expandTypeObject.component ||
+        this.expandTypeObject.recordInfo.paginationOptions.component ||
+        CrudRecordInterface
+      )
+    },
+
+    // type: CrudPageOptions | null
+    pageOptions() {
+      return this.$route.query.pageOptions
+        ? JSON.parse(atob(decodeURIComponent(this.$route.query.pageOptions)))
+        : null
+    },
+
+    hideBreadcrumbs() {
+      return !!this.expandTypeObject?.breadcrumbOptions?.hideBreadcrumbs
+    },
+  },
+
+  watch: {
+    '$route.query.e'(val) {
+      this.setExpandTypeObject(val)
+    },
+
+    recordInfo() {
+      this.recordInfoChanged = true
+      this.reset(true)
+    },
+
+    '$route.query.id'() {
+      // if this was triggered in addition to recordInfo change, do nothing and revert recordInfoChange on next tick
+      if (this.recordInfoChanged) {
+        this.$nextTick(() => {
+          this.recordInfoChanged = false
+        })
+        return
+      }
+      this.reset(true)
+    },
+
+    '$route.query.pageOptions'(val) {
+      // if no pageOptions, automatically redirect if there is a defaultPageOptions
+      if (!val && this.recordInfo.paginationOptions.defaultPageOptions) {
+        this.navigateToDefaultRoute()
+      }
+    },
+  },
+
+  created() {
+    this.reset(true)
+  },
+
+  methods: {
+    getExpandTypeComponent(expandTypeObject) {
+      return (
+        expandTypeObject.component ||
+        expandTypeObject.recordInfo.paginationOptions.component ||
+        CrudRecordInterface
+      )
+    },
+
+    getExpandTypeSubFilters(expandTypeObject) {
+      // is there a lockedFilters generator on the expandTypeObject? if so, use that
+      if (expandTypeObject.lockedFilters) {
+        return expandTypeObject.lockedFilters(this, this.parentItem)
+      }
+
+      return [
+        {
+          field: this.recordInfo.typename.toLowerCase() + '.id',
+          operator: 'eq',
+          value: this.parentItem.id,
+        },
+      ]
+    },
+
+    getExpandTypeHiddenSubFilters(expandTypeObject) {
+      // is there an excludeFilters array on the expandTypeObject? if so, use that
+      return [this.recordInfo.typename.toLowerCase() + '.id'].concat(
+        expandTypeObject.excludeFilters ?? []
+      )
+    },
+
+    handleSubmit() {
+      this.loadRecord()
+      this.$emit('handle-submit')
+    },
+
+    async handleReloadParentItem() {
+      if (!this.selectedItem) return
+
+      // force reset of the table component, hiding the loader
+      this.recordResetInstruction = { showLoader: false }
+    },
+
+    handleExpandTypeUpdated(item, expandTypeObject) {
+      // add to breadcrumbs
+
+      this.breadcrumbItems.push({
+        expandTypeObject,
+        item,
+        isRoot: false,
+      })
+
+      this.currentParentItem = item
+      this.expandTypeObject = expandTypeObject
+
+      // set the pageOptions override
+      this.subPageOptions = {
+        search: null,
+        filters: expandTypeObject.initialFilters ?? [],
+        sort: expandTypeObject.initialSortOptions ?? null,
+      }
+    },
+
+    handleBreadcrumbItemClick(breadcrumbItem) {
+      const index = this.breadcrumbItems.indexOf(breadcrumbItem)
+
+      if (index !== -1) {
+        // apply the breadcrumb item and truncate the breadcrumb array at that index
+        this.breadcrumbItems.splice(index + 1)
+
+        const { item, expandTypeObject } = breadcrumbItem
+
+        this.currentParentItem = item
+        this.expandTypeObject = expandTypeObject
+
+        // set the pageOptions override
+        this.subPageOptions = {
+          search: null,
+          filters: expandTypeObject.initialFilters ?? [],
+          sort: expandTypeObject.initialSortOptions ?? null,
+        }
+      }
+    },
+
+    handleExpandClick(expandTypeObject) {
+      this.toggleExpand(expandTypeObject.key)
+    },
+
+    toggleComments(state = true) {
+      const query = {
+        ...this.$route.query,
+      }
+
+      if (state) {
+        query.c = null
+      } else {
+        delete query.c
+      }
+
+      this.$router
+        .replace({
+          path: this.$route.path,
+          query,
+        })
+        .catch((e) => e)
+    },
+
+    handleCustomActionClick(actionObject, item) {
+      actionObject.handleClick(this, item)
+    },
+
+    toggleRecordMinimized(state) {
+      const query = {
+        ...this.$route.query,
+      }
+
+      if (state) {
+        query.m = '1'
+
+        // if minimizing, also hide any comments
+        delete query.c
+      } else {
+        delete query.m
+      }
+
+      // push to route
+      this.$router
+        .replace({
+          path: this.$route.path,
+          query,
+        })
+        .catch((e) => e)
+    },
+
+    openViewRecordDialog() {
+      this.$root.$emit('openEditRecordDialog', {
+        recordInfo: this.recordInfo,
+        selectedItem: {
+          id: this.selectedItem.id,
+        },
+        mode: 'view',
+      })
+    },
+
+    toggleExpand(expandKey) {
+      // if there are breadcrumb items, go back
+      if (this.breadcrumbItems.length > 1 && !expandKey) {
+        this.breadcrumbItems.pop()
+
+        const latestItem = this.breadcrumbItems[this.breadcrumbItems.length - 1]
+
+        this.currentParentItem = latestItem.item
+        this.expandTypeObject = latestItem.expandTypeObject
+
+        this.handleSubPageOptionsUpdated({
+          search: null,
+          filters: this.expandTypeObject.initialFilters ?? [],
+          sort: this.expandTypeObject.initialSortOptions ?? null,
+        })
+
+        return
+      }
+
+      const query = {
+        ...this.$route.query,
+      }
+
+      if (expandKey) {
+        query.e = expandKey
+      } else {
+        delete query.e
+        delete query.pageOptions
+      }
+
+      // push to route
+      this.$router
+        .replace({
+          path: this.$route.path,
+          query,
+        })
+        .catch((e) => e)
+    },
+
+    setExpandTypeObject(expandKey, init = false) {
+      // if expandKey is undefined, unset it
+      if (expandKey === undefined) {
+        this.expandTypeObject = null
+        // also need to unset the pageOptions
+
+        return
+      }
+
+      if (Array.isArray(this.recordInfo.expandTypes)) {
+        // find the expandTypeObject with the matching key
+        // if expandKey === null, set to first expandType
+        const expandTypeObject =
+          expandKey === null
+            ? this.recordInfo.expandTypes[0]
+            : this.recordInfo.expandTypes.find(
+                (expandTypeObject) => expandTypeObject.key === expandKey
+              )
+
+        // if not found, return
+        if (!expandTypeObject) return
+
+        this.expandTypeObject = expandTypeObject
+
+        // if breadcrumb mode and init, also set the initial item
+        if (init && this.expandTypeObject.breadcrumbOptions) {
+          this.breadcrumbItems.push({
+            expandTypeObject: this.expandTypeObject,
+            item: this.selectedItem,
+            isRoot: true,
+          })
+        }
+
+        // when item expanded, initialize the filters if not init, or if init and pageOptions not defined
+        if (!init || (init && !this.$route.query.pageOptions)) {
+          this.handleSubPageOptionsUpdated({
+            search: null,
+            filters: expandTypeObject.initialFilters ?? [],
+            sort: expandTypeObject.initialSortOptions ?? null,
+          })
+        }
+      }
+    },
+
+    handleSubPageOptionsUpdated(pageOptions) {
+      // if it's a child component, set the subPageOptions
+      if (this.isChildComponent) {
+        this.subPageOptions = pageOptions
+        return
+      }
+
+      const query = {
+        ...this.$route.query,
+      }
+
+      // check if any valid options
+      if (
+        pageOptions &&
+        (pageOptions.search || pageOptions.filters.length || pageOptions.sort)
+      ) {
+        query.pageOptions = encodeURIComponent(
+          btoa(JSON.stringify(pageOptions))
+        )
+      } else {
+        delete query.pageOptions
+      }
+
+      this.$router
+        .replace({
+          path: this.$route.path,
+          query,
+        })
+        .catch((e) => e)
+      // catches if the query is exactly the same
+    },
+
+    openDialog(dialogName) {
+      if (dialogName in this.dialogs) {
+        this.dialogs[dialogName] = true
+      }
+    },
+
+    openEditDialog(mode) {
+      this.dialogs.editMode = mode
+      this.openDialog('editRecord')
+    },
+
+    async loadRecord() {
+      this.loading.loadRecord = true
+      try {
+        const fields = (this.recordInfo.requiredFields ?? []).concat(
+          this.recordInfo.pageOptions?.fields ?? []
+        )
+
+        // if the record type has name/avatar, also fetch those
+        if (this.recordInfo.hasName) fields.push('name')
+        if (this.recordInfo.hasAvatar) fields.push('avatarUrl')
+
+        const { serializeMap, query } = processQuery(
+          this,
+          this.recordInfo,
+          fields
+        )
+
+        const data = await executeGiraffeql(this, {
+          [`get${this.capitalizedTypename}`]: {
+            ...query,
+            __args: {
+              ...this.lookupParams,
+              ...(this.$route.query.id && { id: this.$route.query.id }),
+            },
+          },
+        })
+
+        // remove any undefined serializeMap elements
+        serializeMap.forEach((val, key) => {
+          if (val === undefined) serializeMap.delete(key)
+        })
+
+        // apply serialization to results
+        serializeMap.forEach((serialzeFn, field) => {
+          serializeNestedProperty(data, field, serialzeFn)
+        })
+
+        this.selectedItem = data
+      } catch (err) {
+        this.selectedItem = null
+        handleError(this, err)
+      }
+      this.loading.loadRecord = false
+    },
+
+    reset(hardReset = false) {
+      if (hardReset) {
+        // must independently verify existence of item
+        this.loadRecord().then(() => {
+          // if expand query param set, set the initial expandTypeObject
+          if (this.$route.query.e !== undefined) {
+            this.setExpandTypeObject(this.$route.query.e, true)
+          }
+
+          const previewExpandTypes =
+            this.recordInfo.pageOptions?.previewExpandTypes
+
+          if (previewExpandTypes) {
+            this.previewExpandTypes = previewExpandTypes
+              .map((ele) =>
+                this.recordInfo.expandTypes.find(
+                  (expandTypeObject) => expandTypeObject.key === ele
+                )
+              )
+              .map((expandTypeObject) => {
+                // replace each recordInfo with the previewRecordInfo
+                return {
+                  expandTypeObject: {
+                    ...expandTypeObject,
+                    recordInfo: generatePreviewRecordInfo({
+                      recordInfo: expandTypeObject.recordInfo,
+                      title: `Latest ${expandTypeObject.recordInfo.pluralName}`,
+                    }),
+                  },
+                  pageOptions: undefined,
+                }
+              })
+          }
+        })
+      }
+
+      this.generation++
+    },
+  },
+
+  head() {
+    return (
+      this.head ?? {
+        title: `View ${this.recordInfo.name}`,
+      }
+    )
+  },
+}
diff --git a/frontend/pages/my/view/_type.vue b/frontend/pages/my/view/_type.vue
index 0ae75d3..e608dfc 100644
--- a/frontend/pages/my/view/_type.vue
+++ b/frontend/pages/my/view/_type.vue
@@ -1,9 +1,10 @@
 <template>
-  <ViewRecordPage
+  <component
     v-if="currentModel"
+    :is="pageComponent"
     :record-info="currentModel"
     :lookup-params="lookupParams"
-  ></ViewRecordPage>
+  ></component>
   <v-container v-else fill-height>
     <v-layout align-center justify-center>
       <div>
@@ -26,11 +27,11 @@ export default {
 
   middleware: ['router-auth'],
 
-  components: {
-    ViewRecordPage,
-  },
-
   computed: {
+    pageComponent() {
+      return this.currentModel?.pageOptions?.component ?? ViewRecordPage
+    },
+
     currentModel() {
       return myModels[`My${capitalizeString(this.type)}`]
     },
diff --git a/frontend/services/base.ts b/frontend/services/base.ts
index 2cfed3a..248f2e6 100644
--- a/frontend/services/base.ts
+++ b/frontend/services/base.ts
@@ -362,6 +362,7 @@ export function handleError(that, err) {
             ...err.response.data.error,
             payload: err.response.config.data,
             build: getBuildVersion(),
+            apiVersion: err.response.headers['x-api-version'],
           },
           null,
           2
@@ -376,6 +377,7 @@ export function handleError(that, err) {
         copyableMessage: JSON.stringify(
           {
             message: err.message,
+            type: 'clientError',
             build: getBuildVersion(),
             stack: err.stack,
           },
diff --git a/frontend/services/recordInfo.ts b/frontend/services/recordInfo.ts
index 94a8d79..7cd9db8 100644
--- a/frontend/services/recordInfo.ts
+++ b/frontend/services/recordInfo.ts
@@ -288,6 +288,7 @@ export function generatePreviewableFilesColumn({
         `${fieldname}.size`,
         `${fieldname}.contentType`,
         `${fieldname}.location`,
+        `${fieldname}.servingUrl`,
       ],
       pathPrefix: fieldname,
       inputType,
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index 8340ec2..85c2962 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -86,6 +86,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
 
   // options related to viewing a single record (via viewRecordPage), if any
   pageOptions?: {
+    // required fields for the page, if any
+    fields?: string[]
+
     // custom function that will return the lookup params, if any
     getLookupParams?: (that) => any
 
@@ -95,6 +98,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
     // the expand types to automatically render below (as previews)
     // string corresponds to the key
     previewExpandTypes?: string[]
+
+    // custom page component
+    component?: any
   }
 
   // options related to viewing multiple, if possible
@@ -136,10 +142,16 @@ export type RecordInfo<T extends keyof MainTypes> = {
       // function that will get the preview name from the item
       getPreviewName?: (item: any) => any
 
+      // should the v-img component be contained?
+      containMode?: boolean
+
       // custom component that should be rendered, which will override the above 2 options
       component?: any
     }
 
+    // should the entire toolbar be hidden? this will override some of the toolbar-related options below
+    hideToolbar?: boolean
+
     // should the actions be hidden?
     hideActions?: boolean
 
@@ -197,6 +209,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
     // hide the total number of results (showing X of Y)
     hideCount?: boolean
 
+    // hide the title
+    hideTitle?: boolean
+
     // show button to "view all" of this record
     showViewAll?: boolean
 
@@ -212,6 +227,8 @@ export type RecordInfo<T extends keyof MainTypes> = {
     hideActions?: boolean
     // should the refresh button be hidden?
     hideRefresh?: boolean
+    // should the title and icon be hidden?
+    hideTitle?: boolean
   }
 
   addOptions?: {
@@ -311,6 +328,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
       // function that will get the preview name from the item
       getPreviewName?: (item: any) => any
 
+      // should the v-img component be contained?
+      containMode?: boolean
+
       // custom component that should be rendered, which will override the above 2 options
       component?: any
     }
@@ -328,6 +348,9 @@ export type RecordInfo<T extends keyof MainTypes> = {
       // function that will get the preview name from the item
       getPreviewName?: (item: any) => any
 
+      // should the v-img component be contained?
+      containMode?: boolean
+
       // custom component that should be rendered, which will override the above 2 options
       component?: any
     }
@@ -410,8 +433,10 @@ export type RecordInfo<T extends keyof MainTypes> = {
     // number of results to show per page for this expand option. else, defaults to 12
     resultsPerPage?: number
 
-    // open the expand in the same interface instead of expanding or opening a dialog
-    breadcrumbMode?: boolean
+    // open the expand in the same interface instead of expanding or opening a dialog, and related options
+    breadcrumbOptions?: {
+      hideBreadcrumbs?: boolean
+    }
 
     // show this option as its own block/row if it is rendered as a grid
     showRowIfGrid?: boolean