Skip to content

Commit

Permalink
Merge pull request #21 from zprobot/main
Browse files Browse the repository at this point in the history
cellline
  • Loading branch information
ypriverol authored Dec 21, 2023
2 parents b8be742 + a15032a commit 5df7ec7
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 24 deletions.
Binary file added public/data/Cell_lines_IBAQ.json.gz
Binary file not shown.
8 changes: 8 additions & 0 deletions src/api/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,11 @@ export const getProteins = () => {
responseType: 'arraybuffer'
})
}

export const getCellLineProteins = () => {
return request({
method: 'get',
url: '/data/Cell_lines_IBAQ.json.gz',
responseType: 'arraybuffer'
})
}
40 changes: 25 additions & 15 deletions src/components/AeShow/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,14 @@
</el-drawer>
</div>
</div>

<div class="card">
<div ref="chart" v-bind:style="{width: 100 + '%', height: imgH + 'px'}"></div>
</div>

</div>
</template>
<script setup>
import { getProteins } from '@/api/search'
import { getProteins,getCellLineProteins } from '@/api/search'
import { inflate } from 'pako'
import * as echarts from 'echarts'
import {useRouter, onBeforeRouteUpdate} from "vue-router";
Expand All @@ -49,6 +48,8 @@ let proteinTable = []
const showImg = ref(false)
// data history
const dataHistory = ref([])
// current router name
const routerName = ref('')
// query protein
const protein = ref([])
// sorted tags
Expand Down Expand Up @@ -85,9 +86,10 @@ const tagsTotal = [
"placenta",
]
protein.value = Array.isArray(router.currentRoute.value.query.protein) ? router.currentRoute.value.query.protein : [router.currentRoute.value.query.protein]
routerName.value = router.currentRoute.value.name
// get proteins
const getProteinTable = async () => {
const res = await getProteins()
const res = routerName.value ==='tissues' ? await getProteins() : await getCellLineProteins()
const byteArray = new Uint8Array(res.data)
const data = inflate(byteArray, { to: 'string' })
proteinTable = JSON.parse(data)
Expand All @@ -97,9 +99,7 @@ const getProteinTable = async () => {
const handleClose = (tag) => {
dataHistory.value.splice(proteinTags.value.indexOf(tag), 1)
proteinTags.value.splice(proteinTags.value.indexOf(tag), 1)
router.push({ path: "/ae/tissues", query: { protein: proteinTags.value } })
// console.log(dataHistory.value)
// init()
routerName.value ==='tissues' ? router.push({ path: "/ae/tissues", query: { protein: proteinTags.value } }) : router.push({ path: "/ae/cellline", query: { protein: proteinTags.value } })
}
// qeury
const queryProtein = (input) => {
Expand Down Expand Up @@ -129,14 +129,10 @@ const queryProtein = (input) => {
dataHistory.value.push(output)
}
}
// console.log(output)
// init()
//} //else {
//alert('Please enter a legal protein name')
//}
})
if (proteinTags.value.length != input.value.length) {
router.push({ path: "/ae/tissues", query: { protein: proteinTags.value } })
routerName.value ==='tissues' ? router.push({ path: "/ae/tissues", query: { protein: proteinTags.value } }) : router.push({ path: "/ae/cellline", query: { protein: proteinTags.value } })
//router.push({ path: "/ae/tissues", query: { protein: proteinTags.value } })
} else {
showImg.value = true
imgH = dataHistory.value.length > 1 ? dataHistory.value.length * 400 : 500
Expand All @@ -159,21 +155,31 @@ onMounted(() => {
// init data
const initData = (data) => {
if (data.tags.length < 18) {
if (routerName.value === 'tissues') {
if (data.tags.length < 18) {
tagsTotal.map((item) => {
if (!data.tags.includes(item)) {
data.tags.push(item)
data.data.push([])
}
})
}
}
let dataSort = []
for (let i = 0; i < data.tags.length; i++) {
let obj = {}
obj['name'] = data.tags[i]
obj['data'] = data.data[i].filter(value=>value>=1)
dataSort.push(obj)
}
if (routerName.value !== 'tissues') {
dataSort.sort((obja, objb) => {
const lena = obja.data.length
const lenb = objb.data.length
return lenb - lena
})
dataSort = dataSort.slice(0, 20);
}
// sort data
dataSort.sort((obja,objb) => {
obja.data.sort((a, b) => { return a - b })
Expand Down Expand Up @@ -323,9 +329,13 @@ const init = () => {
},
})
} else {
sortTags.value = sortTags.value.length ===0 ? tagsTotal : sortTags.value
if (routerName.value === 'tissues') {
sortTags.value = sortTags.value.length ===0 ? tagsTotal : sortTags.value
} else {
sortTags.value = sortTags.value.length ===0 ? initData(dataHistory.value[0]).tags : sortTags.value
}
dataHistory.value.length === 0 ? options.title = [] : options.title.splice(0,1,{
text: 'Comparison of protein expression in different tissues',
text: `Comparison of protein expression in different ${routerName.value}`,
left: 'center'
})
dataHistory.value.length === 0 ? options.legend.show = false : options.legend.show = true
Expand Down
5 changes: 5 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ const routes = [
path: '/ae/tissues',
name: 'tissues',
component: () => import('@/components/AeShow')
},
{
path: '/ae/cellline',
name: 'cellline',
component: () => import('@/components/AeShow')
}
]
},
Expand Down
56 changes: 47 additions & 9 deletions src/views/overview/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,11 @@
<el-button type="primary" size="large" plain>Search</el-button>
</router-link> -->
</div>
<div class="select-box">
<span>select type:</span>
<el-check-tag :checked="checkedTissue" @change="onChangeTissue" style="margin-right: 8px; font-size: 10px; border-radius: 6px;">tissue</el-check-tag>
<el-check-tag :checked="checkedCellLine" @change="onChangeCellLine" style="font-size: 10px; border-radius: 6px;" >cell line</el-check-tag>
</div>
<div
style="
display: flex;
Expand All @@ -90,9 +95,6 @@
</el-text>
</div>
</div>
<!-- <p>
Find the iBAQ distribution for your protein of interest, e.g. ABCD4_HUMAN
</p> -->
<!-- Image -->
<div
style="
Expand All @@ -103,14 +105,14 @@
padding: 1rem;
"
>
<router-view></router-view>
<router-view :key="key"></router-view>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from "vue";
import { ref,computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
const router = useRouter();
Expand All @@ -123,8 +125,14 @@ const options = [
label: "Homo sapiens",
},
];
const checkedTissue = ref(true)
const checkedCellLine = ref(false)
const key = computed(() => router.currentRoute.value.name == 'tissues' ? 'tissues' : 'cellline')
onMounted(() => {
let status = router.currentRoute.value.name == 'cellline' ? true : false
checkedTissue.value = !status
checkedCellLine.value = status
})
// const font = ["V", "i", "s", "u", "a", "l", "i", "z", "a", "t", "i", "o", "n"];
// const fontColor = [
// "#25BEF6",
Expand All @@ -149,15 +157,34 @@ const onEnter = () => {
if (!input.value) {
return;
}
router.push({ path: "/ae/tissues", query: { protein: [input.value] } });
if (checkedTissue.value) {
router.push({ path: "/ae/tissues", query: { protein: [input.value] } });
} else {
router.push({ path: "/ae/cellline", query: { protein: [input.value] } });
}
};
// change tag status
const onChangeTissue = (status) => {
checkedTissue.value = status
checkedCellLine.value = !status
}
const onChangeCellLine = (status) => {
checkedCellLine.value = status
checkedTissue.value = !status
}
const onSearch = (val) => {
if (!val) {
return;
}
input.value = val;
router.push({ path: "/ae/tissues", query: { protein: [val] } });
if (checkedTissue.value) {
router.push({ path: "/ae/tissues", query: { protein: [val] } });
} else {
router.push({ path: "/ae/cellline", query: { protein: [val] } });
}
};
</script>
<style lang="scss" scoped>
Expand Down Expand Up @@ -240,4 +267,15 @@ h1 {
color:#84c7d0;
cursor: pointer;
}
.select-box {
margin: 0.5rem 0;
> span {
margin-right: 1rem;
font-size: 18px;
font-weight: 700;
}
}
.el-check-tag {
font-size: 10px;
}
</style>

0 comments on commit 5df7ec7

Please sign in to comment.