refactor index schema, remove sidecar parsing, remove TS

sist2-vue/src/components/D3Treemap.vue

@@ -9,8 +9,7 @@
 
 <script>
 import * as d3 from "d3";
-import {burrow} from "@/util-js"
-import {humanFileSize} from "@/util";
+import {humanFileSize, burrow} from "@/util";
 import Sist2Api from "@/Sist2Api";
 import domtoimage from "dom-to-image";
 

sist2-vue/src/components/DateSlider.vue

@@ -31,8 +31,7 @@
 <script>
 import noUiSlider from 'nouislider';
 import 'nouislider/dist/nouislider.css';
-import {humanDate} from "@/util";
-import {mergeTooltips} from "@/util-js";
+import {humanDate, mergeTooltips} from "@/util";
 
 export default {
   name: "DateSlider",

sist2-vue/src/components/DocCard.vue

@@ -16,7 +16,7 @@
             <!-- Audio player-->
             <audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
                    :type="doc._source.mime"
-                   :src="`f/${doc._source.index}/${doc._id}`"
+                   :src="`f/${sid(doc)}`"
                    @play="onAudioPlay()"></audio>
 
             <b-card-body class="padding-03">
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import {ext, humanFileSize, humanTime} from "@/util";
+import {ext, humanFileSize, humanTime, sid} from "@/util";
 import TagContainer from "@/components/TagContainer.vue";
 import DocFileTitle from "@/components/DocFileTitle.vue";
 import DocInfoModal from "@/components/DocInfoModal.vue";
@@ -69,13 +69,14 @@ export default {
         }
     },
     methods: {
+        sid: sid,
         humanFileSize: humanFileSize,
         humanTime: humanTime,
         onInfoClick() {
             this.showInfo = true;
         },
         onEmbeddingClick() {
-            Sist2Api.getEmbeddings(this.doc._source.index, this.doc._id, this.$store.state.embeddingsModel).then(embeddings => {
+            Sist2Api.getEmbeddings(sid(this.doc), this.$store.state.embeddingsModel).then(embeddings => {
                 this.$store.commit("setEmbeddingText", "");
                 this.$store.commit("setEmbedding", embeddings);
                 this.$store.commit("setEmbeddingDoc", this.doc);

sist2-vue/src/components/DocCardWall.vue

@@ -1,15 +1,16 @@
 <template>
-  <GridLayout
-      ref="grid-layout"
-      :options="gridOptions"
-      @append="append"
-      @layout-complete="$emit('layout-complete')"
-  >
-    <DocCard v-for="doc in docs" :key="doc._id" :doc="doc" :width="width"></DocCard>
-  </GridLayout>
+    <GridLayout
+            ref="grid-layout"
+            :options="gridOptions"
+            @append="append"
+            @layout-complete="$emit('layout-complete')"
+    >
+        <DocCard v-for="doc in docs" :key="sid(doc)" :doc="doc" :width="width"></DocCard>
+    </GridLayout>
 </template>
 
 <script>
+import {sid} from "@/util";
 import Vue from "vue";
 import DocCard from "@/components/DocCard";
 
@@ -18,50 +19,53 @@ import VueInfiniteGrid from "@egjs/vue-infinitegrid";
 Vue.use(VueInfiniteGrid);
 
 export default Vue.extend({
-  components: {
-    DocCard,
-  },
-  props: ["docs", "append"],
-  data() {
-    return {
-      width: 0,
-      gridOptions: {
-        align: "center",
-        margin: 0,
-        transitionDuration: 0,
-        isOverflowScroll: false,
-        isConstantSize: false,
-        useFit: false,
-        // Indicates whether keep the number of DOMs is maintained. If the useRecycle value is 'true', keep the number
-        //  of DOMs is maintained. If the useRecycle value is 'false', the number of DOMs will increase as card elements
-        //  are added.
-        useRecycle: false
-      }
-    }
-  },
-  computed: {
-    colCount() {
-      const columns = this.$store.getters["optColumns"];
-
-      if (columns === "auto") {
-        return Math.round(this.$refs["grid-layout"].$el.scrollWidth / 300)
-      }
-      return columns;
+    components: {
+        DocCard,
     },
-  },
-  mounted() {
-    this.width = this.$refs["grid-layout"].$el.scrollWidth / this.colCount;
+    props: ["docs", "append"],
+    data() {
+        return {
+            width: 0,
+            gridOptions: {
+                align: "center",
+                margin: 0,
+                transitionDuration: 0,
+                isOverflowScroll: false,
+                isConstantSize: false,
+                useFit: false,
+                // Indicates whether keep the number of DOMs is maintained. If the useRecycle value is 'true', keep the number
+                //  of DOMs is maintained. If the useRecycle value is 'false', the number of DOMs will increase as card elements
+                //  are added.
+                useRecycle: false
+            }
+        }
+    },
+    methods: {
+        sid,
+    },
+    computed: {
+        colCount() {
+            const columns = this.$store.getters["optColumns"];
 
-    if (this.colCount === 1) {
-      this.$refs["grid-layout"].$el.classList.add("grid-single-column");
-    }
+            if (columns === "auto") {
+                return Math.round(this.$refs["grid-layout"].$el.scrollWidth / 300)
+            }
+            return columns;
+        },
+    },
+    mounted() {
+        this.width = this.$refs["grid-layout"].$el.scrollWidth / this.colCount;
 
-    this.$store.subscribe((mutation) => {
-      if (mutation.type === "busUpdateWallItems" && this.$refs["grid-layout"]) {
-        this.$refs["grid-layout"].updateItems();
-      }
-    });
-  },
+        if (this.colCount === 1) {
+            this.$refs["grid-layout"].$el.classList.add("grid-single-column");
+        }
+
+        this.$store.subscribe((mutation) => {
+            if (mutation.type === "busUpdateWallItems" && this.$refs["grid-layout"]) {
+                this.$refs["grid-layout"].updateItems();
+            }
+        });
+    },
 });
 </script>
 

sist2-vue/src/components/DocFileTitle.vue

@@ -1,5 +1,5 @@
 <template>
-    <a :href="`f/${doc._source.index}/${doc._id}`"
+    <a :href="`f/${sid(doc)}`"
        :class="doc._source.embedding ? 'file-title-anchor-with-embedding' : 'file-title-anchor'" target="_blank">
         <div class="file-title" :title="doc._source.path + '/' + doc._source.name + ext(doc)"
              v-html="fileName() + ext(doc)"></div>
@@ -7,12 +7,13 @@
 </template>
 
 <script>
-import {ext} from "@/util";
+import {ext, sid} from "@/util";
 
 export default {
     name: "DocFileTitle",
     props: ["doc"],
     methods: {
+        sid: sid,
         ext: ext,
         fileName() {
             if (!this.doc.highlight) {

sist2-vue/src/components/DocInfoModal.vue

@@ -1,33 +1,34 @@
 <template>
-  <b-modal :visible="show" size="lg" :hide-footer="true" static lazy @close="$emit('close')" @hide="$emit('close')"
-  >
-    <template #modal-title>
-      <h5 class="modal-title" :title="doc._source.name + ext(doc)">
-        {{ doc._source.name + ext(doc) }}
-        <router-link :to="`/file?byId=${doc._id}`">#</router-link>
-      </h5>
-    </template>
+    <b-modal :visible="show" size="lg" :hide-footer="true" static lazy @close="$emit('close')" @hide="$emit('close')"
+    >
+        <template #modal-title>
+            <h5 class="modal-title" :title="doc._source.name + ext(doc)">
+                {{ doc._source.name + ext(doc) }}
+                <router-link :to="`/file?byId=${doc._id}`">#</router-link>
+            </h5>
+        </template>
 
-    <img v-if="doc._props.hasThumbnail" :src="`t/${doc._source.index}/${doc._id}`" alt="" class="fit card-img-top">
+        <img v-if="doc._props.hasThumbnail" :src="`t/${sid(doc)}`" alt="" class="fit card-img-top">
 
-    <InfoTable :doc="doc"></InfoTable>
+        <InfoTable :doc="doc"></InfoTable>
 
-    <LazyContentDiv :doc-id="doc._id"></LazyContentDiv>
-  </b-modal>
+        <LazyContentDiv :sid="sid(doc)"></LazyContentDiv>
+    </b-modal>
 </template>
 
 <script>
-import {ext} from "@/util";
+import {ext, sid} from "@/util";
 import InfoTable from "@/components/InfoTable";
 import LazyContentDiv from "@/components/LazyContentDiv";
 
 export default {
-  name: "DocInfoModal",
-  components: {LazyContentDiv, InfoTable},
-  props: ["doc", "show"],
-  methods: {
-    ext: ext,
-  }
+    name: "DocInfoModal",
+    components: {LazyContentDiv, InfoTable},
+    props: ["doc", "show"],
+    methods: {
+        ext: ext,
+        sid: sid
+    }
 }
 </script>
 

sist2-vue/src/components/DocList.vue

@@ -1,45 +1,49 @@
 <template>
-  <b-list-group class="mt-3">
-    <DocListItem v-for="doc in docs" :key="doc._id" :doc="doc"></DocListItem>
-  </b-list-group>
+    <b-list-group class="mt-3">
+        <DocListItem v-for="doc in docs" :key="sid(doc)" :doc="doc"></DocListItem>
+    </b-list-group>
 </template>
 
-<script lang="ts">
+<script>
+import {sid} from "@/util";
 import DocListItem from "@/components/DocListItem.vue";
 import Vue from "vue";
 
 export default Vue.extend({
-  name: "DocList",
-  components: {DocListItem},
-  props: ["docs", "append"],
-  mounted() {
-    window.addEventListener("scroll", () => {
-      const threshold = 400;
-      const app = document.getElementById("app");
+    name: "DocList",
+    components: {DocListItem},
+    props: ["docs", "append"],
+    mounted() {
+        window.addEventListener("scroll", () => {
+            const threshold = 400;
+            const app = document.getElementById("app");
 
-      if ((window.innerHeight + window.scrollY) >= app.offsetHeight - threshold) {
-        this.append();
-      }
-    });
-  }
+            if ((window.innerHeight + window.scrollY) >= app.offsetHeight - threshold) {
+                this.append();
+            }
+        });
+    },
+    methods: {
+        sid: sid
+    }
 });
 </script>
 
 <style>
 
 .theme-black .list-group-item {
-  background: #212121;
-  color: #e0e0e0;
+    background: #212121;
+    color: #e0e0e0;
 
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
-  padding: .25rem 0.5rem;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    padding: .25rem 0.5rem;
 }
 
 .theme-black .list-group-item:first-child {
-  border-top: none;
+    border-top: none;
 }
 
 </style>

sist2-vue/src/components/DocListItem.vue

@@ -17,10 +17,10 @@
                     </div>
 
                     <img v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
-                         :src="(doc._props.isGif && hover) ? `f/${doc._source.index}/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
+                         :src="(doc._props.isGif && hover) ? `f/${sid(doc)}` : `t/${sid(doc)}`"
                          alt=""
                          class="pointer fit-sm" @click="onThumbnailClick()">
-                    <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
+                    <img v-else :src="`t/${sid(doc)}`" alt=""
                          class="fit-sm">
                 </div>
             </div>
@@ -70,6 +70,7 @@ import FileIcon from "@/components/icons/FileIcon";
 import FeaturedFieldsLine from "@/components/FeaturedFieldsLine";
 import MLIcon from "@/components/icons/MlIcon.vue";
 import Sist2Api from "@/Sist2Api";
+import {sid} from "@/util";
 
 export default {
     name: "DocListItem",
@@ -82,12 +83,13 @@ export default {
         }
     },
     methods: {
+        sid: sid,
         async onThumbnailClick() {
             this.$store.commit("setUiLightboxSlide", this.doc._seq);
             await this.$store.dispatch("showLightbox");
         },
         onEmbeddingClick() {
-            Sist2Api.getEmbeddings(this.doc._source.index, this.doc._id, this.$store.state.embeddingsModel).then(embeddings => {
+            Sist2Api.getEmbeddings(sid(this.doc), this.$store.state.embeddingsModel).then(embeddings => {
                 this.$store.commit("setEmbeddingText", "");
                 this.$store.commit("setEmbedding", embeddings);
                 this.$store.commit("setEmbeddingDoc", this.doc);

sist2-vue/src/components/FullThumbnail.vue

@@ -1,188 +1,189 @@
 <template>
-  <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()"
-       @touchstart="onTouchStart()">
-    <div v-if="doc._props.isAudio" class="card-img-overlay" :class="{'small-badge': smallBadge}">
-      <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
+    <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()"
+         @touchstart="onTouchStart()">
+        <div v-if="doc._props.isAudio" class="card-img-overlay" :class="{'small-badge': smallBadge}">
+            <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
+        </div>
+
+        <div
+                v-if="doc._props.isImage && doc._props.imageAspectRatio < 5"
+                class="card-img-overlay"
+                :class="{'small-badge': smallBadge}">
+            <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
+        </div>
+
+        <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0"
+             class="card-img-overlay"
+             :class="{'small-badge': smallBadge}">
+            <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
+        </div>
+
+        <div v-if="doc._props.isPlayableVideo" class="play">
+            <svg viewBox="0 0 494.942 494.942" xmlns="http://www.w3.org/2000/svg">
+                <path d="m35.353 0 424.236 247.471-424.236 247.471z"/>
+            </svg>
+        </div>
+
+        <img ref="tn"
+             v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
+             :src="tnSrc"
+             alt=""
+             :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
+             class="pointer fit card-img-top" @click="onThumbnailClick()">
+        <img v-else :src="tnSrc" alt=""
+             class="fit card-img-top">
+
+        <ThumbnailProgressBar v-if="hover && doc._props.hasVidPreview"
+                              :progress="(currentThumbnailNum + 1) / (doc._props.tnNum)"
+        ></ThumbnailProgressBar>
     </div>
-
-    <div
-        v-if="doc._props.isImage && doc._props.imageAspectRatio < 5"
-        class="card-img-overlay"
-        :class="{'small-badge': smallBadge}">
-      <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
-    </div>
-
-    <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0"
-         class="card-img-overlay"
-         :class="{'small-badge': smallBadge}">
-      <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
-    </div>
-
-    <div v-if="doc._props.isPlayableVideo" class="play">
-      <svg viewBox="0 0 494.942 494.942" xmlns="http://www.w3.org/2000/svg">
-        <path d="m35.353 0 424.236 247.471-424.236 247.471z"/>
-      </svg>
-    </div>
-
-    <img ref="tn"
-         v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
-         :src="tnSrc"
-         alt=""
-         :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
-         class="pointer fit card-img-top" @click="onThumbnailClick()">
-    <img v-else :src="tnSrc" alt=""
-         class="fit card-img-top">
-
-    <ThumbnailProgressBar v-if="hover && doc._props.hasVidPreview"
-                          :progress="(currentThumbnailNum + 1) / (doc._props.tnNum)"
-    ></ThumbnailProgressBar>
-  </div>
 </template>
 
 <script>
-import {humanTime} from "@/util";
+import {humanTime, sid} from "@/util";
 import ThumbnailProgressBar from "@/components/ThumbnailProgressBar";
 
 export default {
-  name: "FullThumbnail",
-  props: ["doc", "smallBadge"],
-  components: {ThumbnailProgressBar},
-  data() {
-    return {
-      hover: false,
-      currentThumbnailNum: 0,
-      timeoutId: null
+    name: "FullThumbnail",
+    props: ["doc", "smallBadge"],
+    components: {ThumbnailProgressBar},
+    data() {
+        return {
+            hover: false,
+            currentThumbnailNum: 0,
+            timeoutId: null
+        }
+    },
+    created() {
+        this.$store.subscribe((mutation) => {
+            if (mutation.type === "busTnTouchStart" && mutation.payload !== this.doc._id) {
+                this.onTnLeave();
+            }
+        });
+    },
+    computed: {
+        tnSrc() {
+            return this.getThumbnailSrc(this.currentThumbnailNum);
+        },
+    },
+    methods: {
+        sid: sid,
+        getThumbnailSrc(thumbnailNum) {
+            const doc = this.doc;
+            const props = doc._props;
+            if (props.isGif && this.hover) {
+                return `f/${sid(doc)}`;
+            }
+            return (this.currentThumbnailNum === 0)
+                ? `t/${sid(doc)}`
+                : `t/${sid(doc)}/${String(thumbnailNum).padStart(4, "0")}`;
+        },
+        humanTime: humanTime,
+        onThumbnailClick() {
+            this.$emit("onThumbnailClick");
+        },
+        tnHeight() {
+            return this.$refs.tn.height;
+        },
+        tnWidth() {
+            return this.$refs.tn.width;
+        },
+        onTnEnter() {
+            this.hover = true;
+            const start = Date.now()
+            if (this.doc._props.hasVidPreview) {
+                let img = new Image();
+                img.src = this.getThumbnailSrc(this.currentThumbnailNum + 1);
+                img.onload = () => {
+                    this.currentThumbnailNum += 1;
+                    this.scheduleNextTnNum(Date.now() - start);
+                }
+            }
+        },
+        onTnLeave() {
+            this.currentThumbnailNum = 0;
+            this.hover = false;
+            if (this.timeoutId !== null) {
+                window.clearTimeout(this.timeoutId);
+                this.timeoutId = null;
+            }
+        },
+        scheduleNextTnNum(offset = 0) {
+            const INTERVAL = (this.$store.state.optVidPreviewInterval ?? 700) - offset;
+            this.timeoutId = window.setTimeout(() => {
+                const start = Date.now();
+                if (!this.hover) {
+                    return;
+                }
+                if (this.currentThumbnailNum === this.doc._props.tnNum - 1) {
+                    this.currentThumbnailNum = 0;
+                    this.scheduleNextTnNum();
+                } else {
+                    let img = new Image();
+                    img.src = this.getThumbnailSrc(this.currentThumbnailNum + 1);
+                    img.onload = () => {
+                        this.currentThumbnailNum += 1;
+                        this.scheduleNextTnNum(Date.now() - start);
+                    }
+                }
+            }, INTERVAL);
+        },
+        onTouchStart() {
+            this.$store.commit("busTnTouchStart", this.doc._id);
+            if (!this.hover) {
+                this.onTnEnter()
+            }
+        },
     }
-  },
-  created() {
-    this.$store.subscribe((mutation) => {
-      if (mutation.type === "busTnTouchStart" && mutation.payload !== this.doc._id) {
-        this.onTnLeave();
-      }
-    });
-  },
-  computed: {
-    tnSrc() {
-      return this.getThumbnailSrc(this.currentThumbnailNum);
-    },
-  },
-  methods: {
-    getThumbnailSrc(thumbnailNum) {
-      const doc = this.doc;
-      const props = doc._props;
-      if (props.isGif && this.hover) {
-        return `f/${doc._source.index}/${doc._id}`;
-      }
-      return (this.currentThumbnailNum === 0)
-          ? `t/${doc._source.index}/${doc._id}`
-          : `t/${doc._source.index}/${doc._id}/${String(thumbnailNum).padStart(4, "0")}`;
-    },
-    humanTime: humanTime,
-    onThumbnailClick() {
-      this.$emit("onThumbnailClick");
-    },
-    tnHeight() {
-      return this.$refs.tn.height;
-    },
-    tnWidth() {
-      return this.$refs.tn.width;
-    },
-    onTnEnter() {
-      this.hover = true;
-      const start = Date.now()
-      if (this.doc._props.hasVidPreview) {
-        let img = new Image();
-        img.src = this.getThumbnailSrc(this.currentThumbnailNum + 1);
-        img.onload = () => {
-          this.currentThumbnailNum += 1;
-          this.scheduleNextTnNum(Date.now() - start);
-        }
-      }
-    },
-    onTnLeave() {
-      this.currentThumbnailNum = 0;
-      this.hover = false;
-      if (this.timeoutId !== null) {
-        window.clearTimeout(this.timeoutId);
-        this.timeoutId = null;
-      }
-    },
-    scheduleNextTnNum(offset = 0) {
-      const INTERVAL = (this.$store.state.optVidPreviewInterval ?? 700) - offset;
-      this.timeoutId = window.setTimeout(() => {
-        const start = Date.now();
-        if (!this.hover) {
-          return;
-        }
-        if (this.currentThumbnailNum === this.doc._props.tnNum - 1) {
-          this.currentThumbnailNum = 0;
-          this.scheduleNextTnNum();
-        } else {
-          let img = new Image();
-          img.src = this.getThumbnailSrc(this.currentThumbnailNum + 1);
-          img.onload = () => {
-            this.currentThumbnailNum += 1;
-            this.scheduleNextTnNum(Date.now() - start);
-          }
-        }
-      }, INTERVAL);
-    },
-    onTouchStart() {
-      this.$store.commit("busTnTouchStart", this.doc._id);
-      if (!this.hover) {
-        this.onTnEnter()
-      }
-    },
-  }
 }
 </script>
 
 <style scoped>
 .img-wrapper {
-  position: relative;
+    position: relative;
 }
 
 .img-wrapper:hover svg {
-  fill: rgba(0, 0, 0, 1);
+    fill: rgba(0, 0, 0, 1);
 }
 
 .card-img-top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
 
 .play {
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
 }
 
 .play svg {
-  fill: rgba(0, 0, 0, 0.7);
+    fill: rgba(0, 0, 0, 0.7);
 }
 
 .badge-resolution {
-  color: #c6c6c6;
-  background-color: #272727CC;
-  padding: 2px 3px;
+    color: #c6c6c6;
+    background-color: #272727CC;
+    padding: 2px 3px;
 }
 
 .card-img-overlay {
-  pointer-events: none;
-  padding: 2px 6px;
-  bottom: 4px;
-  top: unset;
-  left: unset;
-  right: 0;
+    pointer-events: none;
+    padding: 2px 6px;
+    bottom: 4px;
+    top: unset;
+    left: unset;
+    right: 0;
 }
 
 .small-badge {
-  padding: 1px 3px;
-  font-size: 70%;
+    padding: 1px 3px;
+    font-size: 70%;
 }
 
 </style>

sist2-vue/src/components/IndexPicker.vue

@@ -27,11 +27,12 @@
                     @click.shift="shiftClick(idx, $event)"
                     class="d-flex justify-content-between align-items-center list-group-item-action pointer"
                     :class="{active: lastClickIndex === idx}"
+                    :key="idx.id"
             >
                 <div class="d-flex">
                     <b-checkbox style="pointer-events: none" :checked="isSelected(idx)"></b-checkbox>
                     {{ idx.name }}
-                    <div style="vertical-align: center; margin-left: 5px">
+                    <div v-if="hasEmbeddings(idx)" style="vertical-align: center; margin-left: 5px">
                         <MLIcon small style="top: -1px; position: relative"></MLIcon>
                     </div>
                     <span class="text-muted timestamp-text ml-2"
@@ -43,7 +44,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
 import SmallBadge from "./SmallBadge.vue"
 import {mapActions, mapGetters} from "vuex";
 import Vue from "vue";
@@ -111,7 +112,7 @@ export default Vue.extend({
         onSelect(value) {
             this.setSelectedIndices(this.indices.filter(idx => value.includes(idx.id)));
         },
-        formatIdxDate(timestamp: number): string {
+        formatIdxDate(timestamp) {
             return format(new Date(timestamp * 1000), "yyyy-MM-dd");
         },
         toggleIndex(index, e) {
@@ -121,14 +122,17 @@ export default Vue.extend({
 
             this.lastClickIndex = index;
             if (this.isSelected(index)) {
-                this.setSelectedIndices(this.selectedIndices.filter(idx => idx.id != index.id));
+                this.setSelectedIndices(this.selectedIndices.filter(idx => idx.id !== index.id));
             } else {
                 this.setSelectedIndices([index, ...this.selectedIndices]);
             }
         },
         isSelected(index) {
-            return this.selectedIndices.find(idx => idx.id == index.id) != null;
-        }
+            return this.selectedIndices.find(idx => idx.id === index.id) != null;
+        },
+        hasEmbeddings(index) {
+            return index.models.length > 0;
+        },
     },
 })
 </script>

sist2-vue/src/components/LazyContentDiv.vue

@@ -10,7 +10,7 @@
             >{{ $t("ml.analyzeText") }}
             </b-button>
             <b-select :disabled="mlPredictionsLoading || mlLoading" class="ml-2" v-model="nerModel">
-                <b-select-option :value="opt.value" v-for="opt of ModelsRepo.getOptions()">{{ opt.text }}
+                <b-select-option :value="opt.value" v-for="opt of ModelsRepo.getOptions()" :key="opt.value">{{ opt.text }}
                 </b-select-option>
             </b-select>
         </b-form>
@@ -46,7 +46,7 @@ import {mapGetters, mapMutations} from "vuex";
 export default {
     name: "LazyContentDiv",
     components: {AnalyzedContentSpansContainer, Preloader},
-    props: ["docId"],
+    props: ["sid"],
     data() {
         return {
             ModelsRepo,
@@ -70,7 +70,7 @@ export default {
         }
 
         Sist2Api
-            .getDocument(this.docId, this.$store.state.optHighlight, this.$store.state.fuzzy)
+            .getDocument(this.sid, this.$store.state.optHighlight, this.$store.state.fuzzy)
             .then(doc => {
                 this.loading = false;
 

sist2-vue/src/components/ResultsCard.vue

@@ -43,8 +43,7 @@
     </b-card>
 </template>
 
-<script lang="ts">
-import Sist2Api, {EsResult} from "@/Sist2Api";
+<script>
 import Vue from "vue";
 import {humanFileSize} from "@/util";
 import DisplayModeToggle from "@/components/DisplayModeToggle.vue";
@@ -52,6 +51,7 @@ import SortSelect from "@/components/SortSelect.vue";
 import Preloader from "@/components/Preloader.vue";
 import Sist2Query from "@/Sist2ElasticsearchQuery";
 import ClipboardIcon from "@/components/icons/ClipboardIcon.vue";
+import Sist2Api from "@/Sist2Api";
 
 export default Vue.extend({
     name: "ResultsCard",
@@ -64,7 +64,7 @@ export default Vue.extend({
             return this.$store.state.lastQueryResults != null;
         },
         hitCount() {
-            return (this.$store.state.firstQueryResults as EsResult).aggregations.total_count.value;
+            return (this.$store.state.firstQueryResults).aggregations.total_count.value;
         },
         tableItems() {
             const items = [];
@@ -79,10 +79,10 @@ export default Vue.extend({
     },
     methods: {
         took() {
-            return (this.$store.state.lastQueryResults as EsResult).took + "ms";
+            return (this.$store.state.lastQueryResults).took + "ms";
         },
         totalSize() {
-            return humanFileSize((this.$store.state.firstQueryResults as EsResult).aggregations.total_size.value);
+            return humanFileSize((this.$store.state.firstQueryResults).aggregations.total_size.value);
         },
         onToggle() {
             const show = !document.getElementById("collapse-1").classList.contains("show");

sist2-vue/src/components/SizeSlider.vue

@@ -5,8 +5,7 @@
 <script>
 import noUiSlider from 'nouislider';
 import 'nouislider/dist/nouislider.css';
-import {humanFileSize} from "@/util";
-import {mergeTooltips} from "@/util-js";
+import {humanFileSize, mergeTooltips} from "@/util";
 
 export default {
   name: "SizeSlider",

sist2-vue/src/components/SmallBadge.vue

@@ -2,7 +2,7 @@
   <b-badge variant="secondary" :pill="pill">{{ text }}</b-badge>
 </template>
 
-<script lang="ts">
+<script>
 import Vue from "vue";
 
 export default Vue.extend({

sist2-vue/src/components/ThumbnailProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="thumbnail-progress-bar" :style="{width: `${percentProgress}%`}"></div>
+  <div class="thumbnail_count-progress-bar" :style="{width: `${percentProgress}%`}"></div>
 </template>
 
 <script>
@@ -16,7 +16,7 @@ export default {
 
 <style scoped>
 
-.thumbnail-progress-bar {
+.thumbnail_count-progress-bar {
   position: absolute;
   left: 0;
   bottom: 0;
@@ -27,11 +27,11 @@ export default {
   z-index: 9;
 }
 
-.theme-black .thumbnail-progress-bar {
+.theme-black .thumbnail_count-progress-bar {
   background: rgba(0, 188, 212, 0.95);
 }
 
-.sub-document .thumbnail-progress-bar {
+.sub-document .thumbnail_count-progress-bar {
   max-width: calc(100% - 8px);
   left: 4px;
 }