<commit_before><template>
<div class="main-ion-image-container">
    <image-loader :src="annotation.isotopeImages[0].url"
                  :colormap="colormap"
                  :max-height=500
                  ref="imageLoader"
                  v-bind="imageLoaderSettings"
                  @zoom="onImageZoom"
                  @move="onImageMove">
    </image-loader>

    <div class="colorbar-container">
        <div v-if="imageLoaderSettings.opticalImageUrl">
        Opacity:
        <el-slider
            vertical
            height="150px"
            v-model="opacity"
            v-on:input="onOpacityInput"
            :min=0
            :max=1
            :step=0.01
            style="margin: 10px 0px 30px 0px;">
        </el-slider>
        </div>

        {{ annotation.isotopeImages[0].maxIntensity.toExponential(2) }}
        <colorbar style="width: 20px; height: 160px; align-self: center;"
                  :direction="colorbarDirection" :map="colormapName"
                  slot="reference">
        </colorbar>
        {{ annotation.isotopeImages[0].minIntensity.toExponential(2) }}

        <div class="annot-view__image-download" v-if="browserSupportsDomToImage">
        <!-- see https://github.com/tsayen/dom-to-image/issues/155 -->
        <img src="../../../assets/download-icon.png"
             width="32px"
             title="Save visible region in PNG format"
             @click="saveImage"/>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import * as domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

import Colorbar from '../../Colorbar.vue';
import ImageLoader from '../../ImageLoader.vue';

@Component({
    name: 'main-image',
    components: {
        ImageLoader,
        Colorbar
    }
})
export default class MainImage extends Vue {
    $refs: any

    @Prop()
    annotation: any
    @Prop()
    colormap: any
    @Prop()
    colormapName: any
    @Prop()
    opacity: number
    @Prop()
    imageLoaderSettings: any
    @Prop()
    onImageMove: Function
    @Prop()
    onImageZoom: Function

    get colorbarDirection(): string {
      return this.colormap[0] == '-' ? 'bottom' : 'top';
    }

    saveImage(event: any): void {
      let node = this.$refs.imageLoader.getContainer();

      domtoimage
        .toBlob(node, {
          width: this.$refs.imageLoader.imageWidth,
          height: this.$refs.imageLoader.imageHeight
        })
        .then(blob => {
          saveAs(blob, `${this.annotation.id}.png`);
        })
    }

    get browserSupportsDomToImage(): boolean {
      return window.navigator.userAgent.includes('Chrome');
    }

    onOpacityInput(val: number): void {
      this.$emit('opacityInput', val);
    }
}
</script>

<style>
.main-ion-image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.colorbar-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 10px;
    padding-bottom: 6px;
}

.annot-view__image-download {
    margin-top: 20px;
    cursor: pointer;
}
</style>
<commit_msg>Fix console warning when changing opacity<commit_after><template>
<div class="main-ion-image-container">
    <image-loader :src="annotation.isotopeImages[0].url"
                  :colormap="colormap"
                  :max-height=500
                  ref="imageLoader"
                  v-bind="imageLoaderSettings"
                  @zoom="onImageZoom"
                  @move="onImageMove">
    </image-loader>

    <div class="colorbar-container">
        <div v-if="imageLoaderSettings.opticalImageUrl">
        Opacity:
        <el-slider
            vertical
            height="150px"
            :value="opacity"
            v-on:input="onOpacityInput"
            :min=0
            :max=1
            :step=0.01
            style="margin: 10px 0px 30px 0px;">
        </el-slider>
        </div>

        {{ annotation.isotopeImages[0].maxIntensity.toExponential(2) }}
        <colorbar style="width: 20px; height: 160px; align-self: center;"
                  :direction="colorbarDirection" :map="colormapName"
                  slot="reference">
        </colorbar>
        {{ annotation.isotopeImages[0].minIntensity.toExponential(2) }}

        <div class="annot-view__image-download" v-if="browserSupportsDomToImage">
        <!-- see https://github.com/tsayen/dom-to-image/issues/155 -->
        <img src="../../../assets/download-icon.png"
             width="32px"
             title="Save visible region in PNG format"
             @click="saveImage"/>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import * as domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

import Colorbar from '../../Colorbar.vue';
import ImageLoader from '../../ImageLoader.vue';

@Component({
    name: 'main-image',
    components: {
        ImageLoader,
        Colorbar
    }
})
export default class MainImage extends Vue {
    $refs: any

    @Prop()
    annotation: any
    @Prop()
    colormap: any
    @Prop()
    colormapName: any
    @Prop()
    opacity: number
    @Prop()
    imageLoaderSettings: any
    @Prop()
    onImageMove: Function
    @Prop()
    onImageZoom: Function

    get colorbarDirection(): string {
      return this.colormap[0] == '-' ? 'bottom' : 'top';
    }

    saveImage(event: any): void {
      let node = this.$refs.imageLoader.getContainer();

      domtoimage
        .toBlob(node, {
          width: this.$refs.imageLoader.imageWidth,
          height: this.$refs.imageLoader.imageHeight
        })
        .then(blob => {
          saveAs(blob, `${this.annotation.id}.png`);
        })
    }

    get browserSupportsDomToImage(): boolean {
      return window.navigator.userAgent.includes('Chrome');
    }

    onOpacityInput(val: number): void {
      this.$emit('opacityInput', val);
    }
}
</script>

<style>
.main-ion-image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.colorbar-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 10px;
    padding-bottom: 6px;
}

.annot-view__image-download {
    margin-top: 20px;
    cursor: pointer;
}
</style>

{'fraction_non_alphanumeric': 0.14270067282115476, 'fraction_numerical': 0.011891722735096229, 'mean_word_length': 2.1534287123828317, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '412886', 'n_tokens_mistral': 2029, 'n_tokens_neox': 1930, 'n_words': 375}