Skip to content
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

Feat: Grid tiles automatically size to fill grid #186

Merged
merged 51 commits into from
Sep 27, 2024
Merged

Feat: Grid tiles automatically size to fill grid #186

Show file tree
Hide file tree
Changes from 43 commits
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
a7c04f3
Feat: Grid tiles automatically size to fill grid
hudson-newey Sep 13, 2024
ec7fe03
Fix axes
hudson-newey Sep 13, 2024
b0da461
Correct flexbox layout
hudson-newey Sep 13, 2024
fd5d301
Add dynamic grid size rounding
hudson-newey Sep 16, 2024
6c0260c
Backfill unit tests for dynamic grid sizes
hudson-newey Sep 16, 2024
684d15f
Staging commit
hudson-newey Sep 16, 2024
f05cb97
Grid container now fills its host
hudson-newey Sep 17, 2024
40497f4
Attempt to shrink before reducing grid size
hudson-newey Sep 17, 2024
850438d
Vertically auto scale
hudson-newey Sep 18, 2024
3216600
Vertically autoscale spectrograms
hudson-newey Sep 18, 2024
57951eb
Fully working version
hudson-newey Sep 18, 2024
221bdf7
Prefer to shrink grid tiles
hudson-newey Sep 18, 2024
63d6eb5
Implement new scaling algorithm
hudson-newey Sep 18, 2024
dc3430c
Fix dev pages
hudson-newey Sep 18, 2024
b1baefc
Merge main
hudson-newey Sep 18, 2024
da7a414
Axes elements now position theirself inside the svg
hudson-newey Sep 19, 2024
72530d1
Revert "Axes elements now position theirself inside the svg"
hudson-newey Sep 19, 2024
31fd74c
Correct axes svg
hudson-newey Sep 19, 2024
e324c2e
Add alternative grid shape algorithm
hudson-newey Sep 19, 2024
52f77df
Revert "Add alternative grid shape algorithm"
hudson-newey Sep 19, 2024
fd36f15
Use flex column for grid
hudson-newey Sep 19, 2024
058c2c7
Stretch tiles & use flex column for grid container
hudson-newey Sep 20, 2024
d848c1d
Grid container no longer expands beyond max size
hudson-newey Sep 20, 2024
1c3d96d
Correctly size grid
hudson-newey Sep 20, 2024
962c354
Staging for big change
hudson-newey Sep 20, 2024
7f4154a
Remove intersection observer
hudson-newey Sep 20, 2024
6fff41f
Correctly add resize observer
hudson-newey Sep 20, 2024
5423b61
Update tests
hudson-newey Sep 20, 2024
7d99da7
Complete self review
hudson-newey Sep 20, 2024
9d089d1
Do not re-poll container size
hudson-newey Sep 20, 2024
b8d68a5
Refactor grid size logic
hudson-newey Sep 24, 2024
6952f08
Revert hacky axes changes
hudson-newey Sep 24, 2024
7a0d4e4
Add dynamic grid size class
hudson-newey Sep 24, 2024
dbf191d
New dynamic grid size algorithm
hudson-newey Sep 25, 2024
c04bdeb
Got intersection observer working
hudson-newey Sep 25, 2024
578d6e7
Staging
hudson-newey Sep 25, 2024
3b5decb
Correctly disconnect intersection observer
hudson-newey Sep 25, 2024
80a18e6
Add slot text tests
hudson-newey Sep 25, 2024
a4e1c71
Update tests for dynamic grid tile sizes
hudson-newey Sep 26, 2024
dd2c168
Update axes tests
hudson-newey Sep 26, 2024
95522b8
Self review sub css changes
hudson-newey Sep 26, 2024
9dbf405
CSS self review sub axes flex slot content
hudson-newey Sep 26, 2024
b3a2be5
Fix axes css
hudson-newey Sep 26, 2024
2a41e09
Set verification grids default height to 100dvh
hudson-newey Sep 26, 2024
8e62cd6
Add comments for intersection observer observations
hudson-newey Sep 26, 2024
5f556d9
New overlapping invalidation without debounce
hudson-newey Sep 26, 2024
4d392e0
Add a different distance metric
atruskie Sep 26, 2024
f656d94
Merge branch 'dynamic-grid-tile-sizes' of https://github.com/ecoacous…
atruskie Sep 26, 2024
99b880a
Fix lint errors
atruskie Sep 26, 2024
e3f4a16
Simplify grid snapshot tests with hacky implementation
hudson-newey Sep 27, 2024
b1b6222
Fix overflowing axes padding
hudson-newey Sep 27, 2024
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
1 change: 1 addition & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"trailingComma": "all",
"semi": true,
"printWidth": 120,
Expand Down
2 changes: 1 addition & 1 deletion dev/spectrogram.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>

