-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Missed cleavage handling always enabled now
- Loading branch information
Showing
11 changed files
with
226 additions
and
245 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <div | ||
| class="tooltip-wrapper" | ||
| @mouseenter="startShowTooltipTimer" | ||
| @mouseleave="cancelShowTooltipTimer" | ||
| > | ||
| <slot></slot> | ||
| <div | ||
| v-if="visible" | ||
| class="custom-tooltip" | ||
| ref="tooltip" | ||
| @mouseenter="cancelHideTooltipTimer" | ||
| @mouseleave="startHideTooltipTimer" | ||
| > | ||
| Missed cleavage handling is now always enabled. Because of a change in | ||
| Unipept's underlying search engine, enabling missed cleavage handling no | ||
| longer results in a performance penalty. As a result, this configuration | ||
| option will be removed in a future release. See | ||
| <a | ||
| href="https://github.com/unipept/unipept/wiki/Unipept-Next" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="text-white" | ||
| >this page</a> | ||
| for more information. | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Vue, Component } from 'vue-property-decorator'; | ||
| @Component | ||
| export default class CustomTooltip extends Vue { | ||
| visible = false; | ||
| showTooltipTimer: number | null = null; | ||
| hideTooltipTimer: number | null = null; | ||
| startShowTooltipTimer() { | ||
| this.cancelHideTooltipTimer(); | ||
| if (this.showTooltipTimer !== null) { | ||
| clearTimeout(this.showTooltipTimer); | ||
| this.showTooltipTimer = null; | ||
| } | ||
| this.showTooltipTimer = window.setTimeout(() => { | ||
| this.visible = true; | ||
| }, 300); | ||
| } | ||
| cancelShowTooltipTimer() { | ||
| if (this.showTooltipTimer !== null) { | ||
| clearTimeout(this.showTooltipTimer); | ||
| this.showTooltipTimer = null; | ||
| } | ||
| this.startHideTooltipTimer(); | ||
| } | ||
| startHideTooltipTimer() { | ||
| this.cancelHideTooltipTimer(); | ||
| this.hideTooltipTimer = window.setTimeout(() => { | ||
| this.visible = false; | ||
| }, 1000); | ||
| } | ||
| cancelHideTooltipTimer() { | ||
| if (this.hideTooltipTimer !== null) { | ||
| clearTimeout(this.hideTooltipTimer); | ||
| this.hideTooltipTimer = null; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .tooltip-wrapper { | ||
| position: relative; | ||
| display: inline-block; | ||
| overflow: visible; | ||
| } | ||
| .custom-tooltip { | ||
| position: absolute; | ||
| bottom: 100%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| background-color: #323232; | ||
| color: #fff; | ||
| padding: 8px; | ||
| border-radius: 4px; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | ||
| z-index: 1000; | ||
| margin-bottom: 8px; | ||
| transition: opacity 0.2s ease-in-out; | ||
| pointer-events: auto; | ||
| max-width: 400px; | ||
| width: max-content; | ||
| overflow: hidden; | ||
| white-space: normal; | ||
| line-height: 1.4; | ||
| } | ||
| .custom-tooltip a { | ||
| color: #1e88e5; | ||
| text-decoration: underline; | ||
| } | ||
| .custom-tooltip a:hover { | ||
| color: #1565c0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <template> | ||
| <div | ||
| :class="{ | ||
| 'search-settings-form': true, | ||
| 'd-flex': true, | ||
| 'flex-column': !horizontal, | ||
| 'flex-row': horizontal, | ||
| 'justify-space-between': horizontal | ||
| }"> | ||
| <tooltip message="Equate isoleucine (I) and leucine (L) when matching peptides to UniProt entries."> | ||
| <v-checkbox :disabled="disabled" v-model="equateIlModel" label="Equate I and L" hide-details class="mt-0"> | ||
| <span slot="label">Equate I and L</span> | ||
| </v-checkbox> | ||
| </tooltip> | ||
| <tooltip message="Remove duplicate peptides from the input before searching."> | ||
| <v-checkbox :disabled="disabled" v-model="filterDuplicatesModel" hide-details class="mt-0"> | ||
| <span slot="label">Filter duplicate peptides</span> | ||
| </v-checkbox> | ||
| </tooltip> | ||
| <custom-tooltip message="Recombine subpeptides of miscleavages. Enabling this has a serious performance impact!"> | ||
| <v-checkbox disabled input-value="true" hide-details class="mt-0"> | ||
| <span slot="label">Advanced missed cleavage handling</span> | ||
| </v-checkbox> | ||
| </custom-tooltip> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import Vue from "vue"; | ||
| import Component from "vue-class-component"; | ||
| import { Prop, Watch } from "vue-property-decorator"; | ||
| import CustomTooltip from "@/components/analysis/CustomTooltip.vue"; | ||
| import { Tooltip } from "unipept-web-components" | ||
| @Component({ | ||
| components: { | ||
| CustomTooltip, | ||
| Tooltip | ||
| }, | ||
| computed: { | ||
| equateIlModel: { | ||
| get() { | ||
| return this.equateIl; | ||
| }, | ||
| set(val) { | ||
| this.equateIlData = val; | ||
| this.$emit("update:equate-il", val); | ||
| } | ||
| }, | ||
| filterDuplicatesModel: { | ||
| get(): boolean { | ||
| return this.filterDuplicates; | ||
| }, | ||
| set(val: boolean) { | ||
| this.filterDuplicatesData = val; | ||
| this.$emit("update:filter-duplicates", val); | ||
| } | ||
| }, | ||
| missingCleavageModel: { | ||
| get() { | ||
| return this.missingCleavage; | ||
| }, | ||
| set(val) { | ||
| this.missingCleavageData = val; | ||
| this.$emit("update:missing-cleavage", val); | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| export default class SearchSetingsForm extends Vue { | ||
| @Prop({ default: false }) disabled!: boolean; | ||
| @Prop({ default: true }) equateIl!: boolean; | ||
| @Prop({ default: true }) filterDuplicates!: boolean; | ||
| @Prop({ default: false }) missingCleavage!: boolean; | ||
| /** | ||
| * Show the component in a horizontal or vertical fashion? Set to true to show the different checkboxes on one line. | ||
| */ | ||
| @Prop({ required: false, default: true }) | ||
| private horizontal: boolean; | ||
| private equateIlData: boolean = this.equateIl; | ||
| private filterDuplicatesData: boolean = this.filterDuplicates; | ||
| private missingCleavageData: boolean = this.missingCleavage; | ||
| @Watch("equateIl") onEquateIlChanged() { | ||
| this.equateIlData = this.equateIl; | ||
| } | ||
| @Watch("filterDuplicates") onFilterDuplicatesChanged() { | ||
| this.filterDuplicatesData = this.filterDuplicates; | ||
| } | ||
| @Watch("missingCleavage") onMissingCleavageChanged() { | ||
| this.missingCleavageData = this.missingCleavage; | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.