From 5da0b43860ed63d53dbbad6210957a28b4890835 Mon Sep 17 00:00:00 2001
From: Tucsky <tucsky@pm.me>
Date: Tue, 29 Oct 2024 17:28:24 +0100
Subject: [PATCH] feat: markdown editor for indicators description

---
 package-lock.json                             |   4 +-
 src/assets/sass/editor.scss                   |  30 +++
 src/components/chart/buildUtils.ts            |   3 +-
 src/components/chart/chart.d.ts               |   1 +
 src/components/chart/chart.ts                 |  13 +-
 src/components/framework/Dialog.vue           |  12 +-
 src/components/framework/PromptDialog.vue     |  48 ++++-
 src/components/framework/editor/Editor.vue    |  44 +---
 .../framework/editor/MarkdownEditor.vue       | 204 ++++++++++++++++++
 src/components/framework/editor/editor.ts     |  39 ++++
 src/components/indicators/IndicatorDetail.vue |  70 +++---
 .../indicators/IndicatorPreview.vue           |   8 +
 src/components/library/EditResourceDialog.vue |  31 ++-
 src/components/library/helpers.ts             |  38 ++++
 src/services/dialogService.ts                 |   4 +-
 src/services/importService.ts                 |  14 +-
 src/store/panesSettings/chart.ts              |   2 +-
 17 files changed, 456 insertions(+), 109 deletions(-)
 create mode 100644 src/assets/sass/editor.scss
 create mode 100644 src/components/framework/editor/MarkdownEditor.vue

