feat(ui): saved streams & 1-click send (#37 )

* feat(ui): saved streams and wip 1 click * style(connector): remove some puts statements * feat(accounts): default acct helper * feat(ui): more 1 click send need a way to wait for connector launch... * fix(ui): waiting quick send! * feat(ui): view in web from toast notif note to self: the one in frontend is kinda ugly 😓 went with outine btn for now bc it was better than that big ol dark gray btn * fix: turn off dev i always fkn do this i needa just use an env file gdi * feat(ui): notify ui of oneclick send * feat(metrics): remove old and use the new!
2022-03-08 10:15:21 +00:00
11 changed files with 313 additions and 65 deletions
@@ -23,6 +23,11 @@ module SpeckleSystems::SpeckleConnector
      rows.map { |row| JSON.parse(row[1]) }
    end

+    def self.default_account
+      accts = load_accounts
+      accts.select { |acc| acc["isDefault"] }[0] || accts[0]
+    end
+
    def self.get_suuid
      dir = _get_speckle_dir
      suuid_path = File.join(dir, "suuid")
@@ -7,8 +7,23 @@ require "speckle_connector/accounts"
 module SpeckleSystems::SpeckleConnector
  UNITS = { 0 => "in", 1 => "ft", 2 => "mm", 3 => "cm", 4 => "m", 5 => "yd" }.freeze
  public_constant :UNITS
+  @to_send = {}
+  @connected = false

-  def self.create_dialog
+  def self.queue_send(stream_id, converted)
+    @to_send = { stream_id: stream_id, converted: converted }
+    send_from_queue(stream_id) if @connected
+  end
+
+  def self.send_from_queue(stream_id)
+    return unless @to_send[:stream_id] == stream_id
+
+    @dialog.execute_script("convertedFromSketchup('#{@to_send[:stream_id]}',#{@to_send[:converted].to_json})")
+    @dialog.execute_script("oneClickSend('#{@to_send[:stream_id]}')")
+    @to_send = {}
+  end
+
+  def self.init_dialog
    options = {
      dialog_title: "SpeckleSketchUp",
      preferences_key: "example.htmldialog.materialinspector",
@@ -21,11 +36,11 @@ module SpeckleSystems::SpeckleConnector
    dialog
  end

-  def self.show_dialog
+  def self.create_dialog(show: true)
    if @dialog&.visible?
      @dialog.bring_to_front
    else
-      @dialog ||= create_dialog
+      @dialog ||= init_dialog
      @dialog.add_action_callback("send_selection") do |_action_context, stream_id|
        send_selection(stream_id)
        nil
@@ -37,13 +52,30 @@ module SpeckleSystems::SpeckleConnector
      @dialog.add_action_callback("reload_accounts") do |_action_context|
        reload_accounts
      end
-
      @dialog.add_action_callback("init_local_accounts") do |_action_context|
        init_local_accounts
-
      end
+      @dialog.add_action_callback("load_saved_streams") do |_action_context|
+        load_saved_streams
+      end
+      @dialog.add_action_callback("save_stream") do |_action_context, stream_id|
+        save_stream(stream_id)
+      end
+      @dialog.add_action_callback("remove_stream") do |_action_context, stream_id|
+        remove_stream(stream_id)
+      end
+      @dialog.add_action_callback("notify_connected") do |_action_context, stream_id|
+        notify_connected(stream_id)
+      end
+
+      # set connected to false when dialog is closed
+      @dialog.set_can_close do
+        @connected = false
+        !@connected
+      end
+
      if DEV_MODE
-        puts('Launching Speckle Connector from http://localhost:8081')
+        puts("Launching Speckle Connector from http://localhost:8081")
        @dialog.set_url("http://localhost:8081")
      else
        html_file = File.join(File.dirname(File.expand_path(__FILE__)), "html", "index.html")
@@ -51,16 +83,23 @@ module SpeckleSystems::SpeckleConnector
        @dialog.set_file(html_file)
      end

-      @dialog.show
-
-      @dialog
+      @dialog.show if show
    end
+    @dialog
+  end
+
+  def self.notify_connected(stream_id)
+    @connected = true
+    send_from_queue(stream_id)
+  end
+
+  def self.convert_to_speckle(to_convert)
+    converter = ConverterSketchup.new(UNITS[Sketchup.active_model.options["UnitsOptions"]["LengthUnit"]])
+    to_convert.map { |entity| converter.convert_to_speckle(entity) }
  end

  def self.send_selection(stream_id)
-    model = Sketchup.active_model
-    converter = ConverterSketchup.new(UNITS[model.options["UnitsOptions"]["LengthUnit"]])
-    converted = model.selection.map { |entity| converter.convert_to_speckle(entity) }
+    converted = convert_to_speckle(Sketchup.active_model.selection)
    puts("converted #{converted.count} objects for stream #{stream_id}")
    # puts(converted.to_json)
    @dialog.execute_script("convertedFromSketchup('#{stream_id}',#{converted.to_json})")
@@ -80,6 +119,32 @@ module SpeckleSystems::SpeckleConnector
    @dialog.execute_script("sketchupOperationFailed('#{stream_id}')")
  end

+  def self.one_click_send
+    acct = Accounts.default_account
+    return puts("No local account found. Please refer to speckle.guide for more information.") if acct.nil?
+
+    create_dialog
+    to_convert = Sketchup.active_model.selection.count > 0 ? Sketchup.active_model.selection : Sketchup.active_model.entities
+    if first_saved_stream.nil?
+      create_stream(to_convert)
+    else
+      queue_send(first_saved_stream, convert_to_speckle(to_convert))
+    end
+  rescue StandardError => e
+    puts(e)
+    @dialog.execute_script("sketchupOperationFailed('#{@to_send[:stream_id]}')")
+  end
+
+  def self.first_saved_stream
+    saved_streams = Sketchup.active_model.attribute_dictionary("speckle", true)["streams"] or []
+    saved_streams.nil? || saved_streams.empty? ? nil : saved_streams[0]
+  end
+
+  def self.load_saved_streams
+    saved_streams = Sketchup.active_model.attribute_dictionary("speckle", true)["streams"] or []
+    @dialog.execute_script("setSavedStreams(#{saved_streams})")
+  end
+
  def self.init_local_accounts
    puts("Initialisation of Speckle accounts requested by plugin")
    @dialog.execute_script("loadAccounts(#{Accounts.load_accounts.to_json}, #{Accounts.get_suuid.to_json})")
@@ -88,5 +153,52 @@ module SpeckleSystems::SpeckleConnector
  def self.reload_accounts
    puts("Reload of Speckle accounts requested by plugin")
    @dialog.execute_script("loadAccounts(#{Accounts.load_accounts.to_json})")
+    load_saved_streams
+  end
+
+  def self.save_stream(stream_id)
+    speckle_dict = Sketchup.active_model.attribute_dictionary("speckle", true)
+    saved = speckle_dict["streams"] || []
+    saved = saved.empty? ? [stream_id] : saved.unshift(stream_id)
+    speckle_dict["streams"] = saved
+
+    load_saved_streams
+  end
+
+  def self.remove_stream(stream_id)
+    speckle_dict = Sketchup.active_model.attribute_dictionary("speckle", true)
+    saved = speckle_dict["streams"] || []
+    saved -= [stream_id]
+    speckle_dict["streams"] = saved
+
+    load_saved_streams
+  end
+
+  def self.create_stream(to_convert)
+    acct = Accounts.default_account
+    return if acct.nil?
+
+    path = Sketchup.active_model.path
+    stream_name = path ? File.basename(path, ".*") : "Untitled SketchUp Model"
+    query = "mutation streamCreate($stream: StreamCreateInput!) {streamCreate(stream: $stream)}"
+    vars = { stream: { name: stream_name, description: "Stream created from SketchUp" } }
+
+    request = Sketchup::Http::Request.new("#{acct["serverInfo"]["url"]}/graphql", Sketchup::Http::POST)
+    request.headers = { "Authorization" => "Bearer #{acct["token"]}", "Content-Type" => "application/json" }
+    request.body = { query: query, variables: vars }.to_json
+
+    request.start do |_req, res|
+      res_data = JSON.parse(res.body)["data"]
+      raise(StandardError) unless res_data
+
+      stream_id = res_data["streamCreate"]
+      save_stream(stream_id)
+      queue_send(stream_id, convert_to_speckle(to_convert))
+      # send_selection(stream_id)
+    end
+    load_saved_streams
+  rescue StandardError => e
+    puts(e)
+    puts("Could not create a new stream")
  end
 end
@@ -1,13 +1,13 @@
 # frozen_string_literal: true

 require "sketchup"
-require "speckle_connector/dialog.rb"
-require "speckle_connector/debug.rb"
+require "speckle_connector/dialog"
+require "speckle_connector/debug"

 module SpeckleSystems
  module SpeckleConnector
    unless file_loaded?(__FILE__)
-      cmd_cube = UI::Command.new("Dialog") { show_dialog }
+      cmd_cube = UI::Command.new("Dialog") { create_dialog }
      cmd_cube.tooltip = "Launch Connector"
      cmd_cube.status_bar_text = "Opens the Speckle Connector window"
      cmd_cube.small_icon  = "icons/s2logo.png"
@@ -16,8 +16,18 @@ module SpeckleSystems
      menu = UI.menu("Tools")
      menu.add_item(cmd_cube)

+      cmd_send = UI::Command.new("Send") { one_click_send }
+      cmd_send.tooltip = "Send to Speckle"
+      cmd_send.status_bar_text = "Send to Speckle"
+      cmd_send.small_icon = "icons/Sender.png"
+      cmd_send.large_icon = "icons/Sender.png"
+
+      menu = UI.menu("Tools")
+      menu.add_item(cmd_send)
+
      toolbar = UI::Toolbar.new("Speckle")
      toolbar.add_item(cmd_cube)
+      toolbar.add_item(cmd_send)
      toolbar.restore

      file_loaded(__FILE__)
@@ -5,19 +5,18 @@
  "requires": true,
  "packages": {
    "": {
-      "name": "ui",
      "version": "0.1.0",
      "dependencies": {
        "@speckle/objectloader": "^2.3.0",
        "aws-sdk": "^2.981.0",
        "core-js": "^3.6.5",
        "debounce": "^1.2.1",
+        "mixpanel-browser": "^2.45.0",
        "register-service-worker": "^1.7.1",
        "sqlite3": "^5.0.2",
        "v-tooltip": "^2.1.3",
        "vue": "^2.6.11",
        "vue-apollo": "^3.0.0-beta.11",
-        "vue-matomo": "^4.1.0",
        "vue-router": "^3.2.0",
        "vue-timeago": "^5.1.3",
        "vuetify": "^2.4.0"
@@ -16196,6 +16195,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/mixpanel-browser": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.45.0.tgz",
+      "integrity": "sha512-PQ1DaTk68yyYtLA0iejmzPA9iNDhT4uIZpqZjRTw7HWpYfl123fydHb2laKanaKjm8YDmrGGz3+xZ4Q6joogyg=="
+    },
    "node_modules/mkdirp": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
@@ -23124,15 +23128,6 @@
      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
      "dev": true
    },
-    "node_modules/vue-matomo": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.1.0.tgz",
-      "integrity": "sha512-y+tdmhY835Ip3EAGfIAgA33+aBYrvRT7fNnBnA7bSM459XpoWXgqJKdbopVpEUrxCPIq8IkuF7g4KqSLc0Fa3w==",
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
    "node_modules/vue-resize": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
@@ -37341,6 +37336,11 @@
        "is-extendable": "^1.0.1"
      }
    },
+    "mixpanel-browser": {
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.45.0.tgz",
+      "integrity": "sha512-PQ1DaTk68yyYtLA0iejmzPA9iNDhT4uIZpqZjRTw7HWpYfl123fydHb2laKanaKjm8YDmrGGz3+xZ4Q6joogyg=="
+    },
    "mkdirp": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
@@ -42932,11 +42932,6 @@
        }
      }
    },
