From eccb6f16e50928af727e5a43ed7f9d3d09b6fe6d Mon Sep 17 00:00:00 2001 From: Sean Martin Date: Tue, 9 Jun 2026 13:33:59 +0200 Subject: [PATCH] fix, refactor: correct some styles, remove old classes, correct files Old css was misplaced. Now has clear separation and follows the neuroglancer naming convention Also fixes the skeleton tree not extending to full height --- src/layer/segmentation/index.ts | 38 +-- src/layer/segmentation/style.css | 554 ++----------------------------- src/ui/skeleton_edit_tools.css | 12 +- src/ui/skeleton_edit_tools.ts | 12 +- src/ui/skeleton_tab.css | 430 ++++++++++++++++++++++++ src/ui/skeleton_tab.ts | 97 +++--- 6 files changed, 535 insertions(+), 608 deletions(-) create mode 100644 src/ui/skeleton_tab.css diff --git a/src/layer/segmentation/index.ts b/src/layer/segmentation/index.ts index 70c6022504..4cf4fb3a00 100644 --- a/src/layer/segmentation/index.ts +++ b/src/layer/segmentation/index.ts @@ -2195,7 +2195,7 @@ export class SegmentationUserLayer extends Base { : undefined; const nodeInfo = completeNodeInfo ?? previewNodeInfo; const container = document.createElement("div"); - container.classList.add("neuroglancer-spatial-skeleton-selection"); + container.classList.add("neuroglancer-selection-details-skeleton"); parent.appendChild(container); const appendValue = (label: string, value: string | HTMLElement) => { @@ -2223,7 +2223,7 @@ export class SegmentationUserLayer extends Base { ); const segmentIdChip = document.createElement("span"); segmentIdChip.className = - "neuroglancer-spatial-skeleton-node-segment-chip"; + "neuroglancer-selection-details-skeleton-segment-chip"; segmentIdChip.textContent = `${segmentId}`; segmentIdChip.style.backgroundColor = segmentChipColors.background; segmentIdChip.style.color = segmentChipColors.foreground; @@ -2282,7 +2282,7 @@ export class SegmentationUserLayer extends Base { nodeType, }); const summaryRow = document.createElement("div"); - summaryRow.classList.add("neuroglancer-spatial-skeleton-selection-summary"); + summaryRow.classList.add("neuroglancer-selection-details-skeleton-summary"); container.appendChild(summaryRow); const editSource = getEditableSpatiallyIndexedSkeletonSource(skeletonLayer); @@ -2301,7 +2301,7 @@ export class SegmentationUserLayer extends Base { ); const rerootButton = document.createElement("button"); rerootButton.type = "button"; - rerootButton.className = "neuroglancer-spatial-skeleton-selection-action"; + rerootButton.className = "neuroglancer-selection-details-skeleton-action"; rerootButton.disabled = rerootDisabledReason !== undefined; rerootButton.title = rerootDisabledReason ?? "Set as root"; rerootButton.appendChild( @@ -2347,7 +2347,7 @@ export class SegmentationUserLayer extends Base { ); const deleteButton = document.createElement("button"); deleteButton.type = "button"; - deleteButton.className = "neuroglancer-spatial-skeleton-selection-action"; + deleteButton.className = "neuroglancer-selection-details-skeleton-action"; deleteButton.disabled = deleteDisabledReason !== undefined; deleteButton.title = deleteDisabledReason ?? "Delete node"; deleteButton.appendChild( @@ -2378,7 +2378,7 @@ export class SegmentationUserLayer extends Base { summaryRow.appendChild(deleteButton); const icon = document.createElement("span"); - icon.className = "neuroglancer-spatial-skeleton-selection-summary-icon"; + icon.className = "neuroglancer-selection-details-skeleton-summary-icon"; const nodeTypeIconTitle = iconFilterType !== undefined ? getSpatialSkeletonNodeFilterLabel(iconFilterType) @@ -2429,7 +2429,7 @@ export class SegmentationUserLayer extends Base { ); const summaryCoordinates = document.createElement("span"); summaryCoordinates.className = - "neuroglancer-spatial-skeleton-selection-summary-coordinates"; + "neuroglancer-selection-details-skeleton-summary-coordinates"; summaryCoordinates.textContent = position.displayText; summaryCoordinates.title = position.fullText; summaryRow.appendChild(summaryCoordinates); @@ -2449,8 +2449,8 @@ export class SegmentationUserLayer extends Base { let committedTrueEnd = nodeHasTrueEnd; let leafTypeSavePending = false; const leafTypeEditor = document.createElement("div"); - leafTypeEditor.className = "neuroglancer-spatial-skeleton-leaf-type"; - const leafTypeRadioName = `neuroglancer-spatial-skeleton-leaf-type-${segmentId}-${fullNodeInfo.nodeId}`; + leafTypeEditor.className = "neuroglancer-selection-details-skeleton-leaf-type"; + const leafTypeRadioName = `neuroglancer-selection-details-skeleton-leaf-type-${segmentId}-${fullNodeInfo.nodeId}`; const leafTypeOptionElements: HTMLLabelElement[] = []; const makeLeafTypeOption = (options: { label: string; @@ -2458,15 +2458,15 @@ export class SegmentationUserLayer extends Base { trueEnd: boolean; }) => { const option = document.createElement("label"); - option.className = "neuroglancer-spatial-skeleton-leaf-type-option"; + option.className = "neuroglancer-selection-details-skeleton-leaf-type-option"; const input = document.createElement("input"); input.type = "radio"; input.name = leafTypeRadioName; input.value = options.trueEnd ? "trueEnd" : "virtualEnd"; input.className = - "neuroglancer-spatial-skeleton-leaf-type-option-input"; + "neuroglancer-selection-details-skeleton-leaf-type-option-input"; const icon = document.createElement("span"); - icon.className = "neuroglancer-spatial-skeleton-leaf-type-option-icon"; + icon.className = "neuroglancer-selection-details-skeleton-leaf-type-option-icon"; icon.appendChild( makeIcon({ svg: options.svg, @@ -2475,7 +2475,7 @@ export class SegmentationUserLayer extends Base { }), ); const text = document.createElement("span"); - text.className = "neuroglancer-spatial-skeleton-leaf-type-option-text"; + text.className = "neuroglancer-selection-details-skeleton-leaf-type-option-text"; text.textContent = options.label; option.appendChild(input); option.appendChild(icon); @@ -2509,7 +2509,7 @@ export class SegmentationUserLayer extends Base { } for (const option of leafTypeOptionElements) { option.classList.toggle( - "neuroglancer-spatial-skeleton-leaf-type-option-disabled", + "neuroglancer-selection-details-skeleton-leaf-type-option-disabled", !editable, ); if (disabledReason !== undefined) { @@ -2585,7 +2585,7 @@ export class SegmentationUserLayer extends Base { disabledReason: string | undefined, ) => { input.classList.toggle( - "neuroglancer-spatial-skeleton-properties-input-invalid", + "neuroglancer-selection-details-skeleton-properties-input-invalid", !valid, ); if (disabledReason !== undefined) { @@ -2639,7 +2639,7 @@ export class SegmentationUserLayer extends Base { } else { let committedRadius = fullNodeInfo.radius ?? 0; const radiusInput = document.createElement("input"); - radiusInput.className = "neuroglancer-spatial-skeleton-properties-input"; + radiusInput.className = "neuroglancer-selection-details-skeleton-properties-input"; radiusInput.type = "number"; radiusInput.step = "any"; radiusInput.value = formatSpatialSkeletonEditableNumber( @@ -2744,7 +2744,7 @@ export class SegmentationUserLayer extends Base { ); const confidenceControl = document.createElement("select"); confidenceControl.className = - "neuroglancer-spatial-skeleton-properties-input"; + "neuroglancer-selection-details-skeleton-properties-input"; for (const value of confidenceSelectValues) { const option = document.createElement("option"); option.value = value.toString(); @@ -2845,7 +2845,7 @@ export class SegmentationUserLayer extends Base { if (descriptionEditingDisabledReason === undefined) { const descriptionElement = document.createElement("textarea"); descriptionElement.classList.add( - "neuroglancer-spatial-skeleton-selection-description", + "neuroglancer-selection-details-skeleton-description", ); descriptionElement.rows = 3; descriptionElement.placeholder = "Description"; @@ -2895,7 +2895,7 @@ export class SegmentationUserLayer extends Base { } else if (descriptionText.length > 0) { const descriptionElement = document.createElement("div"); descriptionElement.classList.add( - "neuroglancer-spatial-skeleton-selection-description", + "neuroglancer-selection-details-skeleton-description", ); descriptionElement.textContent = descriptionText; descriptionElement.title = descriptionEditingDisabledReason; diff --git a/src/layer/segmentation/style.css b/src/layer/segmentation/style.css index 6f92b2f3a8..2bec3029a1 100644 --- a/src/layer/segmentation/style.css +++ b/src/layer/segmentation/style.css @@ -168,496 +168,12 @@ padding: 0; } -.neuroglancer-spatial-skeleton-toolbar { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.1em 0.2em; - width: 100%; -} - -.neuroglancer-spatial-skeleton-toolbar - .neuroglancer-tool-button - + .neuroglancer-tool-button { - margin-left: 0.35em; -} - -.neuroglancer-spatial-skeleton-toolbar-actions { - display: inline-flex; - align-items: center; - margin-left: auto; - gap: 0.1em; -} - -.neuroglancer-spatial-skeleton-nav-tools { - display: inline-flex; - align-items: center; - flex-wrap: wrap; - flex: 0 0 auto; - justify-content: flex-start; - gap: 0.1em; -} - -.neuroglancer-spatial-skeleton-icon-button { - border: 0; - background: transparent; - color: inherit; - padding: 0; - margin: 0; - cursor: pointer; -} - -.neuroglancer-spatial-skeleton-icon-button .neuroglancer-icon { - min-width: 14px; - min-height: 14px; - padding-left: 0; - padding-right: 0; -} - -.neuroglancer-spatial-skeleton-icon-button:hover .neuroglancer-icon { - background-color: #db4437; -} - -.neuroglancer-spatial-skeleton-icon-button:disabled { - opacity: 0.35; - cursor: default; -} - -.neuroglancer-spatial-skeleton-icon-button:disabled .neuroglancer-icon { - background-color: transparent; -} - -.neuroglancer-spatial-skeleton-tab { - display: flex; - flex-direction: column; - gap: 0.5em; - overflow-y: auto; -} - -.neuroglancer-spatial-skeleton-tab-status { - display: flex; - flex-direction: column; - gap: 0.25em; - font-size: small; -} - -.neuroglancer-spatial-skeleton-section { - --neuroglancer-skeleton-actions-width: 44px; - --neuroglancer-skeleton-type-width: 21px; - border: 1px solid #2f2f2f; - display: flex; - flex-direction: column; - flex: 1 1 auto; - min-height: 0; - overflow: hidden; -} - -.neuroglancer-spatial-skeleton-section-toggle { - border: 1px solid #2f2f2f; - background: #101010; - color: inherit; - padding: 0; - cursor: pointer; - width: 1.5em; - height: 1.5em; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.neuroglancer-spatial-skeleton-section-toggle .neuroglancer-icon { - min-width: 14px; - min-height: 14px; -} - -.neuroglancer-spatial-skeleton-section-toggle:hover .neuroglancer-icon { - background-color: #3a3a3a; -} - -.neuroglancer-spatial-skeleton-filter { - box-sizing: border-box; - margin: 0 0.4em; - width: calc(100% - 0.8em); - background: #050505; - border: 1px solid #2f2f2f; - color: #dedede; - font-family: monospace; - padding: 0.32em 0.45em; -} - -.neuroglancer-spatial-skeleton-filter-row { - display: flex; - align-items: center; - gap: 0.45em; - margin: 0.35em 0.4em 0; - color: #c6c6c6; - font-size: small; -} - -.neuroglancer-spatial-skeleton-filter-label { - flex: 0 0 auto; -} - -.neuroglancer-spatial-skeleton-show-section { - display: flex; - flex-direction: column; - gap: 0.25em; - margin: 0.35em 0.4em 0; - color: #c6c6c6; - font-size: small; -} - -.neuroglancer-spatial-skeleton-show-list { - display: flex; - flex-direction: column; - gap: 0.2em; - max-height: 10.5em; - overflow-y: auto; -} - -.neuroglancer-spatial-skeleton-navigation-bar { - display: flex; - align-items: center; - padding: 0.35em 0.4em 0 0.4em; -} - -.neuroglancer-spatial-skeleton-show-item { - display: grid; - grid-template-columns: 1.35em minmax(0, 1fr); - align-items: center; - gap: 0.45em; - padding: 0.18em 0.32em 0.18em 0.15em; - border: 1px solid #2f2f2f; - background: #232323; - color: #e4e4e4; - font-family: monospace; -} - -.neuroglancer-spatial-skeleton-show-item:hover { - background: #2a2a2a; -} - -.neuroglancer-spatial-skeleton-show-checkbox { - width: 1.15em; - height: 1.15em; - margin: 0; - accent-color: #1473e6; -} - -.neuroglancer-spatial-skeleton-show-item-content { - display: grid; - grid-template-columns: min-content minmax(0, 1fr) min-content; - align-items: center; - gap: 0.45em; - min-width: 0; -} - -.neuroglancer-spatial-skeleton-show-item-name, -.neuroglancer-spatial-skeleton-segment-name { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.neuroglancer-spatial-skeleton-show-item-ratio, -.neuroglancer-spatial-skeleton-segment-ratio { - color: #adadad; - white-space: nowrap; -} - -.neuroglancer-spatial-skeleton-filter-select { - box-sizing: border-box; - margin: 0; - flex: 1 1 auto; - width: auto; - background: #050505; - border: 1px solid #2f2f2f; - color: #dedede; - font: inherit; - padding: 0.32em 0.45em; -} - -.neuroglancer-spatial-skeleton-filter-select:focus-visible { - outline: 1px solid #6ca4ff; - outline-offset: -1px; -} - -.neuroglancer-spatial-skeleton-summary-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.5em; - padding: 0.25em 0.4em 0.25em 0.4em; -} - -.neuroglancer-spatial-skeleton-summary { - font-size: small; - color: #c6c6c6; - flex: 1 1 auto; - min-width: 0; -} - -.neuroglancer-spatial-skeleton-tree { - display: flex; - flex-direction: column; - min-height: 24em; - max-height: 60vh; - flex: 1 1 auto; - overflow-y: auto; - background: #050505; - border-top: 1px solid #1e1e1e; -} - -.neuroglancer-spatial-skeleton-list-header, -.neuroglancer-spatial-skeleton-tree-row { - display: grid; - grid-template-columns: - var(--neuroglancer-skeleton-actions-width) - var(--neuroglancer-skeleton-type-width) - minmax(58px, 104px) - minmax(0, 1fr); - align-items: center; - column-gap: 3px; - padding: 0 4px; -} - -.neuroglancer-spatial-skeleton-list-header { - position: sticky; - top: 0; - z-index: 1; - min-height: 1.7em; - background: #3a3a3a; - color: #f0f0f0; - font-family: monospace; - font-size: 11px; - text-transform: lowercase; -} - -.neuroglancer-spatial-skeleton-list-header-spacer { - display: block; -} - -.neuroglancer-spatial-skeleton-list-header-actions { - width: var(--neuroglancer-skeleton-actions-width); -} - -.neuroglancer-spatial-skeleton-list-header-type { - width: var(--neuroglancer-skeleton-type-width); -} - -.neuroglancer-spatial-skeleton-list-header-cell { - min-width: 0; -} - -.neuroglancer-spatial-skeleton-tree-entry { - display: flex; - flex-direction: column; -} - -.neuroglancer-spatial-skeleton-tree-row { - min-height: 1.6em; - color: #d2d2d2; - font-family: monospace; - font-size: small; - background: #050505; - transition: background-color 0.12s ease-in-out; -} - -.neuroglancer-spatial-skeleton-tree-row[role="button"] { - cursor: pointer; -} - -.neuroglancer-spatial-skeleton-tree-row[role="button"]:focus-visible { - outline: 1px solid #6ca4ff; - outline-offset: -1px; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"] - .neuroglancer-spatial-skeleton-tree-row { - background: #242d3c; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-viewer-hovered="true"] - .neuroglancer-spatial-skeleton-tree-row:not([data-node-type="root"]) { - background: #18253a; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-viewer-hovered="true"] - .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] { - background: #364257; -} - -.neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] { - background: #2e2e2e; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"] - .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] { - background: #394558; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"] - .neuroglancer-spatial-skeleton-tree-row { - background: #294067; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"] - .neuroglancer-spatial-skeleton-tree-row[data-node-type="root"] { - background: #3f5471; -} - -.neuroglancer-spatial-skeleton-segment-row { - min-height: 1.75em; - background: #2e2e2e; - color: #f0f0f0; -} - -.neuroglancer-spatial-skeleton-segment-meta-line { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75em; - min-width: 0; -} - -.neuroglancer-spatial-skeleton-tree-entry:not( - [data-selected="true"] - )[data-list-hovered="true"] - .neuroglancer-spatial-skeleton-tree-row:not([data-node-type="root"]) { - background: #121212; -} - -.neuroglancer-spatial-skeleton-tree-entry:hover - .neuroglancer-spatial-skeleton-segment-row { - background: #2e2e2e; -} - -.neuroglancer-spatial-skeleton-node-id { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.neuroglancer-spatial-skeleton-node-coordinate-cell { - min-width: 0; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.neuroglancer-spatial-skeleton-node-coordinates { - overflow: hidden; - color: #d7d7d7; -} - -.neuroglancer-spatial-skeleton-coordinates-flex { - display: flex; - flex-direction: row; -} - -.neuroglancer-spatial-skeleton-coord-dim { - flex: 1 1 0; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.neuroglancer-spatial-skeleton-node-description { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #a7a7a7; - font-size: 11px; -} - -.neuroglancer-spatial-skeleton-node-actions { - display: inline-flex; - align-items: center; - gap: 0.1em; - width: var(--neuroglancer-skeleton-actions-width); - visibility: hidden; - pointer-events: none; - justify-content: flex-start; -} - -.neuroglancer-spatial-skeleton-tree-entry[data-list-hovered="true"] - .neuroglancer-spatial-skeleton-node-actions, -.neuroglancer-spatial-skeleton-tree-entry:focus-within - .neuroglancer-spatial-skeleton-node-actions { - visibility: visible; - pointer-events: auto; -} - -.neuroglancer-spatial-skeleton-node-type, -.neuroglancer-spatial-skeleton-node-type-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--neuroglancer-skeleton-type-width); - min-height: 1.4em; - color: #cfcfcf; -} - -.neuroglancer-spatial-skeleton-node-type-toggle { - border: 0; - background: transparent; - padding: 0; - cursor: pointer; -} - -.neuroglancer-spatial-skeleton-node-type .neuroglancer-icon, -.neuroglancer-spatial-skeleton-node-type-toggle .neuroglancer-icon { - min-width: 14px; - min-height: 14px; -} - -.neuroglancer-spatial-skeleton-node-type-toggle:hover .neuroglancer-icon { - background-color: #3a3a3a; -} - -.neuroglancer-spatial-skeleton-node-type-toggle:disabled { - opacity: 0.4; - cursor: default; -} - -.neuroglancer-spatial-skeleton-node-type-toggle:disabled .neuroglancer-icon { - background-color: transparent; -} - -.neuroglancer-spatial-skeleton-node-action { - border: 1px solid #2f2f2f; - background: #0d0d0d; - color: inherit; - padding: 0; - cursor: pointer; - width: 1.5em; - display: inline-flex; - justify-content: center; - align-items: center; -} - -.neuroglancer-spatial-skeleton-node-action .neuroglancer-icon { - min-width: 14px; - min-height: 14px; -} - -.neuroglancer-spatial-skeleton-node-action:hover .neuroglancer-icon { - background-color: #db4437; -} - -.neuroglancer-spatial-skeleton-node-action:disabled { - opacity: 0.35; - cursor: default; -} - -.neuroglancer-spatial-skeleton-node-action:disabled .neuroglancer-icon { - background-color: transparent; +.neuroglancer-segment-list-entry + .neuroglancer-segment-list-entry-color-input::-webkit-color-swatch { + border: none; } -.neuroglancer-spatial-skeleton-node-segment-chip { +.neuroglancer-selection-details-skeleton-segment-chip { display: inline-flex; align-items: center; min-height: 1.2em; @@ -665,7 +181,7 @@ font-weight: 600; } -.neuroglancer-spatial-skeleton-properties-input { +.neuroglancer-selection-details-skeleton-properties-input { width: 100%; box-sizing: border-box; border: 1px solid #717171; @@ -676,22 +192,22 @@ font: inherit; } -.neuroglancer-spatial-skeleton-properties-input-invalid { +.neuroglancer-selection-details-skeleton-properties-input-invalid { border-color: #c94f4f; background: #9f7b7b; } -.neuroglancer-spatial-skeleton-properties-input::placeholder { +.neuroglancer-selection-details-skeleton-properties-input::placeholder { color: #2a2a2a; } -.neuroglancer-spatial-skeleton-selection { +.neuroglancer-selection-details-skeleton { display: flex; flex-direction: column; gap: 0.3rem; } -.neuroglancer-spatial-skeleton-selection-summary { +.neuroglancer-selection-details-skeleton-summary { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; @@ -702,7 +218,7 @@ font-size: medium; } -.neuroglancer-spatial-skeleton-selection-action { +.neuroglancer-selection-details-skeleton-action { display: inline-flex; align-items: center; justify-content: center; @@ -715,27 +231,27 @@ transition: background-color 0.12s ease-in-out; } -.neuroglancer-spatial-skeleton-selection-action:disabled { +.neuroglancer-selection-details-skeleton-action:disabled { opacity: 0.45; cursor: default; } -.neuroglancer-spatial-skeleton-selection-action:not(:disabled):hover { +.neuroglancer-selection-details-skeleton-action:not(:disabled):hover { background: rgba(255, 255, 255, 0.08); } -.neuroglancer-spatial-skeleton-selection-summary-icon { +.neuroglancer-selection-details-skeleton-summary-icon { display: inline-flex; align-items: center; justify-content: center; } -.neuroglancer-spatial-skeleton-selection-summary-icon .neuroglancer-icon { +.neuroglancer-selection-details-skeleton-summary-icon .neuroglancer-icon { min-width: 14px; min-height: 14px; } -.neuroglancer-spatial-skeleton-selection-summary-coordinates { +.neuroglancer-selection-details-skeleton-summary-coordinates { min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -743,7 +259,7 @@ user-select: text; } -.neuroglancer-spatial-skeleton-selection .neuroglancer-annotation-property { +.neuroglancer-selection-details-skeleton .neuroglancer-annotation-property { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; @@ -751,12 +267,12 @@ padding: 0 0.1rem; } -.neuroglancer-spatial-skeleton-selection +.neuroglancer-selection-details-skeleton .neuroglancer-annotation-property-label { color: #b0b0b0; } -.neuroglancer-spatial-skeleton-selection +.neuroglancer-selection-details-skeleton .neuroglancer-annotation-property-value { color: #f0f0f0; min-width: 0; @@ -765,14 +281,14 @@ justify-content: flex-end; } -.neuroglancer-spatial-skeleton-leaf-type { +.neuroglancer-selection-details-skeleton-leaf-type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.28rem; } -.neuroglancer-spatial-skeleton-leaf-type-option { +.neuroglancer-selection-details-skeleton-leaf-type-option { display: inline-flex; align-items: center; gap: 0.38rem; @@ -780,32 +296,32 @@ cursor: pointer; } -.neuroglancer-spatial-skeleton-leaf-type-option-disabled { +.neuroglancer-selection-details-skeleton-leaf-type-option-disabled { cursor: default; opacity: 0.65; } -.neuroglancer-spatial-skeleton-leaf-type-option-input { +.neuroglancer-selection-details-skeleton-leaf-type-option-input { margin: 0; accent-color: #4f8dff; } -.neuroglancer-spatial-skeleton-leaf-type-option-icon { +.neuroglancer-selection-details-skeleton-leaf-type-option-icon { display: inline-flex; align-items: center; justify-content: center; } -.neuroglancer-spatial-skeleton-leaf-type-option-icon .neuroglancer-icon { +.neuroglancer-selection-details-skeleton-leaf-type-option-icon .neuroglancer-icon { min-width: 14px; min-height: 14px; } -.neuroglancer-spatial-skeleton-leaf-type-option-text { +.neuroglancer-selection-details-skeleton-leaf-type-option-text { white-space: nowrap; } -.neuroglancer-spatial-skeleton-selection-description { +.neuroglancer-selection-details-skeleton-description { width: 100%; box-sizing: border-box; min-height: 5rem; @@ -820,24 +336,8 @@ user-select: text; } -textarea.neuroglancer-spatial-skeleton-selection-description { +textarea.neuroglancer-selection-details-skeleton-description { outline: 0; resize: none; overflow-y: auto; } - -.neuroglancer-spatial-skeleton-actions { - display: flex; - flex-wrap: wrap; - gap: 0.25em; -} - -.neuroglancer-spatial-skeleton-actions > button { - flex: 1 1 auto; - min-width: 6em; -} - -.neuroglancer-spatial-skeleton-description { - min-height: 5em; - resize: vertical; -} diff --git a/src/ui/skeleton_edit_tools.css b/src/ui/skeleton_edit_tools.css index 537cd69ab6..5858f92b15 100644 --- a/src/ui/skeleton_edit_tools.css +++ b/src/ui/skeleton_edit_tools.css @@ -14,19 +14,19 @@ * limitations under the License. */ -.neuroglancer-spatial-skeleton-tool-status { +.neuroglancer-skeleton-tool-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } -.neuroglancer-spatial-skeleton-tool-status-message { +.neuroglancer-skeleton-tool-status-message { display: inline-flex; align-items: center; } -.neuroglancer-spatial-skeleton-tool-status-point { +.neuroglancer-skeleton-tool-status-point { display: inline-flex; flex-wrap: wrap; align-items: center; @@ -34,14 +34,14 @@ color: #e6cb57; } -.neuroglancer-spatial-skeleton-tool-status-point-field { +.neuroglancer-skeleton-tool-status-point-field { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 600; } -.neuroglancer-spatial-skeleton-tool-status-point-field-label, -.neuroglancer-spatial-skeleton-tool-status-point-field-value { +.neuroglancer-skeleton-tool-status-point-field-label, +.neuroglancer-skeleton-tool-status-point-field-value { color: inherit; } diff --git a/src/ui/skeleton_edit_tools.ts b/src/ui/skeleton_edit_tools.ts index fe5e88f5fb..03459bb463 100644 --- a/src/ui/skeleton_edit_tools.ts +++ b/src/ui/skeleton_edit_tools.ts @@ -144,28 +144,28 @@ function renderSpatialSkeletonToolStatus( }, ) { removeChildren(body); - body.classList.add("neuroglancer-spatial-skeleton-tool-status"); + body.classList.add("neuroglancer-skeleton-tool-status"); const message = document.createElement("span"); - message.className = "neuroglancer-spatial-skeleton-tool-status-message"; + message.className = "neuroglancer-skeleton-tool-status-message"; message.textContent = options.message; body.appendChild(message); if (options.point === undefined) { return; } const point = document.createElement("span"); - point.className = "neuroglancer-spatial-skeleton-tool-status-point"; + point.className = "neuroglancer-skeleton-tool-status-point"; for (const field of getSpatialSkeletonToolPointStatusFields(options.point)) { const fieldElement = document.createElement("span"); fieldElement.className = - "neuroglancer-spatial-skeleton-tool-status-point-field"; + "neuroglancer-skeleton-tool-status-point-field"; const label = document.createElement("span"); label.className = - "neuroglancer-spatial-skeleton-tool-status-point-field-label"; + "neuroglancer-skeleton-tool-status-point-field-label"; label.textContent = field.label; fieldElement.appendChild(label); const value = document.createElement("span"); value.className = - "neuroglancer-spatial-skeleton-tool-status-point-field-value"; + "neuroglancer-skeleton-tool-status-point-field-value"; value.textContent = field.value; fieldElement.appendChild(value); point.appendChild(fieldElement); diff --git a/src/ui/skeleton_tab.css b/src/ui/skeleton_tab.css new file mode 100644 index 0000000000..76396a9538 --- /dev/null +++ b/src/ui/skeleton_tab.css @@ -0,0 +1,430 @@ +/** + * @license + * Copyright 2026 Google Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.neuroglancer-skeleton-toolbar { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.1em 0.2em; + width: 100%; +} + +.neuroglancer-skeleton-toolbar + .neuroglancer-tool-button + + .neuroglancer-tool-button { + margin-left: 0.35em; +} + +.neuroglancer-skeleton-toolbar-actions { + display: inline-flex; + align-items: center; + margin-left: auto; + gap: 0.1em; +} + +.neuroglancer-skeleton-nav-tools { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + flex: 0 0 auto; + justify-content: flex-start; + gap: 0.1em; +} + +.neuroglancer-skeleton-icon-button { + border: 0; + background: transparent; + color: inherit; + padding: 0; + margin: 0; + cursor: pointer; +} + +.neuroglancer-skeleton-icon-button .neuroglancer-icon { + min-width: 14px; + min-height: 14px; + padding-left: 0; + padding-right: 0; +} + +.neuroglancer-skeleton-icon-button:hover .neuroglancer-icon { + background-color: #db4437; +} + +.neuroglancer-skeleton-icon-button:disabled { + opacity: 0.35; + cursor: default; +} + +.neuroglancer-skeleton-icon-button:disabled .neuroglancer-icon { + background-color: transparent; +} + +.neuroglancer-skeleton-tab { + display: flex; + flex-direction: column; + gap: 0.5em; + overflow-y: auto; +} + +.neuroglancer-skeleton-section { + --neuroglancer-skeleton-actions-width: 44px; + --neuroglancer-skeleton-type-width: 21px; + border: 1px solid #2f2f2f; + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.neuroglancer-skeleton-filter { + box-sizing: border-box; + margin: 0 0.4em; + width: calc(100% - 0.8em); + background: #050505; + border: 1px solid #2f2f2f; + color: #dedede; + font-family: monospace; + padding: 0.32em 0.45em; +} + +.neuroglancer-skeleton-filter-row { + display: flex; + align-items: center; + gap: 0.45em; + margin: 0.35em 0.4em 0; + color: #c6c6c6; + font-size: small; +} + +.neuroglancer-skeleton-filter-label { + flex: 0 0 auto; +} + +.neuroglancer-skeleton-navigation-bar { + display: flex; + align-items: center; + padding: 0.35em 0.4em 0 0.4em; +} + +.neuroglancer-skeleton-segment-name { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.neuroglancer-skeleton-node-ratio { + color: #adadad; + white-space: nowrap; +} + +.neuroglancer-skeleton-filter-select { + box-sizing: border-box; + margin: 0; + flex: 1 1 auto; + width: auto; + background: #050505; + border: 1px solid #2f2f2f; + color: #dedede; + font: inherit; + padding: 0.32em 0.45em; +} + +.neuroglancer-skeleton-filter-select:focus-visible { + outline: 1px solid #6ca4ff; + outline-offset: -1px; +} + +.neuroglancer-skeleton-summary-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5em; + padding: 0.25em 0.4em 0.25em 0.4em; +} + +.neuroglancer-skeleton-summary { + font-size: small; + color: #c6c6c6; + flex: 1 1 auto; + min-width: 0; +} + +.neuroglancer-skeleton-tree { + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow-y: auto; + background: #050505; + border-top: 1px solid #1e1e1e; +} + +.neuroglancer-skeleton-list-header, +.neuroglancer-skeleton-tree-row { + display: grid; + grid-template-columns: + var(--neuroglancer-skeleton-actions-width) + var(--neuroglancer-skeleton-type-width) + minmax(58px, 104px) + minmax(0, 1fr); + align-items: center; + column-gap: 3px; + padding: 0 4px; +} + +.neuroglancer-skeleton-list-header { + position: sticky; + top: 0; + z-index: 1; + min-height: 1.7em; + background: #3a3a3a; + color: #f0f0f0; + font-family: monospace; + font-size: 11px; + text-transform: lowercase; +} + +.neuroglancer-skeleton-list-header-spacer { + display: block; +} + +.neuroglancer-skeleton-list-header-actions { + width: var(--neuroglancer-skeleton-actions-width); +} + +.neuroglancer-skeleton-list-header-type { + width: var(--neuroglancer-skeleton-type-width); +} + +.neuroglancer-skeleton-list-header-cell { + min-width: 0; +} + +.neuroglancer-skeleton-tree-entry { + display: flex; + flex-direction: column; +} + +.neuroglancer-skeleton-tree-row { + min-height: 1.6em; + color: #d2d2d2; + font-family: monospace; + font-size: small; + background: #050505; + transition: background-color 0.12s ease-in-out; +} + +.neuroglancer-skeleton-tree-row[role="button"] { + cursor: pointer; +} + +.neuroglancer-skeleton-tree-row[role="button"]:focus-visible { + outline: 1px solid #6ca4ff; + outline-offset: -1px; +} + +.neuroglancer-skeleton-tree-entry[data-selected="true"] + .neuroglancer-skeleton-tree-row { + background: #242d3c; +} + +.neuroglancer-skeleton-tree-entry[data-viewer-hovered="true"] + .neuroglancer-skeleton-tree-row:not([data-node-type="root"]) { + background: #18253a; +} + +.neuroglancer-skeleton-tree-entry[data-viewer-hovered="true"] + .neuroglancer-skeleton-tree-row[data-node-type="root"] { + background: #364257; +} + +.neuroglancer-skeleton-tree-row[data-node-type="root"] { + background: #2e2e2e; +} + +.neuroglancer-skeleton-tree-entry[data-selected="true"] + .neuroglancer-skeleton-tree-row[data-node-type="root"] { + background: #394558; +} + +.neuroglancer-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"] + .neuroglancer-skeleton-tree-row { + background: #294067; +} + +.neuroglancer-skeleton-tree-entry[data-selected="true"][data-viewer-hovered="true"] + .neuroglancer-skeleton-tree-row[data-node-type="root"] { + background: #3f5471; +} + +.neuroglancer-skeleton-segment-row { + min-height: 1.75em; + background: #2e2e2e; + color: #f0f0f0; +} + +.neuroglancer-skeleton-segment-meta-line { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75em; + min-width: 0; +} + +.neuroglancer-skeleton-tree-entry:not( + [data-selected="true"] + )[data-list-hovered="true"] + .neuroglancer-skeleton-tree-row:not([data-node-type="root"]) { + background: #121212; +} + +.neuroglancer-skeleton-tree-entry:hover .neuroglancer-skeleton-segment-row { + background: #2e2e2e; +} + +.neuroglancer-skeleton-node-id { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.neuroglancer-skeleton-node-coordinate-cell { + min-width: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.neuroglancer-skeleton-node-coordinates { + overflow: hidden; + color: #d7d7d7; +} + +.neuroglancer-skeleton-coordinates-flex { + display: flex; + flex-direction: row; +} + +.neuroglancer-skeleton-coord-dim { + flex: 1 1 0; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.neuroglancer-skeleton-node-description { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #a7a7a7; + font-size: 11px; +} + +.neuroglancer-skeleton-node-actions { + display: inline-flex; + align-items: center; + gap: 0.1em; + width: var(--neuroglancer-skeleton-actions-width); + visibility: hidden; + pointer-events: none; + justify-content: flex-start; +} + +.neuroglancer-skeleton-tree-entry[data-list-hovered="true"] + .neuroglancer-skeleton-node-actions, +.neuroglancer-skeleton-tree-entry:focus-within + .neuroglancer-skeleton-node-actions { + visibility: visible; + pointer-events: auto; +} + +.neuroglancer-skeleton-node-type, +.neuroglancer-skeleton-node-type-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--neuroglancer-skeleton-type-width); + min-height: 1.4em; + color: #cfcfcf; +} + +.neuroglancer-skeleton-node-type-toggle { + border: 0; + background: transparent; + padding: 0; + cursor: pointer; +} + +.neuroglancer-skeleton-node-type .neuroglancer-icon, +.neuroglancer-skeleton-node-type-toggle .neuroglancer-icon { + min-width: 14px; + min-height: 14px; +} + +.neuroglancer-skeleton-node-type-toggle:hover .neuroglancer-icon { + background-color: #3a3a3a; +} + +.neuroglancer-skeleton-node-type-toggle:disabled { + opacity: 0.4; + cursor: default; +} + +.neuroglancer-skeleton-node-type-toggle:disabled .neuroglancer-icon { + background-color: transparent; +} + +.neuroglancer-skeleton-node-action { + border: 1px solid #2f2f2f; + background: #0d0d0d; + color: inherit; + padding: 0; + cursor: pointer; + width: 1.5em; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.neuroglancer-skeleton-node-action .neuroglancer-icon { + min-width: 14px; + min-height: 14px; +} + +.neuroglancer-skeleton-node-action:hover .neuroglancer-icon { + background-color: #db4437; +} + +.neuroglancer-skeleton-node-action:disabled { + opacity: 0.35; + cursor: default; +} + +.neuroglancer-skeleton-node-action:disabled .neuroglancer-icon { + background-color: transparent; +} + +.neuroglancer-skeleton-node-segment-chip { + display: inline-flex; + align-items: center; + min-height: 1.2em; + padding: 0 0.35em; + font-weight: 600; +} diff --git a/src/ui/skeleton_tab.ts b/src/ui/skeleton_tab.ts index 337387bd3f..02bd2e974c 100644 --- a/src/ui/skeleton_tab.ts +++ b/src/ui/skeleton_tab.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import "#src/ui/skeleton_tab.css"; import svg_arrow_left from "ikonate/icons/arrow-left.svg?raw"; import svg_arrow_right from "ikonate/icons/arrow-right.svg?raw"; import svg_bin from "ikonate/icons/bin.svg?raw"; @@ -165,11 +166,11 @@ export class SpatialSkeletonEditTab extends Tab { constructor(public layer: SegmentationUserLayer) { super(); const { element } = this; - element.classList.add("neuroglancer-spatial-skeleton-tab"); + element.classList.add("neuroglancer-skeleton-tab"); const toolbox = document.createElement("div"); toolbox.className = - "neuroglancer-segmentation-toolbox neuroglancer-spatial-skeleton-toolbar"; + "neuroglancer-segmentation-toolbox neuroglancer-skeleton-toolbar"; toolbox.appendChild( makeToolButton(this, layer.toolBinder, { toolJson: SPATIAL_SKELETON_EDIT_MODE_TOOL_ID, @@ -192,7 +193,7 @@ export class SpatialSkeletonEditTab extends Tab { }), ); const toolbarActions = document.createElement("div"); - toolbarActions.className = "neuroglancer-spatial-skeleton-toolbar-actions"; + toolbarActions.className = "neuroglancer-skeleton-toolbar-actions"; const makeIconButton = ( parent: HTMLElement, @@ -201,7 +202,7 @@ export class SpatialSkeletonEditTab extends Tab { onClick: () => void, ) => { const button = document.createElement("button"); - button.className = "neuroglancer-spatial-skeleton-icon-button"; + button.className = "neuroglancer-skeleton-icon-button"; button.type = "button"; button.title = title; button.setAttribute("aria-label", title); @@ -233,14 +234,14 @@ export class SpatialSkeletonEditTab extends Tab { toolbox.appendChild(toolbarActions); const navTools = document.createElement("div"); - navTools.className = "neuroglancer-spatial-skeleton-nav-tools"; + navTools.className = "neuroglancer-skeleton-nav-tools"; const nodesSection = document.createElement("div"); - nodesSection.className = "neuroglancer-spatial-skeleton-section"; + nodesSection.className = "neuroglancer-skeleton-section"; const filterInput = document.createElement("input"); filterInput.type = "text"; filterInput.placeholder = "Enter node ID or description"; - filterInput.className = "neuroglancer-spatial-skeleton-filter"; + filterInput.className = "neuroglancer-skeleton-filter"; const nodeQuery = layer.displayState.spatialSkeletonNodeQuery; const nodeFilterTypeModel = layer.displayState.spatialSkeletonNodeFilter; filterInput.value = nodeQuery.value; @@ -249,7 +250,7 @@ export class SpatialSkeletonEditTab extends Tab { ); nodeFilterTypeWidget.element.classList.add( "neuroglancer-layer-control-control", - "neuroglancer-spatial-skeleton-filter-select", + "neuroglancer-skeleton-filter-select", ); nodeFilterTypeWidget.element.title = "Filter loaded nodes by node type"; nodeFilterTypeWidget.element.setAttribute( @@ -264,20 +265,18 @@ export class SpatialSkeletonEditTab extends Tab { ); } const nodeFilterTypeRow = document.createElement("label"); - nodeFilterTypeRow.className = "neuroglancer-spatial-skeleton-filter-row"; + nodeFilterTypeRow.className = "neuroglancer-skeleton-filter-row"; const nodeFilterTypeLabel = document.createElement("span"); - nodeFilterTypeLabel.className = - "neuroglancer-spatial-skeleton-filter-label"; + nodeFilterTypeLabel.className = "neuroglancer-skeleton-filter-label"; nodeFilterTypeLabel.textContent = "Filter"; nodeFilterTypeRow.appendChild(nodeFilterTypeLabel); nodeFilterTypeRow.appendChild(nodeFilterTypeWidget.element); const nodesNavigationBar = document.createElement("div"); - nodesNavigationBar.className = - "neuroglancer-spatial-skeleton-navigation-bar"; + nodesNavigationBar.className = "neuroglancer-skeleton-navigation-bar"; const nodesSummaryBar = document.createElement("div"); - nodesSummaryBar.className = "neuroglancer-spatial-skeleton-summary-bar"; + nodesSummaryBar.className = "neuroglancer-skeleton-summary-bar"; const nodesSummary = document.createElement("div"); - nodesSummary.className = "neuroglancer-spatial-skeleton-summary"; + nodesSummary.className = "neuroglancer-skeleton-summary"; let virtualItems: SpatialSkeletonListItem[] = []; let renderVirtualListItem = ( _item: SpatialSkeletonListItem | undefined, @@ -293,7 +292,7 @@ export class SpatialSkeletonEditTab extends Tab { const nodesList = this.registerDisposer( new VirtualList({ source: virtualListSource }), ); - nodesList.element.className = "neuroglancer-spatial-skeleton-tree"; + nodesList.element.className = "neuroglancer-skeleton-tree"; nodesSection.appendChild(filterInput); nodesSection.appendChild(nodeFilterTypeRow); nodesNavigationBar.appendChild(navTools); @@ -551,7 +550,8 @@ export class SpatialSkeletonEditTab extends Tab { const applyRowInteractionState = ( options: { scrollSelectedIntoView?: boolean } = {}, ) => { - const selectedNodeId = layer.selectedSpatialSkeletonNodeInfo.value?.nodeId; + const selectedNodeId = + layer.selectedSpatialSkeletonNodeInfo.value?.nodeId; nodesList.forEachRenderedItem((entry, index) => { const item = virtualItems[index]; if (item?.kind !== "node") return; @@ -1036,7 +1036,7 @@ export class SpatialSkeletonEditTab extends Tab { disabled: boolean, ) => { const button = document.createElement("button"); - button.className = "neuroglancer-spatial-skeleton-node-action"; + button.className = "neuroglancer-skeleton-node-action"; button.type = "button"; button.title = title; button.disabled = disabled; @@ -1093,22 +1093,22 @@ export class SpatialSkeletonEditTab extends Tab { const makeListHeader = () => { const listHeader = document.createElement("div"); - listHeader.className = "neuroglancer-spatial-skeleton-list-header"; + listHeader.className = "neuroglancer-skeleton-list-header"; const headerActionsSpacer = document.createElement("span"); headerActionsSpacer.className = - "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-actions"; + "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-actions"; const headerTypeSpacer = document.createElement("span"); headerTypeSpacer.className = - "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-type"; + "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-type"; const headerId = document.createElement("span"); - headerId.className = "neuroglancer-spatial-skeleton-list-header-cell"; + headerId.className = "neuroglancer-skeleton-list-header-cell"; headerId.textContent = "id"; const headerCoordinates = document.createElement("span"); headerCoordinates.className = - "neuroglancer-spatial-skeleton-list-header-cell neuroglancer-spatial-skeleton-coordinates-flex"; + "neuroglancer-skeleton-list-header-cell neuroglancer-skeleton-coordinates-flex"; for (const dimLabel of getCoordinateDimensionHeaders()) { const dimSpan = document.createElement("span"); - dimSpan.className = "neuroglancer-spatial-skeleton-coord-dim"; + dimSpan.className = "neuroglancer-skeleton-coord-dim"; dimSpan.textContent = dimLabel; headerCoordinates.appendChild(dimSpan); } @@ -1129,20 +1129,20 @@ export class SpatialSkeletonEditTab extends Tab { const makeSegmentEntry = (segmentState: SegmentDisplayState) => { const segmentEntry = document.createElement("div"); segmentEntry.className = - "neuroglancer-spatial-skeleton-tree-entry neuroglancer-spatial-skeleton-segment-entry"; + "neuroglancer-skeleton-tree-entry neuroglancer-skeleton-segment-entry"; const segmentRow = document.createElement("div"); segmentRow.className = - "neuroglancer-spatial-skeleton-tree-row neuroglancer-spatial-skeleton-segment-row"; + "neuroglancer-skeleton-tree-row neuroglancer-skeleton-segment-row"; const segmentActionsSpacer = document.createElement("span"); segmentActionsSpacer.className = - "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-actions"; + "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-actions"; const segmentTypeSpacer = document.createElement("span"); segmentTypeSpacer.className = - "neuroglancer-spatial-skeleton-list-header-spacer neuroglancer-spatial-skeleton-list-header-type"; + "neuroglancer-skeleton-list-header-spacer neuroglancer-skeleton-list-header-type"; const segmentIdCell = document.createElement("span"); - segmentIdCell.className = "neuroglancer-spatial-skeleton-node-id"; + segmentIdCell.className = "neuroglancer-skeleton-node-id"; const segmentChip = document.createElement("span"); - segmentChip.className = "neuroglancer-spatial-skeleton-node-segment-chip"; + segmentChip.className = "neuroglancer-skeleton-node-segment-chip"; const segmentChipColors = getSegmentChipColors(segmentState.segmentId); segmentChip.textContent = String(segmentState.segmentId); segmentChip.style.backgroundColor = segmentChipColors.background; @@ -1152,15 +1152,14 @@ export class SpatialSkeletonEditTab extends Tab { segmentIdCell.appendChild(segmentChip); const segmentMeta = document.createElement("div"); segmentMeta.className = - "neuroglancer-spatial-skeleton-node-coordinate-cell neuroglancer-spatial-skeleton-segment-meta"; + "neuroglancer-skeleton-node-coordinate-cell neuroglancer-skeleton-segment-meta"; const segmentMetaLine = document.createElement("div"); - segmentMetaLine.className = - "neuroglancer-spatial-skeleton-segment-meta-line"; + segmentMetaLine.className = "neuroglancer-skeleton-segment-meta-line"; const segmentName = document.createElement("span"); - segmentName.className = "neuroglancer-spatial-skeleton-segment-name"; + segmentName.className = "neuroglancer-skeleton-segment-name"; segmentName.textContent = segmentState.segmentLabel ?? ""; const segmentRatio = document.createElement("span"); - segmentRatio.className = "neuroglancer-spatial-skeleton-segment-ratio"; + segmentRatio.className = "neuroglancer-skeleton-node-ratio"; segmentRatio.textContent = `${segmentState.displayedNodeCount}/${segmentState.totalNodeCount}`; segmentMetaLine.appendChild(segmentName); segmentMetaLine.appendChild(segmentRatio); @@ -1176,7 +1175,7 @@ export class SpatialSkeletonEditTab extends Tab { const makeNodeEntry = (rowInfo: SpatialSkeletonSegmentRenderRow) => { const { node, type, isLeaf } = rowInfo; const entry = document.createElement("div"); - entry.className = "neuroglancer-spatial-skeleton-tree-entry"; + entry.className = "neuroglancer-skeleton-tree-entry"; entry.dataset.selected = String( node.nodeId === layer.selectedSpatialSkeletonNodeInfo.value?.nodeId, ); @@ -1190,7 +1189,7 @@ export class SpatialSkeletonEditTab extends Tab { }); const row = document.createElement("div"); - row.className = "neuroglancer-spatial-skeleton-tree-row"; + row.className = "neuroglancer-skeleton-tree-row"; row.dataset.nodeType = type; if (inspectionAllowed) { row.tabIndex = 0; @@ -1202,7 +1201,7 @@ export class SpatialSkeletonEditTab extends Tab { if ( target instanceof HTMLElement && target.closest( - ".neuroglancer-spatial-skeleton-node-actions, .neuroglancer-spatial-skeleton-node-type-toggle", + ".neuroglancer-skeleton-node-actions, .neuroglancer-skeleton-node-type-toggle", ) !== null ) { return; @@ -1221,7 +1220,7 @@ export class SpatialSkeletonEditTab extends Tab { if ( target instanceof HTMLElement && target.closest( - ".neuroglancer-spatial-skeleton-node-actions, .neuroglancer-spatial-skeleton-node-type-toggle", + ".neuroglancer-skeleton-node-actions, .neuroglancer-skeleton-node-type-toggle", ) !== null ) { return; @@ -1283,8 +1282,8 @@ export class SpatialSkeletonEditTab extends Tab { : document.createElement("span"); typeIcon.className = isLeaf || nodeIsTrueEnd - ? "neuroglancer-spatial-skeleton-node-type-toggle" - : "neuroglancer-spatial-skeleton-node-type"; + ? "neuroglancer-skeleton-node-type-toggle" + : "neuroglancer-skeleton-node-type"; typeIcon.title = typeButtonTitle; if (typeIcon instanceof HTMLButtonElement) { typeIcon.type = "button"; @@ -1304,18 +1303,17 @@ export class SpatialSkeletonEditTab extends Tab { ); const idCell = document.createElement("span"); - idCell.className = "neuroglancer-spatial-skeleton-node-id"; + idCell.className = "neuroglancer-skeleton-node-id"; idCell.textContent = String(node.nodeId); const coordinatesCell = document.createElement("div"); - coordinatesCell.className = - "neuroglancer-spatial-skeleton-node-coordinate-cell"; + coordinatesCell.className = "neuroglancer-skeleton-node-coordinate-cell"; const coordinatesLine = document.createElement("div"); coordinatesLine.className = - "neuroglancer-spatial-skeleton-node-coordinates neuroglancer-spatial-skeleton-coordinates-flex"; + "neuroglancer-skeleton-node-coordinates neuroglancer-skeleton-coordinates-flex"; for (const val of formatNodeCoordinates(node.position)) { const valSpan = document.createElement("span"); - valSpan.className = "neuroglancer-spatial-skeleton-coord-dim"; + valSpan.className = "neuroglancer-skeleton-coord-dim"; valSpan.textContent = val; coordinatesLine.appendChild(valSpan); } @@ -1323,14 +1321,13 @@ export class SpatialSkeletonEditTab extends Tab { const description = getNodeDescriptionText(node); if (description !== undefined) { const descriptionLine = document.createElement("div"); - descriptionLine.className = - "neuroglancer-spatial-skeleton-node-description"; + descriptionLine.className = "neuroglancer-skeleton-node-description"; descriptionLine.textContent = description; coordinatesCell.appendChild(descriptionLine); } const actions = document.createElement("div"); - actions.className = "neuroglancer-spatial-skeleton-node-actions"; + actions.className = "neuroglancer-skeleton-node-actions"; let rerootActionTitle = node.parentNodeId === undefined ? "already root" : "set as root"; if (pendingRerootNodes.has(node.nodeId)) { @@ -1369,7 +1366,7 @@ export class SpatialSkeletonEditTab extends Tab { const makeEmptyEntry = (text: string) => { const empty = document.createElement("div"); - empty.className = "neuroglancer-spatial-skeleton-summary"; + empty.className = "neuroglancer-skeleton-summary"; empty.textContent = text; return empty; };