Skip to content

Commit 1d99c4b

Browse files
Vincent-J-ZVincent-J-Z
committed
update most issues
1 parent 6c680d9 commit 1d99c4b

File tree

5 files changed

+34
-19
lines changed

5 files changed

+34
-19
lines changed

‎web/src/Main.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="content">
55
<HomeView v-if="activeView === 'home'" @start="activeView = 'step'" />
66
<StepView v-else-if="activeView === 'step'" @result="onStepResult" />
7-
<ResultView v-else-if="activeView === 'result'" :result="resultPayload" />
7+
<ResultView v-else-if="activeView === 'result'" :result="resultPayload" @returnToSelection="activeView = 'step'" />
88
</div>
99
</div>
1010

‎web/src/imgs/front_cover.png‎

1.49 MB
Loading

‎web/src/imgs/homepage_demo.png‎

-231 KB
Binary file not shown.

‎web/src/views/HomeView.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="container">
44
<h1>Welcome to TrialMap!</h1>
55
<p>TrialMap is an end-to-end machine learning framework for optimizing trial eligibility criteria using real-world data.</p>
6-
<img src="../imgs/homepage_demo.png" alt="TrialMap" class="homepage-demo"/>
6+
<img src="../imgs/front_cover.png" alt="TrialMap" class="homepage-demo"/>
77
<Button label="Start Your Journey Now !" @click="$emit('start')"/>
88
</div>
99
</div>
@@ -34,10 +34,9 @@ defineEmits(['start'])
3434
text-align: center;
3535
}
3636
.homepage-demo {
37-
width:70%;
38-
height: 70%;
37+
width:80%;
3938
object-fit: cover;
40-
margin-bottom: 1rem;
41-
margin-top: 1rem;
39+
margin-bottom: 2rem;
40+
margin-top: 2rem;
4241
}
4342
</style>

‎web/src/views/ResultView.vue‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
<div class="r-value">{{ result?.selectedCancerType || '-' }}</div>
99
</div>
1010
<div class="r-card">
11-
<h3 class="r-title">Line of Therapy</h3>
12-
<div class="r-value">{{ resultRelatedMetadata.lineOfTherapy ?? '-' }}</div>
11+
<h3 class="r-title">Trial</h3>
12+
<div class="r-value">{{ result?.selectedTreatment ?? '-' }}</div>
1313
</div>
1414
</div>
1515

@@ -20,11 +20,17 @@
2020
<Column field="value" header="value" />
2121
</DataTable>
2222
</div>
23-
24-
<div class="r-card">
25-
<h3 class="r-title">Endpoint</h3>
26-
<div class="r-value">{{ result?.selectedEndpoint || '-' }}</div>
23+
<div class="row-2">
24+
<div class="r-card">
25+
<h3 class="r-title">Endpoint</h3>
26+
<div class="r-value">{{ result?.selectedEndpoint || '-' }}</div>
27+
</div>
28+
<div class="r-card">
29+
<h3 class="r-title">Line of Therapy</h3>
30+
<div class="r-value">{{ resultRelatedMetadata.lineOfTherapy ?? '-' }}</div>
31+
</div>
2732
</div>
33+
2834

2935
<div class="r-card push-down">
3036
<h3 class="r-title">Criteria</h3>
@@ -53,11 +59,14 @@
5359
<div v-if="(Top4PathwaysResult && Top4PathwaysResult.length > 0)" class="right-stack">
5460
<div class="r-card" style="min-height: 240px;">
5561
<div class="r-card-header">
56-
<h3 class="r-title">Top 4 Pathways</h3>
57-
<Button class="ml-2" size="small" @click="onResetSort">
58-
Reset
59-
<FontAwesomeIcon :icon="['fas', 'arrows-rotate']" />
60-
</Button>
62+
<div class="r-header-left">
63+
<h3 class="r-title">Top 4 Pathways</h3>
64+
<Button class="ml-2" size="small" @click="onResetSort">
65+
Reset
66+
<FontAwesomeIcon :icon="['fas', 'arrows-rotate']" />
67+
</Button>
68+
</div>
69+
<Button size="small" severity="secondary" @click="onReturnToSelection">Return to Selection</Button>
6170
</div>
6271
<DataTable ref="topTableRef" v-model:selection="selectedTopPath" v-model:sortField="sortField" v-model:sortOrder="sortOrder" sortMode="single" :value="Top4PathwaysResult" selectionMode="single" :metaKeySelection="false" dataKey="path_id" rowHover tableStyle="margin-top: 24px;" size="large" @rowSelect="onTopSelect" @rowUnselect="onTopUnselect">
6372
<Column field="pathName" header="Paths" />
@@ -83,7 +92,7 @@
8392
</div>
8493
<div class="r-card" style="min-height: 240px;">
8594
<div class="r-card-header">
86-
<h3 class="r-title">Charts</h3>
95+
<h3 class="r-title">Origami Plots</h3>
8796
</div>
8897
<div class="r-card-content">
8998
<div v-for="item in Top4PathwaysResult" :key="item.path_id">
@@ -112,6 +121,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
112121
const props = defineProps({
113122
result: { type: Object, default: () => ({}) }
114123
})
124+
const emit = defineEmits(['returnToSelection'])
115125
116126
const resultRelatedMetadata = ref({})
117127
const Top4PathwaysResult = ref([])
@@ -258,7 +268,7 @@ function getTop4Pathways(trailResult, criteria, endpoint, criteriaNameToIndex) {
258268
: { srcHr: 'hr_pfs', srcSelog: 'selog_hr_pfs', srcSucra: 'sucra_pfs' }
259269
const res = {
260270
path_id: labelId,
261-
pathName: `${labelId}${displayIndices.length ? ` (${displayIndices.join(',')})` : ''}`,
271+
pathName: `${displayIndices.length ? `${displayIndices.join(',')}` : ''}`,
262272
criteriaIndices: uniqueSorted,
263273
ae: row.ae,
264274
ease: row.ease,
@@ -297,6 +307,10 @@ function onResetSort() {
297307
}
298308
}
299309
310+
function onReturnToSelection() {
311+
emit('returnToSelection')
312+
}
313+
300314
function getMaxes() {
301315
const rows = Top4PathwaysResult.value || []
302316
return {
@@ -398,7 +412,9 @@ function getChartOptions() {
398412
align-items: center;
399413
gap: 16px;
400414
padding: 8px;
415+
justify-content: space-between;
401416
}
417+
.r-header-left { display: flex; align-items: center; gap: 16px; }
402418
.r-card-empty {
403419
display: flex;
404420
align-items: center;

0 commit comments

Comments
 (0)