Skip to content

Commit

Permalink
Merge pull request #131 from DSACMS/nat/instructions
Browse files Browse the repository at this point in the history 
Frontend: UX & Content Updates
  • Loading branch information
@IsaacMilarky
IsaacMilarky authored Sep 18, 2024
2 parents 037530e + 824ff76 commit d50d575
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 88 deletions.
22 changes: 18 additions & 4 deletions frontend/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,42 @@ body {
}

.form {
max-width: 400px;
max-width: 450px;
width: 100%;
margin: 0 auto;
}

h1,
h2,
#file-input-copy {
text-align: center;
text-align: flex-start;
}

.usa-button {
width: 100%;
}

.usa-alert {
.usa-button-group {
justify-content: center;
}

.usa-alert,
#results-spreadsheet-instructions {
display: none;
}

#save-file-fail-alert {
margin-bottom: 10px;
}

#deduplication-error-alert {
display: block;
}

.footer {
position: fixed;
bottom: 0;
width: 95%;
width: 70%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
Expand All @@ -61,6 +70,11 @@ img {
animation: spin 2s linear infinite;
}

.security-info {
padding-inline-start: 0;
list-style-position: inside;
}

@keyframes spin {
0% {
transform: rotate(0deg);
Expand Down
21 changes: 14 additions & 7 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,15 @@
<title>DedupliFHIR</title>
</head>
<body>
<div class="content" style="width: 100%">
<div class="content">
<h1>DedupliFHIR</h1>
<h2>Upload Patient Records File</h2>
<div class="form">
<label class="usa-label" id="file-input-copy" for="file-input-specific"
>Select file to undergo deduplication</label
>To start deduplication, load your file into DedupliFHIR.</label
>
<div class="usa-form-group">
<span class="usa-hint" id="file-input-specific-hint"
>Accepted Types: FHIR, CSV</span
>
>FHIR or CSV file only</span>
<input
id="file-input-specific"
class="usa-file-input"
Expand All @@ -44,12 +42,21 @@ <h2>Upload Patient Records File</h2>
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Error</h4>
<p class="usa-alert__text">
File not found. Please upload a file.
File not found. Please load a file.
</p>
</div>
</div>
<br>
<button type="button" class="usa-button" id="submit" >Submit</button>
<button type="button" class="usa-button" id="submit" >Find the possible duplicates</button>
<div class="security-section" id="security-section">
<p><strong>DedupliFHIR is secure.</strong></p>
<ul class="security-info">
<li>After you download DedupliFHIR, it works locally on your computer, just like other software applications.</li>
<li>Any files you load into DedupliFHIR stay on your computer.</li>
<li>No information is shared.</li>
</ul>
<a href="https://github.com/DSACMS/dedupliFHIR" target="_blank">Learn about DedupliFHIR</a>
</div>
</div>
<div class="footer">
<img src="./assets/logo-cms.svg" alt="CMS.gov Logo">
Expand Down
2 changes: 2 additions & 0 deletions frontend/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ async function handleSaveFile() {

function createWindow() {
mainWindow = new BrowserWindow({
width: 900,
height: 750,
webPreferences: {
preload: path.join(__dirname, "./preload.js"),
contextIsolation: true,
Expand Down
3 changes: 0 additions & 3 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions frontend/pages/error.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="content">
<h1>DedupliFHIR</h1>

<h2>Results</h2>
<p id="results-ready-text">Your results are ready.</p>

<div class="usa-alert usa-alert--error" id="deduplication-error-alert" role="alert">
<div class="usa-alert__body">
Expand All @@ -21,9 +21,9 @@ <h4 class="usa-alert__heading">Error</h4>
</p>
</div>
</div>

<br>
<a href="../index.html" class="usa-button usa-button--outline"> Return to Home </a>
<p>
<a class="usa-link" href="../index.html" id="return-to-home">Back to home</a>
</p>

<script src="../node_modules/@uswds/uswds/dist/js/uswds.min.js"></script>
</div>
Expand Down
59 changes: 17 additions & 42 deletions frontend/pages/success.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,60 +10,35 @@
<body>
<div class="content">
<h1>DedupliFHIR</h1>

<h2>Results</h2>
<!-- TODO: Add result data to table -->
<!-- <table class="usa-table">
<caption>
Deduplication Results
</caption>
<thead>
<tr>
<th scope="col">Metric</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
TODO: Add number of total records
<tr>
<th scope="row">Total Records</th>
<td>
</td>
</tr>
TODO: Add number of duplicate records
<tr>
<th scope="row">Duplicate Records</th>
<td>
</td>
</tr>
</tbody>
</table> -->
<div class="usa-alert usa-alert--success" id="download-success-alert" role="alert">
<p id="results-ready-text">Your results are ready.</p>
<div class="usa-alert usa-alert--success" id="save-file-success-alert" role="alert">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Success</h4>
<p class="usa-alert__text">
Results file downloaded!
Results file saved to your computer.
</p>
</div>
</div>
<div class="usa-alert usa-alert--error" id="download-fail-alert" role="alert">
<div class="usa-alert usa-alert--error" id="save-file-fail-alert" role="alert">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Error</h4>
<p class="usa-alert__text">
Unable to download file. Please try again.
Unable to save file to your computer. Please try again.
</p>
</div>
</div>
<div class="results-spreadsheet-instructions" id="results-spreadsheet-instructions">
<p>
<b>To find possible duplicates:</b>
<li>Open your results file.</li>
<li>Find the records with the same <b>cluster_id</b>.<br><a href="https://github.com/DSACMS/dedupliFHIR/blob/main/research/sept-2024/examples-use-clusterid-to-find-possible-duplicates.md" target="_blank">(See examples.)</a></li>
</ol>
</p>
</div>
<br>
<ul class="usa-button-group">
<li class="usa-button-group__item">
<a href="../index.html" class="usa-button usa-button--outline"> Return to Home </a>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button" id="download">Download File</button>
</li>
</ul>

<button type="button" class="usa-button" id="save-file">Save the results file</button>
<p>
<a class="usa-link" href="../index.html" id="return-to-home">Back to home</a>
</p>
<script src="../renderer/renderer-success.js"></script>
<script src="../node_modules/@uswds/uswds/dist/js/uswds.min.js"></script>
</div>
Expand Down
19 changes: 15 additions & 4 deletions frontend/renderer/renderer-success.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
const successAlert = document.getElementById("download-success-alert");
const failAlert = document.getElementById("download-fail-alert");
const resultsText = document.getElementById("results-ready-text");
const successAlert = document.getElementById("save-file-success-alert");
const failAlert = document.getElementById("save-file-fail-alert");
const instructions = document.getElementById(
"results-spreadsheet-instructions",
);
const homeButton = document.getElementById("return-to-home");

const downloadButton = document.getElementById("download");
downloadButton.addEventListener("click", async () => {
const saveButton = document.getElementById("save-file");
saveButton.addEventListener("click", async () => {
const filePath = await window.electronAPI.saveFile();
if (filePath) {
resultsText.style.display = "none";
successAlert.style.display = "block";
instructions.style.display = "block";
failAlert.style.display = "none";
saveButton.style.display = "none";
homeButton.innerText = "Load another file into DedupliFHIR";
} else {
resultsText.style.display = "none";
successAlert.style.display = "none";
instructions.style.display = "none";
failAlert.style.display = "block";
}
});
64 changes: 40 additions & 24 deletions frontend/tests/frontend.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,10 @@ test("UI elements present", async () => {
const content = await window.locator("div.content");
expect(content).not.toBeNull();
expect(content.locator("h1")).toHaveText("DedupliFHIR");
await window.waitForSelector("h2");
expect(content.locator("h2")).toHaveText("Upload Patient Records File");
const instructionText = await window.locator("#file-input-copy");
expect(instructionText).toHaveText(
"To start deduplication, load your file into DedupliFHIR.",
);

// Check for file dropper
const fileDropper = await window.locator("input[type='file']");
Expand All @@ -77,23 +79,22 @@ test("UI elements present", async () => {
const submitButton = await window.locator("button[type='button']");
expect(submitButton).not.toBeNull();
expect(submitButton).toHaveId("submit");

// Check for security section
const securityText = await window.locator("#security-section");
expect(securityText).not.toBeNull();
});

test("submit without uploading file", async () => {
test("submit without loading file", async () => {
const submitButton = await window.locator("button[type='button']");
await submitButton.click();

const alert = await window.locator("#file-input-alert");
expect(alert).not.toBeNull();
expect(alert.locator("p")).toHaveText(
"File not found. Please upload a file.",
);
expect(alert.locator("p")).toHaveText("File not found. Please load a file.");
});

test("upload file and submit", async () => {
// TODO: remove this when height bug is fixed
await window.setViewportSize({ width: 1000, height: 3000 });

test("load file and submit", async () => {
const fileDropper = await window.locator("input[type='file']");

await fileDropper.setInputFiles(
Expand Down Expand Up @@ -125,20 +126,23 @@ test("finished results present", async () => {
expect(content.locator("h1")).toHaveText("DedupliFHIR");

// Wait for results
await window.waitForSelector("h2", {
await window.waitForSelector("p", {
timeout: 1000 * 60 * 2, // two minutes
});
expect(content.locator("h2")).toHaveText("Results");
expect(content.locator("#results-ready-text")).toHaveText(
"Your results are ready.",
);
expect(content.locator("a[href='../index.html']")).not.toBeNull();
expect(content.locator("#download")).not.toBeNull();
expect(content.locator("#save-file")).not.toBeNull();

expect(content.locator("#download-success-alert")).toBeHidden();
expect(content.locator("#download-fail-alert")).toBeHidden();
expect(content.locator("#save-file-success-alert")).toBeHidden();
expect(content.locator("#results-spreadsheet-instructions")).toBeHidden();
expect(content.locator("#save-file-fail-alert")).toBeHidden();
});

test("download file", async () => {
const downloadButton = await window.locator("#download");
expect(downloadButton).not.toBeNull();
test("save file", async () => {
const saveButton = await window.locator("#save-file");
expect(saveButton).not.toBeNull();

// https://stackoverflow.com/a/75966734
const xlsxPath = path.join(
Expand All @@ -150,12 +154,22 @@ test("download file", async () => {
dialog.showSaveDialog = () =>
Promise.resolve({ filePath: xlsxPath, canceled: false });
}, xlsxPath);
await downloadButton.click();
await saveButton.click();

await window.waitForSelector("#download-success-alert");
const successAlert = await window.locator("#download-success-alert");
await window.waitForSelector("#save-file-success-alert");
const successAlert = await window.locator("#save-file-success-alert");
expect(successAlert).not.toBeNull();
expect(successAlert.locator("p")).toHaveText("Results file downloaded!");
expect(successAlert.locator("p")).toHaveText(
"Results file saved to your computer.",
);

const instructions = await window.locator(
"#results-spreadsheet-instructions",
);
expect(instructions).not.toBeNull();

const homeLink = await window.locator("a[href='../index.html']");
expect(homeLink).not.toBeNull();

expect((await fs.promises.stat(xlsxPath)).size).toBeGreaterThan(100 * 1024); // file size should be > 100 KB
});
Expand All @@ -171,6 +185,8 @@ test("return home", async () => {
const content = await window.locator("div.content");
expect(content).not.toBeNull();
expect(content.locator("h1")).toHaveText("DedupliFHIR");
await window.waitForSelector("h2");
expect(content.locator("h2")).toHaveText("Upload Patient Records File");
const instructionText = await window.locator("#file-input-copy");
expect(instructionText).toHaveText(
"To start deduplication, load your file into DedupliFHIR.",
);
});

0 comments on commit d50d575

Please sign in to comment.