-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #1171 ### Summary of Changes - You can now hide columns by right clicking them - Showing either by right click again or by clicking on new column count in sidebar footer (row count there too now) - Hidden columns excluded from visualizations that affect whole table (heatmap) - Still possible to select in other visualizations but marked red and with "hidden" in case you still want to use that column - Hiding/Showing cols marks whole table vis as "outdated" - TabContent evaluates which vis types allow non numeric columns and manages buildATab and drop downs based on that Other fixes/refactors: - Context menu on columns - Profiling errors present evaluation - Color css vars - Sidebar width reactivity --------- Co-authored-by: megalinter-bot <[email protected]> Co-authored-by: Lars Reimann <[email protected]>
- Loading branch information
3 people
authored
May 29, 2024
1 parent
846f404
commit 15ccaac
Showing
21 changed files
with
739 additions
and
241 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
packages/safe-ds-eda/src/components/ColumnCounts.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| <script lang="ts"> | ||
| import { addInternalToHistory } from '../apis/historyApi'; | ||
| import { disableNonContextMenuEffects, restoreNonContextMenuEffects } from '../toggleNonContextMenuEffects'; | ||
| import { preventClicks, table } from '../webviewState'; | ||
| export let flexAsRow = true; | ||
| let contextMenuVisible = false; | ||
| let menuRef: HTMLElement; | ||
| const toggleMenu = function () { | ||
| if ($preventClicks) return; | ||
| contextMenuVisible = !contextMenuVisible; | ||
| if (contextMenuVisible) { | ||
| preventClicks.set(true); | ||
| disableNonContextMenuEffects(); | ||
| document.addEventListener('click', handleClickOutside); | ||
| } else { | ||
| document.removeEventListener('click', handleClickOutside); | ||
| } | ||
| }; | ||
| const handleClickOutside = function (event: MouseEvent) { | ||
| if (contextMenuVisible) { | ||
| if (menuRef && !menuRef.contains(event.target as Node)) { | ||
| preventClicks.set(false); | ||
| restoreNonContextMenuEffects(); | ||
| contextMenuVisible = false; | ||
| document.removeEventListener('click', handleClickOutside); | ||
| } | ||
| } | ||
| }; | ||
| const selectOption = function (callback: () => void) { | ||
| preventClicks.set(false); | ||
| restoreNonContextMenuEffects(); | ||
| contextMenuVisible = false; | ||
| document.removeEventListener('click', handleClickOutside); | ||
| callback(); | ||
| }; | ||
| const showColumn = function (columnName: string) { | ||
| table.update(($table) => { | ||
| return { | ||
| ...$table!, | ||
| columns: $table!.columns.map((column) => { | ||
| if (columnName === column.name) { | ||
| return { | ||
| ...column, | ||
| hidden: false, | ||
| }; | ||
| } | ||
| return column; | ||
| }), | ||
| }; | ||
| }); | ||
| addInternalToHistory({ | ||
| action: 'showColumn', | ||
| alias: `Show column ${columnName}`, | ||
| type: 'internal', | ||
| columnName, | ||
| }); | ||
| }; | ||
| </script> | ||
|
|
||
| <div class="wrapper" bind:this={menuRef}> | ||
| <div class="text" class:textColumn={!flexAsRow} on:mouseup={toggleMenu} role="none"> | ||
| <span>{$table?.columns.filter((col) => !col.hidden).length ?? 0}/{$table?.columns.length ?? 0}</span> | ||
| <span>Columns </span> | ||
| </div> | ||
| {#if contextMenuVisible && $table} | ||
| <div class="contextMenu"> | ||
| {#each $table.columns.filter((col) => col.hidden) as column} | ||
| <button class="contextItem" on:click={() => selectOption(() => showColumn(column.name))} | ||
| >Show {column.name}</button | ||
| > | ||
| {/each} | ||
| {#if $table.columns.filter((col) => col.hidden).length === 0} | ||
| <button disabled>All visible</button> | ||
| {/if} | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style> | ||
| .wrapper { | ||
| cursor: pointer; | ||
| position: relative; | ||
| z-index: 100; | ||
| } | ||
| .text { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| gap: 5px; | ||
| } | ||
| .textColumn { | ||
| flex-direction: column; | ||
| gap: 0px; | ||
| } | ||
| .text:hover * { | ||
| color: var(--dark-color); | ||
| } | ||
| .contextMenu { | ||
| position: absolute; | ||
| border: 2px solid var(--medium-light-color); | ||
| background-color: var(--lightest-color); | ||
| z-index: 100; | ||
| padding: 0; | ||
| color: var(--darkest-color); | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: max-content; | ||
| left: 50%; | ||
| bottom: 100%; | ||
| min-width: 100px; | ||
| } | ||
| .contextMenu button { | ||
| padding: 5px 15px; | ||
| cursor: pointer; | ||
| background-color: var(--lightest-color); | ||
| color: var(--darkest-color); | ||
| text-align: left; | ||
| width: 100%; | ||
| } | ||
| .contextMenu button:hover { | ||
| background-color: var(--primary-color); | ||
| color: var(--light-color); | ||
| } | ||
| .contextMenu :disabled:hover { | ||
| background-color: var(--lightest-color); | ||
| color: var(--darkest-color); | ||
| cursor: default; | ||
| } | ||
| </style> |
Oops, something went wrong.