Skip to content

Variant A: Add dataset upload with compact top control #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sgoulart14 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Variant A: Add dataset upload with compact top control #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84ce635
Add course dataset upload to scatterplot
Sep 9, 2026
59fa4ec
Support uploaded datasets and robust numeric filtering
Sep 9, 2026
9bf3452
Add uploadable datasets and compact upload interface
Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions dist/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

4,350 changes: 4,350 additions & 0 deletions global_embedding_plot.tsv
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 34 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,40 @@
<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<body>
<p class="p12" id="predicted_words"></p>
<p class="p13" id="frequent_words"></p>

<!-- SARAH EDITING THE BELOW HTML -->

<div id="local-upload-container" class="file-upload-container compact-upload">

<label for="data-file-input" class="upload-label">
<strong>Upload your data</strong>
</label>

<span
class="upload-info"
title="Upload a TSV or CSV file with numeric x and y columns and at least one additional metadata column. Works with any embedding."
aria-label="File requirements: Upload a TSV or CSV file with numeric x and y columns and at least one additional metadata column."
>
ⓘ
</span>

<input
type="file"
id="data-file-input"
accept=".tsv,.txt,.csv,text/tab-separated-values,text/csv"
>

<span id="file-upload-status" class="upload-status">
Showing default data
</span>

</div>

<p class="p12" id="predicted_words"></p>

<p class="p13" id="frequent_words"></p>

<!-- SARAH EDITING HTML DONE -->
<div class="plot-area">
<div class="plot-container">
</div>
Expand Down
44 changes: 41 additions & 3 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ select.filter-by-value {
grid-gap: 1px 1px;
grid-template-areas: ". . . ." ". tooltip . ." ". plot-container side-table ." ". filters-and-options . ." ". . . .";
grid-template-columns: 1% 70% auto 1%;
grid-template-rows: 0.1fr 0.4fr 4.6fr 1.1fr 0.2fr;
grid-template-rows: 0.05fr 0.2fr 4.6fr 1.1fr 0.2fr;
height: calc(100vh - 10px);
margin-bottom: 40px;
}
Expand All @@ -211,8 +211,8 @@ select.filter-by-value {
grid-area: tooltip;
grid-column: 2 / span 2;
margin-left: 24px;
margin-top: 16px;
min-height: 60px;
margin-top: 8px;
min-height: 30px;
opacity: 0;
}

Expand Down Expand Up @@ -280,4 +280,42 @@ select.filter-by-value {

.hidden {
display: none;
}

/* SARAH ADDING */
/* Compact dataset upload controls */
.compact-upload {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0;
padding: 0;
}

.upload-label {
margin: 0;
padding: 0;
}

.upload-info {
cursor: help;
font-size: 17px;
line-height: 1;
}

.upload-status {
margin: 0 0 0 4px;
padding: 0;
font-size: 14px;
}

#data-file-input {
margin: 0;
}

#predicted_words,
#frequent_words {
margin-top: 2px;
margin-bottom: 2px;
}
Loading