diff --git a/package-lock.json b/package-lock.json
index 7ac3cd18..2124f8ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aggr",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aggr",
-      "version": "3.6.1",
+      "version": "3.6.3",
       "dependencies": {
         "@mdi/font": "^5.6.55",
         "@vue/eslint-config-typescript": "^11.0.3",
diff --git a/src/assets/sass/editor.scss b/src/assets/sass/editor.scss
new file mode 100644
index 00000000..3e718dbc
--- /dev/null
+++ b/src/assets/sass/editor.scss
@@ -0,0 +1,30 @@
+.editor {
+  height: 100%;
+  min-height: 50px;
+
+  .monaco-editor {
+    #app.-light & {
+      --vscode-editor-background: var(--theme-background-100);
+      --vscode-editorStickyScroll-background: var(--theme-background-100);
+      --vscode-editorStickyScrollHover-background: var(--theme-background-100);
+      --vscode-editorGutter-background: var(--theme-background-100);
+    }
+
+    .minimap-shadow-visible {
+      box-shadow: rgb(0 0 0 / 10%) -6px 0 6px -6px inset;
+    }
+
+    .scroll-decoration {
+      box-shadow: rgb(0 0 0 / 10%) 0 6px 6px -6px inset;
+    }
+
+    .view-overlays .current-line {
+      border-color: var(--theme-background-100);
+    }
+
+    .minimap {
+      left: auto !important;
+      right: 0 !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/chart/buildUtils.ts b/src/components/chart/buildUtils.ts
index 5efd0d7a..1d7e1e58 100644
--- a/src/components/chart/buildUtils.ts
+++ b/src/components/chart/buildUtils.ts
@@ -831,7 +831,8 @@ function parseReferences(
           references.push({
             indicatorId,
             serieId,
-            plotIndex
+            plotIndex,
+            plotType: 'unknown'
           })
         }
 
diff --git a/src/components/chart/chart.d.ts b/src/components/chart/chart.d.ts
index 7f5a9e5a..824177b8 100644
--- a/src/components/chart/chart.d.ts
+++ b/src/components/chart/chart.d.ts
@@ -108,6 +108,7 @@ export interface IndicatorReference {
   indicatorId: string
   serieId?: string
   plotIndex: number
+  plotType: string
 }
 export interface Renderer {
   minLength: number
diff --git a/src/components/chart/chart.ts b/src/components/chart/chart.ts
index b0b28073..99820ba6 100644
--- a/src/components/chart/chart.ts
+++ b/src/components/chart/chart.ts
@@ -1400,9 +1400,11 @@ export default class Chart {
                 this.incrementRendererBar(temporaryRenderer)
 
                 for (const id in computedSeries) {
-                  computedSeries[id].push({
-                    time: temporaryRenderer.localTimestamp
-                  })
+                  if (this.seriesIndicatorsMap[id].plotType !== 'broken-area') {
+                    computedSeries[id].push({
+                      time: temporaryRenderer.localTimestamp
+                    })
+                  }
                 }
 
                 barCount++
@@ -1475,7 +1477,7 @@ export default class Chart {
     }
   }
 
-  createIndicatorSeries(indicator) {
+  createIndicatorSeries(indicator: LoadedIndicator) {
     if (!indicator.model) {
       return
     }
@@ -1501,7 +1503,8 @@ export default class Chart {
 
       this.seriesIndicatorsMap[plot.id] = {
         indicatorId: indicator.id,
-        plotIndex: i
+        plotIndex: i,
+        plotType: plot.type
       }
       series.push(plot.id)
 
diff --git a/src/components/framework/Dialog.vue b/src/components/framework/Dialog.vue
index 565a31db..13b4b2ac 100644
--- a/src/components/framework/Dialog.vue
+++ b/src/components/framework/Dialog.vue
@@ -183,7 +183,7 @@ export default class Dialog extends Vue {
 
   handleDrag(event) {
     if (
-      this._handleTranslateRelease || 
+      this._handleTranslateRelease ||
       event.button === 2 ||
       event.target.classList.contains('-no-grab') ||
       event.target.parentElement.classList.contains('-no-grab')
@@ -338,9 +338,15 @@ export default class Dialog extends Vue {
     }
 
     if (savePosition) {
-      this.savePosition(position)
+      if (
+        typeof position.w === 'number' &&
+        typeof position.h === 'number' &&
+        (position.w !== this.position?.w || position.h !== this.position?.h)
+      ) {
+        this.$emit('resize')
+      }
 
-      this.$emit('resize')
+      this.savePosition(position)
     }
 
     if (this._persistTimeout) {
diff --git a/src/components/framework/PromptDialog.vue b/src/components/framework/PromptDialog.vue
index f8dfbdd2..515c0b28 100644
--- a/src/components/framework/PromptDialog.vue
+++ b/src/components/framework/PromptDialog.vue
@@ -1,12 +1,31 @@
 <template>
-  <Dialog @clickOutside="close" size="small" :resizable="false">
+  <Dialog
+    @clickOutside="close"
+    size="small"
+    :resizable="tag === 'editor'"
+    @resize="resizeEditor"
+  >
     <template v-slot:header>
       <div class="dialog__title">{{ action }}</div>
     </template>
     <p class="mt0 mb8 -nl" v-if="question">{{ question }}</p>
-    <form ref="form" @submit.prevent="submit">
-      <div class="form-group">
-        <label v-if="label">{{ label }}</label>
+    <form
+      ref="form"
+      class="flex-grow-1 d-flex -column"
+      @submit.prevent="submit"
+    >
+      <div class="form-group flex-grow-1 d-flex -column">
+        <div class="d-flex mb8">
+          <label class="mr8 mt4 mb4">{{ label }}</label>
+
+          <label
+            v-if="tag === 'editor'"
+            class="checkbox-control -small mlauto mr0"
+          >
+            <input type="checkbox" class="form-control" v-model="showPreview" />
+            <div v-tippy title="Show preview"></div>
+          </label>
+        </div>
         <input
           v-if="tag === 'input'"
           type="text"
@@ -16,6 +35,15 @@
           v-autofocus
           v-on:keyup.enter="submit"
         />
+        <MarkdownEditor
+          v-else-if="tag === 'editor'"
+          class="w-100 flex-grow-1"
+          ref="editor"
+          v-model="value"
+          :show-preview="showPreview"
+          minimal
+          autofocus
+        />
         <textarea
           v-else
           type="text"
@@ -42,6 +70,10 @@
 import DialogMixin from '@/mixins/dialogMixin'
 
 export default {
+  components: {
+    MarkdownEditor: () =>
+      import('@/components/framework/editor/MarkdownEditor.vue')
+  },
   props: {
     tag: {
       type: String,
@@ -73,7 +105,8 @@ export default {
   },
   mixins: [DialogMixin],
   data: () => ({
-    value: ''
+    value: '',
+    showPreview: false
   }),
   mounted() {
     if (this.input && this.input.length) {
@@ -83,6 +116,11 @@ export default {
   methods: {
     submit() {
       this.close(this.value)
+    },
+    resizeEditor() {
+      if (this.$refs.editor && this.$refs.editor.resize) {
+        this.$refs.editor.resize()
+      }
     }
   }
 }
diff --git a/src/components/framework/editor/Editor.vue b/src/components/framework/editor/Editor.vue
index 5615fcaa..3a61b6b6 100644
--- a/src/components/framework/editor/Editor.vue
+++ b/src/components/framework/editor/Editor.vue
@@ -60,8 +60,6 @@ export default class Editor extends Vue {
       }
     }
 
-    this.createTheme()
-
     this.createEditor()
   }
 
@@ -109,45 +107,6 @@ export default class Editor extends Vue {
     window.addEventListener('beforeunload', this._beforeUnloadHandler)
   }
 
-  createTheme() {
-    const lsLight = this.$store.state.settings.theme === 'light'
-    const style = getComputedStyle(document.documentElement)
-    const backgroundColor = splitColorCode(
-      style.getPropertyValue('--theme-background-base')
-    )
-    const backgroundColor100 = splitColorCode(
-      style.getPropertyValue('--theme-background-100')
-    )
-    const backgroundColor150 = splitColorCode(
-      style.getPropertyValue('--theme-background-150')
-    )
-
-    if (lsLight) {
-      monaco.defineTheme('my-light', {
-        base: 'vs',
-        inherit: true,
-        rules: [],
-        colors: {
-          'minimap.background': rgbToHex(backgroundColor150),
-          'editor.background': rgbToHex(backgroundColor100),
-          'editor.lineHighlightBackground': rgbToHex(backgroundColor),
-          'editor.lineHighlightBorder': rgbToHex(backgroundColor)
-        }
-      })
-    } else {
-      monaco.defineTheme('my-dark', {
-        base: 'vs-dark',
-        inherit: true,
-        rules: [],
-        colors: {
-          'editor.background': rgbToHex(backgroundColor100),
-          'editor.lineHighlightBackground': rgbToHex(backgroundColor),
-          'editor.lineHighlightBorder': rgbToHex(backgroundColor)
-        }
-      })
-    }
-  }
-
   async createEditor() {
     this.editorInstance = monaco.create(this.$el as HTMLElement, {
       value: this.value,
@@ -162,8 +121,7 @@ export default class Editor extends Vue {
       overviewRulerLanes: 0,
       overviewRulerBorder: false,
       contextmenu: false,
-      theme:
-        this.$store.state.settings.theme === 'light' ? 'my-light' : 'my-dark'
+      theme: 'aggr'
     })
 
     this.editorInstance.getDomNode().addEventListener('mousedown', () => {
diff --git a/src/components/framework/editor/MarkdownEditor.vue b/src/components/framework/editor/MarkdownEditor.vue
new file mode 100644
index 00000000..c8729fd9
--- /dev/null
+++ b/src/components/framework/editor/MarkdownEditor.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="markdown-editor form-control">
+    <Loader v-if="isLoading" class="markdown-editor__loader" small />
+    <template v-if="isLoaded">
+      <div ref="editor" class="markdown-editor__monaco"></div>
+      <template v-if="showPreview">
+        <div class="markdown-editor__divider">
+          <span class="markdown-editor__divider-badge badge ml4">
+            preview
+          </span>
+        </div>
+        <div class="markdown-editor__preview" v-html="preview" />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import { marked } from 'marked'
+import Loader from '@/components/framework/Loader.vue'
+
+@Component({
+  name: 'MarkdownEditor',
+  components: {
+    Loader
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    minimal: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    showPreview: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+export default class MarkdownEditor extends Vue {
+  private value: string
+  private editorInstance: any
+  private minimal: boolean
+  private autofocus: boolean
+
+  isLoaded = false
+  isLoading = false
+
+  get preview() {
+    return marked(this.value)
+  }
+
+  @Watch('value')
+  onValueChange(value) {
+    if (value !== this.editorInstance.getValue()) {
+      this.editorInstance.setValue(value)
+    }
+  }
+
+  @Watch('showPreview')
+  onShowPreviewChange() {
+    this.resize()
+  }
+
+  async mounted() {
+    await this.loadMonaco()
+  }
+
+  beforeDestroy() {
+    this.editorInstance.dispose()
+  }
+
+  async loadMonaco() {
+    this.isLoading = true
+    try {
+      const { default: monaco } = await import('./editor')
+
+      this.isLoaded = true
+
+      await this.$nextTick()
+
+      this.createEditor(monaco)
+
+      await this.$nextTick()
+    } catch (error) {
+      console.error('Failed to load editor:', error)
+    } finally {
+      this.isLoading = false
+    }
+  }
+
+  async resize() {
+    this.editorInstance.layout({ width: 0, height: 0 })
+
+    await this.$nextTick()
+    this.editorInstance.layout()
+  }
+
+  getDefaultOptions(): any {
+    return {
+      padding: {
+        top: 8,
+        bottom: 8
+      },
+      value: this.value,
+      tabSize: 2,
+      insertSpaces: true,
+      fontSize: 12,
+      lineNumbers: 'off',
+      overviewRulerLanes: 0,
+      overviewRulerBorder: false,
+      contextmenu: false,
+      theme: 'aggr',
+
+      minimap: {
+        enabled: false
+      },
+      glyphMargin: false,
+      folding: false,
+      lineNumbersMinChars: 3,
+      scrollbar: {
+        vertical: 'visible'
+      },
+      renderLineHighlight: 'none',
+      renderIndentGuides: false,
+      renderLineHighlightOnlyWhenFocus: true,
+      renderValidationDecorations: 'off',
+      renderWhitespace: 'none',
+      rulers: [],
+      language: 'markdown'
+    }
+  }
+
+  async createEditor(monaco) {
+    console.log('create editor', monaco, this.$refs.editor)
+    this.editorInstance = monaco.create(
+      this.$refs.editor as HTMLElement,
+      this.getDefaultOptions()
+    )
+
+    this.editorInstance.onDidChangeModelContent(() => {
+      console.log('monaco change')
+      this.$emit('input', this.editorInstance.getValue())
+    })
+
+    if (this.autofocus) {
+      await this.$nextTick()
+      this.editorInstance.focus()
+      const model = this.editorInstance.getModel()
+      const lastLine = model.getLineCount()
+      const lastColumn = model.getLineMaxColumn(lastLine)
+      this.editorInstance.setPosition({
+        lineNumber: lastLine,
+        column: lastColumn
+      })
+    }
+
+    window.instance = this.editorInstance
+
+    await this.$nextTick()
+
+    this.editorInstance.layout()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.markdown-editor {
+  padding: 0;
+  flex-grow: 1;
+  display: flex;
+
+  &__monaco {
+    flex-grow: 1;
+  }
+
+  &__loader {
+    width: 1rem;
+    height: 1rem;
+    margin: 1rem auto;
+  }
+
+  &__divider {
+    position: relative;
+    background-color: var(--theme-background-200);
+    width: 1px;
+    height: 100%;
+  }
+
+  &__preview {
+    position: relative;
+    flex-basis: 33%;
+    overflow: auto;
+    padding: 0.5rem;
+    background-color: var(--theme-background-50);
+  }
+}
+</style>
diff --git a/src/components/framework/editor/editor.ts b/src/components/framework/editor/editor.ts
index e6d4a485..c26e4655 100644
--- a/src/components/framework/editor/editor.ts
+++ b/src/components/framework/editor/editor.ts
@@ -2,8 +2,10 @@ import 'monaco-editor/esm/vs/editor/editor.all.js'
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
 import 'monaco-editor/esm/vs/basic-languages/monaco.contribution'
 
+import store from '@/store'
 import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api'
 import { provideCompletionItems, provideHover } from './completion'
+import { rgbToHex, splitColorCode } from '@/utils/colors'
 
 languages.typescript.javascriptDefaults.setCompilerOptions({
   noLib: true,
@@ -24,4 +26,41 @@ languages.registerHoverProvider('javascript', {
   provideHover
 })
 
+const lsLight = store.state.settings.theme === 'light'
+const style = getComputedStyle(document.documentElement)
+const backgroundColor = splitColorCode(
+  style.getPropertyValue('--theme-background-base')
+)
+const backgroundColor100 = splitColorCode(
+  style.getPropertyValue('--theme-background-100')
+)
+const backgroundColor150 = splitColorCode(
+  style.getPropertyValue('--theme-background-150')
+)
+
+if (lsLight) {
+  editor.defineTheme('aggr', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'minimap.background': rgbToHex(backgroundColor150),
+      'editor.background': rgbToHex(backgroundColor100),
+      'editor.lineHighlightBackground': rgbToHex(backgroundColor),
+      'editor.lineHighlightBorder': rgbToHex(backgroundColor)
+    }
+  })
+} else {
+  editor.defineTheme('aggr', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': rgbToHex(backgroundColor100),
+      'editor.lineHighlightBackground': rgbToHex(backgroundColor),
+      'editor.lineHighlightBorder': rgbToHex(backgroundColor)
+    }
+  })
+}
+
 export default editor
diff --git a/src/components/indicators/IndicatorDetail.vue b/src/components/indicators/IndicatorDetail.vue
index 413d1aa8..1275b628 100644
--- a/src/components/indicators/IndicatorDetail.vue
+++ b/src/components/indicators/IndicatorDetail.vue
@@ -42,10 +42,9 @@
           <div class="indicator-detail__detail">
             <p
               class="indicator-detail__description"
+              v-html="description"
               @dblclick="editDescription"
-            >
-              {{ indicator.description || 'Add description' }}
-            </p>
+            />
             <ul class="indicator-detail__metadatas">
               <li
                 v-if="indicator.pr"
@@ -131,9 +130,10 @@ import { ago, sleep } from '@/utils/helpers'
 import dialogService from '@/services/dialogService'
 import workspacesService from '@/services/workspacesService'
 import EditResourceDialog from '@/components/library/EditResourceDialog.vue'
-import { openPublishDialog } from '@/components/library/helpers'
+import { openPublishDialog, fetchIndicator } from '@/components/library/helpers'
 import { computeThemeColorAlpha } from '@/utils/colors'
 import IndicatorPreview from './IndicatorPreview.vue'
+import { marked } from 'marked'
 
 export default {
   props: {
@@ -227,6 +227,18 @@ export default {
     },
     versions() {
       return this.indicator.versions || this.fetchedVersions || []
+    },
+    description() {
+      if (!this.indicator.description) {
+        if (this.installed) {
+          return 'Add description'
+        }
+
+        return ''
+      }
+
+      console.log('do marked')
+      return marked(this.indicator.description)
     }
   },
   watch: {
@@ -299,33 +311,11 @@ export default {
       this.isInstalling = true
 
       try {
-        let indicator
-
-        if (sha) {
-          console.log(
-            'path',
-            `${import.meta.env.VITE_APP_LIB_URL}version/${sha}/${
-              this.indicator.jsonPath
-            }`
-          )
-          indicator = await (
-            await fetch(
-              `${import.meta.env.VITE_APP_LIB_URL}version/${sha}/${
-                this.indicator.jsonPath
-              }`
-            )
-          ).json()
-        } else {
-          indicator = await (
-            await fetch(
-              `${import.meta.env.VITE_APP_LIB_URL}${this.indicator.jsonPath}`
-            )
-          ).json()
-        }
-
-        if (!indicator.data) {
-          throw new Error('invalid payload')
-        }
+        const indicator = await fetchIndicator(
+          this.indicator.jsonPath,
+          this.indicator.imagePath,
+          sha
+        )
 
         await importService.importIndicator(indicator, false, true)
       } catch (error) {
@@ -370,13 +360,16 @@ export default {
         return
       }
 
-      const description = await dialogService.prompt({
-        label: 'Description',
-        action: 'Edit',
-        placeholder: this.indicator.description,
-        input: this.indicator.description,
-        tag: 'textarea'
-      })
+      const description = await dialogService.prompt(
+        {
+          label: 'Description',
+          action: 'Edit',
+          placeholder: this.indicator.description,
+          input: this.indicator.description,
+          tag: 'editor'
+        },
+        'edit-description'
+      )
 
       if (description && description !== this.indicator.description) {
         await workspacesService.saveIndicator(
@@ -560,7 +553,6 @@ export default {
   &__description {
     margin: 0;
     flex-grow: 1;
-    white-space: pre-line;
   }
 
   &__detail {
diff --git a/src/components/indicators/IndicatorPreview.vue b/src/components/indicators/IndicatorPreview.vue
index b1a0134b..141dde98 100644
--- a/src/components/indicators/IndicatorPreview.vue
+++ b/src/components/indicators/IndicatorPreview.vue
@@ -120,6 +120,10 @@ export default {
       const preview = this.$refs.preview
       const image = this.$refs.image
 
+      if (!image) {
+        return
+      }
+
       const previewRect = preview.getBoundingClientRect()
       const imageRect = image.getBoundingClientRect()
 
@@ -151,6 +155,10 @@ export default {
       const preview = this.$refs.preview
       const image = this.$refs.image
 
+      if (!image) {
+        return
+      }
+
       const previewRect = preview.getBoundingClientRect()
       const imageRect = image.getBoundingClientRect()
 
diff --git a/src/components/library/EditResourceDialog.vue b/src/components/library/EditResourceDialog.vue
index 80c105e7..c9daedff 100644
--- a/src/components/library/EditResourceDialog.vue
+++ b/src/components/library/EditResourceDialog.vue
@@ -5,6 +5,7 @@
         v-if="dialogOpened"
         class="edit-resource-dialog"
         @clickOutside="hide"
+        @resize="resizeEditor"
       >
         <template v-slot:header>
           <div class="d-flex">
@@ -32,7 +33,7 @@
               required
             />
           </div>
-          <div class="form-group">
+          <div v-if="item.name !== name" class="form-group">
             <label for="label">&nbsp;</label>
             <label class="checkbox-control">
               <input type="checkbox" class="form-control" v-model="updateId" />
@@ -50,9 +51,22 @@
           <code class="-filled">{{ item.id }}</code> →
           <code class="-filled">{{ newId }}</code>
         </p>
-        <div class="form-group mb16">
-          <label for="label">Description</label>
-          <textarea class="form-control w-100" v-model="description"></textarea>
+        <div class="form-group mb16 flex-grow-1 d-flex -column">
+          <label for="label">
+            Description
+            <span
+              class="icon-info"
+              title='Markdown supported <span class="badge -red ml4">new</span>'
+              v-tippy
+            ></span>
+          </label>
+          <MarkdownEditor
+            class="w-100 flex-grow-1"
+            ref="editor"
+            style="height: auto"
+            v-model="description"
+            minimal
+          />
         </div>
         <div class="d-flex -gap16">
           <div class="form-group">
@@ -97,7 +111,9 @@ import { slugify, uniqueName } from '@/utils/helpers'
 export default {
   name: 'EditResourceDialog',
   components: {
-    Btn
+    Btn,
+    MarkdownEditor: () =>
+      import('@/components/framework/editor/MarkdownEditor.vue')
   },
   props: {
     item: {
@@ -229,6 +245,11 @@ export default {
 
       this.clearPreview()
       this.hasDeletedPreview = true
+    },
+    resizeEditor() {
+      if (this.$refs.editor) {
+        this.$refs.editor.resize()
+      }
     }
   }
 }
diff --git a/src/components/library/helpers.ts b/src/components/library/helpers.ts
index 1b80ad3b..2d63beeb 100644
--- a/src/components/library/helpers.ts
+++ b/src/components/library/helpers.ts
@@ -1,4 +1,5 @@
 import dialogService from '@/services/dialogService'
+import { ExportedIndicator } from '@/services/importService'
 import notificationService from '@/services/notificationService'
 
 export async function openPublishDialog(item) {
@@ -145,3 +146,40 @@ export async function uploadResource(item) {
     throw new Error('Failed to parse server response')
   }
 }
+
+export async function fetchIndicator(
+  jsonPath: string,
+  imagePath: string,
+  sha?: string
+): Promise<ExportedIndicator> {
+  let indicator: ExportedIndicator
+  let preview: Blob
+  if (sha) {
+    indicator = await (
+      await fetch(
+        `${import.meta.env.VITE_APP_LIB_URL}version/${sha}/${jsonPath}`
+      )
+    ).json()
+
+    preview = await (
+      await fetch(
+        `${import.meta.env.VITE_APP_LIB_URL}version/${sha}/${imagePath}`
+      )
+    ).blob()
+  } else {
+    indicator = await (
+      await fetch(`${import.meta.env.VITE_APP_LIB_URL}${jsonPath}`)
+    ).json()
+    preview = await (
+      await fetch(`${import.meta.env.VITE_APP_LIB_URL}${imagePath}`)
+    ).blob()
+  }
+
+  if (!indicator.data) {
+    throw new Error('invalid payload')
+  }
+
+  indicator.data.preview = preview
+
+  return indicator
+}
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index ca19a8e2..5b10f0c4 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -156,7 +156,7 @@ class DialogService {
     return this.openAsPromise(ConfirmDialog, options)
   }
 
-  async prompt(options: any) {
+  async prompt(options: any, dialogId = 'prompt') {
     if (!options) {
       return
     }
@@ -171,7 +171,7 @@ class DialogService {
       return
     }
 
-    return this.openAsPromise(PromptDialog, options, 'prompt')
+    return this.openAsPromise(PromptDialog, options, dialogId)
   }
 }
 
diff --git a/src/services/importService.ts b/src/services/importService.ts
index 1cfa750e..ba8183e6 100644
--- a/src/services/importService.ts
+++ b/src/services/importService.ts
@@ -5,6 +5,13 @@ import SettingsImportConfirmation from '../components/settings/ImportConfirmatio
 import store from '@/store'
 import notificationService from './notificationService'
 import { PaneType } from '../store/panes'
+import { IndicatorSettings } from '@/store/panesSettings/chart'
+import { SeriesOptions, SeriesOptionsMap } from 'lightweight-charts'
+
+export interface ExportedIndicator {
+  name: string
+  data: IndicatorSettings & { presets: Preset[] }
+}
 
 class ImportService {
   getJSON(file: File) {
@@ -130,18 +137,19 @@ class ImportService {
   }
 
   async importIndicator(
-    json,
+    json: ExportedIndicator,
     { save = false, addToChart = false, openLibrary = false }
   ) {
     const name = json.name.replace(/^indicators?:/, '')
     const now = Date.now()
-    let indicator = {
+    let indicator: IndicatorSettings = {
       id: null,
       name,
       displayName: json.data.displayName || name,
       author: json.data.author || null,
       script: json.data.script || '',
-      options: json.data.options || {},
+      options:
+        json.data.options || ({} as SeriesOptions<keyof SeriesOptionsMap>),
       description: json.data.description || null,
       createdAt: json.data.createdAt || now,
       updatedAt: json.data.updatedAt || json.data.createdAt || now,
diff --git a/src/store/panesSettings/chart.ts b/src/store/panesSettings/chart.ts
index 66f528e6..189c9a66 100644
--- a/src/store/panesSettings/chart.ts
+++ b/src/store/panesSettings/chart.ts
@@ -112,7 +112,7 @@ const state = {
   showAlerts: true,
   showAlertsLabel: true,
   showLegend: true,
-  fillGapsWithEmpty: true,
+  fillGapsWithEmpty: false,
   showHorizontalGridlines: false,
   horizontalGridlinesColor: 'rgba(255,255,255,.1)',
   showVerticalGridlines: false,