-    "vue-matomo": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.1.0.tgz",
-      "integrity": "sha512-y+tdmhY835Ip3EAGfIAgA33+aBYrvRT7fNnBnA7bSM459XpoWXgqJKdbopVpEUrxCPIq8IkuF7g4KqSLc0Fa3w=="
-    },
    "vue-resize": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
@@ -13,12 +13,12 @@
    "aws-sdk": "^2.981.0",
    "core-js": "^3.6.5",
    "debounce": "^1.2.1",
+    "mixpanel-browser": "^2.45.0",
    "register-service-worker": "^1.7.1",
    "sqlite3": "^5.0.2",
    "v-tooltip": "^2.1.3",
    "vue": "^2.6.11",
    "vue-apollo": "^3.0.0-beta.11",
-    "vue-matomo": "^4.1.0",
    "vue-router": "^3.2.0",
    "vue-timeago": "^5.1.3",
    "vuetify": "^2.4.0"
@@ -147,6 +147,7 @@ export default {
  mounted() {
    bus.$on('selected-account-reloaded', async () => {
      await onLogin(this.$apollo.provider.defaultClient)
+      this.$refreshMixpanelIds()
      this.refresh()
    })
    bus.$on('streams-loaded', () => {
@@ -162,18 +163,19 @@ export default {
    switchTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
      localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light')
+      this.$mixpanel.track('Connector Action', { name: 'Toggle Theme' })
    },
    switchAccount(account) {
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/account/switch`)
-      this.$matomo && this.$matomo.trackPageView(`account/switch`)
+      this.$mixpanel.track('Connector Action', { name: 'Account Select' })
      global.setSelectedAccount(account)
    },
    requestRefresh() {
      sketchup.reload_accounts()
+      sketchup.load_saved_streams()
+      this.refresh()
    },
    refresh() {
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/stream/list`)
-      this.$matomo && this.$matomo.trackPageView(`stream/list`)
+      this.$mixpanel.track('Connector Action', { name: 'Refresh' })
      this.$apollo.queries.user.refetch()
      bus.$emit('refresh-streams')
    }
@@ -2,7 +2,7 @@
  <v-snackbar v-model="snack" app bottom color="primary">
    {{ text }}
    <template #action="{}">
-      <v-btn v-if="actionName" :to="to" @click.append="snack = false">
+      <v-btn v-if="actionName" small outlined @click="openUrl(url)" @click:append="snack = false">
        {{ actionName }}
      </v-btn>
      <v-btn small icon @click="snack = false">
@@ -18,7 +18,7 @@ export default {
      snack: false,
      text: null,
      actionName: null,
-      to: null
+      url: null
    }
  },
  watch: {
@@ -26,7 +26,7 @@ export default {
      if (!newVal) {
        this.text = null
        this.actionName = null
-        this.to = null
+        this.url = null
      }
    }
  },
@@ -35,8 +35,14 @@ export default {
      this.snack = true
      this.text = args.text
      this.actionName = args.action ? args.action.name : null
-      this.to = args.action ? args.action.to : 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>
@@ -6,11 +6,17 @@
    @mouseleave="hover = false"
  >
    <v-toolbar flat height="70">
-      <v-toolbar-title class="ml-0">
+      <v-toolbar-title class="ml-0" style="position: relative; left: -10px">
        <!-- Uncomment when pinning is in place and add style="position: relative; left: -10px" to the element above :)  -->
-        <!-- <v-btn v-tooltip="'Pin this stream - it will be saved to this file.'" icon x-small>
-          <v-icon x-small>mdi-pin</v-icon>
-        </v-btn> -->
+        <v-btn
+          v-tooltip="'Pin this stream - it will be saved to this file.'"
+          icon
+          x-small
+          @click="toggleSavedStream"
+        >
+          <v-icon v-if="saved" x-small>mdi-pin</v-icon>
+          <v-icon v-else x-small>mdi-pin-outline</v-icon>
+        </v-btn>
        {{ stream.name }}
      </v-toolbar-title>
      <v-spacer />
@@ -157,12 +163,20 @@ global.sketchupOperationFailed = function (streamId) {
  bus.$emit(`sketchup-fail-${streamId}`)
 }

+global.oneClickSend = function (streamId) {
+  bus.$emit(`one-click-send-${streamId}`)
+}
+
 export default {
  name: 'StreamCard',
  props: {
    streamId: {
      type: String,
      default: null
+    },
+    saved: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
@@ -266,12 +280,16 @@ export default {
      this.loadingStage = null
    })
    bus.$on(`sketchup-fail-${this.streamId}`, () => {
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/stream/fail`)
-      this.$matomo && this.$matomo.trackPageView(`stream/fail`)
+      this.$mixpanel.track('Connector Action', { name: 'Stream Fail' })
      console.log('>>> SpeckleSketchUp: operation failed', this.streamId)
      this.loadingReceive = this.loadingSend = false
      this.loadingStage = null
    })
+    bus.$on(`one-click-send-${this.streamId}`, () => {
+      this.$mixpanel.track('Send', { oneClick: true })
+    })
+
+    if (this.saved) sketchup.notify_connected(this.streamId)
  },
  methods: {
    sleep(ms) {
@@ -279,21 +297,30 @@ export default {
    },
    openInWeb() {
      window.open(`${localStorage.getItem('serverUrl')}/streams/${this.streamId}`)
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/stream/open-in-web`)
-      this.$matomo && this.$matomo.trackPageView(`stream/open-in-web`)
+      this.$mixpanel.track('Connector Action', { name: 'Open In Web' })
    },
    switchBranch(branchName) {
+      this.$mixpanel.track('Connector Action', { name: 'Branch Switch' })
      this.branchName = branchName
      this.commitId = 'latest'
    },
    switchCommit(commitId) {
+      this.$mixpanel.track('Connector Action', { name: 'Commit Switch' })
      this.commitId = commitId
    },
+    toggleSavedStream() {
+      if (this.saved) {
+        sketchup.remove_stream(this.streamId)
+        this.$mixpanel.track('Connector Action', { name: 'Stream Remove' })
+      } else {
+        sketchup.save_stream(this.streamId)
+        this.$mixpanel.track('Connector Action', { name: 'Stream Save' })
+      }
+    },
    async receive() {
      this.loadingStage = 'requesting'
      this.loadingReceive = true
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/receive`)
-      this.$matomo && this.$matomo.trackPageView(`receive`)
+      this.$mixpanel.track('Receive')
      const refId = this.selectedCommit?.referencedObject
      if (!refId) {
        this.loadingReceive = false
@@ -336,8 +363,7 @@ export default {
    async send() {
      this.loadingStage = 'converting'
      this.loadingSend = true
-      this.$matomo && this.$matomo.setCustomUrl(`http://connectors/SketchUp/send`)
-      this.$matomo && this.$matomo.trackPageView(`send`)
+      this.$mixpanel.track('Send', { oneClick: false })
      sketchup.send_selection(this.streamId)
      console.log('>>> SpeckleSketchUp: Objects requested from SketchUp')
      await this.sleep(2000)
@@ -378,7 +404,7 @@ export default {
          sourceApplication: 'sketchup',
          totalChildrenCount: s.objects[hash].totalChildrenCount
        }
-        await this.$apollo.mutate({
+        var res = await this.$apollo.mutate({
          mutation: gql`
            mutation CommitCreate($commit: CommitCreateInput!) {
              commitCreate(commit: $commit)
@@ -390,8 +416,15 @@ export default {
        })
        console.log('>>> SpeckleSketchUp: Sent to stream: ' + this.streamId, commit)
        this.$eventHub.$emit('notification', {
-          text: 'Model selection sent!'
+          text: 'Model selection sent!',
+          action: {
+            name: 'View in Web',
+            url: `${localStorage.getItem('serverUrl')}/streams/${this.streamId}/commits/${
+              res.data.commitCreate
+            }`
+          }
        })
+        this.$apollo.queries.stream.refetch()
        this.loadingSend = false
        this.loadingStage = null
      } catch (err) {
@@ -14,13 +14,8 @@ Vue.use(VueTimeago, { locale: 'en' })
 import VueTooltip from 'v-tooltip'
 Vue.use(VueTooltip)

-import VueMatomo from 'vue-matomo'
-
-Vue.use(VueMatomo, {
-  host: 'https://speckle.matomo.cloud',
-  siteId: 2,
-  userId: localStorage.getItem('suuid')
-})
+import SpeckleMetrics from './plugins/speckle-metrics'
+Vue.use(SpeckleMetrics, { token: 'acd87c5a50b56df91a795e999812a3a4' })

 export const bus = new Vue()

@@ -0,0 +1,42 @@
+var mixpanel = require('mixpanel-browser')
+import crypto from 'crypto'
+
+const SpeckleMetrics = {
+  install(Vue, { token, config }) {
+    config = config || {
+      // eslint-disable-next-line camelcase
+      api_host: 'https://analytics.speckle.systems'
+    }
+
+    Vue.prototype.$mixpanel = mixpanel
+    Vue.prototype.$mixpanel.init(token, config)
+    Vue.prototype.$mixpanel.register({ hostApp: 'sketchup', type: 'action' })
+
+    Vue.prototype.$refreshMixpanelIds = function () {
+      let distinctId =
+        '@' +
+        crypto
+          .createHash('md5')
+          .update(
+            JSON.parse(localStorage.getItem('selectedAccount'))['userInfo']['email'].toLowerCase()
+          )
+          .digest('hex')
+          .toUpperCase()
+
+      let serverId = crypto
+        .createHash('md5')
+        .update(localStorage.getItem('serverUrl').toLowerCase())
+        .digest('hex')
+        .toUpperCase()
+
+      Vue.prototype.$mixpanel.register({
+        // eslint-disable-next-line camelcase
+        distinct_id: distinctId,
+        // eslint-disable-next-line camelcase
+        server_id: serverId
+      })
+    }
+  }
+}
+
+export default SpeckleMetrics
@@ -10,8 +10,13 @@
      </v-col>
    </v-row>
    <div v-if="!streamsFound" class="text-subtitle-1 text-center mt-8">No streams found... 👀</div>
-    <div v-if="streams" class="mt-5">
-      <div v-for="stream in streams.items" :key="stream.id">
+    <div v-if="savedStreams" class="mt-5">
+      <div v-for="streamId in savedStreams" :key="streamId">
+        <stream-card :stream-id="streamId" :saved="true" />
+      </div>
+    </div>
+    <div v-if="allStreamsList" class="mt-5">
+      <div v-for="stream in allStreamsList" :key="stream.id">
        <stream-card :stream-id="stream.id" />
      </div>
      <div class="actions text-center">
@@ -30,9 +35,15 @@
 </template>

 <script>
+/*global sketchup*/
 import gql from 'graphql-tag'
 import { bus } from '../main'

+global.setSavedStreams = function (streamIds) {
+  localStorage.setItem('savedStreams', JSON.stringify(streamIds))
+  bus.$emit('set-saved-streams', streamIds)
+}
+
 const streamLimit = 5
 export default {
  name: 'Streams',
@@ -44,18 +55,33 @@ export default {
  },
  data() {
    return {
-      showMoreEnabled: true
+      showMoreEnabled: true,
+      savedStreams: []
    }
  },
  computed: {
    streamsFound() {
-      return this.streams && this.streams?.items?.length != 0
+      return (this.streams && this.streams?.items?.length != 0) || this.savedStreams?.length !== 0
+    },
+    isSavedStream(streamId) {
+      return this.savedStreams?.includes(streamId)
+    },
+    allStreamsList() {
+      if (this.$apollo.loading) return
+      return this.streams?.items.filter((stream) => !this.savedStreams?.includes(stream.id))
    }
  },
  mounted() {
    bus.$on('refresh-streams', () => {
      this.$apollo.queries.streams.refetch()
    })
+
+    bus.$on('set-saved-streams', (streamIds) => {
+      this.savedStreams = streamIds
+    })
+    sketchup.load_saved_streams()
+    console.log('LAUNCHED')
+    this.$mixpanel.track('Connector Action', { name: 'Launched' })
  },
  apollo: {
    streams: {
@@ -85,6 +111,28 @@ export default {
        this.showMoreEnabled = data.streams?.items.length < data.streams.totalCount
        return data.streams
      }
+    },
+    $subscribe: {
+      userStreamAdded: {
+        query: gql`
+          subscription {
+            userStreamAdded
+          }
+        `,
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      },
+      userStreamRemoved: {
+        query: gql`
+          subscription {
+            userStreamRemoved
+          }
+        `,
+        result() {
+          this.$apollo.queries.stream.refetch()
+        }
+      }
    }
  },
  methods: {