<body>
<oe-axes style="padding: 6rem">
<oe-axes>
<oe-indicator>
<oe-spectrogram
id="playing-spectrogram"
Expand Down
33 changes: 12 additions & 21 deletions dev/use-cases/dani-alternative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,22 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="4">
<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>
<oe-verification-grid id="verification-grid" grid-size="4">
<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>

<oe-classification tag="male" shortcut="H"></oe-classification>
<oe-classification tag="female" shortcut="J"></oe-classification>
<oe-classification tag="fledgling" shortcut="K"></oe-classification>
<oe-classification tag="in-flight" shortcut="L"></oe-classification>
<oe-classification tag="male" true-shortcut="h"></oe-classification>
<oe-classification tag="female" true-shortcut="j"></oe-classification>
<oe-classification tag="fledgling" true-shortcut="k"></oe-classification>
<oe-classification tag="in-flight" true-shortcut="l"></oe-classification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
</oe-verification-grid>

<style>
body {
margin: 0px;
}

#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
31 changes: 11 additions & 20 deletions dev/use-cases/dani.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,20 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="4">
<oe-verification verified="true" additional-tags="female" shortcut="H"></oe-verification>
<oe-verification verified="true" additional-tags="male" shortcut="J"></oe-verification>
<oe-verification verified="true" additional-tags="fledgling" shortcut="K"></oe-verification>
<oe-verification verified="true" additional-tags="in-flight" shortcut="L"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>
<oe-verification-grid id="verification-grid">
<oe-verification verified="true" additional-tags="female" shortcut="H"></oe-verification>
<oe-verification verified="true" additional-tags="male" shortcut="J"></oe-verification>
<oe-verification verified="true" additional-tags="fledgling" shortcut="K"></oe-verification>
<oe-verification verified="true" additional-tags="in-flight" shortcut="L"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>

<style>
body {
margin: 0px;
}

#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
29 changes: 8 additions & 21 deletions dev/use-cases/nsw.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,17 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="4">
<template>
<oe-info-card></oe-info-card>
</template>
<oe-verification-grid id="verification-grid">
<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>

<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
</oe-verification-grid>

<style>
body {
margin: 0px;
}

#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
35 changes: 13 additions & 22 deletions dev/use-cases/phil.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,19 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="4">
<oe-classification tag="koala" true-shortcut="h"></oe-classification>
<oe-classification tag="car" true-shortcut="j"></oe-classification>
<oe-classification tag="crickets" true-shortcut="k"></oe-classification>
<oe-verification-grid id="verification-grid">
<oe-classification tag="koala" true-shortcut="h"></oe-classification>
<oe-classification tag="car" true-shortcut="j"></oe-classification>
<oe-classification tag="crickets" true-shortcut="k"></oe-classification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>
</div>

<style>
body {
margin: 0px;
}

#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
}
</style>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"></oe-data-source>
</oe-verification-grid>
</body>

<style>
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</html>
25 changes: 10 additions & 15 deletions dev/use-cases/slade-classification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,20 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="1">
<template>
<oe-info-card></oe-info-card>
</template>
<oe-verification-grid id="verification-grid" grid-size="1">
<template>
<oe-info-card></oe-info-card>
</template>

<oe-classification true-shortcut="y" false-shortcut="n" tag="blue winged kookaburra"></oe-classification>
<oe-classification true-shortcut="y" false-shortcut="n" tag="blue winged kookaburra"></oe-classification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local> </oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local> </oe-data-source>
</oe-verification-grid>

