From e760e48821a0b6a2b96c5dc3f956f29822ca4490 Mon Sep 17 00:00:00 2001 From: Justin Tulk Date: Tue, 29 Oct 2024 09:38:37 -0700 Subject: [PATCH 1/2] running format- no changes (#2784) --- weave-js/src/common/css/Base.less | 1481 +++++++++++++++-------------- 1 file changed, 749 insertions(+), 732 deletions(-) diff --git a/weave-js/src/common/css/Base.less b/weave-js/src/common/css/Base.less index 5d0fd20d2ee..713c883f388 100644 --- a/weave-js/src/common/css/Base.less +++ b/weave-js/src/common/css/Base.less @@ -11,225 +11,235 @@ @import './fonts/source-sans-pro.css'; @font-face { - font-family: 'Inconsolata'; - font-style: normal; - font-weight: 400; - src: url('../assets/fonts/inconsolata-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('../assets/fonts/inconsolata-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: url('../assets/fonts/inconsolata-v19-latin-regular.woff2') + format('woff2'), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../assets/fonts/inconsolata-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { - font-family: 'Source Serif Pro'; - font-style: normal; - font-weight: 400; - src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), - url('../assets/fonts/source-serif-pro-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('../assets/fonts/source-serif-pro-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + font-family: 'Source Serif Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), + url('../assets/fonts/source-serif-pro-v7-latin-regular.woff2') + format('woff2'), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../assets/fonts/source-serif-pro-v7-latin-regular.woff') + format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } // override line height in icon generation -i[class^="wbic-"]:before, i[class*=" wbic-"]:before { - line-height: inherit; +i[class^='wbic-']:before, +i[class*=' wbic-']:before { + line-height: inherit; } -i[class^="wbic-"], i[class*=" wbic-"], [class^="wbic-"], [class*=" wbic-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'wb-icons' !important; - speak: never; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } +i[class^='wbic-'], +i[class*=' wbic-'], +[class^='wbic-'], +[class*=' wbic-'] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'wb-icons' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} @panelFadeTime: 0.1s; .app-root { - display: flex; - min-height: 100vh; - flex-direction: column; + display: flex; + min-height: 100vh; + flex-direction: column; } .app-root .main { - flex: 1; - /* + flex: 1; + /* the footer appears in the middle in ie11 because flex behaves differently in chrome and ie11 flex-basis: auto on main will fix it https://stackoverflow.com/a/39193253 https://imgur.com/dbA8U2Y this is what it looks like in ie11 without flex-basis:auto */ - flex-basis: auto; - background-color: @gray50; - position: relative; + flex-basis: auto; + background-color: @gray50; + position: relative; } .confusion-matrix { - tr { - min-height: 50px; - } - td, - th { - padding: 5px; - } - td { - min-width: 50px; - min-height: 50px; - text-align: right; - } - /* + tr { + min-height: 50px; + } + td, + th { + padding: 5px; + } + td { + min-width: 50px; + min-height: 50px; + text-align: right; + } + /* .labels { background: #eaeaea; } */ - .pr { - background: #eee; - } + .pr { + background: #eee; + } } pre.instructions { - background-color: #555 !important; - padding: 9px; - border-radius: 5px; - margin: 0 !important; + background-color: #555 !important; + padding: 9px; + border-radius: 5px; + margin: 0 !important; } .ui.text.container .ReactTable .rt-table { - /* Because it's borked in Safari... */ - flex: 1 1 auto; + /* Because it's borked in Safari... */ + flex: 1 1 auto; } img.logo.inverted { - filter: invert(80%); + filter: invert(80%); } .ui.vertical.segment.footer { - /* Text color overridden by .ui.link.list a.item */ - color: #888 !important; - background-color: white !important; - padding: 16px; + /* Text color overridden by .ui.link.list a.item */ + color: #888 !important; + background-color: white !important; + padding: 16px; } -.model .ui.mini.statistics .statistic>.value, -.model .ui.mini.statistics .statistic>.label { - color: #888; - font-size: 1rem !important; - font-family: monospace; +.model .ui.mini.statistics .statistic > .value, +.model .ui.mini.statistics .statistic > .label { + color: #888; + font-size: 1rem !important; + font-family: monospace; } .model .item .content .description { - max-height: 250px; - overflow: auto; + max-height: 250px; + overflow: auto; } .model .item .content .description pre { - max-width: none; + max-width: none; } .model .item .content .description.markdown { - max-height: none; + max-height: none; } .top.menu .ui.dropdown { - margin: 8px 0; + margin: 8px 0; } body .ui.table tr.active { - background-color: #e5f9e7 !important; + background-color: #e5f9e7 !important; } .ui.positive.button { - background-color: @success; - color: @white; - text-shadow: none; - background-image: none; - border: none; + background-color: @success; + color: @white; + text-shadow: none; + background-image: none; + border: none; } - html { - height: 948px; + height: 948px; } -html>body { - font-size: @fontSizeStandard; - line-height: @lineHeightStandard; - letter-spacing: 0.1px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +html > body { + font-size: @fontSizeStandard; + line-height: @lineHeightStandard; + letter-spacing: 0.1px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body .input-style { - border: 1px solid rgba(34, 36, 38, 0.15); - padding: 0 8px 8px 8px; - border-radius: 0.29rem; + border: 1px solid rgba(34, 36, 38, 0.15); + padding: 0 8px 8px 8px; + border-radius: 0.29rem; } -body.blurring.dimmed.dimmable> :not(.dimmer) { - -webkit-filter: blur(3px) grayscale(0.1); - /* transition: filter 4s linear; */ - filter: blur(3px) grayscale(0.1); +body.blurring.dimmed.dimmable > :not(.dimmer) { + -webkit-filter: blur(3px) grayscale(0.1); + /* transition: filter 4s linear; */ + filter: blur(3px) grayscale(0.1); } -body.blurring.dimmable>.dimmer { - background-color: rgba(0, 0, 0, 0.1); +body.blurring.dimmable > .dimmer { + background-color: rgba(0, 0, 0, 0.1); } .ui { - button, input, optgroup, select, textarea { - font-family: @fontName; - } + button, + input, + optgroup, + select, + textarea { + font-family: @fontName; + } } -body .ui.grid>.column:not(.row) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; +body .ui.grid > .column:not(.row) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .fullScreen .fixed.menu .item:not(.logo) { - display: none; + display: none; } .fullScreen .fixed.menu .dropdown { - display: none; + display: none; } .fullScreen .secondary.menu { - display: none; + display: none; } #root .fullScreen .menu .item .logo { - width: 14em; - padding: -10px 0; + width: 14em; + padding: -10px 0; } #root .fullScreen .menu .exitFullScreen { - display: none; + display: none; } #root .fullScreen .menu:hover .exitFullScreen { - display: inline; + display: inline; } body .ui.dropdown .menu .selected.item, .ui.dropdown.selected { - background: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.1); } .ui.selection.dropdown.with-button { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - &+.ui.icon.button { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - } + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + & + .ui.icon.button { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } } - // This is the central location for all zIndices so we have a clear indication // of where conflicts arrive when doing edits // @@ -242,68 +252,68 @@ body .ui.dropdown .menu .selected.item, // intercom z-index= 2147483000 // max z-index 2147483647 .ui.dimmer { - z-index: 2147483605; + z-index: 2147483605; } // vg-tooltip is the Vega tooltip -.ui.popup, .vg-tooltip, #vg-tooltip-element { - z-index: 2147483606; +.ui.popup, +.vg-tooltip, +#vg-tooltip-element { + z-index: 2147483606; } .Toastify .toast-container { - z-index: 2147483606; + z-index: 2147483606; } - /* These fix the loader when shown in a modal https://github.com/Semantic-Org/Semantic-UI/issues/4014 */ - .ui.dimmer .ui.modal .ui.loader { - color: #333; + color: #333; } .ui.dimmer .ui.modal .ui.loader:before { - border-color: rgba(0, 0, 0, 0.1); + border-color: rgba(0, 0, 0, 0.1); } .ui.dimmer .ui.modal .ui.loader:after { - border-color: #767676 transparent transparent; + border-color: #767676 transparent transparent; } .ui.loader { - // This prevents loaders from bleeding through - // the expanded WBTable--hopefully it doesn't - // cause any hidden loaders - z-index: 50 !important; + // This prevents loaders from bleeding through + // the expanded WBTable--hopefully it doesn't + // cause any hidden loaders + z-index: 50 !important; } // An option to pass to the loader to not make it show above all content .flat-loader.flat-loader { - z-index: 0 !important + z-index: 0 !important; } .fill { - height: 100%; - position: relative; + height: 100%; + position: relative; } a { - cursor: pointer; + cursor: pointer; } a.danger, a.danger:hover { - color: @error; + color: @error; } button.link { - background: none !important; - color: inherit; - border: none; - padding: 0 !important; - font: inherit; - cursor: pointer; + background: none !important; + color: inherit; + border: none; + padding: 0 !important; + font: inherit; + cursor: pointer; } .button__hoverable { @@ -315,312 +325,305 @@ button.link { } } - .ui.modal { - .panel-media, - .audio-card { - margin: 0; - min-height: 200px; - position: relative; - } - .panel-header h3 { - display: none; - } + .panel-media, + .audio-card { + margin: 0; + min-height: 200px; + position: relative; + } + .panel-header h3 { + display: none; + } } .ui.big.breadcrumb { - font-weight: 400; - word-break: break-all; + font-weight: 400; + word-break: break-all; } - .ui.modal { - .panel-media, - .audio-card { - margin: 0; - min-height: 200px; - position: relative; - } - .panel-header h3 { - display: none; - } + .panel-media, + .audio-card { + margin: 0; + min-height: 200px; + position: relative; + } + .panel-header h3 { + display: none; + } } - .main { - margin-top: @navbarHeight; + margin-top: @navbarHeight; } /* new panel style, with options menu */ .panel-title { - text-align: center; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-weight: 600; - font-size: 14px; - margin: 0 0 3px; - font-family: @fontName; - line-height: 16px; + text-align: center; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-weight: 600; + font-size: 14px; + margin: 0 0 3px; + font-family: @fontName; + line-height: 16px; } .panel-title.small { - font-size: 14px; - line-height: 16px; + font-size: 14px; + line-height: 16px; } .panel-title.medium { - font-size: 18px; - line-height: 20px; + font-size: 18px; + line-height: 20px; } .panel-title.large { - font-size: 24px; - line-height: 26px; + font-size: 24px; + line-height: 26px; } - .panel-grid { - &.ui.grid.run-system-metrics { - padding: 8px; - &.ui.grid>.column:not(.row), - &.ui.grid>.row>.column { - padding: 8px; - } + &.ui.grid.run-system-metrics { + padding: 8px; + &.ui.grid > .column:not(.row), + &.ui.grid > .row > .column { + padding: 8px; } - &.ui.grid { - margin: 0; + } + &.ui.grid { + margin: 0; + } + &.ui.grid > .row { + padding: 0 10px; + } + &.ui.grid > .column:not(.row), + &.ui.grid > .row > .column { + padding: 6px; + } + .pinned-panel .hide-in-pinned-panel, + .unpinned-panel .hide-in-unpinned-panel { + display: none; + } + .unpinned-panel { + // to create new stacking context for fixed children + transform: translateX(0); + // to enable z-index + position: relative; + .panel-header { + min-height: 0; } - &.ui.grid>.row { - padding: 0 10px; + .panel-media { + margin: 0 -15px -10px; + max-height: 500px; } - &.ui.grid>.column:not(.row), - &.ui.grid>.row>.column { - padding: 6px; + } + .unpinned-panel .line-plot-legend { + max-height: 52px; + overflow-y: auto; + word-wrap: break-word; + // Hide scrollbars + &::-webkit-scrollbar { + display: none; } - .pinned-panel .hide-in-pinned-panel, - .unpinned-panel .hide-in-unpinned-panel { - display: none; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + .unpinned-panel { + padding: 20px 14px 10px; + } + .unpinned-panel, + .react-grid-item.panel { + // TODO: Add transition for fading panels + border: 1px solid @border; + border-radius: 3px; + height: 322px; + display: flex; + flex-direction: column; + background-color: @white; + transition: box-shadow 0.3s, margin-top 0.3s; + &:hover { + // A hack to make the crosshair flag of the + // hovered panel appear over other panels. + // I can't just change the z-index of the flag + // because of stacking contexts. + z-index: 100; + .line-plot-flag { + visibility: hidden; + } + .line-plot-flag-escaping { + display: block !important; + } } - .unpinned-panel { - // to create new stacking context for fixed children - transform: translateX(0); - // to enable z-index - position: relative; - .panel-header { - min-height: 0; - } - .panel-media { - margin: 0 -15px -10px; - max-height: 500px; - } + cursor: default; + // padding: 20px 14px 10px; + .react-resizable-handle { + background: none; } - .unpinned-panel .line-plot-legend { - max-height: 52px; - overflow-y: auto; - word-wrap: break-word; - // Hide scrollbars - &::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + .react-resizable-handle::after { + border-color: transparent; } - .unpinned-panel { - padding: 20px 14px 10px; + &:hover { + border: 1px solid darken(@border, 5%); + .react-resizable-handle::after { + border-color: initial; + } } - .unpinned-panel, - .react-grid-item.panel { - // TODO: Add transition for fading panels - border: 1px solid @border; - border-radius: 3px; - height: 322px; - display: flex; - flex-direction: column; - background-color: @white; - transition: box-shadow .3s, margin-top .3s; - &:hover { - // A hack to make the crosshair flag of the - // hovered panel appear over other panels. - // I can't just change the z-index of the flag - // because of stacking contexts. - z-index: 100; - .line-plot-flag { - visibility: hidden; - } - .line-plot-flag-escaping { - display: block !important; - } - } - cursor: default; - // padding: 20px 14px 10px; - .react-resizable-handle { - background: none; - } - .react-resizable-handle::after { - border-color: transparent; - } - &:hover { - border: 1px solid darken(@border, 5%); - .react-resizable-handle::after { - border-color: initial; - } - } - &.react-draggable-dragging { - // transform: translateY(-80px); - margin-top: -4px; - box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.08); - transition: box-shadow .3s, margin-top .3s; - border-color: darken(@gray400, 5%); - } - &.resizing { - border-color: darken(@gray400, 5%); - } + &.react-draggable-dragging { + // transform: translateY(-80px); + margin-top: -4px; + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s, margin-top 0.3s; + border-color: darken(@gray400, 5%); } - .panel-grid-pagination { - text-align: center; + &.resizing { + border-color: darken(@gray400, 5%); } + } + .panel-grid-pagination { + text-align: center; + } } - .ui.accordion.full-page-accordion { - .title:not(.ui) { - padding: 12px; - i.icon { - margin-right: 4px; - } - &:hover { - background: none; - } + .title:not(.ui) { + padding: 12px; + i.icon { + margin-right: 4px; } - .accordion.accordion-secondary { - margin-top: 24px; - .title:not(.ui) { - &:hover { - color: @primaryText; - } - } - &>.content:not(.ui).active { - padding-top: 0; - } + &:hover { + background: none; } - &>.content { - padding: 0 36px !important; - margin-bottom: 32px; + } + .accordion.accordion-secondary { + margin-top: 24px; + .title:not(.ui) { + &:hover { + color: @primaryText; + } + } + & > .content:not(.ui).active { + padding-top: 0; } + } + & > .content { + padding: 0 36px !important; + margin-bottom: 32px; + } } .icon.pin-button { - color: @gray500; - cursor: pointer; - position: absolute; - font-size: 1.5em; - top: 18px; - right: 10px; - z-index: 105; - &.pinned { - color: @darkBlue; - } + color: @gray500; + cursor: pointer; + position: absolute; + font-size: 1.5em; + top: 18px; + right: 10px; + z-index: 105; + &.pinned { + color: @darkBlue; + } } .panel-picker .panel-grid.ui.grid.doubling.stackable > .row > .column { - // override crazy specific semantic column padding - padding: 6px !important; + // override crazy specific semantic column padding + padding: 6px !important; } .panel-picker { - .panel-grid.ui.grid > .row { - padding: 0; - margin-top: 0; + .panel-grid.ui.grid > .row { + padding: 0; + margin-top: 0; + } + .column { + .pin-button { + transition: transform 0.2s; } - .column { - .pin-button { - transition: transform .2s; - } - .pin-button:not(.pinned) { - opacity: 0; - } - .pin-button.pinned { - transform: rotate(-45deg) translateX(-4px); - } - .unpinned-panel { - border: 1px solid transparent; - } + .pin-button:not(.pinned) { + opacity: 0; + } + .pin-button.pinned { + transform: rotate(-45deg) translateX(-4px); + } + .unpinned-panel { + border: 1px solid transparent; + } + &:hover { + > .pin-button { + opacity: 1; &:hover { - >.pin-button { - opacity: 1; - &:hover { - color: @gray700; - &.pinned { - color: @deepBlue; - } - } - } - >.unpinned-panel { - border: 1px solid darken(@gray100, 5%); - } + color: @gray700; + &.pinned { + color: @deepBlue; + } } + } + > .unpinned-panel { + border: 1px solid darken(@gray100, 5%); + } } + } } .ui.popup.menu-help-popup { - p { - font-style: italic; - } + p { + font-style: italic; + } } .new-project-page, .project-getting-started { - margin-top: 40px; - margin-bottom: 40px; + margin-top: 40px; + margin-bottom: 40px; } .panel-image { - height: 100%; - margin: -10px -15px; + height: 100%; + margin: -10px -15px; } .keyboard-shortcut-popup { - font-family: Inconsolata; - padding: 6px 8px !important; + font-family: Inconsolata; + padding: 6px 8px !important; } - //PanelMultiRunTable styles .form-grid { - .chart-label { - padding-top: 2 * @spu; - padding-bottom: @spu; - margin: 0; - } + .chart-label { + padding-top: 2 * @spu; + padding-bottom: @spu; + margin: 0; + } } .ui.label.count-label { - background: @gray100; - border-radius: 0; - color: @textPrimary; - font-weight: normal; - margin-left: 5px; - padding: 3px 5px; + background: @gray100; + border-radius: 0; + color: @textPrimary; + font-weight: normal; + margin-left: 5px; + padding: 3px 5px; } .fuzzy-match { - background: @fullYellow; + background: @fullYellow; } .header-1 { - font-size: 40px; - line-height: 56px; + font-size: 40px; + line-height: 56px; } .global-config__control { - display: flex; - align-items: center; - span { - margin-right: 5px - } + display: flex; + align-items: center; + span { + margin-right: 5px; + } } - .ui.popup.panel-settings-popup { - padding: 16px; + padding: 16px; } /****************\ @@ -628,177 +631,177 @@ button.link { \****************/ @media only screen and (max-width: @tabletBreakpoint) { - .hide-in-mobile { - display: none !important; - } - .hide-in-desktop { - display: initial !important; - } - .experiments-alert .visible.transition { - display: none !important; - } - .runsTable { - .ui.items:not(.unstackable)>.item { - margin: 0; - } - } - .panel-search-results { - border: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - } - &.ui.stackable.grid.panel-grid>.column:not(.row), - &.ui.stackable.grid.panel-grid>.row>.column { - padding: 6px 0 !important; - } - .ui.styled.accordion, - .ui.styled.accordion.pinned-panels { - &>.content, - &>.active.content { - padding-left: 0; - padding-right: 0; - } + .hide-in-mobile { + display: none !important; + } + .hide-in-desktop { + display: initial !important; + } + .experiments-alert .visible.transition { + display: none !important; + } + .runsTable { + .ui.items:not(.unstackable) > .item { + margin: 0; } - .ui.accordion.full-page-accordion { - &>.content { - padding: 0 16px !important; - } + } + .panel-search-results { + border: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + } + &.ui.stackable.grid.panel-grid > .column:not(.row), + &.ui.stackable.grid.panel-grid > .row > .column { + padding: 6px 0 !important; + } + .ui.styled.accordion, + .ui.styled.accordion.pinned-panels { + & > .content, + & > .active.content { + padding-left: 0; + padding-right: 0; } - .ui.visible.popup.hide-in-mobile { - display: none !important; + } + .ui.accordion.full-page-accordion { + & > .content { + padding: 0 16px !important; } + } + .ui.visible.popup.hide-in-mobile { + display: none !important; + } } // .input-open only has a border on the bottom, not all the way around (use 'transparent' flag on semantic Input element) .ui.input.input-open { - border-bottom: 1px solid @mediumBlue; - font-size: 1.2em; - padding: 5px 7px; - >i.icon { - margin-left: 10px; - } + border-bottom: 1px solid @mediumBlue; + font-size: 1.2em; + padding: 5px 7px; + > i.icon { + margin-left: 10px; + } } .ui.input.panel-search { - padding: 5px 0; - margin-top: 25px; + padding: 5px 0; + margin-top: 25px; } .multi-state-checkbox { - cursor: pointer; - display: flex; - align-items: center; - color: @blue; - width: 18px; - height: 18px; - border-radius: 2px; - border: 1px solid @border; + cursor: pointer; + display: flex; + align-items: center; + color: @blue; + width: 18px; + height: 18px; + border-radius: 2px; + border: 1px solid @border; + background-color: white; + box-shadow: @box-shadow-buttons-charts; + text-align: center; + padding: 0 1px; + i.icon { background-color: white; - box-shadow: @box-shadow-buttons-charts; - text-align: center; - padding: 0 1px; - i.icon { - background-color: white; - opacity: 1; - margin-right: 0; - font-size: 14px; - line-height: 14px; - width: 14px; - } - &.with-dropdown { - width: 45px; - i.icon.dropdown { - margin-left: -3px; - } + opacity: 1; + margin-right: 0; + font-size: 14px; + line-height: 14px; + width: 14px; + } + &.with-dropdown { + width: 45px; + i.icon.dropdown { + margin-left: -3px; } - i.icon.icon-check { - // top: -4px; - &:before { - margin: 0; - } + } + i.icon.icon-check { + // top: -4px; + &:before { + margin: 0; } + } } .ui.visible.popup { - filter: none !important; - &.popup--image-card-metadata { - .image-card-caption-text { - margin: 10px 0; - } - .dropdown.panel-media-step { - padding: 5px 20px 5px 7px; - .icon { - padding: 7px 5px 7px 7px; - } - .menu .item { - white-space: nowrap; - } - } + filter: none !important; + &.popup--image-card-metadata { + .image-card-caption-text { + margin: 10px 0; + } + .dropdown.panel-media-step { + padding: 5px 20px 5px 7px; + .icon { + padding: 7px 5px 7px 7px; + } + .menu .item { + white-space: nowrap; + } } + } } .ui.visible.popup.popup-with-dropdown-menu { - padding: 0; - margin: 0; - height: 10px; - width: 160px; - border: 0; - background-color: transparent; - box-shadow: none; - .ui.dropdown .menu { - position: relative; - top: -16px; - } + padding: 0; + margin: 0; + height: 10px; + width: 160px; + border: 0; + background-color: transparent; + box-shadow: none; + .ui.dropdown .menu { + position: relative; + top: -16px; + } } // This is for Dropdown Menus that come out of an icon button // The dropdown always wants to render it's little down arrow, so we // get rid of it. .dropdown-menu-text-icon-button { - >i.dropdown.icon { - display: none; - } - >.ui.button { - margin-right: 0 - } - .ui.button:not(.icon)>.icon:not(.button):not(.dropdown) { - margin-left: 8px; - margin-right: -6px; - } - &:not(:last-child) { - margin-right: 12px; - } + > i.dropdown.icon { + display: none; + } + > .ui.button { + margin-right: 0; + } + .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { + margin-left: 8px; + margin-right: -6px; + } + &:not(:last-child) { + margin-right: 12px; + } } .dropdown-menu-text-icon-left-button { - >i.dropdown.icon { - display: none; - } - >.ui.button { - margin-left: 0; - } - .ui.button:not(.icon)>.icon:not(.button):not(.dropdown) { - margin-right: 8px; - margin-left: -6px; - } + > i.dropdown.icon { + display: none; + } + > .ui.button { + margin-left: 0; + } + .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { + margin-right: 8px; + margin-left: -6px; + } } .dropdown-menu-icon-button { - >i.dropdown.icon { - display: none; - } - >.ui.button { - margin-right: 0; - >i.icon.wbic-ic-chevron-expanded { - color: black !important; - font-size: 12px !important; - transform: translate(4px, -4px); - } - } - &:not(:last-child) { - margin-bottom: 12px; + > i.dropdown.icon { + display: none; + } + > .ui.button { + margin-right: 0; + > i.icon.wbic-ic-chevron-expanded { + color: black !important; + font-size: 12px !important; + transform: translate(4px, -4px); } + } + &:not(:last-child) { + margin-bottom: 12px; + } } // .ui.multiple.search.dropdown { // display: flex; @@ -807,248 +810,261 @@ button.link { // } // } .ui.label { - background-color: @actionActiveColor; - display: inline-flex; // This fixes labels inside dropdowns (like our group by dropdown). - white-space: nowrap !important; + background-color: @actionActiveColor; + display: inline-flex; // This fixes labels inside dropdowns (like our group by dropdown). + white-space: nowrap !important; } // Tabs that scroll on overflow, without scrollbar .page-tabs .ui.attached.tabular.menu { - max-width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - &::-webkit-scrollbar { - display: none; - } + max-width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + &::-webkit-scrollbar { + display: none; + } } .dropdown-with-icon { - white-space: normal; - word-break: break-all; + white-space: normal; + word-break: break-all; } .signup-button { - i { - color: white !important; - } + i { + color: white !important; + } } // this class is set while resizing table columns body.react-draggable-transparent-selection { + cursor: ew-resize !important; + .drag-handle { cursor: ew-resize !important; - .drag-handle { - cursor: ew-resize !important; + } + .react-resizable { + i.icon.ellipsis { + opacity: 0 !important; } - .react-resizable { - i.icon.ellipsis { - opacity: 0 !important; - } - .react-resizable-handle { - opacity: 0 !important; - } + .react-resizable-handle { + opacity: 0 !important; } + } } /* Hide HTML5 Up and Down arrows. */ -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; +input[type='number']::-webkit-outer-spin-button, +input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } -input[type="number"] { - -moz-appearance: textfield; +input[type='number'] { + -moz-appearance: textfield; } .separator { - border-top: @separatorBorder; + border-top: @separatorBorder; } /* For buttons that look like links */ .fake-link { - color: @primary; - &.bold { - font-weight: bold; - } - cursor: pointer; - &:hover { - color: darken(@primary, 10%); - } + color: @primary; + &.bold { + font-weight: bold; + } + cursor: pointer; + &:hover { + color: darken(@primary, 10%); + } } /* Disable gray highlight when clicking links on mobile safari */ * { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .message-with-icon { - align-items: center; - &__icon { - width: 200px; - } - display: flex; + align-items: center; + &__icon { + width: 200px; + } + display: flex; } .panel-error { - color: @gray500; - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - font-size: 1rem; - &.media-missing { - flex-direction: column; - text-align: left; - align-items: initial; - } + color: @gray500; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + font-size: 1rem; + &.media-missing { + flex-direction: column; + text-align: left; + align-items: initial; + } } .header-spaced { - margin-top: @standardSpacingUnit; + margin-top: @standardSpacingUnit; } .underline-dashed { - border-bottom: 1px dashed @gray500; + border-bottom: 1px dashed @gray500; } .front-page { - background-color: @gray900; - position: absolute; - width: 100vw; - height: calc(~"100vh - @{searchNavHeight}"); + background-color: @gray900; + position: absolute; + width: 100vw; + height: calc(~'100vh - @{searchNavHeight}'); - .ui.vertical.segment { - border-bottom: none; - } - .ui.cards .content { - overflow: hidden !important; - } + .ui.vertical.segment { + border-bottom: none; + } + .ui.cards .content { + overflow: hidden !important; + } } .modal-split-actions { - border-top: 1px solid lightgrey; - display: flex; - &.modal-benchmark { - .ui.inline.dropdown .dropdown.icon { - margin: -.6875em; - } + border-top: 1px solid lightgrey; + display: flex; + &.modal-benchmark { + .ui.inline.dropdown .dropdown.icon { + margin: -0.6875em; } + } } img.ui.avatar.image { - margin-right: 6px; + margin-right: 6px; } // This is used on the create project page .ui.inline.dropdown { - >.text { - font-weight: normal !important; - } - i.icon.dropdown { - color: @primaryText; - } - .menu { - z-index: 100; - } + > .text { + font-weight: normal !important; + } + i.icon.dropdown { + color: @primaryText; + } + .menu { + z-index: 100; + } } // Garbage that was previously in site.overrides .ui.menu .vertically.fitted.item.logo-container { - margin-left: 25px; - padding-left: 0; + margin-left: 25px; + padding-left: 0; } .read-only { - .hide-runs { - display: none; - } - .pin-button { - visibility: hidden; - } + .hide-runs { + display: none; + } + .pin-button { + visibility: hidden; + } } .plot-border-top, .plot-border-bottom, .plot-border-left, .plot-border-right { - fill: @white; - transition: fill 0.3s linear; + fill: @white; + transition: fill 0.3s linear; } .stretch { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - overflow: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow: auto; } .ui.styled.accordion { - &.pinned-panels .active.content { - padding-left: 20px; - padding-right: 20px; - } - .title, - .accordion .title { - background: @lightBlue; - padding-left: 10px; - font-size: 1.2em; - .icon { - margin-right: 10px; - } + &.pinned-panels .active.content { + padding-left: 20px; + padding-right: 20px; + } + .title, + .accordion .title { + background: @lightBlue; + padding-left: 10px; + font-size: 1.2em; + .icon { + margin-right: 10px; } + } } .panel-search-results { - padding: @accordionContentPadding; - border: 1px solid @textSecondary; - border-radius: 6px; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-top: 0; + padding: @accordionContentPadding; + border: 1px solid @textSecondary; + border-radius: 6px; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: 0; } - - /* run page - global config */ +/* run page - global config */ .ui.selection.active.dropdown:hover { - border-color: @mediumBlue; + border-color: @mediumBlue; } -.ui.popup>.header { - margin-bottom: 10px; +.ui.popup > .header { + margin-bottom: 10px; } .hide-in-desktop { - display: none; + display: none; } .error-text { - color: @error; + color: @error; } .night-mode { + filter: @nightModeFilter; + img, + video, + iframe, + .inverted.segment, + .editable-image, + .run-logs, + .search-nav, + .media-card__fullscreen, + .night-aware, + .night-aware-exclude-children, + iframe.intercom-launcher-frame { + filter: @nightModeFilterRevert; + } + .night-aware-exclude-children + > :not(.night-aware):not(.night-aware-exclude-children) { filter: @nightModeFilter; - img, video, iframe, .inverted.segment, .editable-image, .run-logs, .search-nav, .media-card__fullscreen, - .night-aware, .night-aware-exclude-children, iframe.intercom-launcher-frame { - filter: @nightModeFilterRevert; - } - .night-aware-exclude-children > :not(.night-aware):not(.night-aware-exclude-children) { - filter: @nightModeFilter; - } - .night-aware-exclude-children > .night-aware, - .night-aware-exclude-children > .night-aware-exclude-children { - filter: none; - } - .empty-watermark img, .editable-image img, img.image-icon, img.disable-night-mode-filter-revert, .search-nav * { - filter: none; - } - :not(.night-aware):not(.night-aware-exclude-children) { - box-shadow: none !important; - } + } + .night-aware-exclude-children > .night-aware, + .night-aware-exclude-children > .night-aware-exclude-children { + filter: none; + } + .empty-watermark img, + .editable-image img, + img.image-icon, + img.disable-night-mode-filter-revert, + .search-nav * { + filter: none; + } + :not(.night-aware):not(.night-aware-exclude-children) { + box-shadow: none !important; + } } .ui.segment.vertical.footer { @@ -1063,142 +1079,143 @@ img.ui.avatar.image { } } -.ui.dropdown>.menu>.header.small-header { - &:first-child { - margin-top: 8px; - } - margin: 0; - text-transform: none; - font-weight: normal; - color: @gray700; - height: 20px; +.ui.dropdown > .menu > .header.small-header { + &:first-child { + margin-top: 8px; } + margin: 0; + text-transform: none; + font-weight: normal; + color: @gray700; + height: 20px; +} -i.icon.ellipsis-menu-icon{ - font-size: 24px; - color: @gray700; - transform: translateY(2px); - &:hover { - color: black; - } +i.icon.ellipsis-menu-icon { + font-size: 24px; + color: @gray700; + transform: translateY(2px); + &:hover { + color: black; + } } // fixes black background bug on charts in safari .rv-xy-plot { - fill: none; + fill: none; } // This fixes the semantic dropdown menu we use everywhere to work // with long keys. Its default behavior is horrible. // See https://github.com/wandb/angle-issues/issues/24 body .ui.selection.dropdown .menu { - width: auto; - max-width: 400px; - border-top-width: 1px!important; - border-radius: 0 .25rem .25rem .25rem; - &>item { - word-wrap: break-word; - } + width: auto; + max-width: 400px; + border-top-width: 1px !important; + border-radius: 0 0.25rem 0.25rem 0.25rem; + & > item { + word-wrap: break-word; + } } .input-label { - font-size: 14px; - margin-bottom: 5px; - margin-top: 5px; + font-size: 14px; + margin-bottom: 5px; + margin-top: 5px; } .run-row-name.failed { - color: @errorText; + color: @errorText; } .run-row-name.single-mode { - cursor: pointer; - margin-left: 10px; + cursor: pointer; + margin-left: 10px; } .ui.buttons.pagination-buttons { + margin-left: 4px; + margin-right: 4px; + .ui.button { + box-shadow: none !important; + border: none; + background: none; + width: 20px; + overflow: hidden; margin-left: 4px; - margin-right: 4px; - .ui.button { - box-shadow: none !important; - border: none; - background: none; - width: 20px; - overflow: hidden; - margin-left: 4px; - padding: 0; - i { - color: lighten(@gray700, 5%); - } - &.disabled { - i { - color: @gray400; - } - } - &:hover { - i { - color: black; - } - } + padding: 0; + i { + color: lighten(@gray700, 5%); } + &.disabled { + i { + color: @gray400; + } + } + &:hover { + i { + color: black; + } + } + } } .inline-pagination { + display: flex; + justify-content: flex-end; + align-items: center; + left: 10px; + z-index: 1; + height: 24px; + padding-right: 8px; + .pagination-count { + color: lighten(@gray700, 5%); + } + .pagination-buttons { + margin-top: -9px !important; + } + + .page-down-button, + .page-up-button { display: flex; - justify-content: flex-end; - align-items: center; - left: 10px; - z-index: 1; - height: 24px; - padding-right: 8px; - .pagination-count { - color: lighten(@gray700, 5%); - } - .pagination-buttons { - margin-top: -9px !important; - } + justify-content: center; + box-shadow: none !important; + border: none !important; + background: none !important; + width: 20px; + overflow: hidden; + margin-left: 4px; + padding: 0; + transform: rotate(90deg); - .page-down-button, .page-up-button { - display: flex; - justify-content: center; - box-shadow: none !important; - border: none !important; - background: none !important; - width: 20px; - overflow: hidden; - margin-left: 4px; - padding: 0; - transform: rotate(90deg); - - i { - color: lighten(@gray700, 5%) !important; - } + i { + color: lighten(@gray700, 5%) !important; + } - &.disabled { - i { - color: @gray400 !important; - } - } + &.disabled { + i { + color: @gray400 !important; + } + } - &:hover { - i { - color: black !important; - } - } + &:hover { + i { + color: black !important; + } } + } } .text-editor { - font-size: 16px; - font-family: @fontName; + font-size: 16px; + font-family: @fontName; } .cg-loader { - visibility: hidden; + visibility: hidden; } .cg-executing .cg-loader { - visibility: visible; + visibility: visible; } #zendesk-launcher { From 3f9f3e92916f7af1941ba886c5457c7981fa31e0 Mon Sep 17 00:00:00 2001 From: Danny Goldstein Date: Tue, 29 Oct 2024 14:04:15 -0400 Subject: [PATCH 2/2] fix(weave_query): handle tagged unions of non-primitive types correctly in arrow converter (#2659) * update converter * add test --- weave_query/tests/test_arrow.py | 56 +++++++++++++++++++ weave_query/weave_query/arrow/convert.py | 22 +++++--- .../language_features/tagging/tag_store.py | 21 +++++++ 3 files changed, 92 insertions(+), 7 deletions(-) diff --git a/weave_query/tests/test_arrow.py b/weave_query/tests/test_arrow.py index a07daa56728..08770f3927e 100644 --- a/weave_query/tests/test_arrow.py +++ b/weave_query/tests/test_arrow.py @@ -17,6 +17,8 @@ ops, storage, weave_internal, + artifact_local, + artifact_fs, ) # If you're thinking of import vectorize here, don't! Put your @@ -1812,3 +1814,57 @@ def test_repeat_0(): repeated = constructors.repeat(data, 0) assert len(repeated) == 0 assert repeated.type == pa.struct({"a": pa.int64()}) + + +def test_arrow_tagged_union(): + + art = artifact_local.LocalArtifact("test_arrow_tagged_union") + + with art.new_file("hello.txt") as f: + f.write("hello") + + with art.new_file("world.dat") as f: + f.write("world") + + art.save() + + art_dir = art.path_info("") + assert weave.type_of(art_dir) == artifact_fs.FilesystemArtifactDirType() + files = art_dir.files + + exp_art_file1_type = artifact_fs.FilesystemArtifactFileType( + extension=weave.types.Const(weave.types.String(), "txt"), + wbObjectType=weave.types.NoneType(), + ) + + exp_art_file2_type = artifact_fs.FilesystemArtifactFileType( + extension=weave.types.Const(weave.types.String(), "dat"), + wbObjectType=weave.types.NoneType(), + ) + + assert exp_art_file1_type == weave.type_of(files["hello.txt"]) + assert exp_art_file2_type == weave.type_of(files["world.dat"]) + + tags = {"top": "level"} + tag_store.add_tags(files["hello.txt"], tags) + tag_store.add_tags(files["world.dat"], tags) + + f1e = files["hello.txt"] + f2e = files["world.dat"] + + expected = [f1e, f2e] + + # this should not fail, it was failing in https://wandb.atlassian.net/browse/WB-21076 + tagged_union_arrow = arrow.to_arrow(expected) + + result = tagged_union_arrow.to_pylist_tagged() + + f1a = result[0] + f2a = result[1] + + with f1a.open() as a, f1e.open() as e: + assert a.read() == e.read() + + with f2a.open() as a, f2e.open() as e: + assert a.read() == e.read() + diff --git a/weave_query/weave_query/arrow/convert.py b/weave_query/weave_query/arrow/convert.py index 84f4a1fa53c..a2762ff4c55 100644 --- a/weave_query/weave_query/arrow/convert.py +++ b/weave_query/weave_query/arrow/convert.py @@ -6,7 +6,14 @@ from weave_query import api as api from weave_query import weave_internal from weave_query import weave_types as types -from weave_query import errors, arrow_util, artifact_base, artifact_mem, box, mappers_arrow +from weave_query import ( + errors, + arrow_util, + artifact_base, + artifact_mem, + box, + mappers_arrow, +) from weave_query.arrow.arrow import ( ArrowWeaveListType, ) @@ -223,12 +230,13 @@ def none_unboxer(iterator: typing.Iterable): if i == 0: mask.append(py_obj is None) - array = recursively_build_pyarrow_array( - data, - field.type, - mapper._value_serializer, - py_objs_already_mapped, - ) + with tag_store.with_tags_stripped_from_objects(py_objs): + array = recursively_build_pyarrow_array( + data, + field.type, + mapper._value_serializer, + py_objs_already_mapped, + ) else: assert isinstance( mapper, diff --git a/weave_query/weave_query/language_features/tagging/tag_store.py b/weave_query/weave_query/language_features/tagging/tag_store.py index 7ce213e5407..ce4ff578b99 100644 --- a/weave_query/weave_query/language_features/tagging/tag_store.py +++ b/weave_query/weave_query/language_features/tagging/tag_store.py @@ -77,6 +77,27 @@ def with_tag_store_state( _OBJ_TAGS_MEM_MAP.reset(tag_store_token) +@contextmanager +def with_tags_stripped_from_objects(objs: list[typing.Any]) -> typing.Iterator[None]: + current_state = _current_obj_tag_mem_map() + if current_state is None: + raise errors.WeaveInternalError("No tag store context") + + new_state = current_state.copy() + + for obj in objs: + objid = get_id(obj) + if objid in new_state: + del new_state[objid] + + new_mem_map = _OBJ_TAGS_MEM_MAP.get().copy() + new_mem_map[_OBJ_TAGS_CURR_NODE_ID.get()] = new_state + + tag_store_token = _OBJ_TAGS_MEM_MAP.set(new_mem_map) + yield + _OBJ_TAGS_MEM_MAP.reset(tag_store_token) + + # sets the current node with optionally merged in parent tags @contextmanager def set_curr_node(node_id: int, parent_node_ids: list[int]) -> typing.Iterator[None]: