This repository contains isolated Vue-components that can be reused throughout multiple Unipept-projects.
This project contains all Vue components that are shared between the Unipept Web application and the Unipept Desktop application.
This project can be used in combination with Unipept Desktop or Unipept Web Application. See this wiki page for more information.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
A peptide processor transforms a list of peptides into a count table. A count table minimally contains a map from ontology ids to counts and the used ontology. Additional data can be included to store the "link" between ontology ids and peptides.
These peptide processors should only request the minimal required data to process the given peptides. New API endpoints might have to be created.
When clicking on a node in the hierarchical outline visualization, a popup appears that shows all peptides associated with the given node. This popup is however not styled correctly and increases the height of the visualization container.
A specific function getEcTree() on the EcDataSource-class has not been implemented up until now, which causes these errors to appear. This function should get implemented.
The analysis of a sample could take quite some time. The process of retrieving the required data from the API and processing it is reasonably predictable and it would be handy if we provide users with some kind of remaining time estimate for the analysis of a sample (when the user hovers the circular progress indicator).
It's not possible to filter items in the hierarchical outline visualization at this point.
Implement the tabs for the different views in the single peptide analysis. There should be 5 different tabs that each correspond to a different view on the matched proteins information:
All organism names in this LineageTable should also display an "external link" icon, as is the case in the MatchedProteinsTable, to keep things consistent.
We recently switched from the workerize-loader we used before to the worker-loader in order to support TypeScript in our workers. These workers work fine in the Unipept desktop app, but do not work in the Unipept web app for some reason. I've tried various ways to overcome this issue, but haven't succeeded at this point.
No errors are thrown and all code compiles succesfully, but the handleEvent-function in the worker itself is never called. When I convert both the PeptideContainerProcessor.worker.ts and process.ts to plain JavaScript, the issue is resolved. This is thus probably an issue with the webpack configuration on the web application side of Unipept, but needs to be looked into.
The desktop app's window can be resized by the user. The visualizations, however, have a fixed width and should resize accordingly. This issue is of low priority.
The new amount table currently has no "Download as CSV" button for the complete table. This functionality should however exist.
Most visualizations should be downloadable as an image by the user. This functionality is not migrated at the moment. Places where this download should work include:
Downloading a PNG-image of the current visualization does not work when the visualization is currently in a "filtered" state. The image is of very low resolution and only part of the filtered image is visible (this is also the case for the SVG-version).
The heatmap-visualization requires some configuration before it can be used. Users are required to select the items they want to visualise on both the vertical and horizontal axis and then choose a normalization variant. Then the heatmap for the currently selected sample is computed and rendered.
However, when the user switches the currently active sample and switches back, the configuration is lost. We should retain the configuration settings for the heatmap per sample to avoid this problem.
Only a handful of components are automatically tested using the Jest-framework at this moment. The goal is to automatically test as much components as possible.
This is the coverage report at this moment (don't stare blindly at the coverage percentages, it makes way more sense to perform sensible tests instead of desperately trying to reach 100% test coverage):
------------------------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------------------------------------------|----------|----------|----------|----------|-------------------|
All files | 48.9 | 27.99 | 43.43 | 49.41 | |
components/analysis/functional | 95.83 | 72.73 | 87.5 | 95.83 | |
QuickGOCard.vue | 95.83 | 72.73 | 87.5 | 95.83 | 83 |
components/analysis/statistics | 100 | 83.33 | 100 | 100 | |
MissingPeptidesList.vue | 100 | 83.33 | 100 | 100 | 73 |
components/custom | 53.85 | 0 | 0 | 53.85 | |
Tooltip.vue | 100 | 100 | 100 | 100 | |
Utils.ts | 14.29 | 0 | 0 | 14.29 | 9,10,11,13,23,24 |
components/tables | 100 | 100 | 100 | 100 | |
FaSortSettings.ts | 100 | 100 | 100 | 100 | |
components/visualizations | 86.96 | 62.5 | 62.5 | 86.36 | |
HierarchicalOutlineVisualization.vue | 86.96 | 62.5 | 62.5 | 86.36 | 57,63,69 |
logic | 21.43 | 0 | 5.71 | 21.77 | |
utils.ts | 21.43 | 0 | 5.71 | 21.77 |... 49,352,353,354 |
logic/data-management | 51.44 | 40.68 | 48.15 | 51.72 | |
MpaAnalysisManager.ts | 100 | 100 | 100 | 100 | |
Node.ts | 82.14 | 66.67 | 80 | 81.48 | 98,99,100,101,103 |
PeptideContainer.ts | 87.5 | 100 | 80 | 87.5 | 24 |
SearchTree.ts | 34.78 | 12.5 | 17.39 | 35.16 |... 80,191,192,193 |
StorageType.ts | 100 | 100 | 100 | 100 | |
Tree.ts | 51.39 | 50 | 57.14 | 52.17 |... 65,166,168,198 |
index.ts | 100 | 100 | 100 | 100 | |
logic/data-management/assay | 72.73 | 0 | 52.63 | 72.73 | |
Assay.ts | 68.75 | 0 | 54.55 | 68.75 | 29,37,41,45,53 |
MetaProteomicsAssay.ts | 76.47 | 100 | 50 | 76.47 | 25,29,33,37 |
logic/data-management/counts | 90.48 | 40 | 71.43 | 90 | |
CountTable.ts | 100 | 50 | 100 | 100 | 10,13 |
ECCountTable.ts | 75 | 100 | 0 | 75 | 7 |
GOCountTable.ts | 75 | 100 | 0 | 75 | 7 |
TaxaCountTable.ts | 100 | 0 | 100 | 100 | 8 |
logic/data-management/ontology | 100 | 100 | 100 | 100 | |
Ontologies.ts | 100 | 100 | 100 | 100 | |
Ontology.ts | 100 | 100 | 100 | 100 | |
logic/data-management/ontology/ec | 20.69 | 0 | 0 | 23.08 | |
ECOntology.ts | 20.69 | 0 | 0 | 23.08 |... 41,43,44,45,46 |
logic/data-management/ontology/go | 35.71 | 0 | 0 | 41.67 | |
GeneOntology.ts | 35.71 | 0 | 0 | 41.67 |... 16,20,22,23,24 |
logic/data-management/ontology/taxa | 76.47 | 80 | 75 | 75 | |
NCBITaxonomy.ts | 76.47 | 80 | 75 | 75 |... 56,58,59,60,62 |
logic/data-management/visitors/storage | 66.67 | 50 | 50 | 66.67 | |
StorageDataReader.ts | 66.67 | 50 | 50 | 66.67 | 11,13,16 |
StorageWriter.ts | 66.67 | 50 | 50 | 66.67 | 11,13,16 |
logic/data-management/visitors/storage/browser | 74.42 | 68.75 | 70 | 74.42 | |
BrowserStorageCommon.ts | 50 | 50 | 66.67 | 50 |... 16,17,18,20,21 |
BrowserStorageConsts.ts | 100 | 100 | 100 | 100 | |
BrowserStorageDataReader.ts | 83.33 | 75 | 66.67 | 83.33 | 10,18 |
BrowserStorageWriter.ts | 84.62 | 75 | 66.67 | 84.62 | 11,19 |
logic/data-source | 19.8 | 4.9 | 13.24 | 20.52 | |
CachedDataSource.ts | 10.42 | 0 | 0 | 10.42 |... 07,110,112,113 |
DataRepository.ts | 40 | 16.67 | 33.33 | 40 | 18,19,21,25,26,28 |
DataSource.ts | 100 | 100 | 100 | 100 | |
DataSourceCommon.ts | 30 | 28.57 | 33.33 | 30 |8,9,20,21,22,24,35 |
EcDataSource.ts | 4.58 | 0 | 0 | 4.84 |... 80,283,284,287 |
Element.ts | 100 | 100 | 100 | 100 | |
GoDataSource.ts | 6.19 | 0 | 0 | 6.45 |... 01,204,206,209 |
TaxaDataSource.ts | 33.96 | 10.53 | 30.77 | 35.29 |... 16,117,121,122 |
TaxaElement.ts | 20 | 0 | 0 | 22.22 |... 15,16,17,21,22 |
TaxumRank.ts | 85.71 | 50 | 50 | 85.71 | 33,34,35,36,39 |
logic/data-source/repository | 87.5 | 50 | 71.43 | 87.5 | |
MetaProteomicsDataRepository.ts | 87.5 | 50 | 71.43 | 87.5 | 50,51,60,61 |
logic/functional-annotations | 46.77 | 26.67 | 25 | 48.33 | |
EcNameSpace.ts | 62.5 | 50 | 33.33 | 62.5 | 24,28,29,30,31,34 |
EcNumber.ts | 11.76 | 0 | 0 | 12.5 |... 38,41,45,59,60 |
FAElement.ts | 63.64 | 0 | 25 | 70 | 20,24,28 |
FATrust.ts | 25 | 100 | 0 | 25 | 7,8,9 |
GoNameSpace.ts | 50 | 50 | 50 | 50 | 8,9,10,11,14 |
GoTerm.ts | 100 | 100 | 100 | 100 | |
logic/patterns/progress | 100 | 100 | 100 | 100 | |
ProgressPublisher.ts | 100 | 100 | 100 | 100 | |
logic/processors/count | 100 | 100 | 100 | 100 | |
TaxaCountProcessor.ts | 100 | 100 | 100 | 100 | |
logic/processors/peptide | 52.17 | 60 | 42.86 | 54.55 | |
ECPeptideProcessor.ts | 66.67 | 100 | 33.33 | 80 | 8 |
FAPeptideProcessor.ts | 10 | 20 | 20 | 10 |... 26,28,29,31,35 |
GOPeptideProcessor.ts | 66.67 | 100 | 33.33 | 80 | 8 |
TaxaPeptideProcessor.ts | 100 | 100 | 100 | 100 | |
logic/processors/peptide/container | 94.64 | 70 | 100 | 94.12 | |
PeptideContainerProcessor.ts | 100 | 100 | 100 | 100 | |
process.ts | 93.02 | 62.5 | 100 | 92.11 | 68,85,98 |
test | 85.33 | 100 | 55.17 | 85.14 | |
ClipboardMock.ts | 44.44 | 100 | 33.33 | 44.44 | 5,12,19,23,27 |
LocalStorageMock.ts | 25 | 100 | 14.29 | 25 | 5,9,13,17,21,25 |
Mock.ts | 100 | 100 | 100 | 100 | |
MockPeptideContainerProcessor.ts | 100 | 100 | 75 | 100 | |
Setup.ts | 100 | 100 | 100 | 100 | |
------------------------------------------------|----------|----------|----------|----------|-------------------|
The abstraction should at least make it possible to access a local and remote database. It should allow for easy configurability.
We should properly configure the linter used for this project and install a beautifier (that automatically cleans up our code) as well.
Currently only one count table processor is needed: a processor that transforms a count table with counts for LCAs into an LCA tree.
Count tables should ideally be stored locally when computed and fetched when already available. This requires the count tables to be linked to the original peptide containers.
Most visualizations shown for a single sample can be viewed in fullscreen-mode. This mode no longer works properly. After opening a container as "fullscreen", the browser directly exists it again.
Visualizations do not render at full width in the desktop for some reason. This should be checked out.
A dialog with the QuickGO-chart should open when clicking these images. This does not work currently and throws the following error:
vue.runtime.esm.js?2b0e:1888 TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).modal is not a function
at showInfoModal (modal.ts?d90d:15)
at VueComponent.showGoModal (FunctionalSummaryCard.vue?79ce:311)
This modal should look like this (from unipept.ugent.be)
Reproduction:
The counter that displays the amount of peptides that are matched is not updated when the ExperimentSummaryCard is not visible.
Migrate the following table to Vue, Vuetify and TypeScript:
It might be valuable to use a customized version of Vuetify's DataTable component for this component.
The navigation drawer on the left hand side of the window disappears when the main container content width is too large.
This project should use the GitHub actions for automatic testing of code. For this to work, we should first implement a set of tests.
A lot of data is communicated from the Unipept servers to our application through the API. At this point, there's no proper error handling that informs the user of requests that might have failed. I've already fixed this for the sampledata-endpoint in #8 .
Since the last upgrade of Unipept, it is no longer possible to view the individual peptides of a dataset. This functionality should however be added again.
The functional annotations view supports some kind of filtering (based on how many identified proteins are annotated with a specific annotation). This filtering does not work at the moment and the input-box is too wide at the moment.
There seems to be some spacing missing between the "Load Dataset" button and the dropdown in the LoadDatasetsCard.
This is what the card looks like in the web components:
And this is what it should look like (morty.ugent.be):
The only changes between both applications is the upgrade to Vuetify 2.0 in the web components.
Implement the following component that renders a summary of a single peptide analysis:
The previous AmountTable shows a bar that indicates the relative amount of peptides that are associated with some function. This should also be migrated to the new AmountTable that's based on the Vuetify DataTable.
The width prop is being mutated in the TreeviewVisualization, throwing errors:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "width"
found in
---> <TreeviewVisualization>
<Root>
The first sample that's being analysed is always processed first, without starting to analysis the others. Once the analysis of the second sample starts, all others are analysed in parallel.
Implement a component that displays the lineage tree for a single peptide as shown in the following figure:
It could take some time before data is loaded into the AmountTable. We should use Vuetify's built-in loading indicator for DataTable's to inform the user of the loading process.
See: https://vuetifyjs.com/en/components/data-tables#loading-state for more details.
After the user clicks the "Download results" button, it takes a few seconds before the download is actually started. A loading indicator should be shown during this time (and the button itself should be disabled).
Users have the choice to see the amount of peptides in an absolute or relative (percentage of total) way. The ability to switch between both ways is not yet implemented for the new amount table.
The modal that's opened when clicking the 'info' icon in the sort-dropdown is also not migrated at this point.
The FunctionalSummaryCard is a large Vue component with quite some responsibilities. This makes it hard to maintain this component, or to write useful unit tests for it. By splitting the FunctionalSummaryCard into smaller entities with a more refined responsibility, we can alleviate these issues.
I think it would be better if we moved the "download image" button for visualizations and place it next to the "reset"-button.
Instead of this:
Place the button here:
We can then also replace the "more..." menu by a single button to toggle fullscreen-mode.
The font of tooltips for the visualizations (for example the Sunburst) is different from the font being used in the stable version of Unipept.
Implement this table in Vue and TypeScript:
Ideas:
The heatmap wizard is currently not working correctly due to breaking changes in the upgrade to Vuetify 2.0.
This manager should allow for PeptideContainers to be fetched/stored from multiple data sources (disk, local storage, etc.).
The API that a Vue-component offers is not always directly clear. To improve maintainability of this project, we should indicate all events that are emitted by a component (as well as the props it takes in) using the JS Doc-extension jsdoc-vuejs (https://www.npmjs.com/package/jsdoc-vuejs).
To further improve this, we could even set up a GitHub-action that automatically compiles the documentation when a push occurs.
If the user changes the currently active assay, the associated visualizations should also change. This is the case for the SunburstVisualization and the HierarchicalOutline, but not for the TreeMap and TreeView for some reason.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.