Update README.md (#67)

* Make account servel url visible on snack bar

* Make FE2 terminology persistent, no switch anymore

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es2021": true,
@@ -9,12 +10,15 @@
     "prettier",
     "prettier/vue",
     "plugin:prettier/recommended",
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
+  "parser": "vue-eslint-parser",
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module",
-    "parser": "@babel/eslint-parser"
+    "parser": "@typescript-eslint/parser"
   },
   "plugins": ["vue", "prettier"],
   "rules": {
@@ -25,6 +29,9 @@
         "after": true
       }
     ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-array-constructor": "off",
     //"array-bracket-spacing": [2, "always"],
     "block-spacing": [2, "always"],
     "camelcase": [

.github/workflows/close-issue.yml

@@ -1,78 +0,0 @@
-name: Update issue Status
-
-on:
-  issues:
-    types: [closed]
-
-jobs:
-  update_issue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ORGANIZATION: specklesystems
-          PROJECT_NUMBER: 9
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
-
-          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          
-          echo "$PROJECT_ID"
-          echo "$STATUS_FIELD_ID"
-          
-          echo 'DONE_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .settings | fromjson | .options[] | select(.name== "Done") | .id' project_data.json) >> $GITHUB_ENV
-          echo "$DONE_ID"
-
-      - name: Add Issue to project #it's already in the project, but we do this to get its node id!
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $id:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
-          
-      - name: Update Status
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $status:ID!, $id:ID!, $value:String!) {
-              set_status: updateProjectNextItemField(
-                input: {
-                  projectId: $project
-                  itemId: $id
-                  fieldId: $status
-                  value: $value
-                }
-              ) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f status=$STATUS_FIELD_ID -f id=$ITEM_ID -f value=${{ env.DONE_ID }}
-          

.github/workflows/open-issue.yml

@@ -1,50 +0,0 @@
-name: Move new issues into Project
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  track_issue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ORGANIZATION: specklesystems
-          PROJECT_NUMBER: 9
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
-
-          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-     
-      - name: Add Issue to project
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $id:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV

.gitignore

@@ -15,7 +15,6 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Excel Desktop",
+            "type": "msedge",
+            "request": "attach",
+            "useWebView": true,
+            "port": 9229,
+            "timeout": 600000,
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "npm: excel",
+            "sourceMapPathOverrides": {
+                "webpack:///src/*": "${webRoot}/*",
+                "webpack:///src/*.vue": "${webRoot}/*.vue",
+                "webpack:///./src/*.js": "${webRoot}/*.js",
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

README.md

@@ -1,63 +1,52 @@
-# Speckle Excel Connector
+<h1 align="center">
+  <img src="https://user-images.githubusercontent.com/2679513/131189167-18ea5fe1-c578-47f6-9785-3748178e4312.png" width="150px"/><br/>
+  Speckle | Excel
+</h1>
 
-[![Twitter Follow](https://img.shields.io/twitter/follow/SpeckleSystems?style=social)](https://twitter.com/SpeckleSystems) [![Community forum users](https://img.shields.io/discourse/users?server=https%3A%2F%2Fdiscourse.speckle.works&style=flat-square&logo=discourse&logoColor=white)](https://discourse.speckle.works) [![website](https://img.shields.io/badge/https://-speckle.systems-royalblue?style=flat-square)](https://speckle.systems) [![docs](https://img.shields.io/badge/docs-speckle.guide-orange?style=flat-square&logo=read-the-docs&logoColor=white)](https://speckle.guide/dev/)
+<p align="center">
+  <a href="https://speckle.community"><img src="https://img.shields.io/discourse/users?server=https%3A%2F%2Fspeckle.community&style=flat-square&logo=discourse&logoColor=white" alt="Community forum users"></a>
+  <a href="https://speckle.systems"><img src="https://img.shields.io/badge/https://-speckle.systems-royalblue?style=flat-square" alt="website"></a>
+  <a href="https://docs.speckle.systems"><img src="https://img.shields.io/badge/docs-docs.speckle.systems-orange?style=flat-square&logo=read-the-docs&logoColor=white" alt="docs"></a>
+</p>
+
+> Status: deprecated; not compatible with Speckle v3.
+> Retained as open source for reference and community use.
+> No active maintenance or feature updates are planned.
+
+<h3 align="center">
+  Speckle Connector for Excel
+</h3>
 
 ## Introduction
 
-This repo holds Speckle's Excel Connector, it's currently released as early alpha.
+This repository contains the Speckle Excel Connector, originally released as an early alpha. It enabled sending and receiving data between Microsoft Excel and the Speckle platform. The project is no longer maintained and is not compatible with Speckle v3. For modern workflows, use current SDKs and APIs documented at docs.speckle.systems
 
-## Documentation
+## Developing and debugging
 
-Comprehensive developer and user documentation can be found in our:
+Note: the instructions below are preserved for archival purposes.
 
-#### 📚 [Speckle Docs website](https://speckle.guide/dev/)
+### App setup
 
-## Developing & Debugging
+You need a Speckle App. The server must be on https. Do not use a local server on http://localhost:3000.
 
-### App Set up
+Use: https://app.speckle.systems/
 
-For developing and debugging this connector you'll need to set up a Speckle App.
-The server on which the app runs must be on `https`, so **do not use a local Speckle server** on `http://localhost:3000/` as it will not work.
+In the server frontend, register a new app.
 
-You can use `https://latest.speckle.dev/` or `https://speckle.xyz/`.
+Example values for an app while the Excel add-in runs on https://localhost:3000:
 
-Now open up its frontend, and under your profile register a new app.
+- Name: ExcelConnector
+- Redirect URL: `https://localhost:3000`
+- Permissions: `streams:read, streams:write, profile:read, profile:email, users:read`
 
-I've used the following values since my excel-connector app is running at `https://localhost:3000`:
+Then in your local `speckle-excel` repo:
 
-- name: ExcelConnector
-- redirect url: `https://localhost:3000`
-- permissions: `streams:read, streams:write, profile:read, profile:email, users:read`
+- Duplicate `.env sample` to `.env.local`
+- Add your `app id` and `secret`
+- Set `BASE_URL=https://localhost:3000`
 
-Take note of the `app id` and `secret`, then in your speckle-excel repo:
+### Running locally
 
-- duplicate `.env sample` to `.env.local`
-- then fill it in with your new `app id` and `secret`
-- note that the `BASE_URL=https://localhost:3000`
-
-### Running the connector locally
-
-Run it locally:
-
-- `npm install` (first time only)
-- `npm run serve`
-- _You might be prompted to install some certificates, go ahead and accept_
-- _Wait for the the process to start the Vue app, then in a separate terminal either_
-  - `npm run excel` will run excel desktop and sideload the plugin
-  - `npm run excel:web` will run excel web, open the document defined in `packages.json` and sideload the plugin
-
-If this worked out well, you should see the connector sideloaded correctly:
-
-![image](https://user-images.githubusercontent.com/2679513/119171684-cdf3da00-ba5c-11eb-87a5-bee798f96f90.png)
-
-## Contributing
-
-Please make sure you read the [contribution guidelines](.github/CONTRIBUTING.md) for an overview of the best practices we try to follow.
-
-## Community
-
-The Speckle Community hangs out on [the forum](https://discourse.speckle.works), do join and introduce yourself & feel free to ask us questions!
-
-## License
-
-Unless otherwise described, the code in this repository is licensed under the Apache-2.0 License. Please note that some modules, extensions or code herein might be otherwise licensed. This is indicated either in the root of the containing folder under a different license file, or in the respective file's header. If you have any questions, don't hesitate to get in touch with us via [email](mailto:hello@speckle.systems).
+```bash
+npm install
+npm run serve

package.json

@@ -4,25 +4,30 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "compile": "tsc && prettier ./src/**/*.js --write",
     "lint": "vue-cli-service lint",
     "excel": "office-addin-debugging start public/manifest.xml",
-    "excel:web": "office-addin-debugging start public/manifest.xml web --document https://teocomi-my.sharepoint.com/:x:/g/personal/teocomi_teocomi_onmicrosoft_com/EdxKPPFhnMdDoGclr4J-xJAB7H6-TRJ5s5ZnXzVdrdFyUg?e=VAFmBN",
+    "excel:web": "office-addin-debugging start public/manifest.xml web --document https://v2k0p-my.sharepoint.com/:x:/r/personal/connor_v2k0p_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc=%7B101920A4-0AEA-4E82-B0E5-36E3162F7E86%7D&file=signalisation-permanente.xlsx&action=default&mobileredirect=true&DefaultItemOpen=1&ct=1705007910553&wdOrigin=OFFICECOM-WEB.MAIN.REC&cid=634f97aa-c5a2-411a-a705-412dc57eaaf7&wdPreviousSessionSrc=HarmonyWeb&wdPreviousSession=96a3ad12-6cd0-44ee-bf8b-c523c706e44e",
+    "excel:web2": "office-addin-debugging start public/manifest.xml web --document https://teocomi-my.sharepoint.com/:x:/g/personal/teocomi_teocomi_onmicrosoft_com/EdxKPPFhnMdDoGclr4J-xJABLf-Ao6CJ902W95kcFPL2fA?e=mD0B8a",
     "excel:prod": "office-addin-debugging start public/manifest-prod.xml",
     "excel:web-prod": "office-addin-debugging start public/manifest-prod.xml web --document https://teocomi-my.sharepoint.com/:x:/g/personal/teocomi_teocomi_onmicrosoft_com/EdxKPPFhnMdDoGclr4J-xJAB7H6-TRJ5s5ZnXzVdrdFyUg?e=VAFmBN",
     "stop": "office-addin-debugging stop public/manifest.xml",
     "validate": "office-toolbox validate -m public/manifest.xml"
   },
   "dependencies": {
-    "@speckle/objectloader": "^2.3.0",
+    "@mdi/font": "^7.2.96",
+    "@speckle/objectloader": "^2.9.0",
+    "@speckle/viewer": "^2.14.7",
     "core-js": "^3.6.5",
+    "crypto-js": "^4.1.1",
     "flat": "^5.0.2",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.5",
     "vue-infinite-loading": "^2.4.5",
+    "vue-mixpanel": "1.0.7",
     "vue-router": "^3.5.1",
     "vue-timeago": "^5.1.3",
-    "vue-mixpanel": "1.0.7",
     "vuetify": "^2.5.0",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3",
@@ -30,6 +35,11 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.3",
+    "@types/crypto-js": "^4.2.1",
+    "@types/office-js": "^1.0.364",
+    "@types/office-runtime": "^1.0.35",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@vue/cli-plugin-babel": "~4.5.13",
     "@vue/cli-plugin-eslint": "~4.5.13",
     "@vue/cli-plugin-router": "^4.5.13",
@@ -48,6 +58,7 @@
     "prettier": "^2.2.1",
     "sass": "^1.32.0",
     "sass-loader": "^10.0.0",
+    "typescript": "^4.9.5",
     "vue-cli-plugin-apollo": "~0.22.2",
     "vue-cli-plugin-vuetify": "~2.4.0",
     "vue-template-compiler": "^2.6.11",
@@ -57,5 +68,8 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "engines": {
+    "node": ">=14.0.0 <15.0.0"
+  }
 }

public/index.html

@@ -11,10 +11,6 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
-    />
   </head>
   <body>
     <noscript>
@@ -25,7 +21,10 @@
     </noscript>
     <!-- built files will be auto injected -->
     <script type="text/javascript">
-      if (window.navigator.userAgent.indexOf('Trident') > -1 || window.navigator.userAgent.indexOf('Edge') > -1) {
+      if (
+        window.navigator.userAgent.indexOf('Trident') > -1 ||
+        window.navigator.userAgent.indexOf('Edge') > -1
+      ) {
         //render unsupported message
         document.write(
           '<h1><br/>Sorry, this Excel version is not supported as it still uses IE 11/Legacy Edge.<br/>Please update it or use Excel Online.</h1>'

src/App.vue

@@ -18,6 +18,7 @@
         </v-list-item-avatar>
         <v-list-item-content>
           <v-list-item-title>{{ user.name }}</v-list-item-title>
+          <v-list-item-subtitle class="smaller-text">{{ serverUrl }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
 
@@ -56,7 +57,7 @@
           </v-list-item-content>
         </v-list-item>
 
-        <v-list-item href="https://speckle.systems/tag/excel/" target="_blank">
+        <v-list-item href="https://v1.speckle.systems/tag/excel/" target="_blank">
           <v-list-item-icon>📺</v-list-item-icon>
 
           <v-list-item-content>
@@ -94,6 +95,7 @@
         <span class="caption">CONNECTOR</span>
       </v-btn>
     </v-app-bar>
+    <global-toast />
 
     <v-main :style="background">
       <router-view />
@@ -105,18 +107,15 @@
 const crypto = require('crypto')
 export default {
   name: 'App',
-  components: {},
+  components: {
+    GlobalToast: () => import('@/components/GlobalToast')
+  },
   data: () => ({
     drawer: null,
     showSnackbar: false,
     items: [
       {
-        name: 'Add stream',
-        icon: '➕',
-        to: '/add'
-      },
-      {
-        name: 'Streams',
+        name: 'Projects',
         icon: '📃',
         to: '/'
       },
@@ -191,9 +190,6 @@ export default {
         '@' +
         crypto.createHash('md5').update(this.user.email.toLowerCase()).digest('hex').toUpperCase()
 
-      console.log(server_id)
-      console.log(distinct_id)
-
       this.$mixpanel.register({ server_id: server_id, hostApp: 'excel', type: 'action' })
 
       this.$mixpanel.identify(distinct_id)
@@ -316,4 +312,8 @@ export default {
   opacity: 1;
   transition: opacity 0.15s;
 }
+
+.smaller-text {
+  font-size: 0.7rem; /* Example: Adjust the size as needed */
+}
 </style>

src/components/GlobalToast.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-snackbar v-if="text" v-model="snack" app bottom :color="color">
+    <div v-for="(line, index) in text.split('\n')" :key="index">
+      {{ line }}
+    </div>
+    <template #action="{}">
+      <v-btn v-if="actionName" small outlined @click="openUrl(url)" @click:append="snack = false">
+        {{ actionName }}
+      </v-btn>
+      <v-btn small icon @click="snack = false">
+        <v-icon small>mdi-close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      snack: false,
+      color: 'primary',
+      text: null,
+      actionName: null,
+      url: null
+    }
+  },
+  watch: {
+    snack(newVal) {
+      if (!newVal) {
+        this.text = null
+        this.actionName = null
+        this.url = null
+      }
+    }
+  },
+  mounted() {
+    this.$eventHub.$on('success', (args) => {
+      this.snack = true
+      this.color = 'green'
+      this.text = args.text
+      this.actionName = args.action ? args.action.name : null
+      this.url = args.action ? args.action.url : null
+    })
+    this.$eventHub.$on('notification', (args) => {
+      this.snack = true
+      this.color = 'primary'
+      this.text = args.text
+      this.actionName = args.action ? args.action.name : null
+      this.url = args.action ? args.action.url : null
+    })
+    this.$eventHub.$on('error', (args) => {
+      this.snack = true
+      this.color = '#CC3300'
+      this.text = args.text
+      this.actionName = args.action ? args.action.name : null
+      this.url = args.action ? args.action.url : null
+    })
+  },
+  methods: {
+    openUrl(link) {
+      this.$mixpanel.track('Connector Action', { name: 'Open In Web' })
+      window.open(link)
+    }
+  }
+}
+</script>

src/components/ListItemStream.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card class="pa-5 mb-3" style="transition: all 0.2s" @click="addStream">
+  <v-card class="px-5 py-2 mb-3" style="transition: all 0.2s" @click="openStream">
     <v-row>
       <v-col cols="12" sm="8" class="align-self-center">
-        <div class="subtitle-1">
+        <div class="text-h6">
           {{ stream.name }}
         </div>
         <div class="caption mb-2 mt-1 text-truncate">
@@ -19,11 +19,7 @@
             {{ role }}
           </v-chip>
           <v-chip
-            v-tooltip="
-              stream.branches.totalCount +
-              ' branch' +
-              (stream.branches.totalCount === 1 ? '' : 'es')
-            "
+            v-tooltip="`${stream.branches.totalCount === 1 ? '1 model' : 'models'}`"
             outlined
             class="ml-2"
             small
@@ -33,9 +29,7 @@
           </v-chip>
 
           <v-chip
-            v-tooltip="
-              stream.commits.totalCount + ' commit' + (stream.commits.totalCount === 1 ? '' : 's')
-            "
+            v-tooltip="`${stream.commits.totalCount === 1 ? '1 version' : 'versions'}`"
             outlined
             class="ml-2"
             small
@@ -45,16 +39,18 @@
           </v-chip>
         </div>
       </v-col>
-      <v-col cols="12" sm="4" class="text-sm-center text-md-right align-self-center">
+      <v-col cols="12" sm="4" class="text-sm-center text-md-right align-self-center pt-0">
         <div>
-          <user-avatar
-            v-for="user in collaboratorsSlice"
-            :id="user.id"
-            :key="user.id"
-            :avatar="user.avatar"
-            :size="30"
-            :name="user.name"
-          />
+          <span v-for="user in collaboratorsSlice" :key="user.id">
+            <user-avatar
+              v-if="user.id"
+              :id="user.id"
+              :avatar="user.avatar"
+              :size="30"
+              :name="user.name"
+            />
+          </span>
+
           <div v-if="stream.collaborators.length > collaboratorsSlice.length" class="d-inline">
             <v-avatar class="ma-1 grey--text text--darken-2" color="grey lighten-3" size="30">
               <b>+{{ stream.collaborators.length - collaboratorsSlice.length }}</b>
@@ -80,22 +76,22 @@ export default {
   },
   computed: {
     collaboratorsSlice() {
-      let limit = 18
+      let limit = 6
       switch (this.$vuetify.breakpoint.name) {
         case 'xs':
-          limit = 10
+          limit = 5
           break
         case 'sm':
-          limit = 9
+          limit = 5
           break
         case 'md':
-          limit = 8
+          limit = 4
           break
         case 'lg':
-          limit = 12
+          limit = 6
           break
         case 'xl':
-          limit = 18
+          limit = 6
           break
       }
 
@@ -120,6 +116,9 @@ export default {
         selectedCommitId: null
       })
       this.$router.push('/')
+    },
+    openStream() {
+      this.$router.push(`/streams/${this.stream.id}`)
     }
   }
 }

src/components/ObjectChunkedListViewer.vue

@@ -0,0 +1,228 @@
+<template>
+  <v-card :class="`my-1 mb-0 pa-0 pb-2 ${localExpand ? 'elevation-3' : 'elevation-0'} my-0`">
+    <v-card-title>
+      <v-chip @click="toggleLoadExpand">
+        <v-icon small class="mr-2">mdi-code-array</v-icon>
+        {{ keyName }}
+        <span class="caption ml-2">List ( >{{ (value.length - 1) * 5000 }} elements)</span>
+        <v-icon class="ml-2" small>
+          {{ localExpand ? 'mdi-minus' : 'mdi-plus' }}
+        </v-icon>
+      </v-chip>
+      <v-dialog v-model="progress" persistent>
+        <v-card class="pt-3">
+          <v-card-text class="caption">
+            Receiving data from the Speckleverse...
+            <v-progress-linear
+              class="mt-2"
+              :value="`${(numChunksReceived / value.length) * 100}`"
+              color="primary"
+            ></v-progress-linear>
+            <v-btn class="mt-3" outlined x-small color="primary" @click="cancel">Cancel</v-btn>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+      <v-btn icon small @click="bake">
+        <v-icon small>mdi-download</v-icon>
+      </v-btn>
+    </v-card-title>
+    <v-card-text v-if="localExpand" class="pb-0 pr-0 pl-3">
+      <component
+        :is="entry.type"
+        v-for="(entry, index) in rangeEntries"
+        :key="index"
+        :key-name="entry.key"
+        :full-key-name="fullKeyName ? `${fullKeyName}.${entry.key}` : entry.key"
+        :value="entry.value"
+        :stream-id="streamId"
+        :commit-id="commitId"
+        :commit-msg="commitMsg"
+        :nearest-object-id="nearestObjectId"
+        :path-from-nearest-object="`${entry.pathFromNearestObject}`"
+      ></component>
+    </v-card-text>
+    <v-card-text v-if="localExpand && currentLimit < value.length">
+      <v-btn small @click="loadMore">Show more</v-btn>
+    </v-card-text>
+    <filter-modal ref="modal" />
+  </v-card>
+</template>
+<script>
+import { bake } from '../plugins/excel'
+import objectQuery from '../graphql/object.gql'
+import { createClient } from '../vue-apollo'
+
+let ac = new AbortController()
+export default {
+  name: 'ObjectChunkedListViewer',
+  components: {
+    FilterModal: () => import('./FilterModal'),
+    ObjectSpeckleViewer: () => import('./ObjectSpeckleViewer'),
+    ObjectSimpleViewer: () => import('./ObjectSimpleViewer'),
+    ObjectValueViewer: () => import('./ObjectValueViewer')
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    keyName: {
+      type: String,
+      default: null
+    },
+    fullKeyName: {
+      type: String,
+      default: null
+    },
+    streamId: {
+      type: String,
+      default: null
+    },
+    commitId: {
+      type: String,
+      default: null
+    },
+    commitMsg: {
+      type: String,
+      default: null
+    },
+    nearestObjectId: {
+      type: String,
+      default: null
+    },
+    pathFromNearestObject: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      localExpand: false,
+      itemsPerLoad: 3,
+      currentLimit: 3,
+      progress: false,
+      numChunksReceived: 0
+    }
+  },
+  computed: {
+    rangeEntries() {
+      let arr = []
+      let index = 0
+      const delimiter = ':::'
+      for (let val of this.range) {
+        index++
+        if (Array.isArray(val)) {
+          arr.push({
+            key: `${index}`,
+            value: val,
+            type: 'ObjectChunkedListViewer',
+            pathFromNearestObject: this.pathFromNearestObject
+              ? this.pathFromNearestObject + (index - 1) + delimiter
+              : index - 1 + delimiter
+          })
+        } else if (typeof val === 'object' && val !== null) {
+          if (val.speckle_type && val.speckle_type === 'reference') {
+            arr.push({
+              key: `${index}`,
+              value: val,
+              type: 'ObjectSpeckleViewer'
+            })
+          } else {
+            arr.push({
+              key: `${index}`,
+              value: val,
+              type: 'ObjectSimpleViewer'
+            })
+          }
+        } else {
+          arr.push({
+            key: `${index}`,
+            value: val,
+            type: 'ObjectValueViewer'
+          })
+        }
+      }
+
+      arr.sort((a, b) => {
+        if (a.type === b.type) return 0
+        if (a.type === 'ObjectValueViewer') return -1
+        return 0
+      })
+      return arr
+    },
+    range() {
+      return this.value.slice(0, this.currentLimit)
+    }
+  },
+  methods: {
+    toggleLoadExpand() {
+      this.localExpand = !this.localExpand
+    },
+    loadMore() {
+      this.currentLimit += this.itemsPerLoad
+    },
+    cancel() {
+      ac.abort()
+    },
+    async bake() {
+      ac = new AbortController()
+
+      this.progress = true
+      this.$mixpanel.track('Receive')
+
+      let allData = []
+
+      for (let i = 0; i < this.value.length; i++) {
+        if (ac.signal.aborted) {
+          break
+        }
+
+        let speckleObj = await this.getObjectFromCurrentStreamWithId(this.value[i].referencedId)
+        let speckleType = speckleObj?.data?.stream?.object?.data?.speckle_type
+        if (speckleType !== 'Speckle.Core.Models.DataChunk') {
+          continue
+        }
+
+        allData.push(...speckleObj.data.stream.object.data.data)
+        this.numChunksReceived++
+      }
+
+      let receiverSelection = null
+      if (!ac.signal.aborted) {
+        receiverSelection = await bake(
+          allData,
+          this.streamId,
+          this.commitId,
+          this.commitMsg,
+          this.$refs.modal,
+          ac.signal,
+          this.nearestObjectId,
+          this.pathFromNearestObject
+        )
+      }
+
+      if (receiverSelection) {
+        receiverSelection.fullKeyName = this.fullKeyName
+
+        this.$store.dispatch('setReceiverSelection', {
+          id: this.streamId,
+          receiverSelection: receiverSelection
+        })
+      }
+
+      this.progress = false
+      this.numChunksReceived = 0
+    },
+    async getObjectFromCurrentStreamWithId(id) {
+      let client = createClient()
+      return await client.query({
+        query: objectQuery,
+        variables: {
+          streamId: this.streamId,
+          id: id
+        }
+      })
+    }
+  }
+}
+</script>

src/components/ObjectListViewer.vue

@@ -34,6 +34,8 @@
         :stream-id="streamId"
         :commit-id="commitId"
         :commit-msg="commitMsg"
+        :nearest-object-id="nearestObjectId"
+        :path-from-nearest-object="`${entry.pathFromNearestObject}`"
       ></component>
     </v-card-text>
     <v-card-text v-if="localExpand && currentLimit < value.length">
@@ -77,6 +79,14 @@ export default {
     commitMsg: {
       type: String,
       default: null
+    },
+    nearestObjectId: {
+      type: String,
+      default: null
+    },
+    pathFromNearestObject: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -91,13 +101,17 @@ export default {
     rangeEntries() {
       let arr = []
       let index = 0
+      const delimiter = ':::'
       for (let val of this.range) {
         index++
         if (Array.isArray(val)) {
           arr.push({
             key: `${index}`,
             value: val,
-            type: 'ObjectListViewer'
+            type: 'ObjectListViewer',
+            pathFromNearestObject: this.pathFromNearestObject
+              ? this.pathFromNearestObject + (index - 1) + delimiter
+              : index - 1 + delimiter
           })
         } else if (typeof val === 'object' && val !== null) {
           if (val.speckle_type && val.speckle_type === 'reference') {
@@ -155,8 +169,11 @@ export default {
         this.commitId,
         this.commitMsg,
         this.$refs.modal,
-        ac.signal
+        ac.signal,
+        this.nearestObjectId,
+        this.pathFromNearestObject
       )
+
       if (receiverSelection) {
         receiverSelection.fullKeyName = this.fullKeyName
 

src/components/ObjectSimpleViewer.vue

@@ -55,8 +55,7 @@ export default {
   },
   props: {
     value: {
-      type: Object,
-      default: () => {}
+      type: Object
     },
     streamId: {
       type: String,
@@ -77,6 +76,14 @@ export default {
     commitMsg: {
       type: String,
       default: null
+    },
+    nearestObjectId: {
+      type: String,
+      default: null
+    },
+    pathFromNearestObject: {
+      type: String,
+      default: null
     }
   },
   data() {

src/components/ObjectSpeckleViewer.vue

@@ -41,6 +41,8 @@
         :stream-id="streamId"
         :commit-id="commitId"
         :commit-msg="commitMsg"
+        :nearest-object-id="updatedObjectId"
+        :path-from-nearest-object="`${entry.pathFromNearestObject}`"
       ></component>
     </v-card-text>
     <filter-modal ref="modal" />
@@ -58,6 +60,7 @@ export default {
   components: {
     FilterModal: () => import('./FilterModal'),
     ObjectListViewer: () => import('./ObjectListViewer'),
+    ObjectChunkedListViewer: () => import('./ObjectChunkedListViewer'),
     ObjectSimpleViewer: () => import('./ObjectSimpleViewer'),
     ObjectValueViewer: () => import('./ObjectValueViewer')
   },
@@ -93,12 +96,22 @@ export default {
     commitMsg: {
       type: String,
       default: null
+    },
+    nearestObjectId: {
+      type: String,
+      default: null
+    },
+    pathFromNearestObject: {
+      type: String,
+      default: null
     }
   },
   data() {
     return {
       localExpand: false,
-      progress: false
+      progress: false,
+      objectEntries: null,
+      updatedObjectId: null
     }
   },
   apollo: {
@@ -111,6 +124,9 @@ export default {
           id: this.value.referencedId
         }
       },
+      async result() {
+        this.objectEntries = await this.getObjectEntries()
+      },
       skip() {
         return !this.localExpand
       },
@@ -120,11 +136,22 @@ export default {
       }
     }
   },
-  computed: {
-    objectEntries() {
+  mounted() {
+    this.localExpand = this.expand
+  },
+  methods: {
+    toggleLoadExpand() {
+      this.localExpand = !this.localExpand
+    },
+    cancel() {
+      ac.abort()
+    },
+    async getObjectEntries() {
       if (!this.object) return []
       let entries = Object.entries(this.object.data)
       let arr = []
+      this.updatedObjectId = this.object.data.id ?? this.nearestObjectId
+      const delimiter = ':::'
       for (let [key, val] of entries) {
         let name = key
         if (key.startsWith('__')) continue
@@ -133,13 +160,29 @@ export default {
         if (key === 'speckle_type') name = 'speckle type'
 
         if (Array.isArray(val)) {
-          arr.push({
-            key,
-            name,
-            value: val,
-            type: 'ObjectListViewer',
-            description: `List (${val.length} elements)`
-          })
+          let speckleTypeOfFirstObj = null
+          if (val.length > 0 && val[0].referencedId) {
+            let firstObj = await this.getObjectFromCurrentStreamWithId(val[0].referencedId)
+            speckleTypeOfFirstObj = firstObj?.data?.stream?.object?.data?.speckle_type
+          }
+
+          if (speckleTypeOfFirstObj === 'Speckle.Core.Models.DataChunk') {
+            arr.push({
+              key,
+              name,
+              value: val,
+              type: 'ObjectChunkedListViewer',
+              pathFromNearestObject: key + delimiter
+            })
+          } else {
+            arr.push({
+              key,
+              name,
+              value: val,
+              type: 'ObjectListViewer',
+              pathFromNearestObject: key + delimiter
+            })
+          }
         } else if (typeof val === 'object' && val !== null) {
           if (val.speckle_type && val.speckle_type === 'reference') {
             arr.push({
@@ -171,17 +214,6 @@ export default {
         return 0
       })
       return arr
-    }
-  },
-  mounted() {
-    this.localExpand = this.expand
-  },
-  methods: {
-    toggleLoadExpand() {
-      this.localExpand = !this.localExpand
-    },
-    cancel() {
-      ac.abort()
     },
     async bake() {
       this.progress = true
@@ -219,6 +251,16 @@ export default {
       }
 
       this.progress = false
+    },
+    async getObjectFromCurrentStreamWithId(id) {
+      let client = createClient()
+      return await client.query({
+        query: objectQuery,
+        variables: {
+          streamId: this.streamId,
+          id: id
+        }
+      })
     }
   }
 }

src/components/ObjectValueViewer.vue

@@ -32,6 +32,10 @@ export default {
     commitMsg: {
       type: String,
       default: null
+    },
+    nearestObjectId: {
+      type: String,
+      default: null
     }
   }
 }

src/components/StreamCard.vue

@@ -1,521 +0,0 @@
-<template>
-  <div>
-    <v-card v-if="error" class="pa-5 mb-3" style="transition: all 0.2s">
-      <v-card-title class="subtitle-1 px-0 pt-0">
-        {{ error }} ⚠️
-        <div class="floating">
-          <v-btn
-            v-tooltip="`Remove this stream from the document`"
-            small
-            icon
-            color="red"
-            @click="remove"
-          >
-            <v-icon small>mdi-minus-circle-outline</v-icon>
-          </v-btn>
-          <v-btn
-            v-tooltip="`Open this stream in a new window`"
-            small
-            icon
-            color="primary"
-            :href="`${serverUrl}/streams/${savedStream.id}`"
-            target="_blank"
-          >
-            <v-icon small>mdi-open-in-new</v-icon>
-          </v-btn>
-        </div>
-      </v-card-title>
-      <v-card-text class="px-0">
-        <span v-if="error == 'Stream not found'">
-          The stream might have been deleted or belog to another Speckle server
-        </span>
-        <span v-if="error == 'You do not have access to this resource.'">
-          Please ask the stream owner for access or to make it public
-        </span>
-        <br />
-        Stream Id: {{ savedStream.id }}
-      </v-card-text>
-    </v-card>
-    <div v-else-if="$apollo.queries.stream.loading" class="mx-0 mb-3">
-      <v-skeleton-loader type="article"></v-skeleton-loader>
-    </div>
-    <v-card v-else-if="stream" class="pa-5 mb-3" style="transition: all 0.2s">
-      <v-row>
-        <v-col class="align-self-center">
-          <div class="subtitle-1">
-            {{ stream.name }}
-          </div>
-
-          <div class="floating">
-            <v-btn
-              v-tooltip="`Remove this stream from the document`"
-              small
-              icon
-              color="red"
-              @click="remove"
-            >
-              <v-icon small>mdi-minus-circle-outline</v-icon>
-            </v-btn>
-            <v-btn
-              v-tooltip="`Open this stream in a new window`"
-              small
-              icon
-              color="primary"
-              :href="`${serverUrl}/streams/${stream.id}/branches/${selectedBranch.name}`"
-              target="_blank"
-            >
-              <v-icon small>mdi-open-in-new</v-icon>
-            </v-btn>
-
-            <v-btn
-              v-if="stream.role != 'stream:reviewer'"
-              v-tooltip="`Click to make this a ` + (savedStream.isReceiver ? `sender` : `receiver`)"
-              small
-              icon
-              color="primary"
-              @click="swapReceiver"
-            >
-              <v-icon small>mdi-swap-horizontal</v-icon>
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-      <v-row class="stream-card-select">
-        <v-col cols="6" class="pa-0 align-self-center">
-          <v-select
-            v-if="stream.branches"
-            v-model="selectedBranch"
-            :items="stream.branches.items"
-            item-value="name"
-            solo
-            flat
-            style="width: 100%"
-            dense
-            return-object
-            class="d-inline-block mb-0 pb-0"
-          >
-            <template #selection="{ item }">
-              <v-icon color="primary" small class="mr-1">mdi-source-branch</v-icon>
-              <span class="text-truncate caption primary--text">{{ item.name }}</span>
-            </template>
-            <template #item="{ item }">
-              <div class="pa-2">
-                <p class="pa-0 ma-0 caption">{{ item.name }}</p>
-                <p class="caption pa-0 ma-0 grey--text font-weight-light">
-                  {{ item.description }}
-                </p>
-              </div>
-            </template>
-          </v-select>
-        </v-col>
-        <v-col cols="6" class="pa-0 align-self-start">
-          <div v-if="savedStream.isReceiver">
-            <v-select
-              v-if="
-                selectedBranch && selectedBranch.commits && selectedBranch.commits.items.length > 0
-              "
-              v-model="selectedCommit"
-              :items="selectedBranch.commits.items"
-              item-value="id"
-              solo
-              flat
-              dense
-              style="width: 100%"
-              return-object
-              class="d-inline-block mb-0 pb-0"
-            >
-              <template #selection="{ item }">
-                <v-icon color="primary" small class="mr-1">mdi-source-commit</v-icon>
-                <span class="text-truncate caption primary--text">
-                  {{ formatCommitName(item.id) }}
-                </span>
-              </template>
-              <template #item="{ item }">
-                <div class="pa-2">
-                  <p class="pa-0 ma-0 caption">
-                    {{ item.id }}
-                    <span v-if="formatCommitName(item.id) == 'latest'">(latest)</span>
-                  </p>
-                  <p class="caption pa-0 ma-0 grey--text font-weight-light">
-                    {{ item.message }}
-                  </p>
-                </div>
-              </template>
-            </v-select>
-            <div v-else class="text-truncate caption mt-2 ml-3">
-              <span>No commits to receive</span>
-            </div>
-          </div>
-          <div v-else class="caption d-inline-flex" style="width: 100%">
-            <span
-              v-if="savedStream.selection"
-              v-tooltip="savedStream.selection"
-              class="mt-2 ml-2 text-truncate"
-            >
-              {{ savedStream.selection }}
-            </span>
-            <span v-else class="mt-2 ml-2">No range set</span>
-
-            <v-menu>
-              <template #activator="{ on, attrs }">
-                <v-btn
-                  v-tooltip="`Set or clear range`"
-                  icon
-                  color="primary"
-                  small
-                  text
-                  v-bind="attrs"
-                  class="ml-1 mt-1"
-                  v-on="on"
-                >
-                  <v-icon small>mdi-dots-vertical</v-icon>
-                </v-btn>
-              </template>
-
-              <v-list>
-                <v-list-item @click="setRange(true)">
-                  <v-list-item-title
-                    v-tooltip="`Ranges with headers will be sent as objects`"
-                    class="caption"
-                  >
-                    Set range with headers
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="setRange(false)">
-                  <v-list-item-title
-                    v-tooltip="`Ranges without headers will be sent as data arrays`"
-                    class="caption"
-                  >
-                    Set range
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item v-if="savedStream.selection" @click="clearSelection">
-                  <v-list-item-title class="caption">Clear</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </div>
-        </v-col>
-      </v-row>
-      <v-row v-if="savedStream.isReceiver">
-        <v-col class="align-self-center">
-          <v-dialog v-model="progress" persistent>
-            <v-card class="pt-3">
-              <v-card-text class="caption">
-                Receiving data from the Speckleverse...
-                <v-progress-linear class="mt-2" indeterminate color="primary"></v-progress-linear>
-                <v-btn class="mt-3" outlined x-small color="primary" @click="cancel">Cancel</v-btn>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-          <v-menu top offset-y>
-            <template #activator="{ on, attrs }">
-              <v-btn
-                :disabled="!selectedCommit"
-                color="primary"
-                class="lower"
-                v-bind="attrs"
-                small
-                v-on="on"
-              >
-                <v-img class="mr-2" width="30" height="30" src="../assets/ReceiverWhite@32.png" />
-
-                Receive
-              </v-btn>
-            </template>
-
-            <v-list v-if="selectedCommit" dense>
-              <v-list-item :to="`/streams/${stream.id}/commits/${selectedCommit.id}`">
-                <v-list-item-action class="mr-2">
-                  <v-icon small>mdi-filter-variant</v-icon>
-                </v-list-item-action>
-                <v-list-item-content class="caption">Filter and receive</v-list-item-content>
-              </v-list-item>
-              <v-list-item :disabled="!savedStream.receiverSelection" @click="receiveLatest">
-                <v-list-item-action class="mr-2">
-                  <v-icon small>mdi-update</v-icon>
-                </v-list-item-action>
-                <v-list-item-content class="caption">Receive last selection</v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-          <!-- <span v-if="savedStream.receiverSelection">
-            {{ savedStream.receiverSelection.fullKeyName }}
-          </span> -->
-        </v-col>
-      </v-row>
-
-      <v-row v-else>
-        <v-col class="align-self-center d-inline-flex">
-          <v-btn
-            color="primary"
-            small
-            :disabled="!savedStream.selection"
-            class="mt-1"
-            @click="send"
-          >
-            <v-img class="mr-2" width="30" height="30" src="../assets/SenderWhite@32.png" />
-
-            Send
-          </v-btn>
-
-          <v-text-field
-            v-model="message"
-            class="pt-0 mt-0 ml-3 caption"
-            placeholder="Data from Excel"
-          ></v-text-field>
-        </v-col>
-      </v-row>
-    </v-card>
-  </div>
-</template>
-<script>
-import streamQuery from '../graphql/stream.gql'
-import { send, receiveLatest } from '../plugins/excel'
-import gql from 'graphql-tag'
-import { createClient } from '../vue-apollo'
-
-let ac = new AbortController()
-
-export default {
-  props: {
-    savedStream: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      error: null,
-      progress: false,
-      message: ''
-    }
-  },
-  apollo: {
-    stream: {
-      prefetch: true,
-      query: streamQuery,
-      fetchPolicy: 'network-only',
-      variables() {
-        return {
-          id: this.savedStream.id
-        }
-      },
-      error(error) {
-        console.log(this.error)
-        this.error = JSON.stringify(error.message)
-          .replaceAll('"', '')
-          .replace('GraphQL error: ', '')
-        console.log(this.error)
-      },
-      skip() {
-        return this.savedStream === null
-      }
-    },
-    $client: createClient(),
-    $subscribe: {
-      streamUpdated: {
-        query: gql`
-          subscription($id: String!) {
-            streamUpdated(streamId: $id)
-          }
-        `,
-        variables() {
-          return { id: this.savedStream.id }
-        },
-        result() {
-          this.$apollo.queries.stream.refetch()
-        }
-      },
-      commitCreated: {
-        query: gql`
-          subscription($streamId: String!) {
-            commitCreated(streamId: $streamId)
-          }
-        `,
-        variables() {
-          return { streamId: this.savedStream.id }
-        },
-        result(commitInfo) {
-          this.$apollo.queries.stream.refetch()
-          if (this.savedStream.isReceiver)
-            this.$store.dispatch('showSnackbar', {
-              message: `New commit on ${this.stream.name} @ ${commitInfo.data.commitCreated.branchName}`
-            })
-        }
-      },
-      commitUpdated: {
-        query: gql`
-          subscription($id: String!) {
-            commitUpdated(streamId: $id)
-          }
-        `,
-        variables() {
-          return { id: this.savedStream.id }
-        },
-        result() {
-          this.$apollo.queries.stream.refetch()
-        }
-      },
-      branchCreated: {
-        query: gql`
-          subscription($id: String!) {
-            branchCreated(streamId: $id)
-          }
-        `,
-        variables() {
-          return { id: this.savedStream.id }
-        },
-        result() {
-          this.$apollo.queries.stream.refetch()
-        }
-      },
-      branchDeleted: {
-        query: gql`
-          subscription($id: String!) {
-            branchDeleted(streamId: $id)
-          }
-        `,
-        variables() {
-          return { id: this.savedStream.id }
-        },
-        result() {
-          this.$apollo.queries.stream.refetch()
-        }
-      },
-      branchUpdated: {
-        query: gql`
-          subscription($id: String!) {
-            branchUpdated(streamId: $id)
-          }
-        `,
-        variables() {
-          return { id: this.savedStream.id }
-        },
-        result() {
-          this.$apollo.queries.stream.refetch()
-        }
-      }
-    }
-  },
-  computed: {
-    serverUrl() {
-      return this.$store.getters.serverUrl
-    },
-    selectedBranch: {
-      get() {
-        if (!this.stream || !this.stream.branches) return null
-
-        let selectedBranchName = this.savedStream.selectedBranchName
-          ? this.savedStream.selectedBranchName
-          : 'main'
-        const index = this.stream.branches.items.findIndex((x) => x.name === selectedBranchName)
-        if (index > -1) return this.stream.branches.items[index]
-        return this.stream.branches.items[0]
-      },
-      set(value) {
-        let s = { ...this.savedStream }
-        s.selectedBranchName = value.name
-        this.$store.dispatch('updateStream', s)
-      }
-    },
-    selectedCommit: {
-      get() {
-        if (!this.selectedBranch || !this.selectedBranch.commits) return null
-
-        //not set or latest, return first
-        if (!this.savedStream.selectedCommitId || this.savedStream.selectedCommitId === 'latest')
-          return this.selectedBranch.commits.items[0]
-
-        //try match by id
-        const index = this.selectedBranch.commits.items.findIndex(
-          (x) => x.id === this.savedStream.selectedCommitId
-        )
-        if (index > -1) return this.selectedBranch.commits.items[index]
-
-        return this.selectedBranch.commits.items[0]
-      },
-      set(value) {
-        let s = { ...this.savedStream }
-        const index = this.selectedBranch.commits.items.findIndex((x) => x.id === value.id)
-        s.selectedCommitId = index === 0 ? 'latest' : value.id
-        this.$store.dispatch('updateStream', s)
-      }
-    }
-  },
-  methods: {
-    swapReceiver() {
-      let s = { ...this.savedStream }
-      s.isReceiver = !s.isReceiver
-      this.$mixpanel.track('Connector Action', { name: 'Stream Swap Receive/Send', type: 'action' })
-      this.$store.dispatch('updateStream', s)
-    },
-
-    async setRange(headers) {
-      await window.Excel.run(async (context) => {
-        let range = context.workbook.getSelectedRange()
-        range.load('address')
-
-        await context.sync()
-
-        let s = { ...this.savedStream }
-        s.selection = range.address
-        s.hasHeaders = headers
-        this.$store.dispatch('updateStream', s)
-      })
-    },
-    clearSelection() {
-      let s = { ...this.savedStream }
-      s.selection = ''
-      this.$store.dispatch('updateStream', s)
-    },
-
-    remove() {
-      this.$mixpanel.track('Connector Action', { name: 'Stream Remove' })
-      return this.$store.dispatch('removeStream', this.savedStream.id)
-    },
-    cancel() {
-      ac.abort()
-    },
-    async send() {
-      this.$mixpanel.track('Send')
-      send(this.savedStream, this.stream.id, this.selectedBranch.name, this.message)
-    },
-    async receiveLatest() {
-      this.$mixpanel.track('Receive')
-      ac = new AbortController()
-
-      console.log(this.savedStream.receiverSelection)
-
-      this.progress = true
-      await receiveLatest(
-        this.selectedCommit.referencedObject,
-        this.stream.id,
-        this.selectedCommit.id,
-        this.selectedCommit.message,
-        this.savedStream.receiverSelection,
-        ac.signal
-      )
-      this.progress = false
-    },
-    formatCommitName(id) {
-      if (this.selectedBranch.commits.items[0].id == id) return 'latest'
-      return id
-    }
-  }
-}
-</script>
-<style>
-.stream-card-select .v-text-field__details {
-  display: none !important;
-}
-.v-btn .lower {
-  text-transform: none;
-}
-.floating {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 10px;
-}
-</style>

src/components/StreamController.vue

@@ -0,0 +1,447 @@
+<template>
+  <v-card id="stream-info" class="pa-5 ma-3" style="transition: all 0.2s">
+    <v-row>
+      <v-col class="align-self-center">
+        <div class="subtitle-1">
+          {{ stream.name }}
+        </div>
+
+        <div class="floating">
+          <v-btn
+            v-tooltip="`Open this stream in a new window`"
+            small
+            icon
+            color="primary"
+            :href="commitViewUrl()"
+            target="_blank"
+          >
+            <v-icon small>mdi-open-in-new</v-icon>
+          </v-btn>
+
+          <v-btn
+            v-if="stream.role != 'stream:reviewer'"
+            v-tooltip="`Click to make this a ` + (isReceiver ? `sender` : `receiver`)"
+            small
+            icon
+            color="primary"
+            @click="swapReceiver"
+          >
+            <v-icon small>mdi-swap-horizontal</v-icon>
+          </v-btn>
+        </div>
+      </v-col>
+    </v-row>
+    <v-row class="stream-card-select">
+      <v-col cols="6" class="pa-0 align-self-center">
+        <v-select
+          v-if="stream.branches"
+          v-model="selectedBranch"
+          :items="stream.branches.items"
+          item-value="name"
+          solo
+          flat
+          style="width: 100%"
+          dense
+          return-object
+          class="d-inline-block mb-0 pb-0"
+        >
+          <template #selection="{ item }">
+            <v-icon color="primary" small class="mr-1">mdi-source-branch</v-icon>
+            <span class="text-truncate caption primary--text">{{ item.name }}</span>
+          </template>
+          <template #item="{ item }">
+            <div class="pa-2">
+              <p class="pa-0 ma-0 caption">{{ item.name }}</p>
+              <p class="caption pa-0 ma-0 grey--text font-weight-light">
+                {{ item.description }}
+              </p>
+            </div>
+          </template>
+        </v-select>
+      </v-col>
+      <v-col cols="6" class="pa-0 align-self-start">
+        <div v-if="isReceiver">
+          <v-select
+            v-if="
+              selectedBranch && selectedBranch.commits && selectedBranch.commits.items.length > 0
+            "
+            v-model="selectedCommit"
+            :items="selectedBranch.commits.items"
+            item-value="id"
+            solo
+            flat
+            dense
+            style="width: 100%"
+            return-object
+            class="d-inline-block mb-0 pb-0"
+          >
+            <template #selection="{ item }">
+              <v-icon color="primary" small class="mr-1">mdi-source-commit</v-icon>
+              <span class="text-truncate caption primary--text">
+                {{ formatCommitName(item.id) }}
+              </span>
+            </template>
+            <template #item="{ item }">
+              <div class="pa-2">
+                <p class="pa-0 ma-0 caption">
+                  {{ item.id }}
+                  <span v-if="formatCommitName(item.id) == 'latest'">(latest)</span>
+                </p>
+                <p class="caption pa-0 ma-0 grey--text font-weight-light">
+                  {{ item.message }}
+                </p>
+              </div>
+            </template>
+          </v-select>
+          <div v-else class="text-truncate caption mt-2 ml-3">
+            <span>No commits to receive</span>
+          </div>
+        </div>
+        <div v-else class="caption d-inline-flex" style="width: 100%">
+          <span v-if="selection" v-tooltip="selection" class="mt-2 ml-2 text-truncate">
+            {{ selection }}
+          </span>
+          <span v-else class="mt-2 ml-2">No range set</span>
+
+          <v-menu>
+            <template #activator="{ on, attrs }">
+              <v-btn
+                v-tooltip="`Set or clear range`"
+                icon
+                color="primary"
+                small
+                text
+                v-bind="attrs"
+                class="ml-1 mt-1"
+                v-on="on"
+              >
+                <v-icon small>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item @click="setRange(true)">
+                <v-list-item-title
+                  v-tooltip="`Ranges with headers will be sent as objects`"
+                  class="caption"
+                >
+                  Set range with headers
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="setRange(false)">
+                <v-list-item-title
+                  v-tooltip="`Ranges without headers will be sent as data arrays`"
+                  class="caption"
+                >
+                  Set range
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item v-if="selection" @click="clearSelection">
+                <v-list-item-title class="caption">Clear</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="isReceiver">
+      <v-col class="align-self-center">
+        <v-dialog v-model="progress" persistent>
+          <v-card class="pt-3">
+            <v-card-text class="caption">
+              Receiving data from the Speckleverse...
+              <v-progress-linear class="mt-2" indeterminate color="primary"></v-progress-linear>
+              <v-btn class="mt-3" outlined x-small color="primary" @click="cancel">Cancel</v-btn>
+            </v-card-text>
+          </v-card>
+        </v-dialog>
+        <v-btn
+          v-if="determinedConversion"
+          color="primary"
+          class="lower"
+          v-bind="attrs"
+          small
+          @click="receiveDeterminedConversion"
+        >
+          <v-img class="mr-2" width="30" height="30" src="../assets/ReceiverWhite@32.png" />
+          Receive {{ determinedConversion }}
+        </v-btn>
+        <v-menu v-else top offset-y>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              :disabled="!selectedCommit"
+              color="primary"
+              class="lower"
+              v-bind="attrs"
+              small
+              v-on="on"
+            >
+              <v-img class="mr-2" width="30" height="30" src="../assets/ReceiverWhite@32.png" />
+              Receive {{ determinedConversion }}
+            </v-btn>
+          </template>
+
+          <v-list v-if="selectedCommit" dense>
+            <!-- <v-list-item :to="`/streams/${stream.id}/commits/${selectedCommit.id}`"> -->
+            <v-list-item @click="filterAndReceive">
+              <v-list-item-action class="mr-2">
+                <v-icon small>mdi-filter-variant</v-icon>
+              </v-list-item-action>
+              <v-list-item-content class="caption">Filter and receive</v-list-item-content>
+            </v-list-item>
+            <v-list-item :disabled="!savedStream.receiverSelection" @click="receiveLatest">
+              <v-list-item-action class="mr-2">
+                <v-icon small>mdi-update</v-icon>
+              </v-list-item-action>
+              <v-list-item-content class="caption">Receive last selection</v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <!-- <span v-if="savedStream.receiverSelection">
+              {{ savedStream.receiverSelection.fullKeyName }}
+            </span> -->
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col class="align-self-center d-inline-flex">
+        <v-btn color="primary" small :disabled="!selection" class="mt-1" @click="send">
+          <v-img class="mr-2" width="30" height="30" src="../assets/SenderWhite@32.png" />
+
+          Send
+        </v-btn>
+
+        <v-text-field
+          v-model="message"
+          class="pt-0 mt-0 ml-3 caption"
+          placeholder="Data from Excel"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+<script>
+import { send, receiveLatest, bakeSchedule } from '../plugins/excel'
+import { getReferencedObject } from '../plugins/excel'
+
+let ac = new AbortController()
+
+export default {
+  props: {
+    stream: {
+      type: Object,
+      default: null
+    },
+    determinedConversion: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      error: null,
+      progress: false,
+      message: '',
+      viewer: null,
+      objectIds: null,
+      selectedBranchName: null,
+      selectedCommitId: null,
+      isReceiver: true,
+      selection: null,
+      hasHeaders: false,
+      receiverSelection: null
+    }
+  },
+  computed: {
+    serverUrl() {
+      return this.$store.getters.serverUrl
+    },
+    selectedBranch: {
+      get() {
+        if (!this.stream || !this.stream.branches) return null
+
+        let selectedBranchName = this.selectedBranchName ? this.selectedBranchName : 'main'
+        const index = this.stream.branches.items.findIndex((x) => x.name === selectedBranchName)
+        if (index > -1) return this.stream.branches.items[index]
+        return this.stream.branches.items[0]
+      },
+      set(value) {
+        this.selectedBranchName = value.name
+        this.$emit('loadByReferencedId', this.selectedBranch.commits.items[0].referencedObject)
+        this.$store.dispatch('updateStream', this.savedStream)
+      }
+    },
+    selectedCommit: {
+      get() {
+        if (!this.selectedBranch || !this.selectedBranch.commits) return null
+        var commit = null
+        //not set or latest, return first
+        if (!this.selectedCommitId || this.selectedCommitId === 'latest')
+          commit = this.selectedBranch.commits.items[0]
+        //try match by id
+        else {
+          const index = this.selectedBranch.commits.items.findIndex(
+            (x) => x.id === this.selectedCommitId
+          )
+          if (index > -1) commit = this.selectedBranch.commits.items[index]
+          else commit = this.selectedBranch.commits.items[0]
+        }
+        return commit
+      },
+      async set(value) {
+        const index = this.selectedBranch.commits.items.findIndex((x) => x.id === value.id)
+        this.selectedCommitId = value.id
+        this.$emit('loadByReferencedId', this.selectedBranch.commits.items[index].referencedObject)
+        this.$store.dispatch('updateStream', this.savedStream)
+      }
+    },
+    savedStream() {
+      return {
+        id: this.stream.Id,
+        isReceiver: this.isReceiver,
+        selection: this.selection,
+        hasHeaders: this.hasHeaders,
+        selectedBranchName: this.selectedBranchName,
+        selectedCommitId: this.selectedCommitId,
+        receiverSelection: this.receiverSelection
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.$emit('loadByReferencedId', this.selectedCommit.referencedObject)
+    })
+  },
+  methods: {
+    commitViewUrl() {
+      if (this.$store.state.isFE2) {
+        if (this.selectedCommit && this.selectedCommit.id) {
+          return `${this.serverUrl}/projects/${this.stream.id}/models/${this.selectedBranch.id}@${this.selectedCommit.id}`
+        } else {
+          return `${this.serverUrl}/projects/${this.stream.id}/models/${this.selectedBranch.id}`
+        }
+      } else {
+        return `${this.serverUrl}/streams/${this.stream.id}/branches/${this.selectedBranch.name}`
+      }
+    },
+    swapReceiver() {
+      this.isReceiver = !this.isReceiver
+      this.$emit('loadByCommitId', this.selectedCommitId)
+      this.$store.dispatch('updateStream', this.savedStream)
+      this.$mixpanel.track('Connector Action', { name: 'Stream Swap Receive/Send', type: 'action' })
+    },
+    async filterAndReceive() {
+      this.$store.dispatch('addStream', this.savedStream)
+      this.$router.push(`/streams/${this.stream.id}/commits/${this.selectedCommit.id}`)
+    },
+    async setRange(headers) {
+      await window.Excel.run(async (context) => {
+        let range = context.workbook.getSelectedRange()
+        range.load('address')
+
+        await context.sync()
+
+        this.selection = range.address
+        this.hasHeaders = headers
+        this.$store.dispatch('updateStream', this.savedStream)
+      })
+    },
+    clearSelection() {
+      this.selection = ''
+      this.$store.dispatch('updateStream', this.savedStream)
+    },
+    remove() {
+      this.$mixpanel.track('Connector Action', { name: 'Stream Remove' })
+      return this.$store.dispatch('removeStream', this.savedStream.id)
+    },
+    cancel() {
+      ac.abort()
+    },
+    async send() {
+      // these values need to be set to null or the models will not load
+      // when switching back to the receive mode
+      this.viewer = null
+      this.referencedObject = null
+      this.$store.dispatch('addStream', this.savedStream)
+
+      this.$mixpanel.track('Send')
+      send(this.savedStream, this.stream.id, this.selectedBranch.name, this.message)
+    },
+    async receiveDeterminedConversion() {
+      let data = await getReferencedObject(this.stream.id, this.selectedCommit.referencedObject, {})
+      let ac = new AbortController()
+      if (this.determinedConversion == 'Schedule') {
+        this.receiverSelection = await bakeSchedule(
+          data,
+          this.stream.id,
+          this.selectedCommit.id,
+          this.selectedCommit.message,
+          ac.signal,
+          null, // nearestObjectId,
+          null, // pathFromNearestObj,
+          null, // previousHeaders,
+          null // previousRange
+        )
+      } else {
+        this.$emit('clearDeterminedConversion')
+      }
+
+      if (this.receiverSelection) {
+        this.$store.dispatch('setReceiverSelection', {
+          id: this.stream.id,
+          receiverSelection: this.receiverSelection
+        })
+      }
+    },
+    async receiveLatest() {
+      this.$mixpanel.track('Receive')
+      ac = new AbortController()
+
+      console.log(this.receiverSelection)
+
+      this.progress = true
+      await receiveLatest(
+        this.selectedCommit.referencedObject,
+        this.stream.id,
+        this.selectedCommit.id,
+        this.selectedCommit.message,
+        this.receiverSelection,
+        ac.signal
+      )
+      this.progress = false
+    },
+    formatCommitName(id) {
+      if (this.selectedBranch.commits.items[0].id == id) {
+        console.log(id)
+        return 'latest'
+      }
+      return id
+    }
+  }
+}
+</script>
+<style>
+.stream-card-select .v-text-field__details {
+  display: none !important;
+}
+.v-btn .lower {
+  text-transform: none;
+}
+.floating {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 10px;
+}
+.background-light {
+  background: #8e9eab;
+  background: -webkit-linear-gradient(to top right, #eeeeee, #c8e8ff) !important;
+  background: linear-gradient(to top right, #ffffff, #c8e8ff) !important;
+}
+
+.background-dark {
+  background: #141e30;
+  background: -webkit-linear-gradient(to top left, #243b55, #141e30) !important;
+  background: linear-gradient(to top left, #243b55, #141e30) !important;
+}
+</style>

src/components/UserAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: inline-block">
+  <div v-if="otherUser && otherUser.name" style="display: inline-block">
     <v-menu v-if="loggedIn" offset-x open-on-hover>
       <template #activator="{ on, attrs }">
         <v-avatar class="ma-1" color="grey lighten-3" :size="size" v-bind="attrs" v-on="on">
@@ -14,12 +14,14 @@
             <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
           </v-avatar>
           <br />
-          <b>{{ user.name }}</b>
+          <b>{{ otherUser.name }}</b>
           <v-divider class="ma-4"></v-divider>
-          {{ user.company }}
+          {{ otherUser.company }}
           <br />
           {{
-            user.bio ? user.bio : 'This user prefers to keep an air of mystery around themselves.'
+            otherUser.bio
+              ? otherUser.bio
+              : 'This user prefers to keep an air of mystery around themselves.'
           }}
           <br />
         </v-card-text>
@@ -58,7 +60,7 @@ export default {
   },
   apollo: {
     $client: createClient(),
-    user: {
+    otherUser: {
       query: userQuery,
       variables() {
         return {
@@ -67,6 +69,9 @@ export default {
       },
       skip() {
         return !this.loggedIn
+      },
+      error(error) {
+        console.log('Could not get user', error)
       }
     }
   }

src/components/dialogs/CreateBranchDialog.vue

@@ -0,0 +1,122 @@
+<template>
+  <!-- DIALOG: Create Branch -->
+  <v-dialog v-model="showCreateBranch">
+    <template #activator="{ on: dialog, attrs }">
+      <v-btn
+        v-tooltip="'Create Branch'"
+        icon
+        x-small
+        class="ml-0 mr-1"
+        v-bind="attrs"
+        v-on="{ ...dialog }"
+      >
+        <v-icon>mdi-plus-circle</v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title class="text-h5 mb-1">
+        {{ `Create a New Model` }}
+      </v-card-title>
+      <v-card-subtitle class="py-0 my-0 font-italic">under {{ streamName }} stream</v-card-subtitle>
+      <v-container class="px-6" pb-0>
+        <v-text-field
+          v-model="branchName"
+          xxxclass="small-text-field"
+          hide-details
+          dense
+          flat
+          placeholder="Branch Name"
+        />
+        <v-text-field
+          v-model="description"
+          xxxclass="small-text-field"
+          hide-details
+          dense
+          flat
+          placeholder="Description (Optional)"
+        />
+      </v-container>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="showCreateBranch = false">Cancel</v-btn>
+        <v-btn :disabled="branchName === ''" color="blue darken-1" text @click="createBranch">
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { createClient } from '../../vue-apollo'
+// import { bus } from '@/main'
+export default {
+  name: 'CreateBranchDialog',
+  props: {
+    streamId: {
+      type: String,
+      default: null
+    },
+    streamName: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      showCreateBranch: false,
+      branchName: '',
+      description: '',
+      defaultDescription: 'Stream created from Excel',
+      accountToCreateStream: null
+    }
+  },
+  computed: {
+    loggedIn() {
+      if (!this.$store.state) return false
+      return this.$store.getters.isAuthenticated
+    }
+  },
+  apollo: {
+    client: createClient()
+  },
+  methods: {
+    async createBranch() {
+      let res = await this.$apollo.mutate({
+        mutation: gql`
+          mutation branchCreate($branch: BranchCreateInput!) {
+            branchCreate(branch: $branch)
+          }
+        `,
+        variables: {
+          branch: {
+            streamId: this.streamId,
+            name: this.branchName,
+            description: this.description === '' ? this.defaultDescription : this.description
+          }
+        }
+      })
+      // bus.$emit(`create-branch-${this.streamId}`, this.branchName)
+      this.showCreateBranch = false
+      this.branchName = ''
+      this.description = ''
+      this.$mixpanel.track('Connector Action', { name: 'Create Branch' })
+      return res
+    }
+  }
+}
+</script>
+
+<style>
+.v-dialog {
+  max-width: 390px;
+}
+.v-text-field >>> input {
+  font-size: 0.9em;
+}
+.v-text-field >>> label {
+  font-size: 0.9em;
+}
+</style>

src/components/dialogs/CreateStreamDialog.vue

@@ -0,0 +1,193 @@
+<template>
+  <v-container fluid class="px-1 pb-0 pt-1">
+    <v-row class="px-3 py-0">
+      <v-col class="d-flex justify-center pb-0">
+        <!-- DIALOG: Create New Stream -->
+        <v-dialog v-model="showCreateNewStream">
+          <template #activator="{ on, attrs }">
+            <v-btn block class="pa-3" small v-bind="attrs" v-on="on">
+              <v-icon dark left>mdi-plus-circle</v-icon>
+              {{ `Create New Project` }}
+            </v-btn>
+          </template>
+
+          <v-card>
+            <v-card-title class="text-h5">
+              {{ `Create New Project` }}
+            </v-card-title>
+            <v-container class="px-6" pb-0>
+              <v-text-field
+                v-model="streamName"
+                xxxclass="small-text-field"
+                hide-details
+                dense
+                flat
+                :placeholder="`Project Name (Optional)`"
+              />
+              <v-text-field
+                v-model="description"
+                xxxclass="small-text-field"
+                hide-details
+                dense
+                flat
+                placeholder="Description (Optional)"
+              />
+              <v-switch v-model="privateStream" label="Private Project"></v-switch>
+            </v-container>
+
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="blue darken-1" text @click="showCreateNewStream = false">Cancel</v-btn>
+              <v-btn color="blue darken-1" text @click="createStream">Create</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col class="d-flex justify-center">
+        <!-- DIALOG: Add a Stream by ID or URL -->
+        <v-dialog v-model="showCreateStreamById">
+          <template #activator="{ on, attrs }">
+            <v-btn block class="pa-3" small min-width="163" v-bind="attrs" v-on="on">
+              <v-icon dark left>mdi-link-plus</v-icon>
+              Add By ID or URL
+            </v-btn>
+          </template>
+
+          <v-card>
+            <v-card-title class="text-h5">
+              {{ `Add a Project by ID or URL` }}
+            </v-card-title>
+            <v-card-text>
+              {{ 'Project IDs and Project/Model/Version URLs are supported.' }}
+            </v-card-text>
+            <v-container class="px-6">
+              <v-text-field
+                v-model="createStreamByIdText"
+                xxxclass="small-text-field"
+                hide-details
+                dense
+                flat
+                :placeholder="'Project URL'"
+              />
+            </v-container>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="blue darken-1" text @click="showCreateStreamById = false">Cancel</v-btn>
+              <v-btn
+                :disabled="createStreamByIdText === ''"
+                color="blue darken-1"
+                text
+                @click="getStream"
+              >
+                Add
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { StreamWrapper } from '@/utils/streamWrapper'
+import { createClient } from '../../vue-apollo'
+
+export default {
+  name: 'CreateStreamDialog',
+  props: {
+    accountId: {
+      type: String,
+      default: null
+    },
+    serverUrl: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      showCreateNewStream: false,
+      showCreateStreamById: false,
+      createStreamByIdText: '',
+      privateStream: false,
+      streamName: '',
+      description: '',
+      defaultDescription: 'Stream created from Excel',
+      accountToCreateStream: null,
+      streamId: ''
+    }
+  },
+  computed: {
+    loggedIn() {
+      if (!this.$store.state) return false
+      return this.$store.getters.isAuthenticated
+    }
+  },
+  apollo: {
+    $client: createClient()
+  },
+  methods: {
+    async getStream() {
+      try {
+        const streamWrapper = new StreamWrapper(
+          this.createStreamByIdText,
+          this.accountId,
+          this.serverUrl,
+          this.$store.state.isFE2
+        )
+        const match = streamWrapper.matchUrl(this.createStreamByIdText)
+        if (match.groups.additionalModels !== undefined) {
+          this.$eventHub.$emit('error', {
+            text:
+              'Multi-model URLs are not supported!\nTry to select just one single model in the web app and paste that in.'
+          })
+          return
+        }
+        this.$router.push(`/streams/${streamWrapper.streamId}/${streamWrapper.commitId}`)
+      } catch (e) {
+        console.log(e)
+      }
+      this.showCreateStreamById = false
+    },
+    async createStream() {
+      let res = await this.$apollo.mutate({
+        mutation: gql`
+          mutation streamCreate($stream: StreamCreateInput!) {
+            streamCreate(stream: $stream)
+          }
+        `,
+        variables: {
+          stream: {
+            name: this.streamName,
+            description: this.description === '' ? this.defaultDescription : this.description,
+            isPublic: !this.privateStream
+          }
+        }
+      })
+      this.showCreateNewStream = false
+      this.streamName = ''
+      this.description = ''
+      this.$mixpanel.track('Connector Action', { name: 'Create Stream' })
+      return res
+    }
+  }
+}
+</script>
+
+<style>
+.center-content {
+  display: flex;
+  justify-content: center;
+}
+.v-dialog {
+  max-width: 390px;
+}
+.v-text-field >>> input {
+  font-size: 0.9em;
+}
+.v-text-field >>> label {
+  font-size: 0.9em;
+}
+</style>

src/graphql/stream.gql

@@ -1,9 +1,9 @@
-query Stream($id: String!) {
+query Stream($id: String!, $limit: Int!) {
   stream(id: $id) {
     id
     name
     role
-    branches {
+    branches (limit: $limit) {
       totalCount
       items {
         id

src/graphql/userById.gql

@@ -1,7 +1,6 @@
-query User($id: String!) {
-  user(id: $id) {
+query LimitedUser($id: String!) {
+  otherUser(id: $id) {
     id
-    email
     name
     bio
     company

src/main.js

@@ -4,6 +4,9 @@ import router from './router'
 import store from './store'
 import { apolloProvider } from './vue-apollo'
 import vuetify from './plugins/vuetify'
+import '@mdi/font/css/materialdesignicons.css'
+
+Vue.prototype.$eventHub = new Vue()
 
 Vue.config.productionTip = false
 

src/plugins/BaseObjectSerializer.js

@@ -0,0 +1,137 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.SerializedBase = exports.ObjectReference = exports.DataChunk = exports.BaseObjectSerializer = void 0
+/* eslint-disable @typescript-eslint/ban-types */
+const crypto_js_1 = require('crypto-js')
+/**
+ * Serializer for Speckle objects written in Typescript
+ */
+class BaseObjectSerializer {
+  constructor(transports) {
+    this.transports = transports
+  }
+  async SerializeBase(object) {
+    return await this.SerializeBaseWithClosures(object, [])
+  }
+  async SerializeBaseWithClosures(object, closures) {
+    const thisClosure = new Map()
+    closures.push(thisClosure)
+    const converted = await this.PreserializeEachObjectProperty(object, closures)
+    let json = this.SerializeMap(converted)
+    const id = this.GetId(json)
+    converted.set('id', id)
+    this.AddSelfToParentClosures(id, closures)
+    if (thisClosure.size > 0) {
+      converted.set('__closure', Object.fromEntries(thisClosure))
+    }
+    converted.set('totalChildrenCount', thisClosure.size)
+    json = this.SerializeMap(converted)
+    await this.StoreObject(id, converted)
+    return new SerializedBase(id, json)
+  }
+  async PreserializeObject(object, closures) {
+    if (!(object instanceof Object) || object instanceof String) {
+      return object
+    }
+    if (object instanceof DataChunk) {
+      const serialized = await this.SerializeBaseWithClosures(object, [...closures])
+      return new ObjectReference(serialized.id)
+    }
+    if (object instanceof Array) {
+      // chunk array into 5000 by default
+      const chunkSize = 5000
+      if (object.length > chunkSize) {
+        let serializedCount = 0
+        const data = new Array()
+        while (serializedCount < object.length) {
+          const dataChunkCount = Math.min(chunkSize, object.length - serializedCount)
+          data.push(new DataChunk(object.slice(serializedCount, serializedCount + dataChunkCount)))
+          serializedCount += dataChunkCount
+        }
+        return await this.PreserializeObject(data, closures)
+      }
+      const convertedList = new Array()
+      for (const element of object) {
+        convertedList.push(await this.PreserializeObject(element, closures))
+      }
+      return convertedList
+    }
+    if (object instanceof Object) {
+      return Object.fromEntries(await this.PreserializeEachObjectProperty(object, closures))
+    }
+    throw new Error(`Cannot serialize object ${object}`)
+  }
+  async PreserializeEachObjectProperty(o, closures) {
+    const converted = new Map()
+    const getters = Object.entries(Object.getOwnPropertyDescriptors(Reflect.getPrototypeOf(o)))
+      .filter(([key, descriptor]) => typeof descriptor.get === 'function' && key !== '__proto__')
+      .map(([key]) => key)
+    const objectKeys = new Array()
+    objectKeys.push(...Object.keys(o))
+    objectKeys.push(...getters)
+    for (const key of objectKeys) {
+      const objKey = key
+      converted.set(
+        BaseObjectSerializer.CleanKey(key),
+        await this.PreserializeObject(o[objKey], closures)
+      )
+    }
+    return converted
+  }
+  static CleanKey(originalKey) {
+    const newStringChars = []
+    for (let i = 0; i < originalKey.length; i++) {
+      if (i == 1 && originalKey[i] == '@' && originalKey[0] == '@') {
+        continue
+      }
+      if (this.disallowedCharacters.includes(originalKey[i])) {
+        continue
+      }
+      newStringChars.push(originalKey[i])
+    }
+    return newStringChars.join('')
+  }
+  async StoreObject(objectId, object) {
+    for (const transport of this.transports) {
+      await transport.SaveObject(objectId, object)
+    }
+  }
+  SerializeMap(map) {
+    return JSON.stringify(Object.fromEntries(map))
+  }
+  GetId(json) {
+    return (0, crypto_js_1.MD5)(json).toString(crypto_js_1.enc.Hex)
+  }
+  AddSelfToParentClosures(objectId, closureTables) {
+    // only go to closureTable length - 1 because the last closure table belongs to the object with the
+    // provided id
+    const parentClosureTablesCount = closureTables.length - 1
+    for (let parentLevel = 0; parentLevel < parentClosureTablesCount; parentLevel++) {
+      const childDepth = parentClosureTablesCount - parentLevel
+      closureTables[parentLevel].set(objectId, childDepth)
+    }
+  }
+}
+exports.BaseObjectSerializer = BaseObjectSerializer
+BaseObjectSerializer.disallowedCharacters = ['.', '/']
+class DataChunk {
+  constructor(data) {
+    this.speckle_type = 'Speckle.Core.Models.DataChunk'
+    this.data = data ?? []
+  }
+}
+exports.DataChunk = DataChunk
+class ObjectReference {
+  constructor(referencedId) {
+    this.referencedId = referencedId
+    this.speckle_type = 'reference'
+  }
+}
+exports.ObjectReference = ObjectReference
+class SerializedBase {
+  constructor(id, json) {
+    this.id = id
+    this.json = json
+  }
+}
+exports.SerializedBase = SerializedBase

src/plugins/BaseObjectSerializer.ts

@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { MD5, enc } from 'crypto-js'
+
+/**
+ * Serializer for Speckle objects written in Typescript
+ */
+export class BaseObjectSerializer {
+  constructor(public transports: ITransport[]) {}
+
+  public async SerializeBase(object: object): Promise<SerializedBase> {
+    return await this.SerializeBaseWithClosures(object, [])
+  }
+
+  private async SerializeBaseWithClosures(object: object, closures: Array<Map<string, number>>) {
+    const thisClosure = new Map<string, number>()
+    closures.push(thisClosure)
+
+    const converted = await this.PreserializeEachObjectProperty(object, closures)
+    let json = this.SerializeMap(converted)
+    const id = this.GetId(json)
+    converted.set('id', id)
+
+    this.AddSelfToParentClosures(id, closures)
+    if (thisClosure.size > 0) {
+      converted.set('__closure', Object.fromEntries(thisClosure))
+    }
+    converted.set('totalChildrenCount', thisClosure.size)
+
+    json = this.SerializeMap(converted)
+    await this.StoreObject(id, converted)
+    return new SerializedBase(id, json)
+  }
+
+  private async PreserializeObject(
+    object: any,
+    closures: Array<Map<string, number>>
+  ): Promise<any> {
+    if (!(object instanceof Object) || object instanceof String) {
+      return object
+    }
+
+    if (object instanceof DataChunk) {
+      const serialized = await this.SerializeBaseWithClosures(object, [...closures])
+      return new ObjectReference(serialized.id)
+    }
+
+    if (object instanceof Array) {
+      // chunk array into 5000 by default
+      const chunkSize = 5000
+      if (object.length > chunkSize) {
+        let serializedCount = 0
+        const data = new Array<DataChunk>()
+        while (serializedCount < object.length) {
+          const dataChunkCount = Math.min(chunkSize, object.length - serializedCount)
+          data.push(new DataChunk(object.slice(serializedCount, serializedCount + dataChunkCount)))
+          serializedCount += dataChunkCount
+        }
+        return await this.PreserializeObject(data, closures)
+      }
+
+      const convertedList = new Array<any>()
+      for (const element of object) {
+        convertedList.push(await this.PreserializeObject(element, closures))
+      }
+      return convertedList
+    }
+
+    if (object instanceof Object) {
+      return Object.fromEntries(await this.PreserializeEachObjectProperty(object, closures))
+    }
+
+    throw new Error(`Cannot serialize object ${object}`)
+  }
+
+  private async PreserializeEachObjectProperty(
+    o: object,
+    closures: Array<Map<string, number>>
+  ): Promise<Map<string, any>> {
+    const converted = new Map<string, any>()
+
+    const getters = Object.entries(Object.getOwnPropertyDescriptors(Reflect.getPrototypeOf(o)))
+      .filter(([key, descriptor]) => typeof descriptor.get === 'function' && key !== '__proto__')
+      .map(([key]) => key)
+
+    const objectKeys = new Array<string>()
+    objectKeys.push(...Object.keys(o))
+    objectKeys.push(...getters)
+
+    for (const key of objectKeys) {
+      const objKey = key as keyof object
+      converted.set(
+        BaseObjectSerializer.CleanKey(key),
+        await this.PreserializeObject(o[objKey], closures)
+      )
+    }
+
+    return converted
+  }
+
+  private static disallowedCharacters: string[] = ['.', '/']
+  private static CleanKey(originalKey: string): string {
+    const newStringChars = []
+    for (let i = 0; i < originalKey.length; i++) {
+      if (i == 1 && originalKey[i] == '@' && originalKey[0] == '@') {
+        continue
+      }
+      if (this.disallowedCharacters.includes(originalKey[i])) {
+        continue
+      }
+
+      newStringChars.push(originalKey[i])
+    }
+    return newStringChars.join('')
+  }
+
+  private async StoreObject(objectId: string, object: Map<string, any>) {
+    for (const transport of this.transports) {
+      await transport.SaveObject(objectId, object)
+    }
+  }
+
+  private SerializeMap(map: Map<string, any>): string {
+    return JSON.stringify(Object.fromEntries(map))
+  }
+
+  private GetId(json: string): string {
+    return MD5(json).toString(enc.Hex)
+  }
+
+  private AddSelfToParentClosures(objectId: string, closureTables: Array<Map<string, number>>) {
+    // only go to closureTable length - 1 because the last closure table belongs to the object with the
+    // provided id
+    const parentClosureTablesCount = closureTables.length - 1
+
+    for (let parentLevel = 0; parentLevel < parentClosureTablesCount; parentLevel++) {
+      const childDepth = parentClosureTablesCount - parentLevel
+      closureTables[parentLevel].set(objectId, childDepth)
+    }
+  }
+}
+
+export class DataChunk implements IBase {
+  public speckle_type = 'Speckle.Core.Models.DataChunk'
+  public data: any[]
+  constructor(data: any[] | null) {
+    this.data = data ?? []
+  }
+}
+
+export class ObjectReference implements IBase {
+  public speckle_type = 'reference'
+
+  constructor(public referencedId: string) {}
+}
+
+export interface IBase {
+  readonly speckle_type: string
+}
+
+export interface ITransport {
+  SaveObject(id: string, object: Map<string, any>): Promise<void>
+}
+
+export class SerializedBase {
+  constructor(public id: string, public json: string) {}
+}

src/plugins/ExcelSheetDataRetreiver.js

@@ -0,0 +1,33 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ExcelSheetDataRetriever = void 0
+class ExcelSheetDataRetriever {
+  // Takes address as a string formatted like this 'Sheet1!A1:B4' and returns a 2d array of values.
+  // This queries the document in batches in order to avoid api errors about requests that are too large
+  static async GetValuesAsNestedList(context, address) {
+    const sheetName = address.split('!')[0].replace(/'/g, '')
+    const rangeAddress = address.split('!')[1]
+    const sheet = context.workbook.worksheets.getItem(sheetName)
+    const totalRange = sheet.getRange(rangeAddress)
+    totalRange.load('columnCount, columnIndex, rowCount, rowIndex')
+    await context.sync()
+    let numRowsRetrieved = 0
+    const chunkSize = 5000
+    let values = []
+    while (numRowsRetrieved < totalRange.rowCount) {
+      const numRowsToRetrieve = Math.min(chunkSize, totalRange.rowCount - numRowsRetrieved)
+      const currentRange = sheet.getRangeByIndexes(
+        totalRange.rowIndex + numRowsRetrieved,
+        totalRange.columnIndex,
+        numRowsToRetrieve,
+        totalRange.columnCount
+      )
+      currentRange.load('values')
+      await context.sync()
+      values = values.concat(currentRange.values)
+      numRowsRetrieved += numRowsToRetrieve
+    }
+    return values
+  }
+}
+exports.ExcelSheetDataRetriever = ExcelSheetDataRetriever

src/plugins/ExcelSheetDataRetreiver.ts

@@ -0,0 +1,37 @@
+export class ExcelSheetDataRetriever {
+  // Takes address as a string formatted like this 'Sheet1!A1:B4' and returns a 2d array of values.
+  // This queries the document in batches in order to avoid api errors about requests that are too large
+  static async GetValuesAsNestedList(
+    context: Excel.RequestContext,
+    address: string
+  ): Promise<any[][]> {
+    const sheetName = address.split('!')[0].replace(/'/g, '')
+    const rangeAddress = address.split('!')[1]
+    const sheet = context.workbook.worksheets.getItem(sheetName)
+
+    const totalRange = sheet.getRange(rangeAddress)
+    totalRange.load('columnCount, columnIndex, rowCount, rowIndex')
+    await context.sync()
+
+    let numRowsRetrieved = 0
+    const chunkSize = 5000
+    let values: any[][] = []
+
+    while (numRowsRetrieved < totalRange.rowCount) {
+      const numRowsToRetrieve = Math.min(chunkSize, totalRange.rowCount - numRowsRetrieved)
+      const currentRange = sheet.getRangeByIndexes(
+        totalRange.rowIndex + numRowsRetrieved,
+        totalRange.columnIndex,
+        numRowsToRetrieve,
+        totalRange.columnCount
+      )
+      currentRange.load('values')
+      await context.sync()
+      values = values.concat(currentRange.values)
+
+      numRowsRetrieved += numRowsToRetrieve
+    }
+
+    return values
+  }
+}

src/plugins/ServerTransport.js

@@ -0,0 +1,57 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ServerTransport = void 0
+class ServerTransport {
+  /**
+   *
+   */
+  constructor(serverUrl, token, streamId) {
+    this.serverUrl = serverUrl
+    this.token = token
+    this.streamId = streamId
+  }
+  async SaveObject(id, map) {
+    const query = `mutation objectCreate ($object: ObjectCreateInput!) {objectCreate(objectInput: $object)}`
+    await fetch(`${this.serverUrl}/graphql`, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Bearer ' + this.token,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: query,
+        variables: {
+          object: {
+            streamId: this.streamId,
+            objects: [Object.fromEntries(map)]
+          }
+        }
+      })
+    })
+    // const data = (await response.json()) as any
+  }
+  async CreateCommit(branchName, objectId, message) {
+    const query = `mutation commitCreate($myCommit: CommitCreateInput!){ commitCreate(commit: $myCommit)}`
+    await fetch(`${this.serverUrl}/graphql`, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Bearer ' + this.token,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: query,
+        variables: {
+          myCommit: {
+            streamId: this.streamId,
+            branchName: branchName,
+            objectId: objectId,
+            message: message ? message : 'Data from Excel',
+            sourceApplication: 'excel'
+          }
+        }
+      })
+    })
+    // const data = (await response.json()) as any
+  }
+}
+exports.ServerTransport = ServerTransport

src/plugins/ServerTransport.ts

@@ -0,0 +1,57 @@
+import { ITransport } from './BaseObjectSerializer'
+
+export class ServerTransport implements ITransport {
+  /**
+   *
+   */
+  constructor(private serverUrl: string, private token: string, private streamId: string) {}
+
+  async SaveObject(id: string, map: Map<string, any>): Promise<void> {
+    const query = `mutation objectCreate ($object: ObjectCreateInput!) {objectCreate(objectInput: $object)}`
+
+    await fetch(`${this.serverUrl}/graphql`, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Bearer ' + this.token,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: query,
+        variables: {
+          object: {
+            streamId: this.streamId,
+            objects: [Object.fromEntries(map)]
+          }
+        }
+      })
+    })
+
+    // const data = (await response.json()) as any
+  }
+
+  async CreateCommit(branchName: string, objectId: string, message: string | null) {
+    const query = `mutation commitCreate($myCommit: CommitCreateInput!){ commitCreate(commit: $myCommit)}`
+
+    await fetch(`${this.serverUrl}/graphql`, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Bearer ' + this.token,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        query: query,
+        variables: {
+          myCommit: {
+            streamId: this.streamId,
+            branchName: branchName,
+            objectId: objectId,
+            message: message ? message : 'Data from Excel',
+            sourceApplication: 'excel'
+          }
+        }
+      })
+    })
+
+    // const data = (await response.json()) as any
+  }
+}

src/plugins/dataTable.js

@@ -0,0 +1,463 @@
+// eslint-disable-next-line no-unused-vars
+import {
+  bakeTable,
+  bakeArray,
+  hideRowOrColumn,
+  removeNonAlphanumericCharacters,
+  getIndiciesFromRangeAddress
+} from './excel'
+export const tableName = 'SpeckleDataTable'
+
+export function checkIfReceivingDataTable(item) {
+  if (!Array.isArray(item)) {
+    return checkIfSingleDataTable(item)
+  }
+
+  if (item.length < 1) {
+    return false
+  }
+
+  //it's a flat list
+  else if (!Array.isArray(item[0])) {
+    return checkIfSingleDataTable(item[0])
+  }
+}
+
+function checkIfSingleDataTable(item) {
+  if (!(item.speckle_type && item.speckle_type.split('.').at(-1) == 'DataTable')) {
+    return false
+  }
+  return true
+}
+
+export function formatArrayDataForTable(item, arrayData) {
+  // TODO: support receiving multiple tables
+  if (Array.isArray(item)) {
+    item = item[0]
+  }
+
+  arrayData[0].push('SpeckleColumnMetadataRow')
+  for (let i = 0; i < item.columnCount; i++) {
+    arrayData[0].push(JSON.stringify(item.columnMetadata[i]))
+  }
+
+  for (let i = 0; i < item.rowCount; i++) {
+    let row = []
+    row.push(JSON.stringify(item.rowMetadata[i]))
+    row.push(...item.data[i])
+    arrayData.push(row)
+  }
+}
+
+export async function bakeDataTable(item, arrayData, context, sheet, rowStart, colStart) {
+  // TODO: support receiving multiple tables
+  if (Array.isArray(item)) {
+    item = item[0]
+  }
+
+  var tableToUpdate = await getExistingTableInLocation(context, sheet, rowStart, colStart)
+  if (tableToUpdate) {
+    let existingAppId = await getSpeckleIdFromTable(tableToUpdate, sheet, context)
+    if (existingAppId != item.applicationId) {
+      throw new Error('Trying receive a datatable where a different datatable already exists')
+    }
+
+    let indicies = await getMetadataIndex(tableToUpdate, sheet, context)
+    if (indicies[0] != -1 && indicies[1] != -1) {
+      rowStart = indicies[0]
+      colStart = indicies[1]
+
+      await cleanUpTableMetadata(tableToUpdate.id, context)
+      tableToUpdate.delete()
+    }
+  }
+
+  // add one to headerRowIndex because we've added the column metadata as a new first row
+  let headerRowIndex = 1
+  if (item.headerRowIndex) {
+    headerRowIndex = item.headerRowIndex + 1
+  }
+  let name = 'DataTable'
+  if (item.name) {
+    name = item.name
+  }
+  hideRowOrColumn(sheet, colStart, rowStart)
+  await bakeArray(arrayData.splice(0, headerRowIndex), rowStart, colStart, context)
+
+  // set table applicationId in the top left cell
+  arrayData[0][0] = `{"id":"","speckle_type":"Objects.Organization.DataTable","applicationId":"${item.applicationId}","totalChildrenCount":0}`
+  await bakeTable(arrayData, context, sheet, name, rowStart, colStart, headerRowIndex)
+  greyOutReadOnlyColumns(
+    item.columnMetadata,
+    rowStart + 1 + headerRowIndex,
+    colStart + 1,
+    arrayData.length - 1,
+    sheet,
+    context
+  )
+}
+
+async function getExistingTableInLocation(context, sheet, rowStart, colStart) {
+  let range = sheet.getRangeByIndexes(rowStart, colStart, 1, 1)
+  var speckleTableContainingRange = await getDataTableContainingRange(range, sheet, context)
+  if (!speckleTableContainingRange) {
+    return null
+  }
+  return speckleTableContainingRange
+}
+
+async function getSpeckleIdFromTable(table, sheet, context) {
+  let range = table.getRange()
+  range.load('rowIndex, columnIndex')
+  await context.sync()
+
+  let firstCell = sheet.getRangeByIndexes(range.rowIndex, range.columnIndex, 1, 1)
+  firstCell.load('values')
+  await context.sync()
+
+  let appIdObj = JSON.parse(firstCell.values[0][0])
+  return appIdObj.applicationId
+}
+
+async function getMetadataIndex(table, sheet, context) {
+  table.load('id')
+  await context.sync()
+  let tableId = removeNonAlphanumericCharacters(table.id)
+  let speckleRowMeta = sheet.names.getItemOrNullObject(`speckleRowMetadata_${tableId}`)
+  await context.sync()
+  if (speckleRowMeta.isNullObject) {
+    return [-1, -1]
+  }
+
+  let speckleRowMetaRange = speckleRowMeta.getRange()
+  speckleRowMetaRange.load('columnIndex, rowIndex')
+  await context.sync()
+
+  return [speckleRowMetaRange.rowIndex, speckleRowMetaRange.columnIndex]
+}
+
+export async function getDataTableContainingRange(range, sheet, context) {
+  let selectedTable = null
+  sheet.tables.load('count')
+  await context.sync()
+
+  for (let i = 0; i < sheet.tables.count; i++) {
+    let table = sheet.tables.getItemAt(i)
+    let tableMetataIndicies = await getMetadataIndex(table, sheet, context)
+
+    if (tableMetataIndicies[0] == -1 && tableMetataIndicies[1] == -1) {
+      continue
+    }
+
+    let tableRange = table.getRange()
+    tableRange.load('address')
+    range.load('address')
+    await context.sync()
+
+    let tableRangeIndicies = getIndiciesFromRangeAddress(tableRange.address)
+    let rangeIndicies = getIndiciesFromRangeAddress(range.address)
+    if (
+      // sorry these indicies don't cooperate very well. Get metadata index return [rowindex, colindex]
+      // while getIndiciesFromRangeAddress return indicies as excel addresses display them [colindex, rowindex, endcolindex, endRowIndex]
+      tableMetataIndicies[0] <= rangeIndicies[1] &&
+      tableMetataIndicies[1] <= rangeIndicies[0] &&
+      tableRangeIndicies[3] >= rangeIndicies[3] &&
+      tableRangeIndicies[2] >= rangeIndicies[2]
+    ) {
+      selectedTable = sheet.tables.getItemAt(i)
+      break
+    } else {
+      console.log(
+        "Are you trying to send a data table? Make sure your selection doesn't extended beyond the table"
+      )
+    }
+  }
+
+  if (selectedTable == null) {
+    return null
+  }
+
+  const isDataTable = await isSpeckleDataTable(selectedTable, sheet, context)
+  if (selectedTable && isDataTable) {
+    return selectedTable
+  }
+
+  return null
+}
+
+async function isSpeckleDataTable(table, sheet, context) {
+  let tableRange = table.getRange()
+  tableRange.load('rowIndex, columnIndex')
+  await context.sync()
+  // let tableRangeAddress = tableRange.address
+  // let rangeIndicies = getIndiciesFromRangeAddress(tableRangeAddress)
+  // let firstCellRange = sheet.getRangeByIndexes(rangeIndicies[1], rangeIndicies[0], 1, 1)
+  let firstCellRange = sheet.getRangeByIndexes(tableRange.rowIndex, tableRange.columnIndex, 1, 1)
+
+  firstCellRange.load('values')
+  await context.sync()
+
+  if (firstCellRange.values[0][0].includes('Objects.Organization.DataTable')) {
+    return true
+  }
+  return false
+}
+
+async function greyOutReadOnlyColumns(
+  columnMetadata,
+  rowStartIndex,
+  colStartIndex,
+  rowCount,
+  sheet,
+  context
+) {
+  for (let i = 0; i < columnMetadata.length; i++) {
+    if (columnMetadata[i].IsReadOnly) {
+      let range = sheet.getRangeByIndexes(rowStartIndex, colStartIndex + i, rowCount, 1)
+      range.format.fill.color = '#AEAAAA'
+    }
+  }
+
+  await context.sync()
+}
+
+export async function BuildDataTableObject(sendingRange, values, table, sheet, context) {
+  let metaRowIndex = await GetColumnMetadataRowIndex(table, sheet, context)
+  let metaColIndex = await GetRowMetadataColumnIndex(table, context)
+
+  let speckleTable = new DataTable()
+  speckleTable.applicationId = await GetTableApplicationId(table, context)
+
+  sendingRange.load('rowIndex, columnIndex, rowCount, columnCount')
+  await context.sync()
+
+  let metaRowRange = sheet.getRangeByIndexes(
+    metaRowIndex,
+    sendingRange.columnIndex,
+    1,
+    sendingRange.columnCount
+  )
+  let metaColumnRange = sheet.getRangeByIndexes(
+    sendingRange.rowIndex,
+    metaColIndex,
+    sendingRange.rowCount,
+    1
+  )
+
+  metaRowRange.load('values')
+  metaColumnRange.load('values')
+  await context.sync()
+
+  var rangeColumnStart = 0
+  if (sendingRange.columnIndex == metaColIndex) {
+    rangeColumnStart = 1
+  }
+
+  for (let i = rangeColumnStart; i < sendingRange.columnCount; i++) {
+    speckleTable.defineColumn(JSON.parse(metaRowRange.values[0][i]))
+  }
+
+  for (let i = 0; i < sendingRange.rowCount; i++) {
+    speckleTable.addRow(JSON.parse(metaColumnRange.values[i][0]), values[i].slice(rangeColumnStart))
+  }
+
+  return speckleTable
+}
+
+export async function GetColumnMetadataRowIndex(table, sheet, context) {
+  let tableRange = table.getRange()
+  tableRange.load('columnCount, columnIndex, rowCount, rowIndex')
+  await context.sync()
+
+  let extendedRowIndex = Math.max(0, tableRange.rowIndex - 5)
+
+  let possibleMetadataRowRange = sheet.getRangeByIndexes(
+    extendedRowIndex,
+    tableRange.columnIndex,
+    tableRange.rowIndex - extendedRowIndex,
+    tableRange.columnCount
+  )
+
+  return await findMetadataRowIndex(possibleMetadataRowRange, context)
+}
+
+async function findMetadataRowIndex(range, context) {
+  var found = range.findOrNullObject('SpeckleColumnMetadataRow', {
+    completeMatch: false, // Match the whole cell value.
+    matchCase: true, // Don't match case.
+    searchDirection: window.Excel.SearchDirection.forward // Start search at the beginning of the range.
+  })
+  found.load('rowIndex')
+  await context.sync()
+  if (found.isNullObject) {
+    found = range.findOrNullObject('speckle_type', {
+      completeMatch: false, // Match the whole cell value.
+      matchCase: true, // Match case.
+      searchDirection: window.Excel.SearchDirection.forward // Start search at the beginning of the range.
+    })
+    found.load('rowIndex')
+    await context.sync()
+  }
+
+  if (found.isNullObject) {
+    throw new Error('Could not find column metadata')
+  }
+
+  return found.rowIndex
+}
+
+export async function GetRowMetadataColumnIndex(table, context) {
+  let tableRange = table.getRange()
+  tableRange.load('columnIndex, rowCount, rowIndex')
+  await context.sync()
+
+  return tableRange.columnIndex
+}
+
+async function GetTableApplicationId(table, context) {
+  const headerRange = table.getHeaderRowRange()
+  headerRange.load('values')
+  await context.sync()
+
+  const tableMetadata = JSON.parse(headerRange.values[0][0])
+  if (!tableMetadata.hasOwnProperty('applicationId'))
+    throw new Error('Cannot find TableApplicationId in table header metadata')
+
+  return tableMetadata.applicationId
+}
+
+export async function onTableChanged(eventArgs) {
+  if (eventArgs.changeType != 'ColumnDeleted') {
+    return
+  }
+  await window.Excel.run(async (context) => {
+    const tableId = removeNonAlphanumericCharacters(eventArgs.tableId)
+    let sheet = context.workbook.worksheets.getActiveWorksheet()
+    let speckleRowMeta = sheet.names.getItemOrNullObject(`speckleRowMetadata_${tableId}`)
+    await context.sync()
+    if (speckleRowMeta.isNullObject) {
+      console.log('speckle row metadata was null')
+      return
+    }
+    let table = sheet.tables.getItem(eventArgs.tableId)
+    let tableRange = table.getRange()
+
+    let speckleRowMetaRange = speckleRowMeta.getRange()
+    speckleRowMetaRange.load('columnIndex')
+    tableRange.load('columnCount, columnIndex')
+    await context.sync()
+
+    if (tableRange.columnCount == 1 && tableRange.columnIndex == speckleRowMetaRange.columnIndex) {
+      let speckleColumnMeta = sheet.names.getItemOrNullObject(`speckleColumnMetadata_${tableId}`)
+      await deleteMetadata(speckleRowMeta, false, context)
+      await deleteMetadata(speckleColumnMeta, true, context)
+    }
+  })
+}
+export async function onTableDeleted(eventArgs) {
+  await window.Excel.run(async (context) => {
+    await cleanUpTableMetadata(eventArgs.tableId, context)
+  })
+}
+
+async function cleanUpTableMetadata(originalTableId, context) {
+  const tableId = removeNonAlphanumericCharacters(originalTableId)
+  let sheet = context.workbook.worksheets.getActiveWorksheet()
+  let speckleColumnMeta = sheet.names.getItemOrNullObject(`speckleColumnMetadata_${tableId}`)
+  let speckleRowMeta = sheet.names.getItemOrNullObject(`speckleRowMetadata_${tableId}`)
+  await context.sync()
+
+  // warning: must delete rowMetadata (which is actually a column) before deleting the colMetadata
+  await deleteMetadata(speckleRowMeta, false, context)
+  await deleteMetadata(speckleColumnMeta, true, context)
+}
+
+async function deleteMetadata(namedRange, isRow, context) {
+  if (namedRange.isNullObject) {
+    return
+  }
+
+  let speckleMetaRange = namedRange.getRange()
+
+  try {
+    await findMetadataRowIndex(speckleMetaRange, context)
+  } catch {
+    console.log('speckle metadata doesnt exist in this range anymore')
+    return
+  }
+
+  if (isRow) {
+    speckleMetaRange.load('rowHidden')
+    await context.sync()
+
+    if (speckleMetaRange.rowHidden) {
+      speckleMetaRange.getEntireRow().delete('Up')
+    } else {
+      speckleMetaRange.clear('Contents')
+    }
+  } else {
+    speckleMetaRange.load('columnHidden')
+    await context.sync()
+
+    if (speckleMetaRange.columnHidden) {
+      speckleMetaRange.getEntireColumn().delete('Left')
+    } else {
+      speckleMetaRange.clear('Contents')
+    }
+  }
+
+  namedRange.delete()
+}
+
+class Base {
+  id
+  totalChildrenCount
+  applicationId
+}
+
+export class DataTable extends Base {
+  get columnCount() {
+    return this.columnMetadata.length
+  }
+  get rowCount() {
+    return this.rowMetadata.length
+  }
+  // eslint-disable-next-line camelcase
+  get speckle_type() {
+    return 'Objects.Organization.DataTable'
+  }
+  headerRowIndex
+  columnMetadata = []
+  rowMetadata = []
+  data = []
+
+  addRow(metadata, objects) {
+    if (objects.length != this.columnCount)
+      throw new Error(
+        `object length of ${objects.length} does not match the column count, ${this.columnCount}`
+      )
+    this.rowMetadata.push(metadata)
+    this.data.push(objects)
+  }
+
+  defineColumn(metadata) {
+    this.columnMetadata.push(metadata)
+  }
+
+  toJSON() {
+    const jsonObj = Object.assign({}, this)
+    const proto = Object.getPrototypeOf(this)
+    for (const key of Object.getOwnPropertyNames(proto)) {
+      const desc = Object.getOwnPropertyDescriptor(proto, key)
+      const hasGetter = desc && typeof desc.get === 'function'
+      if (hasGetter) {
+        jsonObj[key] = this[key]
+      }
+    }
+    return jsonObj
+  }
+}
+
+// export function checkIfSendingDataTable(item, arrayData) {
+
+// }

src/plugins/excel.js

@@ -1,35 +1,58 @@
 /* eslint-disable no-unreachable */
 import flatten from 'flat'
 import store from '../store/index.js'
+import { MD5, enc } from 'crypto-js'
+import {
+  checkIfReceivingDataTable,
+  getDataTableContainingRange,
+  bakeDataTable,
+  formatArrayDataForTable,
+  BuildDataTableObject,
+  onTableChanged,
+  onTableDeleted
+} from './dataTable.js'
+import { ExcelSheetDataRetriever } from './ExcelSheetDataRetreiver.js'
 
 const unflatten = require('flat').unflatten
 
-let ignoreEndsWithProps = ['id', 'totalChildrenCount']
+let ignoreEndsWithProps = ['totalChildrenCount', 'elements']
 
-let streamId, sheet, rowStart, colStart, arrayData, isTabularData
-let headerIndices = []
+let displayValues = ['displayValue', '@displayValue', 'displayMesh']
+let speckleTypesWithGeometry = ['Objects.Geometry']
+
+let streamId, sheet, rowStart, colStart, arrayData, isTabularData, arrayIdData
 
 async function flattenData(item, signal) {
   if (signal.aborted) return
   if (Array.isArray(item)) {
-    for (let o of item) {
-      if (signal.aborted) return
-      await flattenSingle(o, signal)
+    let localItems = [...item]
+    const batchSize = 35
+    while (localItems.length > 0) {
+      let batch = localItems.splice(0, batchSize)
+      await Promise.all(batch.map((i) => flattenSingle(i, signal)))
     }
   } else {
     await flattenSingle(item, signal)
   }
 }
 
-async function getReferencedObject(reference, signal) {
+export async function getReferencedObject(
+  streamId,
+  reference,
+  signal,
+  excludeElementsFromConstruction = true
+) {
   if (signal.aborted) return
 
+  let excludeProps = ['__closure']
+  if (excludeElementsFromConstruction) excludeProps.push('elements')
+
   let loader = await store.dispatch('getObject', {
     streamId: streamId,
     objectId: reference,
     options: {
       fullyTraverseArrays: false,
-      excludeProps: ['displayValue', 'displayMesh', '__closure', 'elements']
+      excludeProps: excludeProps
     },
     signal
   })
@@ -39,27 +62,54 @@ async function getReferencedObject(reference, signal) {
 
 async function flattenSingle(item, signal) {
   if (item.speckle_type && item.speckle_type == 'reference') {
-    item = await getReferencedObject(item.referencedId, signal)
+    item = await getReferencedObject(streamId, item.referencedId, signal)
   }
 
   let flat = flatten(item)
   let rowData = []
+  let rowIdData = ''
   for (const [key, value] of Object.entries(flat)) {
     if (key === null || value === null) continue
     if (ignoreEndsWithProps.findIndex((x) => key.endsWith(x)) !== -1) continue
-
+    if (key.endsWith('id')) {
+      rowIdData += idsToBeAdded(key, value, flat)
+      continue
+    }
+    if (displayValues.some((v) => key.includes(v))) {
+      continue
+    }
     let colIndex = arrayData[0].findIndex((x) => x === key)
     if (colIndex === -1) {
       colIndex = arrayData[0].length
       arrayData[0].push(key)
     }
-    rowData[colIndex] = value
+    rowData[colIndex] = Array.isArray(value) ? JSON.stringify(value) : value
   }
   arrayData.push(rowData)
+  arrayIdData.push(rowIdData)
+}
+
+function idsToBeAdded(key, value, flat) {
+  for (let i = 0; i < displayValues.length; i++) {
+    if (flat[key.slice(0, -2).concat(displayValues[i]).concat('.0.id')]) {
+      return value + ','
+    }
+  }
+
+  let speckleType = flat[key.slice(0, -2).concat('speckle_type')]
+  if (!speckleType) return ''
+
+  for (let i = 0; i < speckleTypesWithGeometry.length; i++) {
+    if (speckleType.startsWith(speckleTypesWithGeometry[i])) {
+      return value + ','
+    }
+  }
+
+  return ''
 }
 
 //called if the received data does not contain objects => it's a table, a list or a single value
-async function bakeArray(data, context) {
+export async function bakeArray(data, rowStart, colStart, context) {
   //it's a single value
   if (!Array.isArray(data)) {
     let valueRange = sheet.getCell(rowStart, colStart)
@@ -74,33 +124,117 @@ async function bakeArray(data, context) {
       colIndex++
     }
   }
-  //it's a list of lists aka table
+  // it's a list of lists aka table
   else {
-    let counter = 0
     let rowIndex = 0
-    for (let array of data) {
-      let colIndex = 0
-      let actualColIndex = 0
-      for (let item of array) {
-        if (headerIndices.length === 0 || headerIndices.includes(colIndex)) {
-          let valueRange = sheet.getCell(rowIndex + rowStart, actualColIndex + colStart)
-          valueRange.values = Array.isArray(item) ? JSON.stringify(item) : item
-          actualColIndex++
-          counter++
-        }
-        colIndex++
-        //sync in batches to avoid a RequestPayloadSizeLimitExceeded
-        if (counter > 5000) {
-          counter = 0
-          await context.sync()
-        }
-      }
-
-      rowIndex++
+    let batchSize = 50
+    while (rowIndex < data.length) {
+      let dataBatch = data.slice(rowIndex, rowIndex + batchSize)
+      let numRows = dataBatch.length
+      let rangeAddress = getRangeAddressFromIndicies(
+        rowStart + rowIndex,
+        colStart,
+        rowStart + rowIndex + numRows - 1,
+        colStart + data[0].length - 1
+      )
+      let valueRange = sheet.getRange(rangeAddress)
+      valueRange.values = dataBatch
+      rowIndex += numRows
+      await context.sync()
     }
   }
 }
 
+export async function bakeTable(data, context, sheet, name, rowStart, colStart, headerRowIndex) {
+  let rowIndex = 0
+  let batchSize = 50
+  while (rowIndex < data.length) {
+    let dataBatch = data.slice(rowIndex, rowIndex + batchSize)
+    let numRows = dataBatch.length
+    let rangeAddress = getRangeAddressFromIndicies(
+      rowStart + headerRowIndex + rowIndex,
+      colStart,
+      rowStart + headerRowIndex + rowIndex + numRows - 1,
+      colStart + data[0].length - 1
+    )
+    let valueRange = sheet.getRange(rangeAddress)
+    valueRange.values = dataBatch
+    rowIndex += numRows
+    await context.sync()
+  }
+
+  let totalRangeAddress = getRangeAddressFromIndicies(
+    rowStart + headerRowIndex,
+    colStart,
+    rowStart + headerRowIndex + data.length - 1,
+    colStart + data[0].length - 1
+  )
+
+  sheet.activate()
+  let table = sheet.tables.add(totalRangeAddress, true)
+  table.load('id')
+  await context.sync()
+
+  let tableId = removeNonAlphanumericCharacters(table.id)
+  let columnMetaAddress = getRangeAddressFromIndicies(
+    rowStart,
+    colStart + 1,
+    rowStart,
+    colStart + data[0].length - 1
+  )
+  let columnMetaRange = sheet.getRange(columnMetaAddress)
+  let rowMetaAddress = getRangeAddressFromIndicies(
+    rowStart,
+    colStart,
+    rowStart + headerRowIndex + rowIndex - 1,
+    colStart
+  )
+  let rowMetaRange = sheet.getRange(rowMetaAddress)
+
+  sheet.names.add(`speckleColumnMetadata_${tableId}`, columnMetaRange)
+  sheet.names.add(`speckleRowMetadata_${tableId}`, rowMetaRange)
+  context.workbook.tables.onDeleted.add(onTableDeleted)
+  context.workbook.tables.onChanged.add(onTableChanged)
+
+  await context.sync()
+}
+
+export function removeNonAlphanumericCharacters(s) {
+  return s.replace(/\W/g, '')
+}
+
+export function hideRowOrColumn(sheet, columnIndex = -1, rowIndex = -1) {
+  if (columnIndex > -1) {
+    let columnLetter = numberToLetters(columnIndex)
+    sheet.getRange(`${columnLetter}:${columnLetter}`).columnHidden = true
+  }
+  if (rowIndex > -1) {
+    let rowRange = sheet.getRange(`${rowIndex + 1}:${rowIndex + 1}`)
+    rowRange.rowHidden = true
+    rowRange.format.wrapText = true
+  }
+}
+
+async function addIdDataToObjectData(arrayData) {
+  if (
+    arrayData.length != arrayIdData.length ||
+    arrayData.length <= 1 ||
+    !Array.isArray(arrayData[0])
+  ) {
+    console.log('Could not attach object ids to table')
+    return
+  }
+  // if all speckleIds are empty strings then don't add the column
+  if (arrayIdData.slice(1, -1).every((val) => !val)) return
+
+  for (let i = 0; i < arrayData.length; i++) {
+    arrayData[i].push(arrayIdData[i])
+    // push an empty space at the end of each array because it will trim the overflow from the
+    // speckleIds in the previous column
+    arrayData[i].push(' ')
+  }
+}
+
 function headerListToTree(headers) {
   let tree = [{ id: 0, name: 'all fields', fullname: '', children: [] }]
   let i = 1
@@ -136,6 +270,114 @@ function hasObjects(data) {
   return false
 }
 
+async function constructRefObjectData(data, nearestObjectId, pathFromNearestObj, signal) {
+  if (!Array.isArray(data)) {
+    if (data.speckle_type == 'reference') {
+      return await getReferencedObject(streamId, data.referencedId, signal)
+    }
+    return data
+  }
+
+  if (!nearestObjectId) return data
+
+  const refIndex = data.findIndex((o) => o.speckle_type === 'reference')
+
+  // no referenced Ids, objects are already constructed
+  if (refIndex == -1) return data
+
+  var parent = await getReferencedObject(
+    streamId,
+    nearestObjectId,
+    signal,
+    !pathFromNearestObj.toLowerCase().includes('elements')
+  )
+  if (signal.aborted) return data
+
+  const delimiter = ':::'
+  var pathArray = pathFromNearestObj.split(delimiter)
+  for (let i = 0; i < pathArray.length; i++) {
+    if (!pathArray[i]) continue
+    parent = parent[pathArray[i]]
+  }
+  if (
+    Array.isArray(parent) &&
+    data.length == parent.length &&
+    data[refIndex].referencedId == parent[refIndex].id
+  ) {
+    return parent
+  }
+  //TODO: add logging here. If this line is reached then I'm pretty sure I did the traversal logic wrong
+  return data
+}
+
+// this function is brought to you by chatGPT
+// it takes in an excel column index and outputs the column string
+// 0 -> A
+// 1 -> B
+// ...
+// 26 -> AA
+// 27 -> AB
+// ...
+function numberToLetters(number) {
+  const base = 26
+  let letters = ''
+  do {
+    const remainder = number % base
+    letters = String.fromCharCode(65 + remainder) + letters
+    number = Math.floor(number / base) - 1
+  } while (number >= 0)
+  return letters
+}
+
+// this function is also the intellectual property of chatGPT
+// it does the opposite of the numberToLetters function
+// A -> 0
+// B -> 1
+// ...
+// AA -> 26
+// ...
+function lettersToNumber(letters) {
+  const base = 26
+  let number = 0
+  for (let i = 0; i < letters.length; i++) {
+    const charCode = letters.charCodeAt(i) - 65 + 1
+    number = number * base + charCode
+  }
+  return number - 1
+}
+
+export function getRangeAddressFromIndicies(startRow, startCol, endRow, endCol) {
+  let range = ''
+
+  range += numberToLetters(startCol) + String(startRow + 1)
+  range += ':'
+  range += numberToLetters(endCol) + String(endRow + 1)
+
+  return range
+}
+
+export function getIndiciesFromRangeAddress(address) {
+  let parts = address.match(/[a-zA-Z]+|[0-9]+/g)
+
+  // if the sheet is part of the address, then get rid of it
+  if (parts[0] === 'Sheet') parts.splice(0, 2)
+
+  let output = []
+  for (let part of parts) {
+    let numValue = parseInt(part)
+    if (numValue) numValue -= 1
+    else numValue = lettersToNumber(part)
+    output.push(numValue)
+  }
+
+  if (output.length == 2) {
+    output[2] = output[0]
+    output[3] = output[1]
+  }
+
+  return output
+}
+
 export async function receiveLatest(
   reference,
   _streamId,
@@ -147,13 +389,21 @@ export async function receiveLatest(
   try {
     //TODO: only get objs that are needed?
     streamId = _streamId
-    let item = await getReferencedObject(reference, signal)
+    let item = await getReferencedObject(streamId, reference, signal)
     let parts = receiverSelection.fullKeyName.split('.')
     //picks the sub-object on which the user previously clicked `bake`
     for (let part of parts) {
       item = item[part]
     }
 
+    if (!item) {
+      store.dispatch('showSnackbar', {
+        message: 'Could not match the previous data structure',
+        color: 'error'
+      })
+      return
+    }
+
     await bake(
       item,
       _streamId,
@@ -161,6 +411,8 @@ export async function receiveLatest(
       _commitMsg,
       null,
       signal,
+      null,
+      null,
       receiverSelection.headers,
       receiverSelection.range
     )
@@ -173,6 +425,126 @@ export async function receiveLatest(
     })
   }
 }
+async function getAddress(_streamId, signal, previousRange, context) {
+  let address, range
+  // await window.Excel.run(async (context) => {
+  if (previousRange) {
+    let sheetName = previousRange.split('!')[0].replace(/'/g, '')
+    let rangeAddress = previousRange.split('!')[1]
+    sheet = context.workbook.worksheets.getItem(sheetName)
+    range = sheet.getRange(rangeAddress)
+  } else {
+    range = context.workbook.getSelectedRange()
+  }
+  range.load('address, worksheet, columnIndex, rowIndex')
+  await context.sync()
+  // })
+
+  sheet = range.worksheet
+  sheet.load('items/name')
+
+  address = range.address
+  rowStart = range.rowIndex
+  colStart = range.columnIndex
+
+  streamId = _streamId
+  arrayData = [[]]
+  arrayIdData = ['speckleIDs']
+
+  //if the incoming data has objects we need to flatten them to an array
+  //otherwise we just output it
+  isTabularData = true
+
+  if (signal.aborted) return
+
+  return address
+}
+export async function bakeSchedule(
+  data,
+  _streamId,
+  _commitId,
+  _commitMsg,
+  signal,
+  nearestObjectId,
+  pathFromNearestObj,
+  previousHeaders,
+  previousRange
+) {
+  try {
+    let selectedHeaders = previousHeaders
+    let address
+    await window.Excel.run(async (context) => {
+      address = await getAddress(_streamId, signal, previousRange, context)
+      data = await constructRefObjectData(data, nearestObjectId, pathFromNearestObj, signal)
+
+      let schedulePaths = []
+      let flat = flatten(data, { maxDepth: 4 })
+
+      for (const [key, value] of Object.entries(flat)) {
+        if (key.endsWith('speckle_type') && value.endsWith('DataTable')) {
+          schedulePaths.push(
+            key.replace('.speckle_type', '').replace('speckle_type', '').split('.')
+          )
+        }
+      }
+
+      context.workbook.worksheets.load('items')
+      await context.sync()
+
+      for (let i = 0; i < schedulePaths.length; i++) {
+        if (i != 0) {
+          context.workbook.worksheets.add()
+          sheet = context.workbook.worksheets.items[-1]
+        }
+        try {
+          let filteredData = { ...data }
+          schedulePaths[i].forEach((step) => {
+            if (step) {
+              filteredData = filteredData[step]
+            }
+          })
+          if (signal.aborted) return
+
+          formatArrayDataForTable(filteredData, arrayData)
+
+          if (signal.aborted) return
+          await bakeDataTable(filteredData, arrayData, context, sheet, rowStart, colStart)
+        } catch (e) {
+          console.log(e)
+        }
+      }
+
+      await context.sync()
+
+      await store.dispatch('receiveCommit', {
+        sourceApplication: 'Excel',
+        streamId: _streamId,
+        commitId: _commitId,
+        message: _commitMsg
+      })
+
+      store.dispatch('showSnackbar', {
+        message: 'Data received successfully'
+      })
+    })
+
+    let receiverSelection = { headers: selectedHeaders, range: address }
+
+    return receiverSelection
+    // eslint-disable-next-line no-unreachable
+  } catch (e) {
+    //pokemon
+    console.log(e)
+
+    let m = 'Something went wrong: ' + e
+    if (e.name !== 'AbortError') m = 'Operation cancelled'
+
+    store.dispatch('showSnackbar', {
+      message: m,
+      color: 'error'
+    })
+  }
+}
 export async function bake(
   data,
   _streamId,
@@ -180,84 +552,63 @@ export async function bake(
   _commitMsg,
   modal,
   signal,
+  nearestObjectId,
+  pathFromNearestObj,
   previousHeaders,
   previousRange
 ) {
   try {
-    let address, range
     let selectedHeaders = previousHeaders
-
+    let address
     await window.Excel.run(async (context) => {
-      if (previousRange) {
-        let sheetName = previousRange.split('!')[0].replace(/'/g, '')
-        let rangeAddress = previousRange.split('!')[1]
-        sheet = context.workbook.worksheets.getItem(sheetName)
-        range = sheet.getRange(rangeAddress)
+      address = await getAddress(_streamId, signal, previousRange, context)
+      data = await constructRefObjectData(data, nearestObjectId, pathFromNearestObj, signal)
+
+      if (signal.aborted) return
+      // check for specific conversions
+      if (checkIfReceivingDataTable(data)) {
+        formatArrayDataForTable(data, arrayData)
+        await bakeDataTable(data, arrayData, context, sheet, rowStart, colStart)
       } else {
-        range = context.workbook.getSelectedRange()
-      }
-      range.load('address, worksheet, columnIndex, rowIndex')
-      await context.sync()
+        if (hasObjects(data, signal)) {
+          isTabularData = false
+          await flattenData(data, signal)
+          //transpose 2d array, sort alphabetically, then transpose again
+          //this helps ensure the order of the baked columns is the same across streams
+          arrayData = arrayData[0].map((_, colIndex) => arrayData.map((row) => row[colIndex]))
+          arrayData = arrayData.sort((a, b) => (a[0] > b[0] ? 1 : -1))
+          arrayData = arrayData[0].map((_, colIndex) => arrayData.map((row) => row[colIndex]))
+        } else arrayData = data
 
-      sheet = range.worksheet
-      sheet.load('items/name')
+        if (signal.aborted) return
 
-      address = range.address
-      rowStart = range.rowIndex
-      colStart = range.columnIndex
-
-      streamId = _streamId
-      arrayData = [[]]
-      headerIndices = []
-
-      //if the incoming data has objects we need to flatten them to an array
-      //otherwise we just output it
-      isTabularData = true
-
-      if (signal.aborted) return
-      if (hasObjects(data, signal)) {
-        isTabularData = false
-        await flattenData(data, signal)
-        //transpose 2d array, sort alphabetically, then transpose again
-        //this helps ensure the order of the baked columns is the same across streams
-        arrayData = arrayData[0].map((_, colIndex) => arrayData.map((row) => row[colIndex]))
-        arrayData = arrayData.sort((a, b) => (a[0] > b[0] ? 1 : -1))
-        arrayData = arrayData[0].map((_, colIndex) => arrayData.map((row) => row[colIndex]))
-      } else arrayData = data
-
-      if (signal.aborted) return
-
-      if (!isTabularData && arrayData[0].length > 25) {
-        //it's manual run
-        if (!previousHeaders && modal) {
-          let headers = headerListToTree(arrayData[0], signal)
-          let dialog = await modal.open(
-            headers,
-            `You are about to receive ${arrayData[0].length} columns and ${arrayData.length} rows, you can filter them below.`
-          )
-          console.log(dialog)
-          if (!dialog.result) {
-            store.dispatch('showSnackbar', {
-              message: 'Operation cancelled'
-            })
-            return
-          }
-          if (arrayData[0].length !== dialog.items.length) {
-            selectedHeaders = dialog.items
-            //construct a list of the index of each header to include
-            for (let item of selectedHeaders) headerIndices.push(arrayData[0].indexOf(item))
-          }
-        } else if (previousHeaders) {
-          for (let item of previousHeaders) {
-            let index = arrayData[0].indexOf(item)
-            if (index !== -1) headerIndices.push(index)
+        if (!isTabularData && arrayData[0].length > 25) {
+          if (!previousHeaders && modal) {
+            let headers = headerListToTree(arrayData[0], signal)
+            let dialog = await modal.open(
+              headers,
+              `You are about to receive ${arrayData[0].length} columns and ${arrayData.length} rows, you can filter them below.`
+            )
+            console.log(dialog)
+            if (!dialog.result) {
+              store.dispatch('showSnackbar', {
+                message: 'Operation cancelled'
+              })
+              return
+            }
+            selectedHeaders = filterArrayData(dialog.items, arrayData)
+          } else if (previousHeaders) {
+            selectedHeaders = filterArrayData(previousHeaders, arrayData)
           }
         }
+
+        if (signal.aborted) return
+
+        selectedHeaders ??= arrayData
+        await addIdDataToObjectData(selectedHeaders)
+        await bakeArray(selectedHeaders, rowStart, colStart, context)
       }
 
-      if (signal.aborted) return
-
-      await bakeArray(arrayData, context)
       await context.sync()
 
       await store.dispatch('receiveCommit', {
@@ -290,39 +641,71 @@ export async function bake(
   }
 }
 
+function filterArrayData(headers, allData) {
+  if (allData[0].length == headers.length) return allData
+
+  let filteredData = [[]]
+  // initialize filteredData array with empty arrays
+  for (let i = 0; i < allData.length; i++) {
+    filteredData[i] = []
+  }
+
+  for (let item of headers) {
+    let index = allData[0].indexOf(item)
+    if (index === -1) continue
+
+    for (let i = 0; i < allData.length; i++) {
+      filteredData[i].push(allData[i][index])
+    }
+  }
+  return filteredData
+}
+
+// eslint-disable-next-line no-unused-vars
 export async function send(savedStream, streamId, branchName, message) {
   try {
     await window.Excel.run(async (context) => {
       let sheetName = savedStream.selection.split('!')[0].replace(/'/g, '')
       let rangeAddress = savedStream.selection.split('!')[1]
       let sheet = context.workbook.worksheets.getItem(sheetName)
-
       let range = sheet.getRange(rangeAddress)
-      range.load('values')
-      await context.sync()
-      let values = range.values
+
+      let values = await ExcelSheetDataRetriever.GetValuesAsNestedList(
+        context,
+        savedStream.selection
+      )
 
       let data = []
-      if (savedStream.hasHeaders) {
-        for (let row = 1; row < values.length; row++) {
-          let object = {}
-          for (let col = 0; col < values[0].length; col++) {
-            let propName = values[0][col]
-            //if (propName !== 'id' && propName.endsWith('.id')) continue
-            let propValue = values[row][col]
-            object[propName] = propValue
-          }
-          let unlattened = unflatten(object)
-          data.push(unlattened)
-        }
+      // check for specific conversion
+      let table = await getDataTableContainingRange(range, sheet, context)
+      if (table) {
+        data = await BuildDataTableObject(range, values, table, sheet, context)
       } else {
-        for (let row = 0; row < values.length; row++) {
-          let rowArray = []
-          for (let col = 0; col < values[0].length; col++) {
-            rowArray.push(values[row][col])
+        if (savedStream.hasHeaders) {
+          for (let row = 1; row < values.length; row++) {
+            let object = {}
+            for (let col = 0; col < values[0].length; col++) {
+              let propName = values[0][col]
+              //if (propName !== 'id' && propName.endsWith('.id')) continue
+              let propValue = values[row][col]
+              object[propName] = propValue
+            }
+            // generate a hash if none is present
+            object.id = object.id || MD5(JSON.stringify(object)).toString(enc.Hex)
+            let unlattened = unflatten(object)
+            data.push(unlattened)
+          }
+        } else {
+          for (let row = 0; row < values.length; row++) {
+            let rowArray = []
+            for (let col = 0; col < values[0].length; col++) {
+              rowArray.push(values[row][col])
+            }
+            data.push(rowArray)
           }
-          data.push(rowArray)
         }
+
+        data = { data: data, speckle_type: 'Base' }
       }
 
       await store.dispatch('createCommit', {

src/router/index.js

@@ -11,11 +11,6 @@ const routes = [
     name: 'streams',
     component: () => import('../views/Streams.vue')
   },
-  {
-    path: '/add',
-    name: 'add',
-    component: () => import('../views/Add.vue')
-  },
   {
     path: '/streams/:streamId/commits/:commitId',
     name: 'commit',
@@ -24,11 +19,25 @@ const routes = [
     },
     component: () => import('../views/Commit.vue')
   },
+  {
+    path: '/streams/:streamId/:commitId?',
+    name: 'stream',
+    meta: {
+      title: 'Stream | Speckle'
+    },
+    component: () => import('../views/SingleStream.vue'),
+    props: true
+  },
   {
     path: '/login',
     name: 'login',
     component: () => import('../views/Login.vue')
   },
+  {
+    path: '/singleStream',
+    name: 'singleStream',
+    component: () => import('../views/SingleStream.vue')
+  },
   {
     path: '/redirect',
     name: 'redirect'

src/store/index.js

@@ -6,6 +6,8 @@ import ObjectLoader from '@speckle/objectloader'
 import streamsModule from './streams'
 import userModule from './user'
 import router from '../router'
+import { BaseObjectSerializer } from '../plugins/BaseObjectSerializer'
+import { ServerTransport } from '../plugins/ServerTransport'
 
 const xml2js = require('xml2js')
 
@@ -100,7 +102,8 @@ const vuexExcel = new VuexPersistence({
 
 export default new Vuex.Store({
   state: {
-    snackbar: {}
+    snackbar: {},
+    isFE2: false
   },
   plugins: [vuexLocal.plugin, vuexExcel.plugin],
   getters: {
@@ -109,9 +112,16 @@ export default new Vuex.Store({
   mutations: {
     SET_SNACKBAR(state, value) {
       state.snackbar = value
+    },
+    UPDATE_IS_FE2(state, value) {
+      localStorage.setItem('frontend2', value)
+      state.isFE2 = value
     }
   },
   actions: {
+    updateIsFE2({ commit }, value) {
+      commit('UPDATE_IS_FE2', value)
+    },
     async redirect(_, data) {
       //go to login and refresh token
       window.location = `${data.serverUrl}/authn/verify/${process.env.VUE_APP_SPECKLE_ID}/${data.challenge}`
@@ -140,11 +150,13 @@ export default new Vuex.Store({
             dialog.close()
             await dispatch('exchangeAccessCode', args.message)
             await dispatch('hasValidToken')
+            await dispatch('getServerInfo')
             router.push('/')
           })
         }
       )
     },
+
     async hasValidToken({ state, dispatch }) {
       if (localStorage.getItem(TOKEN) === null) return false
       await dispatch('getUser')
@@ -161,6 +173,7 @@ export default new Vuex.Store({
       localStorage.removeItem('serverUrl')
       localStorage.removeItem(REFRESH_TOKEN)
       localStorage.removeItem('uuid')
+      localStorage.removeItem('frontend2')
 
       window.location = window.location.origin
     },
@@ -193,51 +206,14 @@ export default new Vuex.Store({
       }
     },
     async createCommit(context, { streamId, branchName, message, object }) {
-      let query = `mutation objectCreate ($object: ObjectCreateInput!) {objectCreate(objectInput: $object)}`
-
       let serverUrl = localStorage.getItem('serverUrl')
       let token = localStorage.getItem(TOKEN)
 
-      let response = await fetch(`${serverUrl}/graphql`, {
-        method: 'POST',
-        headers: {
-          Authorization: 'Bearer ' + token,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          query: query,
-          variables: {
-            object: {
-              streamId: streamId,
-              objects: [{ data: object, speckle_type: 'Base' }]
-            }
-          }
-        })
-      })
-      let data = await response.json()
-      let objectId = data.data.objectCreate[0]
+      const serverTransport = new ServerTransport(serverUrl, token, streamId)
+      const serializer = new BaseObjectSerializer([serverTransport])
+      const serialized = await serializer.SerializeBase(object)
 
-      query = `mutation commitCreate($myCommit: CommitCreateInput!){ commitCreate(commit: $myCommit)}`
-
-      response = await fetch(`${serverUrl}/graphql`, {
-        method: 'POST',
-        headers: {
-          Authorization: 'Bearer ' + token,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          query: query,
-          variables: {
-            myCommit: {
-              streamId: streamId,
-              branchName: branchName,
-              objectId: objectId,
-              message: message ? message : 'Data from Excel',
-              sourceApplication: 'excel'
-            }
-          }
-        })
-      })
+      await serverTransport.CreateCommit(branchName, serialized.id, message)
     },
     async receiveCommit(context, { sourceApplication, streamId, commitId, message }) {
       let query = `mutation objectReceive ($myInput:CommitReceivedInput!) {commitReceive(input:$myInput)}`
@@ -264,6 +240,46 @@ export default new Vuex.Store({
         })
       })
     },
+    async getServerInfo({ dispatch }) {
+      let serverUrl = localStorage.getItem('serverUrl')
+
+      // Now, to check for a specific header
+      const isFrontend2Server = (headers) => {
+        const HEADER = 'x-speckle-frontend-2'
+        const headerValue = headers.get(HEADER)
+
+        if (headerValue === null) {
+          return false
+        }
+
+        const value = headerValue.toLowerCase() === 'true'
+        if (headerValue !== 'true' && headerValue !== 'false') {
+          throw new Error(
+            `Headers contained ${HEADER} header, but value ${headerValue} could not be parsed to a bool`
+          )
+        }
+
+        return value
+      }
+
+      // Use the function to check the header
+      try {
+        let response = await fetch(serverUrl, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        let isFE2Server = isFrontend2Server(response.headers)
+        await dispatch('updateIsFE2', isFE2Server)
+        console.log('Is Frontend2 Server:', isFE2Server)
+      } catch (error) {
+        console.warn(error.message)
+        // TODO: fallback is FE1, this should be changed later
+        await dispatch('updateIsFE2', false)
+      }
+    },
     async getUser(context) {
       try {
         let query = `query {

src/store/streams.js

@@ -4,7 +4,8 @@ export default {
   },
   mutations: {
     ADD_STREAM(state, value) {
-      state.streams.unshift(value)
+      const index = state.streams.findIndex((x) => x.id === value.id)
+      if (index == -1) state.streams.unshift(value)
     },
     REMOVE_STREAM(state, value) {
       const index = state.streams.findIndex((x) => x.id === value)

src/utils/streamWrapper.js

@@ -0,0 +1,78 @@
+require('url')
+
+export class StreamWrapper {
+  constructor(streamIdOrUrl, accountId, serverUrl, isFE2) {
+    this.isFE2 = isFE2
+    this.streamsKey = this.isFE2 ? 'projects/' : 'streams/'
+    this.branchesKey = this.isFE2 ? 'models/' : 'branches/'
+    this.commitsKey = this.isFE2 ? 'versions/' : 'commits/'
+    this.originalOutput = streamIdOrUrl
+    try {
+      this.streamWrapperFromUrl(streamIdOrUrl)
+    } catch (e) {
+      this.serverUrl = serverUrl
+      this.userId = accountId
+      this.streamId = streamIdOrUrl
+    }
+  }
+
+  matchUrl(streamUrl) {
+    const fe2UrlRegex = /\/projects\/(?<projectId>[\w\d]+)(?:\/models\/(?<model>[\w\d]+(?:@[\w\d]+)?)(?:,(?<additionalModels>[\w\d]+(?:@[\w\d]+)?))*)?/
+    return fe2UrlRegex.exec(streamUrl)
+  }
+
+  streamWrapperFromUrl(streamUrl) {
+    this.url = new URL(streamUrl)
+    this.segments = this.url.pathname.split('/').map((segment) => segment + '/')
+    this.serverUrl = this.url.origin
+
+    if (this.segments.length >= 4 && this.segments[3]?.toLowerCase() === this.branchesKey) {
+      this.streamId = this.segments[2].replace('/', '')
+      if (this.segments.length > 5) {
+        let branchSegments = this.segments.slice(4, this.segments.length - 1)
+        this.branchName = branchSegments.join('')
+      } else {
+        this.branchName = this.segments[4]
+      }
+    } else {
+      switch (this.segments.length) {
+        case 3: // ie http://speckle.server/streams/8fecc9aa6d
+          if (this.segments[1].toLowerCase() === this.streamsKey)
+            this.streamId = this.segments[2].replace('/', '')
+          else throw new Error(`Cannot parse ${this.originalOutput} into a stream wrapper class`)
+          break
+        case 4: // ie https://speckle.server/streams/0c6ad366c4/globals/
+          if (this.segments[3].toLowerCase().startsWith('globals')) {
+            this.streamId = this.segments[2].replace('/', '')
+            this.branchName = this.segments[3].replace('/', '')
+          } else throw new Error(`Cannot parse ${this.originalOutput} into a stream wrapper class`)
+          break
+        case 5: // ie http://speckle.server/streams/8fecc9aa6d/commits/76a23d7179
+          switch (this.segments[3].toLowerCase()) {
+            case this.commitsKey:
+              this.streamId = this.segments[2].replace('/', '')
+              this.commitId = this.segments[4].replace('/', '')
+              break
+            case 'globals/':
+              this.streamId = this.segments[2].replace('/', '')
+              this.branchName = this.segments[3].replace('/', '')
+              this.commitId = this.segments[4].replace('/', '')
+              break
+            case this.branchesKey:
+              this.streamId = this.segments[2].replace('/', '')
+              this.branchName = this.segments[4].replace('/', '')
+              break
+            case 'objects/':
+              this.streamId = this.segments[2].replace('/', '')
+              this.objectId = this.segments[4].replace('/', '')
+              break
+            default:
+              throw new Error(`Cannot parse ${this.originalOutput} into a stream wrapper class`)
+          }
+          break
+        default:
+          throw new Error(`Cannot parse ${this.originalOutput} into a stream wrapper class`)
+      }
+    }
+  }
+}

src/views/Add.vue

@@ -1,172 +0,0 @@
-<template>
-  <v-container>
-    <v-row align="center">
-      <v-col cols="12" align="center" class="mt-5">
-        <p v-if="filteredStreams && filteredStreams.length > 0" class="subtitle">
-          Click on a stream to add it to this document. 👇
-        </p>
-        <p v-else-if="search" class="subtitle">No streams found 🧐</p>
-        <div v-else-if="!$apollo.loading">
-          <p class="subtitle">
-            You don't have any streams 😟,
-            <a :href="serverUrl" target="_blank">visit Speckle web to create one</a>
-            !
-          </p>
-        </div>
-      </v-col>
-    </v-row>
-
-    <v-row align="center" class="my-0 py-0">
-      <v-col cols="12" class="my-0 py-0" align="center">
-        <v-text-field
-          v-model="search"
-          rounded
-          filled
-          clearable
-          label="Search"
-          class="mx-5 search"
-          prepend-inner-icon="mdi-magnify"
-        ></v-text-field>
-      </v-col>
-    </v-row>
-
-    <v-row class="mt-0 pt-0">
-      <v-col cols="12" class="mt-0 pt-0">
-        <v-card elevation="0" color="transparent">
-          <div v-if="$apollo.loading" class="mx-4">
-            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
-            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
-            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
-          </div>
-          <v-card-text v-if="streams" class="mt-0 pt-3">
-            <div v-for="(stream, i) in filteredStreams" :key="i">
-              <list-item-stream :stream="stream"></list-item-stream>
-            </div>
-            <infinite-loading
-              v-if="streams && streams.items && streams.items.length < streams.totalCount"
-              @infinite="infiniteHandler"
-            >
-              <div slot="no-more">These are all your streams!</div>
-              <div slot="no-results">There are no streams to load</div>
-            </infinite-loading>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-import ListItemStream from '../components/ListItemStream'
-import gql from 'graphql-tag'
-import streamsQuery from '../graphql/streams.gql'
-import InfiniteLoading from 'vue-infinite-loading'
-import { createClient } from '../vue-apollo'
-
-export default {
-  name: 'Add',
-
-  components: {
-    ListItemStream,
-    InfiniteLoading
-  },
-  data: () => ({
-    streams: [],
-    search: ''
-  }),
-  apollo: {
-    $client: createClient(),
-    streams: {
-      prefetch: true,
-      query: streamsQuery,
-      fetchPolicy: 'cache-and-network', //https://www.apollographql.com/docs/react/data/queries/
-      variables() {
-        return {
-          query: this.search
-        }
-      },
-      skip() {
-        return this.search && this.search.length > 0 && this.search.length < 3
-      },
-      debounce: 300
-    },
-    $subscribe: {
-      userStreamAdded: {
-        query: gql`
-          subscription {
-            userStreamAdded
-          }
-        `,
-        result() {
-          this.$apollo.queries.streams.refetch()
-        },
-        skip() {
-          return !this.user
-        }
-      },
-      userStreamRemoved: {
-        query: gql`
-          subscription {
-            userStreamRemoved
-          }
-        `,
-        result() {
-          this.$apollo.queries.streams.refetch()
-        }
-        // skip() {
-        //   return !this.isAuthenticated
-        // }
-      }
-    }
-  },
-  computed: {
-    isAuthenticated() {
-      return this.$store.getters.isAuthenticated
-    },
-    serverUrl() {
-      return this.$store.getters.serverUrl
-    },
-    filteredStreams() {
-      if (!this.streams.items) return null
-      return this.streams.items.filter(
-        (x) => this.$store.state.streams.streams.findIndex((y) => y.id === x.id) === -1
-      )
-    }
-  },
-  mounted() {
-    this.$mixpanel.track('Connector Action', { name: 'Stream List' })
-  },
-  methods: {
-    infiniteHandler($state) {
-      this.$apollo.queries.streams.fetchMore({
-        variables: {
-          cursor: this.streams.cursor
-        },
-        // Transform the previous result with new data
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const newItems = fetchMoreResult.streams.items
-
-          //set vue-infinite state
-          if (newItems.length === 0) $state.complete()
-          else $state.loaded()
-
-          return {
-            streams: {
-              __typename: previousResult.streams.__typename,
-              totalCount: fetchMoreResult.streams.totalCount,
-              cursor: fetchMoreResult.streams.cursor,
-              // Merging the new streams
-              items: [...previousResult.streams.items, ...newItems]
-            }
-          }
-        }
-      })
-    }
-  }
-}
-</script>
-<style>
-.search .v-text-field__details {
-  display: none !important;
-}
-</style>

src/views/Commit.vue

@@ -2,7 +2,7 @@
   <v-container>
     <v-row>
       <v-col class="py-2">
-        <v-btn text large color="primary" to="/">
+        <v-btn text large color="primary" :to="`/streams/${streamId}`">
           <v-icon dark>mdi-chevron-left</v-icon>
           back
         </v-btn>
@@ -47,7 +47,7 @@
           <object-speckle-viewer
             v-if="stream"
             :stream-id="stream.id"
-            :object-id="stream.commit.referencedObject"
+            :nearest-object-id="stream.commit.referencedObject"
             :value="commitObject"
             :downloadable="false"
             :expand="true"
@@ -90,6 +90,9 @@ export default {
         speckle_type: 'reference',
         referencedId: this.stream.commit.referencedObject
       }
+    },
+    streamId() {
+      return this.$route.params.streamId
     }
   }
 }

src/views/Login.vue

@@ -43,7 +43,9 @@ export default {
   name: 'Login',
   data: () => ({
     serverUrl:
-      process.env.NODE_ENV === 'development' ? 'https://latest.speckle.dev' : 'https://speckle.xyz',
+      process.env.NODE_ENV === 'development'
+        ? 'https://latest.speckle.systems'
+        : 'https://app.speckle.systems',
     validForm: true,
     serverError: '',
     serverUrlRules: [
@@ -53,8 +55,6 @@ export default {
         'URL must be valid, with no trailing slash'
     ]
   }),
-  mounted() {},
-
   methods: {
     async login() {
       //when for is not visible (coming from web) don't validate

src/views/SingleStream.vue

@@ -0,0 +1,591 @@
+<template>
+  <v-card v-if="error" class="pa-5 mb-3" style="transition: all 0.2s">
+    <v-card-title class="subtitle-1 px-0 pt-0">
+      {{ error }} ⚠️
+      <div class="floating">
+        <!-- <v-btn
+          v-tooltip="`Remove this stream from the document`"
+          small
+          icon
+          color="red"
+          @click="remove"
+        >
+          <v-icon small>mdi-minus-circle-outline</v-icon>
+        </v-btn> -->
+        <v-btn
+          v-tooltip="`Open this stream in a new window`"
+          small
+          icon
+          color="primary"
+          :href="`${serverUrl}/${$store.state.isFE2 ? 'projects' : 'streams'}/${savedStream.id}`"
+          target="_blank"
+        >
+          <v-icon small>mdi-open-in-new</v-icon>
+        </v-btn>
+      </div>
+    </v-card-title>
+    <v-card-text class="px-0">
+      <span v-if="error == 'Stream not found'">
+        The stream might have been deleted or belog to another Speckle server
+      </span>
+      <span v-if="error == 'You do not have access to this resource.'">
+        Please ask the stream owner for access or to make it public
+      </span>
+      <br />
+      Stream Id: {{ savedStream.id }}
+    </v-card-text>
+  </v-card>
+  <div v-else-if="$apollo.queries.stream.loading" class="mx-0 mb-3 fill-height background-light">
+    <div class="progress-parent">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        :size="150"
+        class="fill-height"
+      ></v-progress-circular>
+    </div>
+  </div>
+  <div v-else-if="stream" id="viewer-parent" class="background-light">
+    <div v-if="viewerLoading" class="progress-parent">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        :size="150"
+        class="fill-height"
+      ></v-progress-circular>
+    </div>
+    <div id="viewer"></div>
+    <div id="stream-info-parent">
+      <StreamController
+        ref="streamController"
+        :stream="stream"
+        :determined-conversion="determinedConversion"
+        @loadByReferencedId="loadViewerObjectByReferencedId"
+        @loadByCommitId="loadViewerObjectByCommitId"
+        @clearDeterminedConversion="clearDeterminedConversion"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import StreamController from '../components/StreamController.vue'
+import streamQuery from '../graphql/stream.gql'
+import {
+  send,
+  receiveLatest,
+  getIndiciesFromRangeAddress,
+  getRangeAddressFromIndicies
+} from '../plugins/excel'
+import gql from 'graphql-tag'
+import { createClient } from '../vue-apollo'
+import { Viewer, ViewerEvent } from '@speckle/viewer'
+// import router from '../router'
+
+let ac = new AbortController()
+
+export default {
+  components: {
+    StreamController
+  },
+  async beforeRouteLeave(to, from, next) {
+    // remove on selection changed event that is tied to the viewer
+    if (this.onSelectionChangedEvent) {
+      await window.Excel.run(this.onSelectionChangedEvent.context, async (context) => {
+        this.onSelectionChangedEvent.remove()
+        await context.sync()
+        this.onSelectionChangedEvent = null
+      })
+    }
+    next()
+  },
+  props: {
+    streamId: {
+      type: String,
+      default: null
+    },
+    commitId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      error: null,
+      progress: false,
+      message: '',
+      viewer: null,
+      objectIds: null,
+      selectedObjectIds: null,
+      filterViewer: true,
+      isReceiver: true,
+      selection: null,
+      hasHeaders: false,
+      viewerLoading: false,
+      referencedObject: null,
+      onSelectionChangedEvent: null,
+      determinedConversion: ''
+    }
+  },
+  apollo: {
+    $client: createClient(),
+    stream: {
+      prefetch: true,
+      query: streamQuery,
+      fetchPolicy: 'network-only',
+      variables() {
+        return {
+          id: this.streamId,
+          limit: 100
+        }
+      },
+      result() {
+        const index = this.$store.state.streams.streams.findIndex((x) => x.id === this.streamId)
+        let savedStream = null
+        if (index > -1) {
+          savedStream = this.$store.state.streams.streams[index]
+          this.$nextTick(function () {
+            this.$refs.streamController.isReceiver = savedStream.isReceiver
+            this.$refs.streamController.selection = savedStream.selection
+            this.$refs.streamController.hasHeaders = savedStream.hasHeaders
+            this.$refs.streamController.selectedBranchName = savedStream.selectedBranchName
+            this.$refs.streamController.selectedCommitId = savedStream.selectedCommitId
+            this.$refs.streamController.receiverSelection = savedStream.receiverSelection
+          })
+        } else {
+          this.$nextTick(function () {
+            this.$refs.streamController.isReceiver = true
+            this.$refs.streamController.selectedBranchName = this.$refs.streamController.selectedBranch.name
+            this.$refs.streamController.selectedCommitId = this.selectedCommit.id
+          })
+        }
+
+        // if this page is reached via a link with a commit id, this set the branch and id on the card
+        if (this.commitId) {
+          this.$nextTick(function () {
+            this.$refs.streamController.selectedCommitId = this.commitId
+            const branch = this.stream.branches.items.find((x) =>
+              x.commits.items.findIndex(
+                (y) => y.id == this.$refs.streamController.selectedCommitId - 1
+              )
+            )
+            this.$refs.streamController.selectedBranchName = branch.name
+          })
+        }
+      },
+      error(error) {
+        console.log(this.error)
+        this.error = JSON.stringify(error.message)
+          .replaceAll('"', '')
+          .replace('GraphQL error: ', '')
+        console.log(this.error)
+      }
+    },
+    $subscribe: {
+      streamUpdated: {
+        query: gql`
+          subscription($id: String!) {
+            streamUpdated(streamId: $id)
+          }
+        `,
+        variables() {
+          return { id: this.streamId }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      commitCreated: {
+        query: gql`
+          subscription($streamId: String!) {
+            commitCreated(streamId: $streamId)
+          }
+        `,
+        variables() {
+          return { streamId: this.streamId }
+        },
+        result(commitInfo) {
+          this.$apollo.queries.stream.refetch()
+          if (this.isReceiver)
+            this.$store.dispatch('showSnackbar', {
+              message: `New commit on ${this.stream.name} @ ${commitInfo.data.commitCreated.branchName}`
+            })
+        }
+      },
+      commitUpdated: {
+        query: gql`
+          subscription($id: String!) {
+            commitUpdated(streamId: $id)
+          }
+        `,
+        variables() {
+          return { id: this.streamId }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      branchCreated: {
+        query: gql`
+          subscription($id: String!) {
+            branchCreated(streamId: $id)
+          }
+        `,
+        variables() {
+          return { id: this.streamId }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      branchDeleted: {
+        query: gql`
+          subscription($id: String!) {
+            branchDeleted(streamId: $id)
+          }
+        `,
+        variables() {
+          return { id: this.streamId }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      branchUpdated: {
+        query: gql`
+          subscription($id: String!) {
+            branchUpdated(streamId: $id)
+          }
+        `,
+        variables() {
+          return { id: this.streamId }
+        },
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      }
+    }
+  },
+  computed: {
+    serverUrl() {
+      return this.$store.getters.serverUrl
+    },
+    savedStream() {
+      return {
+        id: this.streamId,
+        isReceiver: this.isReceiver,
+        selection: this.selection,
+        hasHeaders: this.hasHeaders,
+        selectedBranchName: this.$refs.streamController.selectedBranchName,
+        selectedCommitId: this.$refs.streamController.selectedCommitId,
+        receiverSelection: this.receiverSelection
+      }
+    }
+  },
+  methods: {
+    checkForDeterminedConversions() {
+      const dataTree = this.viewer.getDataTree()
+      // Get all mesh speckle objects
+      try {
+        const schedule = dataTree.findFirst((guid, obj) => {
+          return obj.speckle_type.endsWith('DataTable')
+        })
+
+        if (schedule) {
+          this.determinedConversion = 'Schedule'
+        } else {
+          this.determinedConversion = ''
+        }
+      } catch {
+        this.determinedConversion = ''
+      }
+    },
+    clearDeterminedConversion() {
+      this.determinedConversion = ''
+    },
+    async initViewer() {
+      if (this.viewer) {
+        return
+      }
+
+      var container = document.getElementById('viewer')
+      var v = new Viewer(container)
+      await v.init()
+
+      // highlight selected objects in sheet
+      v.on(ViewerEvent.ObjectClicked, async (data) => {
+        console.log(data?.hits[0]?.object.id)
+        var speckleId = data?.hits[0]?.object.id
+        if (speckleId == undefined) v.resetFilters()
+        else {
+          v.selectObjects(new Array(data?.hits[0]?.object.id))
+          await window.Excel.run(async (context) => {
+            var sheet = context.workbook.worksheets.getActiveWorksheet()
+            var range = sheet.getUsedRange()
+            var found = range.findOrNullObject(speckleId, {
+              completeMatch: false, // Match the whole cell value.
+              matchCase: false, // Don't match case.
+              searchDirection: window.Excel.SearchDirection.forward // Start search at the beginning of the range.
+            })
+
+            found.load('address')
+            // Update the fill color
+            if (found) {
+              // var extendedRange = found.get
+              this.filterViewer = false
+              found.getExtendedRange(window.Excel.KeyboardDirection.left, found).select()
+            }
+            await context.sync()
+          })
+        }
+      })
+
+      // highlight selected objects in viewer
+      await window.Excel.run(async (context) => {
+        var sheet = context.workbook.worksheets.getActiveWorksheet()
+        this.onSelectionChangedEvent ??= sheet.onSelectionChanged.add(this.checkModelForSelection)
+        await context.sync()
+      })
+
+      v.setLightConfiguration({
+        enabled: true,
+        castShadow: false, // there is a bug involving the shadows so turn them off for now
+        intensity: 5,
+        color: 0xffffff,
+        elevation: 1.33,
+        azimuth: 0.75,
+        radius: 0,
+        indirectLightIntensity: 1.2,
+        shadowcatcher: true
+      })
+      this.viewer = v
+    },
+    async loadViewerObjectByReferencedId(referencedObject) {
+      if (referencedObject === this.referencedObject) return
+      if (this.viewerLoading) {
+        await this.viewer?.cancelLoad(
+          `${this.serverUrl}/streams/${this.streamId}/objects/${this.referencedObject}`,
+          true
+        )
+        this.viewerLoading = false
+      }
+      this.referencedObject = referencedObject
+      await this.initViewer()
+      await this.viewer?.unloadAll()
+      this.viewerLoading = true
+
+      const APP_NAME = process.env.VUE_APP_SPECKLE_NAME
+      const TOKEN = `${APP_NAME}.AuthToken`
+      try {
+        await this.viewer?.loadObject(
+          `${this.serverUrl}/streams/${this.streamId}/objects/${referencedObject}`,
+          localStorage.getItem(TOKEN)
+        )
+      } finally {
+        if (referencedObject == this.referencedObject) this.viewerLoading = false
+      }
+      this.checkForDeterminedConversions()
+    },
+    async loadViewerObjectByCommitId(commitId) {
+      const index = this.$refs.streamController.selectedBranch.commits.items.findIndex(
+        (x) => x.id === commitId
+      )
+
+      await this.loadViewerObjectByReferencedId(
+        this.$refs.streamController.selectedBranch.commits.items[index].referencedObject
+      )
+    },
+    async checkModelForSelection() {
+      if (!this.filterViewer) {
+        this.filterViewer = true
+        return
+      }
+      let speckleIdColIndex = await this.getSpeckleIdsColIndex()
+      await window.Excel.run(async (context) => {
+        // Get the selected range.
+        let range = context.workbook.getSelectedRange()
+        range.load('address')
+        await context.sync()
+        let selectedRangeIndicies = getIndiciesFromRangeAddress(range.address)
+
+        if (selectedRangeIndicies[0] > speckleIdColIndex) {
+          this.unisolateObjects()
+          return
+        }
+
+        let speckleIdRangeAddress = getRangeAddressFromIndicies(
+          selectedRangeIndicies[1],
+          speckleIdColIndex,
+          selectedRangeIndicies[3],
+          speckleIdColIndex
+        )
+        let speckleIdRange = context.workbook.worksheets
+          .getActiveWorksheet()
+          .getRange(speckleIdRangeAddress)
+        speckleIdRange.load('text')
+        await context.sync()
+
+        let idsInViewer = []
+        for (let i = 0; i < speckleIdRange.text?.length; i++) {
+          for (let j = 0; j < speckleIdRange.text[i].length; j++) {
+            if (speckleIdRange.text[i][j].length < 32) continue
+            let splitIDs = speckleIdRange.text[i][j].split(',')
+            for (let id = 0; id < splitIDs.length; id++) {
+              if (splitIDs[id].length == 32) idsInViewer.push(splitIDs[id])
+            }
+          }
+        }
+
+        this.unisolateObjects()
+
+        if (idsInViewer.length > 0) {
+          this.viewer?.isolateObjects(idsInViewer)
+          this.selectedObjectIds = idsInViewer
+          // this.viewer?.zoom(idsInViewer)
+        }
+      })
+    },
+    unisolateObjects() {
+      // unisolate previous objects
+      if (this.selectedObjectIds?.length > 0) {
+        this.viewer?.resetFilters()
+        this.viewer?.unIsolateObjects(this.selectedObjectIds)
+        this.selectedObjectIds = null
+      }
+    },
+    async getSpeckleIdsColIndex() {
+      return await window.Excel.run(async (context) => {
+        let sheet = context.workbook.worksheets.getActiveWorksheet()
+        let usedRange = sheet.getUsedRange()
+
+        // TODO: we may need to narrow the search field for large wbs
+        // or if we want to have more stable support for multiple tables in the same sheet
+
+        var found = usedRange.findOrNullObject('speckleIDs', {
+          completeMatch: true, // Match the whole cell value.
+          matchCase: true, // Don't match case.
+          searchDirection: window.Excel.SearchDirection.forward // Start search at the beginning of the range.
+        })
+        found.load('address')
+        await context.sync()
+
+        var idHeaderAddressIndicies = getIndiciesFromRangeAddress(found.address)
+        return idHeaderAddressIndicies[0]
+      })
+    },
+    cancel() {
+      ac.abort()
+    },
+    async send() {
+      // these values need to be set to null or the models will not load
+      // when switching back to the receive mode
+      this.viewer = null
+      this.referencedObject = null
+      this.$store.dispatch('addStream', this.savedStream)
+
+      this.$mixpanel.track('Send')
+      send(
+        this.savedStream,
+        this.stream.id,
+        this.$refs.streamController.selectedBranch.name,
+        this.message
+      )
+    },
+    async receiveLatest() {
+      // this.$mixpanel.track('Receive')
+      ac = new AbortController()
+
+      console.log(this.savedStream.receiverSelection)
+
+      this.progress = true
+      await receiveLatest(
+        this.selectedCommit.referencedObject,
+        this.stream.id,
+        this.selectedCommit.id,
+        this.selectedCommit.message,
+        this.savedStream.receiverSelection,
+        ac.signal
+      )
+      this.progress = false
+    },
+    formatCommitName(id) {
+      if (this.$refs.streamController.selectedBranch.commits.items[0].id == id) {
+        return 'latest'
+      }
+      return id
+    }
+  }
+}
+</script>
+<style>
+.stream-card-select .v-text-field__details {
+  display: none !important;
+}
+.v-btn .lower {
+  text-transform: none;
+}
+.floating {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 10px;
+}
+#stream-info-parent {
+  /* max-width: 600px; */
+  /* left: 50%;
+  transform: translateX(-50%); */
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  bottom: 0px;
+  display: flex;
+  justify-content: center;
+}
+#stream-info {
+  max-width: 400px;
+  margin: 15px;
+  padding: 0 !important;
+}
+#stream-info .row {
+  padding: 0px;
+  margin: 0px;
+}
+#viewer {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+#viewer-parent {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.background-light {
+  background: #8e9eab;
+  background: -webkit-linear-gradient(to top right, #eeeeee, #c8e8ff) !important;
+  background: linear-gradient(to top right, #ffffff, #c8e8ff) !important;
+}
+
+.background-dark {
+  background: #141e30;
+  background: -webkit-linear-gradient(to top left, #243b55, #141e30) !important;
+  background: linear-gradient(to top left, #243b55, #141e30) !important;
+}
+
+.progress-parent {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+}
+.v-progress-circular {
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/views/Streams.vue

@@ -1,26 +1,53 @@
 <template>
-  <v-container>
+  <v-container class="pa-0">
     <v-row align="center">
-      <v-col cols="12" align="center" class="mt-5">
-        <span v-if="streams && streams.length > 0" class="subtitle">
-          You have {{ streams.length }} stream{{ streams.length === 1 ? '' : 's' }}
-          in this document 🙌
-        </span>
-
-        <div v-else>
-          <p class="subtitle">You have no streams in this document</p>
-          <v-btn large class="mt-5" color="primary" to="add">Add a stream</v-btn>
+      <v-col cols="12" align="center" class="mt-3">
+        <p v-if="search" class="subtitle">No streams found 🧐</p>
+        <div v-else-if="!$apollo.loading && filteredStreams && filteredStreams.length == 0">
+          <p class="subtitle">
+            You don't have any streams 😟,
+            <a :href="serverUrl" target="_blank">visit Speckle web to create one</a>
+            !
+          </p>
         </div>
       </v-col>
     </v-row>
 
-    <v-row>
-      <v-col cols="12">
+    <v-row align="center" class="my-0 py-0">
+      <v-col cols="12" class="my-0 py-0" align="center">
+        <v-text-field
+          v-model="search"
+          rounded
+          filled
+          clearable
+          label="Search"
+          class="mx-5 search"
+          prepend-inner-icon="mdi-magnify"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <create-stream-dialog :account-id="user.id" :server-url="serverUrl" />
+
+    <v-row class="mt-0 pt-0">
+      <v-col cols="12" class="mt-0 pt-0">
         <v-card elevation="0" color="transparent">
-          <v-card-text class="mt-0 pt-3">
-            <div v-for="stream in streams" :key="stream.id">
-              <stream-card :saved-stream="stream"></stream-card>
+          <div v-if="$apollo.loading" class="mx-4">
+            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
+            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
+            <v-skeleton-loader class="mt-3" type="article"></v-skeleton-loader>
+          </div>
+          <v-card-text v-if="streams" class="mt-0 pt-3">
+            <div v-for="(stream, i) in filteredStreams" :key="i">
+              <list-item-stream :stream="stream"></list-item-stream>
             </div>
+            <infinite-loading
+              v-if="streams && streams.items && streams.items.length < streams.totalCount"
+              @infinite="infiniteHandler"
+            >
+              <div slot="no-more">These are all your streams!</div>
+              <div slot="no-results">There are no streams to load</div>
+            </infinite-loading>
           </v-card-text>
         </v-card>
       </v-col>
@@ -29,20 +56,131 @@
 </template>
 
 <script>
-import StreamCard from '../components/StreamCard'
+import ListItemStream from '../components/ListItemStream'
+import gql from 'graphql-tag'
+import streamsQuery from '../graphql/streams.gql'
+import InfiniteLoading from 'vue-infinite-loading'
+import { createClient } from '../vue-apollo'
+import CreateStreamDialog from '../components/dialogs/CreateStreamDialog.vue'
 
 export default {
-  name: 'Streams',
+  name: 'Add',
 
   components: {
-    StreamCard
+    ListItemStream,
+    InfiniteLoading,
+    CreateStreamDialog
   },
-  computed: {
-    streams() {
-      if (!this.$store.state) return []
-      return this.$store.state.streams.streams
+  data: () => ({
+    streams: [],
+    search: ''
+  }),
+  apollo: {
+    $client: createClient(),
+    streams: {
+      prefetch: true,
+      query: streamsQuery,
+      fetchPolicy: 'cache-and-network', //https://www.apollographql.com/docs/react/data/queries/
+      variables() {
+        return {
+          query: this.search
+        }
+      },
+      skip() {
+        return this.search && this.search.length > 0 && this.search.length < 3
+      },
+      debounce: 300
+    },
+    $subscribe: {
+      userStreamAdded: {
+        query: gql`
+          subscription {
+            userStreamAdded
+          }
+        `,
+        result() {
+          this.$apollo.queries.streams.refetch()
+        },
+        skip() {
+          return !this.user
+        }
+      },
+      userStreamRemoved: {
+        query: gql`
+          subscription {
+            userStreamRemoved
+          }
+        `,
+        result() {
+          this.$apollo.queries.streams.refetch()
+        }
+        // skip() {
+        //   return !this.isAuthenticated
+        // }
+      }
     }
   },
-  methods: {}
+  computed: {
+    isAuthenticated() {
+      return this.$store.getters.isAuthenticated
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    serverUrl() {
+      return this.$store.getters.serverUrl
+    },
+    filteredStreams() {
+      if (!this.streams.items) return null
+
+      let savedStreams = this.streams.items.filter(
+        (x) => this.$store.state.streams.streams.findIndex((y) => y.id === x.id) !== -1
+      )
+      let otherStreams = this.streams.items.filter(
+        (x) => this.$store.state.streams.streams.findIndex((y) => y.id === x.id) === -1
+      )
+
+      savedStreams.push(...otherStreams)
+      return savedStreams
+      // return this.streams.items.filter(
+      //   (x) => this.$store.state.streams.streams.findIndex((y) => y.id === x.id) === -1
+      // )
+    }
+  },
+  mounted() {
+    this.$mixpanel.track('Connector Action', { name: 'Stream List' })
+  },
+  methods: {
+    infiniteHandler($state) {
+      this.$apollo.queries.streams.fetchMore({
+        variables: {
+          cursor: this.streams.cursor
+        },
+        // Transform the previous result with new data
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const newItems = fetchMoreResult.streams.items
+
+          //set vue-infinite state
+          if (newItems.length === 0) $state.complete()
+          else $state.loaded()
+
+          return {
+            streams: {
+              __typename: previousResult.streams.__typename,
+              totalCount: fetchMoreResult.streams.totalCount,
+              cursor: fetchMoreResult.streams.cursor,
+              // Merging the new streams
+              items: [...previousResult.streams.items, ...newItems]
+            }
+          }
+        }
+      })
+    }
+  }
 }
 </script>
+<style>
+.search .v-text-field__details {
+  display: none !important;
+}
+</style>

tsconfig.json

@@ -0,0 +1,109 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

vue.config.js

@@ -10,5 +10,8 @@ module.exports = {
       'Access-Control-Allow-Origin': '*'
     }
   },
-  transpileDependencies: ['vuetify', '@speckle/objectloader', 'flatted', 'vuex-persist']
+  transpileDependencies: ['vuetify', '@speckle/objectloader', 'flatted', 'vuex-persist'],
+  configureWebpack: (config) => {
+    config.devtool = 'source-map'
+  }
 }