Repository: h2oai/wave
File: studio/studio.js (JavaScript)

Code before:
      return 'book-open'
    case 'png':
      return 'file-png-box'
    case 'py':
      return 'language-python'
    case 'svg':
      return 'svg'
    case 'txt':
      return 'file-document'
    case 'xml':
      return 'file-xml-box'
    case 'zip':
      return 'folder-zip'
    default:
      return 'file'
  }
}

const store = Vue.reactive({
  activeFile: 'project/app.py'
})

// Tree file viewer.
const Tree = {
  mounted() {
    this.bus.on('openFolder', () => { this.isSubtreeOpen = true })
  },
  props: { folder: { type: Object, required: false }, },
  data() { return { isSubtreeOpen: true, store, timer: null, clickCount: 0 } },
  methods: {
    onContextMenu(e) {
      eventBus.emit('menu', { e, folder: this.folder })
    },
    onCreated() {
      this.folder.action = null
      window.parent.wave.emit('file_viewer', this.folder.isFolder ? 'new_folder' : 'new_file', { path: this.folder.path, name: this.folder.label })
    },
    rename() {
      this.folder.action = 'rename'
      this.folder._labelCache = this.folder.label
    },
    onRenamed() {
      this.folder.action = null
      window.parent.wave.emit('file_viewer', this.folder.isFolder ? 'rename_folder' : 'rename_file', { path: this.folder.path, name: this.folder.label })
    },
    onCreateCanceled() {
      this.folder.label = ''
      this.folder.action = null
    },
    onRenameCanceled() {
      this.folder.action = null

Review comment (suggestion):
Nit
```suggestion
    this.bus.on('openFolder', () => this.isSubtreeOpen = true )
```

Code after:

const baseUrl = '$base_url'

const store = Vue.reactive({
  activeFile: 'project/app.py'
})

const
  getIconSrc = (folder, isSubtreeOpen) => {
    if (folder.isFolder) return isSubtreeOpen ? baseUrl + 'assets/img/folder-open.svg' : baseUrl + 'assets/img/folder.svg'
    if (folder.path) return baseUrl + `assets/img/file-icons/$${iconLabels[folder.path.split('.').pop()] || 'file'}.svg`
  },
  getItemLeftPadding = (folder) => {
    if (folder.path) return (folder.path.split('/').length - (folder.action === 'new' ? 0 : 1)) * 0.7 + 'rem'
  }

// Tree file viewer.
const Tree = {
  mounted() {
    this.bus.on('openFolder', () => this.isSubtreeOpen = true)
  },
  props: { folder: { type: Object, required: false }, },
  data() { return { isSubtreeOpen: true, store } },
  methods: {
    onContextMenu(e) {
      eventBus.emit('menu', { e, folder: this.folder })
    },
    onCreated() {
      this.folder.action = null
      window.parent.wave.emit('file_viewer', this.folder.isFolder ? 'new_folder' : 'new_file', { path: this.folder.path, name: this.folder.label })
    },
    rename() {
      this.folder.action = 'rename'
      this.folder._labelCache = this.folder.label
    },
    onRenamed() {
      this.folder.action = null
      window.parent.wave.emit('file_viewer', this.folder.isFolder ? 'rename_folder' : 'rename_file', { path: this.folder.path, name: this.folder.label })
    },
    onCreateCanceled() {
      this.folder.label = ''
      this.folder.action = null
    },
    onRenameCanceled() {
      this.folder.action = null
      // HACK: blur is fired after keyup resulting in calling onRenameCanceled twice 
      // condition prevents from assigning 'null' to 'folder.label' on second call
      // TODO: prevent blur event after keyup
      if (this.folder._labelCache) this.folder.label = this.folder._labelCache
      this.folder._labelCache = null
    },