Skip to content

Commit

Permalink
chore
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexanderMykulych committed Sep 5, 2022
1 parent 669bf01 commit 6d2d7b5
Showing 1 changed file with 45 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useNeo4j, QueryResult, generateCoyaFromGraphResult } from 'coya-ts-analyzer/browser'
import { useNeo4j, generateCoyaFromGraphResult } from 'coya-ts-analyzer/browser'
import Coya from 'coya-vue-component'
import 'coya-vue-component/dist/style.css'
Expand All @@ -10,26 +10,30 @@ const query = computed({
set: (val) => emits('update:query', val),
})
const queryResult = ref<QueryResult | null>(null)
const db = useNeo4j()
const executeQuery = async () => {
queryResult.value = null
queryResult.value = await db.read(query.value)
}
const queryResult = useAsyncState(() => db.read(query.value), null, {
immediate: false,
resetOnExecute: true,
})
const coya = computedAsync(() => queryResult.value ? generateCoyaFromGraphResult(queryResult.value) : null)
const coyaProcessing = ref(false)
const coya = computedAsync(
() => queryResult.isReady && queryResult.state?.value ? generateCoyaFromGraphResult(queryResult.state.value) : null,
null,
coyaProcessing,
)
</script>

<template>
<div class="h-full flex" pb-5>
<div class="w-full h-full flex-col">
<div class="w-40% h-full flex-col">
<div class="flex justify-start mb-2 pb-2" b="b-0.5 coolGray">
<button
class="btn"
:disabled="!query"
@click="executeQuery"
@click="queryResult.execute()"
>Execute</button>
</div>
<div class="h-95%">
Expand All @@ -38,14 +42,42 @@ const coya = computedAsync(() => queryResult.value ? generateCoyaFromGraphResult
/>
</div>
</div>
<div class="w-full">
<div class="w-full flex justify-center align-center">
<template v-if="queryResult.isLoading.value || coyaProcessing">
<div self-center flex="~ col">
<span class="loader ml-4 mb-3"></span>
...{{ coyaProcessing ? 'Processing result' : 'Loading'}}
</div>
</template>
<Coya
v-if="coya"
v-else-if="coya"
class="w-full h-90"
id="diagram"
:config="coya"
>
</Coya>
</div>
</div>
</template>
</template>

<style scoped>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
border-top: 3px solid black;
border-right: 3px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

0 comments on commit 6d2d7b5

Please sign in to comment.