<style>
#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
29 changes: 12 additions & 17 deletions dev/use-cases/slade-verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,22 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="1">
<template>
<oe-info-card></oe-info-card>
</template>
<oe-verification-grid id="verification-grid" grid-size="1">
<template>
<oe-info-card></oe-info-card>
</template>

<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>
<oe-verification verified="unsure" shortcut="U"></oe-verification>
<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>
<oe-verification verified="unsure" shortcut="U"></oe-verification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv" local></oe-data-source>
</oe-verification-grid>

<style>
#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
35 changes: 13 additions & 22 deletions dev/use-cases/use-case-6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,24 @@
</head>

<body>
<div id="grid-host">
<oe-verification-grid id="verification-grid" grid-size="4">
<template>
<oe-info-card></oe-info-card>
</template>
<oe-verification-grid id="verification-grid">
<template>
<oe-info-card></oe-info-card>
</template>

<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>
<oe-verification verified="true" shortcut="Y"></oe-verification>
<oe-verification verified="false" shortcut="N"></oe-verification>

<oe-verification verified="true" shortcut="U" additional-tags="rain"></oe-verification>
<oe-verification verified="false" shortcut="M" additional-tags="rain"></oe-verification>
<oe-verification verified="true" shortcut="U" additional-tags="rain"></oe-verification>
<oe-verification verified="false" shortcut="M" additional-tags="rain"></oe-verification>

<oe-data-source slot="data-source" for="verification-grid" src="/kaledioscope.csv"> </oe-data-source>
</oe-verification-grid>
</div>
<oe-data-source slot="data-source" for="verification-grid" src="/kaleidoscope.csv"> </oe-data-source>
</oe-verification-grid>

<style>
body {
margin: 0px;
}

#grid-host {
position: relative;
left: 0px;
top: 0px;
width: 100vw;
min-height: 100vh;
oe-verification-grid {
display: block;
height: 100dvh;
}
</style>
</body>
Expand Down
45 changes: 24 additions & 21 deletions dev/verification-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,28 @@
</head>

<body>
<oe-verification-grid id="verification-grid" grid-size="4">
<template>
<oe-info-card></oe-info-card>
</template>

<oe-verification verified="TRUE" shortcut="H"></oe-verification>
<oe-verification verified="TRUE" additional-tags="hello,world" shortcut="J"></oe-verification>
<oe-verification verified="FALSE" shortcut="K"></oe-verification>
<oe-verification verified="SKIP" shortcut="L"></oe-verification>
<oe-verification verified="UNSURE" shortcut=";"></oe-verification>

<!--
We should see an error thrown for this classification component
because it does not have a tag attribute
-->
<oe-verification-grid id="verification-grid">
<!-- <template>
<div>
<h1>Large text test</h1>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil odio laboriosam ea culpa magnam aut iure,
voluptate nisi. Enim natus blanditiis quam ipsa vero magni deserunt ratione qui explicabo. Est!
</p>
</div>
</template> -->

<oe-verification verified="true" shortcut="H"></oe-verification>
<oe-verification verified="true" additional-tags="hello,world" shortcut="J"></oe-verification>
<oe-verification verified="false" shortcut="K"></oe-verification>
<oe-verification verified="skip" shortcut="L"></oe-verification>
<oe-verification verified="unsure" shortcut=";"></oe-verification>

<oe-classification true-shortcut="m" tag="Cow"></oe-classification>

<!--
local would use a file picker UI, while src would allow a remote file
This should probably use a data service.
This service would
-->
<!-- <oe-data-source for="verification-grid" local></oe-data-source> -->
<oe-data-source slot="data-source" for="verification-grid" src="/grid-items.json" local> </oe-data-source>
<oe-data-source slot="data-source" for="verification-grid" src="/grid-items.json" local></oe-data-source>
</oe-verification-grid>

<button onclick="changeVerificationGridSize();">Change explicit grid size</button>
Expand All @@ -44,6 +42,11 @@
body {
margin: 0px;
}

oe-verification-grid {
display: block;
height: 100dvh;
}
</style>

<script>
Expand Down
Loading
Loading