367 lines
14 KiB
Svelte
367 lines
14 KiB
Svelte
<script lang 'ts'></script>
|
|
|
|
<section class="overflow-hidden text-white h-full pb-8">
|
|
<main class="overflow-hidden">
|
|
<div class="flex flex-row items-center">
|
|
<label
|
|
for="clinicalTrialInfo"
|
|
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
|
>
|
|
Clinical Trials
|
|
</label>
|
|
<InfoModal
|
|
title={"Clinical Trial"}
|
|
content={"Info description coming soon! But first a word of our sponsor skillshare... just kidding"}
|
|
id={"clinicalTrialInfo"}
|
|
/>
|
|
</div>
|
|
|
|
{#if data?.user?.tier === "Pro"}
|
|
{#if isLoaded}
|
|
{#if rawData?.length >= 5}
|
|
<div class="w-full flex flex-col items-start">
|
|
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full">
|
|
The Biotech company {$displayCompanyName} has conducted a total of
|
|
{abbreviateNumber(rawData?.length)} clinical trials. Out of these,
|
|
{numOfActive === 0 ? "none" : numOfActive} are currently active,
|
|
{numOfCompleted} have been completed, {numOfTerminated} were terminated
|
|
and {numOfResults} trials have produced results.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pb-2 rounded-md bg-[#09090B]">
|
|
<div class="app w-full h-[300px] mt-5">
|
|
<Chart {init} options={optionsData} class="chart" />
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
|
|
Latest Information
|
|
</h2>
|
|
|
|
<div class="rounded-md sm:min-h-[330px]">
|
|
<div class="w-full m-auto h-auto max-h-[500px] overflow-x-scroll sm:overflow-hidden sm:overflow-y-scroll scroller ">
|
|
<table class="table table-sm table-compact table-pin-rows table-pin-cols w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Drug</th>
|
|
<th class="text-white shadow-md font-semibold text-sm text-start bg-[#09090B]">Stage</th>
|
|
<th class="text-white shadow-md font-semibold text-sm text-center bg-[#09090B]">Phase Status</th>
|
|
<th class="text-white shadow-md font-semibold text-sm text-end bg-[#09090B]">Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each displayList as item,index}
|
|
<tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
|
|
|
|
<td class="text-white font-medium whitespace-nowrap">
|
|
{item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])}
|
|
</td>
|
|
<td class="text-white font-medium w-full text-start">
|
|
{item['Start Date'] === null ? 'n/a' : new Date(item["Start Date"])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
|
</td>
|
|
|
|
<td class="text-white text-start font-medium">
|
|
{formatString(item['Study Status'])}
|
|
</td>
|
|
|
|
<td class="text-white text-center font-medium">
|
|
{item['Phases'] !== 'NA' ? formatString(item["Phases"])?.replace('Phase','') : '-'}
|
|
</td>
|
|
|
|
<td class="text-white text-end font-medium ">
|
|
{formatString(item["Study Results"])}
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
-->
|
|
{/if}
|
|
{:else}
|
|
<div class="flex justify-center items-center h-80">
|
|
<div class="relative">
|
|
<label
|
|
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<span class="loading loading-spinner loading-md text-gray-400"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div
|
|
class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
|
|
>
|
|
<svg
|
|
class="mr-1.5 w-5 h-5 inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#A3A3A3"
|
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
|
/></svg
|
|
>
|
|
Unlock content with
|
|
<a
|
|
class="inline-block ml-2 text-blue-400 hover:sm:text-white"
|
|
href="/pricing">Pro Subscription</a
|
|
>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</section>
|
|
|
|
<!-- Put this part before </body> tag -->
|
|
<input type="checkbox" id="clinicalDesktopModal" class="modal-toggle" />
|
|
|
|
<label
|
|
for="clinicalDesktopModal"
|
|
class="hidden lg:modal modal-bottom sm:modal-middle cursor-pointer"
|
|
>
|
|
<label for="clinicalDesktopModal" class="cursor-pointer modal-backdrop"
|
|
></label>
|
|
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<label
|
|
class="modal-box w-full relative bg-[#27272A] h-auto max-h-[900px] overflow-y-scroll"
|
|
>
|
|
<label
|
|
for="clinicalDesktopModal"
|
|
class="cursor-pointer absolute right-5 top-2 bg-[#27272A] text-2xl text-white"
|
|
>
|
|
✕
|
|
</label>
|
|
|
|
<h3 class="text-xl font-semibold text-white mt-10">
|
|
Title: {trialTitle}
|
|
</h3>
|
|
<p class="py-4 text-gray-200 bg-[#27272A] w-full">
|
|
<span class="font-semibold text-white">Brief Summary:</span>
|
|
{trialSummary}
|
|
</p>
|
|
|
|
<table
|
|
class="table table-sm table-compact bg-[#27272A] w-full mt-5 mb-10 text-white"
|
|
>
|
|
<tbody>
|
|
<!-- row 1 -->
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">NCT Number</td>
|
|
<td class="bg-[#27272A]">{trialId}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Start Date</td>
|
|
<td class="bg-[#27272A]">{trialStart}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">End Date</td>
|
|
<td class="bg-[#27272A]">{trialEnd}</td>
|
|
</tr>
|
|
<!-- row 2 -->
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Study Status</td>
|
|
<td class="bg-[#27272A]">{trialStage}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Phase Status</td>
|
|
<td class="bg-[#27272A]">{trialPhase}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Study Results</td>
|
|
<td class="bg-[#27272A]">{trialResult}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Sex</td>
|
|
<td class="bg-[#27272A]">{formatString(trialSex)}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Age</td>
|
|
<td class="bg-[#27272A]"
|
|
>{formatString(trialAge)?.replace("Older_adult", "Older Adult")}</td
|
|
>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Sponsor</td>
|
|
<td class="bg-[#27272A]">{trialSponsor}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Enrollment</td>
|
|
<td class="bg-[#27272A]">{trialEnrollment}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Study Type</td>
|
|
<td class="bg-[#27272A]">{trialStudyType}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Funder Type</td>
|
|
<td class="bg-[#27272A]">{trialFunderType}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700">
|
|
<td class="bg-[#27272A] font-semibold">Website</td>
|
|
<td class="bg-[#27272A]"
|
|
><a
|
|
class="text-blue-400 sm:hover:text-white"
|
|
href={trialLink}
|
|
rel="noopener noreferrer"
|
|
target="_blank">{trialLink}</a
|
|
></td
|
|
>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</label>
|
|
</label>
|
|
|
|
<!--Start ETF Modal-->
|
|
<div class="lg:hidden drawer drawer-end z-40 overflow-hidden w-screen">
|
|
<input id="clinicalMobileModal" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-side overflow-hidden">
|
|
<div class="bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden">
|
|
<label for="clinicalMobileModal" class="absolute left-6 top-6">
|
|
<svg
|
|
class="w-6 h-6 inline-block mb-0.5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#fff"
|
|
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
|
/></svg
|
|
>
|
|
</label>
|
|
|
|
<div class="w-full overflow-hidden overflow-y-scroll p-2">
|
|
<h3 class="text-xl font-semibold text-white mt-14 p-3">
|
|
Title: {trialTitle}
|
|
</h3>
|
|
<p class="py-4 text-gray-200 w-full p-3">
|
|
<span class="font-semibold text-white">Brief Summary:</span>
|
|
{trialSummary}
|
|
</p>
|
|
|
|
<table
|
|
class="table table-sm table-compact w-full mt-5 mb-10 text-white"
|
|
>
|
|
<tbody>
|
|
<!-- row 1 -->
|
|
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
|
|
<td class="font-semibold w-full">NCT Number</td>
|
|
<td class="">{trialId}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Start Date</td>
|
|
<td class="">{trialStart}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">End Date</td>
|
|
<td class="">{trialEnd}</td>
|
|
</tr>
|
|
<!-- row 2 -->
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Study Status</td>
|
|
<td class="">{trialStage}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Phase Status</td>
|
|
<td class="">{trialPhase}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Study Results</td>
|
|
<td class="">{trialResult}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Sex</td>
|
|
<td class="">{formatString(trialSex)}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Age</td>
|
|
<td class=""
|
|
>{formatString(trialAge)?.replace(
|
|
"Older_adult",
|
|
"Older Adult",
|
|
)}</td
|
|
>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Sponsor</td>
|
|
<td class="">{trialSponsor}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Enrollment</td>
|
|
<td class="">{trialEnrollment}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Study Type</td>
|
|
<td class="">{trialStudyType}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Funder Type</td>
|
|
<td class="">{trialFunderType}</td>
|
|
</tr>
|
|
<tr
|
|
class="border-b border-slate-700 odd:bg-[#27272A] even:bg-[#09090B]"
|
|
>
|
|
<td class="font-semibold">Website</td>
|
|
<td class=""
|
|
><a
|
|
class="text-blue-400 sm:hover:text-white"
|
|
href={trialLink}
|
|
rel="noopener noreferrer"
|
|
target="_blank">{trialLink}</a
|
|
></td
|
|
>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--End ETF Modal-->
|
|
|
|
<style>
|
|
.app {
|
|
height: 300px;
|
|
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app {
|
|
height: 210px;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
}
|
|
</style>
|