@grafana/scenes 6.5.0 → 6.5.1--canary.1077.13964702348.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/behaviors/ActWhenVariableChanged.js.map +1 -1
- package/dist/esm/behaviors/CursorSync.js +3 -21
- package/dist/esm/behaviors/CursorSync.js.map +1 -1
- package/dist/esm/behaviors/LiveNowTimer.js +3 -2
- package/dist/esm/behaviors/LiveNowTimer.js.map +1 -1
- package/dist/esm/behaviors/SceneQueryController.js +7 -37
- package/dist/esm/behaviors/SceneQueryController.js.map +1 -1
- package/dist/esm/behaviors/SceneRenderProfiler.js +10 -17
- package/dist/esm/behaviors/SceneRenderProfiler.js.map +1 -1
- package/dist/esm/components/EmbeddedScene.js +1 -12
- package/dist/esm/components/EmbeddedScene.js.map +1 -1
- package/dist/esm/components/NestedScene.js +23 -30
- package/dist/esm/components/NestedScene.js.map +1 -1
- package/dist/esm/components/SceneApp/SceneApp.js +1 -11
- package/dist/esm/components/SceneApp/SceneApp.js.map +1 -1
- package/dist/esm/components/SceneApp/SceneAppPage.js +28 -47
- package/dist/esm/components/SceneApp/SceneAppPage.js.map +1 -1
- package/dist/esm/components/SceneApp/SceneAppPageView.js +14 -20
- package/dist/esm/components/SceneApp/SceneAppPageView.js.map +1 -1
- package/dist/esm/components/SceneApp/utils.js +2 -18
- package/dist/esm/components/SceneApp/utils.js.map +1 -1
- package/dist/esm/components/SceneByFrameRepeater.js +1 -3
- package/dist/esm/components/SceneByFrameRepeater.js.map +1 -1
- package/dist/esm/components/SceneByVariableRepeater.js +1 -3
- package/dist/esm/components/SceneByVariableRepeater.js.map +1 -1
- package/dist/esm/components/SceneCanvasText.js +1 -4
- package/dist/esm/components/SceneCanvasText.js.map +1 -1
- package/dist/esm/components/SceneControlsSpacer.js +1 -3
- package/dist/esm/components/SceneControlsSpacer.js.map +1 -1
- package/dist/esm/components/SceneDebugger/DebugDetails.js +11 -24
- package/dist/esm/components/SceneDebugger/DebugDetails.js.map +1 -1
- package/dist/esm/components/SceneDebugger/DebugTreeNode.js +2 -14
- package/dist/esm/components/SceneDebugger/DebugTreeNode.js.map +1 -1
- package/dist/esm/components/SceneDebugger/SceneDebugger.js +1 -29
- package/dist/esm/components/SceneDebugger/SceneDebugger.js.map +1 -1
- package/dist/esm/components/SceneReactObject.js +1 -17
- package/dist/esm/components/SceneReactObject.js.map +1 -1
- package/dist/esm/components/SceneRefreshPicker.js +23 -38
- package/dist/esm/components/SceneRefreshPicker.js.map +1 -1
- package/dist/esm/components/SceneTimePicker.js +27 -29
- package/dist/esm/components/SceneTimePicker.js.map +1 -1
- package/dist/esm/components/SceneTimeRangeCompare.js +36 -50
- package/dist/esm/components/SceneTimeRangeCompare.js.map +1 -1
- package/dist/esm/components/SceneToolbarButton.js +10 -14
- package/dist/esm/components/SceneToolbarButton.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanel.js +20 -29
- package/dist/esm/components/VizPanel/VizPanel.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanelExploreButton.js +17 -13
- package/dist/esm/components/VizPanel/VizPanelExploreButton.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanelMenu.js +18 -20
- package/dist/esm/components/VizPanel/VizPanelMenu.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanelRenderer.js +92 -122
- package/dist/esm/components/VizPanel/VizPanelRenderer.js.map +1 -1
- package/dist/esm/components/VizPanel/VizPanelSeriesLimit.js +7 -15
- package/dist/esm/components/VizPanel/VizPanelSeriesLimit.js.map +1 -1
- package/dist/esm/components/VizPanel/colorSeriesConfigFactory.js +15 -29
- package/dist/esm/components/VizPanel/colorSeriesConfigFactory.js.map +1 -1
- package/dist/esm/components/VizPanel/registerRuntimePanelPlugin.js +3 -21
- package/dist/esm/components/VizPanel/registerRuntimePanelPlugin.js.map +1 -1
- package/dist/esm/components/VizPanel/seriesVisibilityConfigFactory.js +22 -34
- package/dist/esm/components/VizPanel/seriesVisibilityConfigFactory.js.map +1 -1
- package/dist/esm/components/layout/CSSGrid/SceneCSSGridLayout.js +8 -40
- package/dist/esm/components/layout/CSSGrid/SceneCSSGridLayout.js.map +1 -1
- package/dist/esm/components/layout/LazyLoader.js +2 -35
- package/dist/esm/components/layout/LazyLoader.js.map +1 -1
- package/dist/esm/components/layout/SceneFlexLayout.js +3 -13
- package/dist/esm/components/layout/SceneFlexLayout.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridItem.js +1 -3
- package/dist/esm/components/layout/grid/SceneGridItem.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridLayout.js +26 -26
- package/dist/esm/components/layout/grid/SceneGridLayout.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js +88 -104
- package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridRow.js +15 -48
- package/dist/esm/components/layout/grid/SceneGridRow.js.map +1 -1
- package/dist/esm/components/layout/grid/constants.js.map +1 -1
- package/dist/esm/components/layout/grid/types.js.map +1 -1
- package/dist/esm/components/layout/grid/utils.js +3 -21
- package/dist/esm/components/layout/grid/utils.js.map +1 -1
- package/dist/esm/components/layout/split/SplitLayout.js.map +1 -1
- package/dist/esm/components/layout/split/SplitLayoutRenderer.js +11 -14
- package/dist/esm/components/layout/split/SplitLayoutRenderer.js.map +1 -1
- package/dist/esm/components/layout/split/Splitter.js +60 -58
- package/dist/esm/components/layout/split/Splitter.js.map +1 -1
- package/dist/esm/core/PanelBuilders/FieldConfigBuilder.js +46 -23
- package/dist/esm/core/PanelBuilders/FieldConfigBuilder.js.map +1 -1
- package/dist/esm/core/PanelBuilders/FieldConfigBuilders.js +8 -8
- package/dist/esm/core/PanelBuilders/FieldConfigBuilders.js.map +1 -1
- package/dist/esm/core/PanelBuilders/FieldConfigOverridesBuilder.js.map +1 -1
- package/dist/esm/core/PanelBuilders/PanelOptionsBuilder.js +3 -0
- package/dist/esm/core/PanelBuilders/PanelOptionsBuilder.js.map +1 -1
- package/dist/esm/core/PanelBuilders/PanelOptionsBuilders.js +28 -28
- package/dist/esm/core/PanelBuilders/PanelOptionsBuilders.js.map +1 -1
- package/dist/esm/core/PanelBuilders/StandardFieldConfigBuilders.js.map +1 -1
- package/dist/esm/core/PanelBuilders/VizConfigBuilder.js +39 -0
- package/dist/esm/core/PanelBuilders/VizConfigBuilder.js.map +1 -1
- package/dist/esm/core/PanelBuilders/VizConfigBuilders.js +32 -32
- package/dist/esm/core/PanelBuilders/VizConfigBuilders.js.map +1 -1
- package/dist/esm/core/PanelBuilders/VizPanelBuilder.js +82 -21
- package/dist/esm/core/PanelBuilders/VizPanelBuilder.js.map +1 -1
- package/dist/esm/core/PanelBuilders/index.js +32 -32
- package/dist/esm/core/PanelBuilders/index.js.map +1 -1
- package/dist/esm/core/SceneComponentWrapper.js +4 -38
- package/dist/esm/core/SceneComponentWrapper.js.map +1 -1
- package/dist/esm/core/SceneDataNode.js +4 -19
- package/dist/esm/core/SceneDataNode.js.map +1 -1
- package/dist/esm/core/SceneObjectBase.js +55 -17
- package/dist/esm/core/SceneObjectBase.js.map +1 -1
- package/dist/esm/core/SceneObjectRef.js +7 -18
- package/dist/esm/core/SceneObjectRef.js.map +1 -1
- package/dist/esm/core/SceneScopesBridge.js +15 -0
- package/dist/esm/core/SceneScopesBridge.js.map +1 -1
- package/dist/esm/core/SceneTimeRange.js +9 -17
- package/dist/esm/core/SceneTimeRange.js.map +1 -1
- package/dist/esm/core/SceneTimeRangeTransformerBase.js.map +1 -1
- package/dist/esm/core/SceneTimeZoneOverride.js +7 -23
- package/dist/esm/core/SceneTimeZoneOverride.js.map +1 -1
- package/dist/esm/core/events.js.map +1 -1
- package/dist/esm/core/sceneGraph/getQueryController.js.map +1 -1
- package/dist/esm/core/sceneGraph/getTimeRange.js.map +1 -1
- package/dist/esm/core/sceneGraph/index.js +1 -1
- package/dist/esm/core/sceneGraph/index.js.map +1 -1
- package/dist/esm/core/sceneGraph/sceneGraph.js.map +1 -1
- package/dist/esm/core/sceneGraph/utils.js +1 -17
- package/dist/esm/core/sceneGraph/utils.js.map +1 -1
- package/dist/esm/core/types.js.map +1 -1
- package/dist/esm/index.js +6 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/querying/DataLayersMerger.js.map +1 -1
- package/dist/esm/querying/DataProviderProxy.js.map +1 -1
- package/dist/esm/querying/ExtraQueryProvider.js.map +1 -1
- package/dist/esm/querying/RuntimeDataSource.js.map +1 -1
- package/dist/esm/querying/SceneDataLayerSet.js +9 -24
- package/dist/esm/querying/SceneDataLayerSet.js.map +1 -1
- package/dist/esm/querying/SceneDataTransformer.js +11 -24
- package/dist/esm/querying/SceneDataTransformer.js.map +1 -1
- package/dist/esm/querying/SceneQueryRunner.js +44 -33
- package/dist/esm/querying/SceneQueryRunner.js.map +1 -1
- package/dist/esm/querying/extraQueryProcessingOperator.js +3 -21
- package/dist/esm/querying/extraQueryProcessingOperator.js.map +1 -1
- package/dist/esm/querying/getEnrichedDataRequest.js.map +1 -1
- package/dist/esm/querying/layers/SceneDataLayerBase.js +16 -19
- package/dist/esm/querying/layers/SceneDataLayerBase.js.map +1 -1
- package/dist/esm/querying/layers/SceneDataLayerControls.js +15 -21
- package/dist/esm/querying/layers/SceneDataLayerControls.js.map +1 -1
- package/dist/esm/querying/layers/annotations/AnnotationsDataLayer.js +12 -30
- package/dist/esm/querying/layers/annotations/AnnotationsDataLayer.js.map +1 -1
- package/dist/esm/querying/layers/annotations/filterAnnotations.js +6 -23
- package/dist/esm/querying/layers/annotations/filterAnnotations.js.map +1 -1
- package/dist/esm/querying/layers/annotations/standardAnnotationQuery.js +19 -29
- package/dist/esm/querying/layers/annotations/standardAnnotationQuery.js.map +1 -1
- package/dist/esm/querying/layers/annotations/standardAnnotationsSupport.js +14 -34
- package/dist/esm/querying/layers/annotations/standardAnnotationsSupport.js.map +1 -1
- package/dist/esm/querying/layers/annotations/utils.js +1 -17
- package/dist/esm/querying/layers/annotations/utils.js.map +1 -1
- package/dist/esm/querying/registerQueryWithController.js.map +1 -1
- package/dist/esm/services/SceneObjectUrlSyncConfig.js.map +1 -1
- package/dist/esm/services/UniqueUrlKeyMapper.js.map +1 -1
- package/dist/esm/services/UrlSyncContextProvider.js.map +1 -1
- package/dist/esm/services/UrlSyncManager.js +11 -19
- package/dist/esm/services/UrlSyncManager.js.map +1 -1
- package/dist/esm/services/useUrlSync.js.map +1 -1
- package/dist/esm/services/utils.js.map +1 -1
- package/dist/esm/utils/ControlsLabel.js +23 -47
- package/dist/esm/utils/ControlsLabel.js.map +1 -1
- package/dist/esm/utils/LoadingIndicator.js +11 -10
- package/dist/esm/utils/LoadingIndicator.js.map +1 -1
- package/dist/esm/utils/SafeSerializableSceneObject.js +7 -18
- package/dist/esm/utils/SafeSerializableSceneObject.js.map +1 -1
- package/dist/esm/utils/compatibility/setWindowGrafanaSceneContext.js.map +1 -1
- package/dist/esm/utils/date.js.map +1 -1
- package/dist/esm/utils/evaluateTimeRange.js.map +1 -1
- package/dist/esm/utils/explore.js.map +1 -1
- package/dist/esm/utils/getCompareSeriesRefId.js.map +1 -1
- package/dist/esm/utils/getDataSource.js.map +1 -1
- package/dist/esm/utils/getMessageFromError.js.map +1 -1
- package/dist/esm/utils/metricTree.js.map +1 -1
- package/dist/esm/utils/parseUrlParam.js.map +1 -1
- package/dist/esm/utils/utils.js.map +1 -1
- package/dist/esm/utils/wrapInSafeSerializableSceneObject.js.map +1 -1
- package/dist/esm/utils/writeSceneLog.js.map +1 -1
- package/dist/esm/variables/VariableDependencyConfig.js +9 -0
- package/dist/esm/variables/VariableDependencyConfig.js.map +1 -1
- package/dist/esm/variables/VariableValueRecorder.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFilterBuilder.js +13 -12
- package/dist/esm/variables/adhoc/AdHocFilterBuilder.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFilterRenderer.js +129 -142
- package/dist/esm/variables/adhoc/AdHocFilterRenderer.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js +84 -91
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersAlwaysWipCombobox.js +1 -6
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersAlwaysWipCombobox.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.js +195 -194
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.js +34 -28
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/DropdownItem.js +28 -65
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/DropdownItem.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/MultiValuePill.js +29 -43
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/MultiValuePill.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.js +2 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/utils.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersVariable.js +43 -55
- package/dist/esm/variables/adhoc/AdHocFiltersVariable.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.js.map +1 -1
- package/dist/esm/variables/adhoc/getAdHocFiltersFromScopes.js +1 -0
- package/dist/esm/variables/adhoc/getAdHocFiltersFromScopes.js.map +1 -1
- package/dist/esm/variables/adhoc/getAdhocOptionSearcher.js.map +1 -1
- package/dist/esm/variables/adhoc/patchGetAdhocFilters.js.map +1 -1
- package/dist/esm/variables/components/VariableValueControl.js +9 -6
- package/dist/esm/variables/components/VariableValueControl.js.map +1 -1
- package/dist/esm/variables/components/VariableValueInput.js +13 -10
- package/dist/esm/variables/components/VariableValueInput.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelect.js +90 -115
- package/dist/esm/variables/components/VariableValueSelect.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelectors.js +20 -37
- package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
- package/dist/esm/variables/components/getOptionSearcher.js +1 -1
- package/dist/esm/variables/components/getOptionSearcher.js.map +1 -1
- package/dist/esm/variables/constants.js.map +1 -1
- package/dist/esm/variables/filter.js +6 -1
- package/dist/esm/variables/filter.js.map +1 -1
- package/dist/esm/variables/getEnrichedFiltersRequest.js.map +1 -1
- package/dist/esm/variables/groupby/GroupByVariable.js +106 -112
- package/dist/esm/variables/groupby/GroupByVariable.js.map +1 -1
- package/dist/esm/variables/groupby/GroupByVariableUrlSyncHandler.js.map +1 -1
- package/dist/esm/variables/groupby/findActiveGroupByVariablesByUid.js.map +1 -1
- package/dist/esm/variables/interpolation/ScopedVarsVariable.js.map +1 -1
- package/dist/esm/variables/interpolation/defaults.js.map +1 -1
- package/dist/esm/variables/interpolation/fieldAccessorCache.js.map +1 -1
- package/dist/esm/variables/interpolation/formatRegistry.js.map +1 -1
- package/dist/esm/variables/interpolation/sceneInterpolator.js.map +1 -1
- package/dist/esm/variables/lookupVariable.js.map +1 -1
- package/dist/esm/variables/macros/AllVariablesMacro.js.map +1 -1
- package/dist/esm/variables/macros/contextMacros.js.map +1 -1
- package/dist/esm/variables/macros/dataMacros.js.map +1 -1
- package/dist/esm/variables/macros/index.js.map +1 -1
- package/dist/esm/variables/macros/templateProxies.js +4 -21
- package/dist/esm/variables/macros/templateProxies.js.map +1 -1
- package/dist/esm/variables/macros/timeMacros.js.map +1 -1
- package/dist/esm/variables/macros/types.js.map +1 -1
- package/dist/esm/variables/macros/urlMacros.js.map +1 -1
- package/dist/esm/variables/sets/SceneVariableSet.js +44 -0
- package/dist/esm/variables/sets/SceneVariableSet.js.map +1 -1
- package/dist/esm/variables/types.js.map +1 -1
- package/dist/esm/variables/utils.js.map +1 -1
- package/dist/esm/variables/variants/ConstantVariable.js +4 -23
- package/dist/esm/variables/variants/ConstantVariable.js.map +1 -1
- package/dist/esm/variables/variants/CustomVariable.js +4 -19
- package/dist/esm/variables/variants/CustomVariable.js.map +1 -1
- package/dist/esm/variables/variants/DataSourceVariable.js +4 -19
- package/dist/esm/variables/variants/DataSourceVariable.js.map +1 -1
- package/dist/esm/variables/variants/IntervalVariable.js +17 -29
- package/dist/esm/variables/variants/IntervalVariable.js.map +1 -1
- package/dist/esm/variables/variants/LocalValueVariable.js +8 -23
- package/dist/esm/variables/variants/LocalValueVariable.js.map +1 -1
- package/dist/esm/variables/variants/MultiValueVariable.js +16 -0
- package/dist/esm/variables/variants/MultiValueVariable.js.map +1 -1
- package/dist/esm/variables/variants/TestVariable.js +5 -19
- package/dist/esm/variables/variants/TestVariable.js.map +1 -1
- package/dist/esm/variables/variants/TextBoxVariable.js +5 -22
- package/dist/esm/variables/variants/TextBoxVariable.js.map +1 -1
- package/dist/esm/variables/variants/guards.js.map +1 -1
- package/dist/esm/variables/variants/query/QueryVariable.js +8 -20
- package/dist/esm/variables/variants/query/QueryVariable.js.map +1 -1
- package/dist/esm/variables/variants/query/createQueryVariableRunner.js +6 -23
- package/dist/esm/variables/variants/query/createQueryVariableRunner.js.map +1 -1
- package/dist/esm/variables/variants/query/guards.js.map +1 -1
- package/dist/esm/variables/variants/query/toMetricFindValues.js.map +1 -1
- package/dist/esm/variables/variants/query/utils.js.map +1 -1
- package/dist/index.d.ts +36 -6
- package/dist/index.js +2035 -2791
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
|
@@ -1,25 +1,6 @@
|
|
|
1
|
-
import { isSystemOverrideWithRef, FieldMatcherID,
|
|
1
|
+
import { isSystemOverrideWithRef, ByNamesMatcherMode, FieldMatcherID, fieldMatchers, FieldType, getFieldDisplayName } from '@grafana/data';
|
|
2
2
|
import { SeriesVisibilityChangeMode } from '@grafana/ui';
|
|
3
3
|
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __defProps = Object.defineProperties;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
4
|
const displayOverrideRef = "hideSeriesFrom";
|
|
24
5
|
const isHideSeriesOverride = isSystemOverrideWithRef(displayOverrideRef);
|
|
25
6
|
function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
|
|
@@ -29,15 +10,17 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
|
|
|
29
10
|
if (currentIndex < 0) {
|
|
30
11
|
if (mode === SeriesVisibilityChangeMode.ToggleSelection) {
|
|
31
12
|
const override3 = createOverride([displayName, ...getNamesOfHiddenFields(overrides, data)]);
|
|
32
|
-
return
|
|
13
|
+
return {
|
|
14
|
+
...fieldConfig,
|
|
33
15
|
overrides: [...fieldConfig.overrides, override3]
|
|
34
|
-
}
|
|
16
|
+
};
|
|
35
17
|
}
|
|
36
18
|
const displayNames = getDisplayNames(data, displayName);
|
|
37
19
|
const override2 = createOverride(displayNames);
|
|
38
|
-
return
|
|
20
|
+
return {
|
|
21
|
+
...fieldConfig,
|
|
39
22
|
overrides: [...fieldConfig.overrides, override2]
|
|
40
|
-
}
|
|
23
|
+
};
|
|
41
24
|
}
|
|
42
25
|
const overridesCopy = Array.from(overrides);
|
|
43
26
|
const [current] = overridesCopy.splice(currentIndex, 1);
|
|
@@ -48,24 +31,28 @@ function seriesVisibilityConfigFactory(label, mode, fieldConfig, data) {
|
|
|
48
31
|
existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);
|
|
49
32
|
}
|
|
50
33
|
if (existing[0] === displayName && existing.length === 1) {
|
|
51
|
-
return
|
|
34
|
+
return {
|
|
35
|
+
...fieldConfig,
|
|
52
36
|
overrides: overridesCopy
|
|
53
|
-
}
|
|
37
|
+
};
|
|
54
38
|
}
|
|
55
39
|
const override2 = createOverride([displayName, ...nameOfHiddenFields]);
|
|
56
|
-
return
|
|
40
|
+
return {
|
|
41
|
+
...fieldConfig,
|
|
57
42
|
overrides: [...overridesCopy, override2]
|
|
58
|
-
}
|
|
43
|
+
};
|
|
59
44
|
}
|
|
60
45
|
const override = createExtendedOverride(current, displayName);
|
|
61
46
|
if (allFieldsAreExcluded(override, data)) {
|
|
62
|
-
return
|
|
47
|
+
return {
|
|
48
|
+
...fieldConfig,
|
|
63
49
|
overrides: overridesCopy
|
|
64
|
-
}
|
|
50
|
+
};
|
|
65
51
|
}
|
|
66
|
-
return
|
|
52
|
+
return {
|
|
53
|
+
...fieldConfig,
|
|
67
54
|
overrides: [...overridesCopy, override]
|
|
68
|
-
}
|
|
55
|
+
};
|
|
69
56
|
}
|
|
70
57
|
function createOverride(names, mode = ByNamesMatcherMode.exclude, property) {
|
|
71
58
|
property = property != null ? property : {
|
|
@@ -88,13 +75,14 @@ function createOverride(names, mode = ByNamesMatcherMode.exclude, property) {
|
|
|
88
75
|
}
|
|
89
76
|
},
|
|
90
77
|
properties: [
|
|
91
|
-
|
|
78
|
+
{
|
|
79
|
+
...property,
|
|
92
80
|
value: {
|
|
93
81
|
viz: true,
|
|
94
82
|
legend: false,
|
|
95
83
|
tooltip: false
|
|
96
84
|
}
|
|
97
|
-
}
|
|
85
|
+
}
|
|
98
86
|
]
|
|
99
87
|
};
|
|
100
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seriesVisibilityConfigFactory.js","sources":["../../../../src/components/VizPanel/seriesVisibilityConfigFactory.ts"],"sourcesContent":["import {\n ByNamesMatcherMode,\n ConfigOverrideRule,\n DataFrame,\n DynamicConfigValue,\n FieldConfigSource,\n FieldMatcherID,\n fieldMatchers,\n FieldType,\n getFieldDisplayName,\n isSystemOverrideWithRef,\n SystemConfigOverrideRule,\n} from '@grafana/data';\nimport { SeriesVisibilityChangeMode } from '@grafana/ui';\n\nconst displayOverrideRef = 'hideSeriesFrom';\nconst isHideSeriesOverride = isSystemOverrideWithRef(displayOverrideRef);\n\nexport function seriesVisibilityConfigFactory(\n label: string,\n mode: SeriesVisibilityChangeMode,\n fieldConfig: FieldConfigSource,\n data: DataFrame[]\n): FieldConfigSource {\n const { overrides } = fieldConfig;\n\n const displayName = label;\n const currentIndex = overrides.findIndex(isHideSeriesOverride);\n\n if (currentIndex < 0) {\n if (mode === SeriesVisibilityChangeMode.ToggleSelection) {\n const override = createOverride([displayName, ...getNamesOfHiddenFields(overrides, data)]);\n\n return {\n ...fieldConfig,\n overrides: [...fieldConfig.overrides, override],\n };\n }\n\n const displayNames = getDisplayNames(data, displayName);\n const override = createOverride(displayNames);\n\n return {\n ...fieldConfig,\n overrides: [...fieldConfig.overrides, override],\n };\n }\n\n const overridesCopy = Array.from(overrides);\n const [current] = overridesCopy.splice(currentIndex, 1) as SystemConfigOverrideRule[];\n\n if (mode === SeriesVisibilityChangeMode.ToggleSelection) {\n let existing = getExistingDisplayNames(current);\n const nameOfHiddenFields = getNamesOfHiddenFields(overridesCopy, data);\n\n if (nameOfHiddenFields.length > 0) {\n existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);\n }\n\n if (existing[0] === displayName && existing.length === 1) {\n return {\n ...fieldConfig,\n overrides: overridesCopy,\n };\n }\n\n const override = createOverride([displayName, ...nameOfHiddenFields]);\n\n return {\n ...fieldConfig,\n overrides: [...overridesCopy, override],\n };\n }\n\n const override = createExtendedOverride(current, displayName);\n\n if (allFieldsAreExcluded(override, data)) {\n return {\n ...fieldConfig,\n overrides: overridesCopy,\n };\n }\n\n return {\n ...fieldConfig,\n overrides: [...overridesCopy, override],\n };\n}\n\nfunction createOverride(\n names: string[],\n mode = ByNamesMatcherMode.exclude,\n property?: DynamicConfigValue\n): SystemConfigOverrideRule {\n property = property ?? {\n id: 'custom.hideFrom',\n value: {\n viz: true,\n legend: false,\n tooltip: false,\n },\n };\n\n return {\n __systemRef: displayOverrideRef,\n matcher: {\n id: FieldMatcherID.byNames,\n options: {\n mode: mode,\n names: names,\n prefix: mode === ByNamesMatcherMode.exclude ? 'All except:' : undefined,\n readOnly: true,\n },\n },\n properties: [\n {\n ...property,\n value: {\n viz: true,\n legend: false,\n tooltip: false,\n },\n },\n ],\n };\n}\n\nconst createExtendedOverride = (\n current: SystemConfigOverrideRule,\n displayName: string,\n mode = ByNamesMatcherMode.exclude\n): SystemConfigOverrideRule => {\n const property = current.properties.find((p) => p.id === 'custom.hideFrom');\n const existing = getExistingDisplayNames(current);\n const index = existing.findIndex((name) => name === displayName);\n\n if (index < 0) {\n existing.push(displayName);\n } else {\n existing.splice(index, 1);\n }\n\n return createOverride(existing, mode, property);\n};\n\nconst getExistingDisplayNames = (rule: SystemConfigOverrideRule): string[] => {\n const names = rule.matcher.options?.names;\n if (!Array.isArray(names)) {\n return [];\n }\n return [...names];\n};\n\nconst allFieldsAreExcluded = (override: SystemConfigOverrideRule, data: DataFrame[]): boolean => {\n return getExistingDisplayNames(override).length === getDisplayNames(data).length;\n};\n\nconst getDisplayNames = (data: DataFrame[], excludeName?: string): string[] => {\n const unique = new Set<string>();\n\n for (const frame of data) {\n for (const field of frame.fields) {\n if (field.type !== FieldType.number) {\n continue;\n }\n\n const name = getFieldDisplayName(field, frame, data);\n\n if (name === excludeName) {\n continue;\n }\n\n unique.add(name);\n }\n }\n\n return Array.from(unique);\n};\n\nconst getNamesOfHiddenFields = (overrides: ConfigOverrideRule[], data: DataFrame[]): string[] => {\n let names: string[] = [];\n\n for (const override of overrides) {\n const property = override.properties.find((p) => p.id === 'custom.hideFrom');\n\n if (property !== undefined && property.value?.legend === true) {\n const info = fieldMatchers.get(override.matcher.id);\n const matcher = info.get(override.matcher.options);\n\n for (const frame of data) {\n for (const field of frame.fields) {\n if (field.type !== FieldType.number) {\n continue;\n }\n\n const name = getFieldDisplayName(field, frame, data);\n\n if (matcher(field, frame, data)) {\n names.push(name);\n }\n }\n }\n }\n }\n\n return names;\n};\n"],"names":["override"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"seriesVisibilityConfigFactory.js","sources":["../../../../src/components/VizPanel/seriesVisibilityConfigFactory.ts"],"sourcesContent":["import {\n ByNamesMatcherMode,\n ConfigOverrideRule,\n DataFrame,\n DynamicConfigValue,\n FieldConfigSource,\n FieldMatcherID,\n fieldMatchers,\n FieldType,\n getFieldDisplayName,\n isSystemOverrideWithRef,\n SystemConfigOverrideRule,\n} from '@grafana/data';\nimport { SeriesVisibilityChangeMode } from '@grafana/ui';\n\nconst displayOverrideRef = 'hideSeriesFrom';\nconst isHideSeriesOverride = isSystemOverrideWithRef(displayOverrideRef);\n\nexport function seriesVisibilityConfigFactory(\n label: string,\n mode: SeriesVisibilityChangeMode,\n fieldConfig: FieldConfigSource,\n data: DataFrame[]\n): FieldConfigSource {\n const { overrides } = fieldConfig;\n\n const displayName = label;\n const currentIndex = overrides.findIndex(isHideSeriesOverride);\n\n if (currentIndex < 0) {\n if (mode === SeriesVisibilityChangeMode.ToggleSelection) {\n const override = createOverride([displayName, ...getNamesOfHiddenFields(overrides, data)]);\n\n return {\n ...fieldConfig,\n overrides: [...fieldConfig.overrides, override],\n };\n }\n\n const displayNames = getDisplayNames(data, displayName);\n const override = createOverride(displayNames);\n\n return {\n ...fieldConfig,\n overrides: [...fieldConfig.overrides, override],\n };\n }\n\n const overridesCopy = Array.from(overrides);\n const [current] = overridesCopy.splice(currentIndex, 1) as SystemConfigOverrideRule[];\n\n if (mode === SeriesVisibilityChangeMode.ToggleSelection) {\n let existing = getExistingDisplayNames(current);\n const nameOfHiddenFields = getNamesOfHiddenFields(overridesCopy, data);\n\n if (nameOfHiddenFields.length > 0) {\n existing = existing.filter((el) => nameOfHiddenFields.indexOf(el) < 0);\n }\n\n if (existing[0] === displayName && existing.length === 1) {\n return {\n ...fieldConfig,\n overrides: overridesCopy,\n };\n }\n\n const override = createOverride([displayName, ...nameOfHiddenFields]);\n\n return {\n ...fieldConfig,\n overrides: [...overridesCopy, override],\n };\n }\n\n const override = createExtendedOverride(current, displayName);\n\n if (allFieldsAreExcluded(override, data)) {\n return {\n ...fieldConfig,\n overrides: overridesCopy,\n };\n }\n\n return {\n ...fieldConfig,\n overrides: [...overridesCopy, override],\n };\n}\n\nfunction createOverride(\n names: string[],\n mode = ByNamesMatcherMode.exclude,\n property?: DynamicConfigValue\n): SystemConfigOverrideRule {\n property = property ?? {\n id: 'custom.hideFrom',\n value: {\n viz: true,\n legend: false,\n tooltip: false,\n },\n };\n\n return {\n __systemRef: displayOverrideRef,\n matcher: {\n id: FieldMatcherID.byNames,\n options: {\n mode: mode,\n names: names,\n prefix: mode === ByNamesMatcherMode.exclude ? 'All except:' : undefined,\n readOnly: true,\n },\n },\n properties: [\n {\n ...property,\n value: {\n viz: true,\n legend: false,\n tooltip: false,\n },\n },\n ],\n };\n}\n\nconst createExtendedOverride = (\n current: SystemConfigOverrideRule,\n displayName: string,\n mode = ByNamesMatcherMode.exclude\n): SystemConfigOverrideRule => {\n const property = current.properties.find((p) => p.id === 'custom.hideFrom');\n const existing = getExistingDisplayNames(current);\n const index = existing.findIndex((name) => name === displayName);\n\n if (index < 0) {\n existing.push(displayName);\n } else {\n existing.splice(index, 1);\n }\n\n return createOverride(existing, mode, property);\n};\n\nconst getExistingDisplayNames = (rule: SystemConfigOverrideRule): string[] => {\n const names = rule.matcher.options?.names;\n if (!Array.isArray(names)) {\n return [];\n }\n return [...names];\n};\n\nconst allFieldsAreExcluded = (override: SystemConfigOverrideRule, data: DataFrame[]): boolean => {\n return getExistingDisplayNames(override).length === getDisplayNames(data).length;\n};\n\nconst getDisplayNames = (data: DataFrame[], excludeName?: string): string[] => {\n const unique = new Set<string>();\n\n for (const frame of data) {\n for (const field of frame.fields) {\n if (field.type !== FieldType.number) {\n continue;\n }\n\n const name = getFieldDisplayName(field, frame, data);\n\n if (name === excludeName) {\n continue;\n }\n\n unique.add(name);\n }\n }\n\n return Array.from(unique);\n};\n\nconst getNamesOfHiddenFields = (overrides: ConfigOverrideRule[], data: DataFrame[]): string[] => {\n let names: string[] = [];\n\n for (const override of overrides) {\n const property = override.properties.find((p) => p.id === 'custom.hideFrom');\n\n if (property !== undefined && property.value?.legend === true) {\n const info = fieldMatchers.get(override.matcher.id);\n const matcher = info.get(override.matcher.options);\n\n for (const frame of data) {\n for (const field of frame.fields) {\n if (field.type !== FieldType.number) {\n continue;\n }\n\n const name = getFieldDisplayName(field, frame, data);\n\n if (matcher(field, frame, data)) {\n names.push(name);\n }\n }\n }\n }\n }\n\n return names;\n};\n"],"names":["override"],"mappings":"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"}
|
|
@@ -4,32 +4,17 @@ import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
|
|
|
4
4
|
import { config } from '@grafana/runtime';
|
|
5
5
|
import { LazyLoader } from '../LazyLoader.js';
|
|
6
6
|
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
7
|
class SceneCSSGridLayout extends SceneObjectBase {
|
|
24
8
|
constructor(state) {
|
|
25
9
|
var _a, _b;
|
|
26
|
-
super(
|
|
10
|
+
super({
|
|
27
11
|
rowGap: 1,
|
|
28
12
|
columnGap: 1,
|
|
29
13
|
templateColumns: "repeat(auto-fit, minmax(400px, 1fr))",
|
|
30
14
|
autoRows: (_a = state.autoRows) != null ? _a : `320px`,
|
|
31
|
-
children: (_b = state.children) != null ? _b : []
|
|
32
|
-
|
|
15
|
+
children: (_b = state.children) != null ? _b : [],
|
|
16
|
+
...state
|
|
17
|
+
});
|
|
33
18
|
}
|
|
34
19
|
isDraggable() {
|
|
35
20
|
return false;
|
|
@@ -42,25 +27,12 @@ function SceneCSSGridLayoutRenderer({ model }) {
|
|
|
42
27
|
if (isHidden) {
|
|
43
28
|
return null;
|
|
44
29
|
}
|
|
45
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
46
|
-
className: style
|
|
47
|
-
}, children.map((item) => {
|
|
30
|
+
return /* @__PURE__ */ React.createElement("div", { className: style }, children.map((item) => {
|
|
48
31
|
const Component = item.Component;
|
|
49
32
|
if (isLazy) {
|
|
50
|
-
return /* @__PURE__ */ React.createElement(LazyLoader, {
|
|
51
|
-
key: item.state.key,
|
|
52
|
-
className: style
|
|
53
|
-
}, /* @__PURE__ */ React.createElement(Component, {
|
|
54
|
-
key: item.state.key,
|
|
55
|
-
model: item,
|
|
56
|
-
parentState: model.state
|
|
57
|
-
}));
|
|
33
|
+
return /* @__PURE__ */ React.createElement(LazyLoader, { key: item.state.key, className: style }, /* @__PURE__ */ React.createElement(Component, { key: item.state.key, model: item, parentState: model.state }));
|
|
58
34
|
}
|
|
59
|
-
return /* @__PURE__ */ React.createElement(Component, {
|
|
60
|
-
key: item.state.key,
|
|
61
|
-
model: item,
|
|
62
|
-
parentState: model.state
|
|
63
|
-
});
|
|
35
|
+
return /* @__PURE__ */ React.createElement(Component, { key: item.state.key, model: item, parentState: model.state });
|
|
64
36
|
}));
|
|
65
37
|
}
|
|
66
38
|
class SceneCSSGridItem extends SceneObjectBase {
|
|
@@ -75,11 +47,7 @@ function SceneCSSGridItemRenderer({ model, parentState }) {
|
|
|
75
47
|
if (!body || isHidden) {
|
|
76
48
|
return null;
|
|
77
49
|
}
|
|
78
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
79
|
-
className: style
|
|
80
|
-
}, /* @__PURE__ */ React.createElement(body.Component, {
|
|
81
|
-
model: body
|
|
82
|
-
}));
|
|
50
|
+
return /* @__PURE__ */ React.createElement("div", { className: style }, /* @__PURE__ */ React.createElement(body.Component, { model: body }));
|
|
83
51
|
}
|
|
84
52
|
function useLayoutStyle(state) {
|
|
85
53
|
return useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n children: Array<SceneCSSGridItem | SceneObject>;\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * For media query for sceens smaller than md breakpoint\n */\n md?: SceneCSSGridLayoutOptions;\n /** True when the items should be lazy loaded */\n isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n /**\n * Useful for setting a height on items without specifying how many rows there will be.\n * Defaults to 320px\n */\n autoRows?: CSSProperties['gridAutoRows'];\n /**\n * This overrides the autoRows with a specific row template.\n */\n templateRows?: CSSProperties['gridTemplateRows'];\n /**\n * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n * and dynamic max width split equally among columns.\n */\n templateColumns: CSSProperties['gridTemplateColumns'];\n /** In Grafana design system grid units (8px) */\n rowGap: number;\n /** In Grafana design system grid units (8px) */\n columnGap: number;\n justifyItems?: CSSProperties['justifyItems'];\n alignItems?: CSSProperties['alignItems'];\n justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n public static Component = SceneCSSGridLayoutRenderer;\n\n public constructor(state: Partial<SceneCSSGridLayoutState>) {\n super({\n rowGap: 1,\n columnGap: 1,\n templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n autoRows: state.autoRows ?? `320px`,\n children: state.children ?? [],\n ...state,\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n const { children, isHidden, isLazy } = model.useState();\n const style = useLayoutStyle(model.state);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n\n if (isLazy) {\n return (\n <LazyLoader key={item.state.key!} className={style}>\n <Component key={item.state.key} model={item} parentState={model.state} />\n </LazyLoader>\n );\n }\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneCSSGridItemPlacement {\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * Useful for making content span across multiple rows or columns\n */\n gridColumn?: CSSProperties['gridColumn'];\n gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n if (!parentState) {\n throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useItemStyle(model.state);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n return useMemo(() => {\n const {} = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const style: CSSObject = {};\n const theme = config.theme2;\n\n style.display = 'grid';\n style.gridTemplateColumns = state.templateColumns;\n style.gridTemplateRows = state.templateRows || 'unset';\n style.gridAutoRows = state.autoRows || 'unset';\n style.rowGap = theme.spacing(state.rowGap ?? 1);\n style.columnGap = theme.spacing(state.columnGap ?? 1);\n style.justifyItems = state.justifyItems || 'unset';\n style.alignItems = state.alignItems || 'unset';\n style.justifyContent = state.justifyContent || 'unset';\n style.flexGrow = 1;\n\n if (state.md) {\n style[theme.breakpoints.down('md')] = {\n gridTemplateRows: state.md?.templateRows,\n gridTemplateColumns: state.md?.templateColumns,\n rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n justifyItems: state.md?.justifyItems,\n alignItems: state.md?.alignItems,\n justifyContent: state.md?.justifyContent,\n };\n }\n\n return css(style);\n }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n return useMemo(() => {\n const style: CSSObject = {};\n\n style.gridColumn = state.gridColumn || 'unset';\n style.gridRow = state.gridRow || 'unset';\n // Needed for VizPanel\n style.position = 'relative';\n\n return css(style);\n }, [state]);\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n children: Array<SceneCSSGridItem | SceneObject>;\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * For media query for sceens smaller than md breakpoint\n */\n md?: SceneCSSGridLayoutOptions;\n /** True when the items should be lazy loaded */\n isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n /**\n * Useful for setting a height on items without specifying how many rows there will be.\n * Defaults to 320px\n */\n autoRows?: CSSProperties['gridAutoRows'];\n /**\n * This overrides the autoRows with a specific row template.\n */\n templateRows?: CSSProperties['gridTemplateRows'];\n /**\n * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n * and dynamic max width split equally among columns.\n */\n templateColumns: CSSProperties['gridTemplateColumns'];\n /** In Grafana design system grid units (8px) */\n rowGap: number;\n /** In Grafana design system grid units (8px) */\n columnGap: number;\n justifyItems?: CSSProperties['justifyItems'];\n alignItems?: CSSProperties['alignItems'];\n justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n public static Component = SceneCSSGridLayoutRenderer;\n\n public constructor(state: Partial<SceneCSSGridLayoutState>) {\n super({\n rowGap: 1,\n columnGap: 1,\n templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n autoRows: state.autoRows ?? `320px`,\n children: state.children ?? [],\n ...state,\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n const { children, isHidden, isLazy } = model.useState();\n const style = useLayoutStyle(model.state);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n\n if (isLazy) {\n return (\n <LazyLoader key={item.state.key!} className={style}>\n <Component key={item.state.key} model={item} parentState={model.state} />\n </LazyLoader>\n );\n }\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneCSSGridItemPlacement {\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * Useful for making content span across multiple rows or columns\n */\n gridColumn?: CSSProperties['gridColumn'];\n gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n if (!parentState) {\n throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useItemStyle(model.state);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n return useMemo(() => {\n const {} = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const style: CSSObject = {};\n const theme = config.theme2;\n\n style.display = 'grid';\n style.gridTemplateColumns = state.templateColumns;\n style.gridTemplateRows = state.templateRows || 'unset';\n style.gridAutoRows = state.autoRows || 'unset';\n style.rowGap = theme.spacing(state.rowGap ?? 1);\n style.columnGap = theme.spacing(state.columnGap ?? 1);\n style.justifyItems = state.justifyItems || 'unset';\n style.alignItems = state.alignItems || 'unset';\n style.justifyContent = state.justifyContent || 'unset';\n style.flexGrow = 1;\n\n if (state.md) {\n style[theme.breakpoints.down('md')] = {\n gridTemplateRows: state.md?.templateRows,\n gridTemplateColumns: state.md?.templateColumns,\n rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n justifyItems: state.md?.justifyItems,\n alignItems: state.md?.alignItems,\n justifyContent: state.md?.justifyContent,\n };\n }\n\n return css(style);\n }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n return useMemo(() => {\n const style: CSSObject = {};\n\n style.gridColumn = state.gridColumn || 'unset';\n style.gridRow = state.gridRow || 'unset';\n // Needed for VizPanel\n style.position = 'relative';\n\n return css(style);\n }, [state]);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -4,34 +4,6 @@ import { uniqueId } from 'lodash';
|
|
|
4
4
|
import { css } from '@emotion/css';
|
|
5
5
|
import { useStyles2 } from '@grafana/ui';
|
|
6
6
|
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __objRest = (source, exclude) => {
|
|
24
|
-
var target = {};
|
|
25
|
-
for (var prop in source)
|
|
26
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
-
target[prop] = source[prop];
|
|
28
|
-
if (source != null && __getOwnPropSymbols)
|
|
29
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
-
target[prop] = source[prop];
|
|
32
|
-
}
|
|
33
|
-
return target;
|
|
34
|
-
};
|
|
35
7
|
function useUniqueId() {
|
|
36
8
|
var _a;
|
|
37
9
|
const idRefLazy = useRef(void 0);
|
|
@@ -39,8 +11,7 @@ function useUniqueId() {
|
|
|
39
11
|
return idRefLazy.current;
|
|
40
12
|
}
|
|
41
13
|
const LazyLoader = React.forwardRef(
|
|
42
|
-
(
|
|
43
|
-
var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange", "className"]);
|
|
14
|
+
({ children, onLoad, onChange, className, ...rest }, ref) => {
|
|
44
15
|
const id = useUniqueId();
|
|
45
16
|
const { hideEmpty } = useStyles2(getStyles);
|
|
46
17
|
const [loaded, setLoaded] = useState(false);
|
|
@@ -68,11 +39,7 @@ const LazyLoader = React.forwardRef(
|
|
|
68
39
|
}
|
|
69
40
|
};
|
|
70
41
|
});
|
|
71
|
-
return /* @__PURE__ */ React.createElement("div",
|
|
72
|
-
id,
|
|
73
|
-
ref: innerRef,
|
|
74
|
-
className: `${hideEmpty} ${className}`
|
|
75
|
-
}, rest), !loaded && "\xA0", loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
42
|
+
return /* @__PURE__ */ React.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded && "\xA0", loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
76
43
|
}
|
|
77
44
|
);
|
|
78
45
|
function getStyles() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\nimport { css } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\n\nexport function useUniqueId(): string {\n const idRefLazy = useRef<string | undefined>(undefined);\n idRefLazy.current ??= uniqueId();\n return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n key: string;\n onLoad?: () => void;\n onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n ({ children, onLoad, onChange, className, ...rest }, ref) => {\n const id = useUniqueId();\n const { hideEmpty } = useStyles2(getStyles);\n const [loaded, setLoaded] = useState(false);\n const [isInView, setIsInView] = useState(false);\n const innerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => innerRef.current!);\n\n useEffectOnce(() => {\n LazyLoader.addCallback(id, (entry) => {\n if (!loaded && entry.isIntersecting) {\n setLoaded(true);\n onLoad?.();\n }\n\n setIsInView(entry.isIntersecting);\n onChange?.(entry.isIntersecting);\n });\n\n const wrapperEl = innerRef.current;\n\n if (wrapperEl) {\n LazyLoader.observer.observe(wrapperEl);\n }\n\n return () => {\n wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n delete LazyLoader.callbacks[id];\n if (Object.keys(LazyLoader.callbacks).length === 0) {\n LazyLoader.observer.disconnect();\n }\n };\n });\n\n // since we will hide empty lazyloaded divs, we need to include a\n // non-breaking space while the loader has not been loaded. after it has\n // been loaded, we can remove the non-breaking space and show the children.\n // If the children render empty, the whole loader will be hidden by css.\n return (\n <div id={id} ref={innerRef} className={`${hideEmpty} ${className}`} {...rest}>\n {!loaded && '\\u00A0'}\n {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n </div>\n );\n }\n) as LazyLoaderType;\n\nfunction getStyles() {\n return {\n hideEmpty: css({\n '&:empty': {\n display: 'none',\n },\n }),\n };\n}\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (typeof LazyLoader.callbacks[entry.target.id] === 'function') {\n LazyLoader.callbacks[entry.target.id](entry);\n }\n }\n },\n { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\nimport { css } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\n\nexport function useUniqueId(): string {\n const idRefLazy = useRef<string | undefined>(undefined);\n idRefLazy.current ??= uniqueId();\n return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n key: string;\n onLoad?: () => void;\n onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n ({ children, onLoad, onChange, className, ...rest }, ref) => {\n const id = useUniqueId();\n const { hideEmpty } = useStyles2(getStyles);\n const [loaded, setLoaded] = useState(false);\n const [isInView, setIsInView] = useState(false);\n const innerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => innerRef.current!);\n\n useEffectOnce(() => {\n LazyLoader.addCallback(id, (entry) => {\n if (!loaded && entry.isIntersecting) {\n setLoaded(true);\n onLoad?.();\n }\n\n setIsInView(entry.isIntersecting);\n onChange?.(entry.isIntersecting);\n });\n\n const wrapperEl = innerRef.current;\n\n if (wrapperEl) {\n LazyLoader.observer.observe(wrapperEl);\n }\n\n return () => {\n wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n delete LazyLoader.callbacks[id];\n if (Object.keys(LazyLoader.callbacks).length === 0) {\n LazyLoader.observer.disconnect();\n }\n };\n });\n\n // since we will hide empty lazyloaded divs, we need to include a\n // non-breaking space while the loader has not been loaded. after it has\n // been loaded, we can remove the non-breaking space and show the children.\n // If the children render empty, the whole loader will be hidden by css.\n return (\n <div id={id} ref={innerRef} className={`${hideEmpty} ${className}`} {...rest}>\n {!loaded && '\\u00A0'}\n {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n </div>\n );\n }\n) as LazyLoaderType;\n\nfunction getStyles() {\n return {\n hideEmpty: css({\n '&:empty': {\n display: 'none',\n },\n }),\n };\n}\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (typeof LazyLoader.callbacks[entry.target.id] === 'function') {\n LazyLoader.callbacks[entry.target.id](entry);\n }\n }\n },\n { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -20,15 +20,9 @@ function SceneFlexLayoutRenderer({ model, parentState }) {
|
|
|
20
20
|
if (isHidden) {
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
23
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
24
|
-
className: style
|
|
25
|
-
}, children.map((item) => {
|
|
23
|
+
return /* @__PURE__ */ React.createElement("div", { className: style }, children.map((item) => {
|
|
26
24
|
const Component = item.Component;
|
|
27
|
-
return /* @__PURE__ */ React.createElement(Component, {
|
|
28
|
-
key: item.state.key,
|
|
29
|
-
model: item,
|
|
30
|
-
parentState: model.state
|
|
31
|
-
});
|
|
25
|
+
return /* @__PURE__ */ React.createElement(Component, { key: item.state.key, model: item, parentState: model.state });
|
|
32
26
|
}));
|
|
33
27
|
}
|
|
34
28
|
class SceneFlexItem extends SceneObjectBase {
|
|
@@ -43,11 +37,7 @@ function SceneFlexItemRenderer({ model, parentState }) {
|
|
|
43
37
|
if (!body || isHidden) {
|
|
44
38
|
return null;
|
|
45
39
|
}
|
|
46
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
47
|
-
className: style
|
|
48
|
-
}, /* @__PURE__ */ React.createElement(body.Component, {
|
|
49
|
-
model: body
|
|
50
|
-
}));
|
|
40
|
+
return /* @__PURE__ */ React.createElement("div", { className: style }, /* @__PURE__ */ React.createElement(body.Component, { model: body }));
|
|
51
41
|
}
|
|
52
42
|
function applyItemStyles(style, state, parentState) {
|
|
53
43
|
var _a, _b, _c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport { config } from '@grafana/runtime';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../core/types';\n\nexport interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectState {}\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {}\n\ninterface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n children: SceneFlexItemLike[];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n public static Component = SceneFlexLayoutRenderer;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexLayout>) {\n const { children, isHidden } = model.useState();\n const style = useLayoutStyle(model.state, parentState);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneFlexItemPlacement {\n wrap?: CSSProperties['flexWrap'];\n direction?: CSSProperties['flexDirection'];\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n minWidth?: CSSProperties['minWidth'];\n minHeight?: CSSProperties['minHeight'];\n maxWidth?: CSSProperties['maxWidth'];\n maxHeight?: CSSProperties['maxHeight'];\n xSizing?: 'fill' | 'content';\n ySizing?: 'fill' | 'content';\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n\n /**\n * Set direction for smaller screens. This defaults to column.\n * This equals media query theme.breakpoints.down('md')\n */\n md?: SceneFlexItemPlacement;\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneFlexItemPlacement;\n}\n\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexItem>) {\n if (!parentState) {\n throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useLayoutItemStyle(model.state, parentState);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\nfunction applyItemStyles(style: CSSObject, state: SceneFlexItemPlacement, parentState: SceneFlexItemPlacement) {\n const parentDirection = parentState.direction ?? 'row';\n const { xSizing = 'fill', ySizing = 'fill' } = state;\n\n style.display = 'flex';\n style.position = 'relative';\n style.flexDirection = parentDirection;\n\n if (parentDirection === 'column') {\n if (state.height) {\n style.height = state.height;\n } else {\n style.flexGrow = ySizing === 'fill' ? 1 : 0;\n }\n\n if (state.width) {\n style.width = state.width;\n } else {\n style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n }\n } else {\n if (state.height) {\n style.height = state.height;\n } else {\n style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n }\n\n if (state.width) {\n style.width = state.width;\n } else {\n style.flexGrow = xSizing === 'fill' ? 1 : 0;\n }\n }\n\n style.minWidth = state.minWidth;\n style.maxWidth = state.maxWidth;\n style.maxHeight = state.maxHeight;\n\n // For responsive layouts to work we default use the minHeight or height of the parent\n style.minHeight = state.minHeight ?? parentState.minHeight;\n style.height = state.height ?? parentState.height;\n\n return style;\n}\n\nfunction useLayoutItemStyle(state: SceneFlexItemState, parentState: SceneFlexItemPlacement) {\n return useMemo(() => {\n const theme = config.theme2;\n const style = applyItemStyles({}, state, parentState);\n\n // Unset maxWidth for small screens by default\n style[theme.breakpoints.down('md')] = {\n maxWidth: state.md?.maxWidth ?? 'unset',\n maxHeight: state.md?.maxHeight ?? 'unset',\n height: state.md?.height ?? parentState.md?.height,\n width: state.md?.width ?? parentState.md?.width,\n };\n\n return css(style);\n }, [state, parentState]);\n}\n\nfunction useLayoutStyle(state: SceneFlexLayoutState, parentState?: SceneFlexItemPlacement) {\n return useMemo(() => {\n const { direction = 'row', wrap } = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const theme = config.theme2;\n\n const style: CSSObject = {};\n\n if (parentState) {\n applyItemStyles(style, state, parentState);\n } else {\n style.display = 'flex';\n style.flexGrow = 1;\n style.minWidth = state.minWidth;\n style.minHeight = state.minHeight;\n }\n\n style.flexDirection = direction;\n style.gap = '8px';\n style.flexWrap = wrap || 'nowrap';\n style.alignContent = 'baseline';\n style.minWidth = style.minWidth || 0;\n style.minHeight = style.minHeight || 0;\n\n style[theme.breakpoints.down('md')] = {\n flexDirection: state.md?.direction ?? 'column',\n maxWidth: state.md?.maxWidth ?? 'unset',\n maxHeight: state.md?.maxHeight ?? 'unset',\n height: state.md?.height ?? 'unset',\n width: state.md?.width ?? 'unset',\n };\n\n return css(style);\n }, [parentState, state]);\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport { config } from '@grafana/runtime';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../core/types';\n\nexport interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectState {}\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {}\n\ninterface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n children: SceneFlexItemLike[];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n public static Component = SceneFlexLayoutRenderer;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexLayout>) {\n const { children, isHidden } = model.useState();\n const style = useLayoutStyle(model.state, parentState);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneFlexItemPlacement {\n wrap?: CSSProperties['flexWrap'];\n direction?: CSSProperties['flexDirection'];\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n minWidth?: CSSProperties['minWidth'];\n minHeight?: CSSProperties['minHeight'];\n maxWidth?: CSSProperties['maxWidth'];\n maxHeight?: CSSProperties['maxHeight'];\n xSizing?: 'fill' | 'content';\n ySizing?: 'fill' | 'content';\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n\n /**\n * Set direction for smaller screens. This defaults to column.\n * This equals media query theme.breakpoints.down('md')\n */\n md?: SceneFlexItemPlacement;\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneFlexItemPlacement;\n}\n\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexItem>) {\n if (!parentState) {\n throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useLayoutItemStyle(model.state, parentState);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\nfunction applyItemStyles(style: CSSObject, state: SceneFlexItemPlacement, parentState: SceneFlexItemPlacement) {\n const parentDirection = parentState.direction ?? 'row';\n const { xSizing = 'fill', ySizing = 'fill' } = state;\n\n style.display = 'flex';\n style.position = 'relative';\n style.flexDirection = parentDirection;\n\n if (parentDirection === 'column') {\n if (state.height) {\n style.height = state.height;\n } else {\n style.flexGrow = ySizing === 'fill' ? 1 : 0;\n }\n\n if (state.width) {\n style.width = state.width;\n } else {\n style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n }\n } else {\n if (state.height) {\n style.height = state.height;\n } else {\n style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n }\n\n if (state.width) {\n style.width = state.width;\n } else {\n style.flexGrow = xSizing === 'fill' ? 1 : 0;\n }\n }\n\n style.minWidth = state.minWidth;\n style.maxWidth = state.maxWidth;\n style.maxHeight = state.maxHeight;\n\n // For responsive layouts to work we default use the minHeight or height of the parent\n style.minHeight = state.minHeight ?? parentState.minHeight;\n style.height = state.height ?? parentState.height;\n\n return style;\n}\n\nfunction useLayoutItemStyle(state: SceneFlexItemState, parentState: SceneFlexItemPlacement) {\n return useMemo(() => {\n const theme = config.theme2;\n const style = applyItemStyles({}, state, parentState);\n\n // Unset maxWidth for small screens by default\n style[theme.breakpoints.down('md')] = {\n maxWidth: state.md?.maxWidth ?? 'unset',\n maxHeight: state.md?.maxHeight ?? 'unset',\n height: state.md?.height ?? parentState.md?.height,\n width: state.md?.width ?? parentState.md?.width,\n };\n\n return css(style);\n }, [state, parentState]);\n}\n\nfunction useLayoutStyle(state: SceneFlexLayoutState, parentState?: SceneFlexItemPlacement) {\n return useMemo(() => {\n const { direction = 'row', wrap } = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const theme = config.theme2;\n\n const style: CSSObject = {};\n\n if (parentState) {\n applyItemStyles(style, state, parentState);\n } else {\n style.display = 'flex';\n style.flexGrow = 1;\n style.minWidth = state.minWidth;\n style.minHeight = state.minHeight;\n }\n\n style.flexDirection = direction;\n style.gap = '8px';\n style.flexWrap = wrap || 'nowrap';\n style.alignContent = 'baseline';\n style.minWidth = style.minWidth || 0;\n style.minHeight = style.minHeight || 0;\n\n style[theme.breakpoints.down('md')] = {\n flexDirection: state.md?.direction ?? 'column',\n maxWidth: state.md?.maxWidth ?? 'unset',\n maxHeight: state.md?.maxHeight ?? 'unset',\n height: state.md?.height ?? 'unset',\n width: state.md?.width ?? 'unset',\n };\n\n return css(style);\n }, [parentState, state]);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -15,9 +15,7 @@ function SceneGridItemRenderer({ model }) {
|
|
|
15
15
|
if (!body) {
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
|
-
return /* @__PURE__ */ React.createElement(body.Component, {
|
|
19
|
-
model: body
|
|
20
|
-
});
|
|
18
|
+
return /* @__PURE__ */ React.createElement(body.Component, { model: body });
|
|
21
19
|
}
|
|
22
20
|
function isSceneGridRow(child) {
|
|
23
21
|
return child instanceof SceneGridRow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneGridItem.js","sources":["../../../../../src/components/layout/grid/SceneGridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneObject, SceneComponentProps } from '../../../core/types';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridRow } from './SceneGridRow';\nimport { SceneGridItemStateLike, SceneGridItemLike } from './types';\n\ninterface SceneGridItemState extends SceneGridItemStateLike {\n body: SceneObject | undefined;\n}\nexport class SceneGridItem extends SceneObjectBase<SceneGridItemState> implements SceneGridItemLike {\n static Component = SceneGridItemRenderer;\n}\n\nfunction SceneGridItemRenderer({ model }: SceneComponentProps<SceneGridItem>) {\n const { body } = model.useState();\n const parent = model.parent;\n\n if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {\n throw new Error('SceneGridItem must be a child of SceneGridLayout or SceneGridRow');\n }\n\n if (!body) {\n return null;\n }\n\n return <body.Component model={body} />;\n}\n\nexport function isSceneGridRow(child: SceneObject): child is SceneGridRow {\n return child instanceof SceneGridRow;\n}\n\nfunction isSceneGridLayout(child: SceneObject): child is SceneGridLayout {\n return child instanceof SceneGridLayout;\n}\n"],"names":[],"mappings":";;;;;AAUO,MAAM,sBAAsB,eAAiE,CAAA;AAEpG
|
|
1
|
+
{"version":3,"file":"SceneGridItem.js","sources":["../../../../../src/components/layout/grid/SceneGridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneObject, SceneComponentProps } from '../../../core/types';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridRow } from './SceneGridRow';\nimport { SceneGridItemStateLike, SceneGridItemLike } from './types';\n\ninterface SceneGridItemState extends SceneGridItemStateLike {\n body: SceneObject | undefined;\n}\nexport class SceneGridItem extends SceneObjectBase<SceneGridItemState> implements SceneGridItemLike {\n static Component = SceneGridItemRenderer;\n}\n\nfunction SceneGridItemRenderer({ model }: SceneComponentProps<SceneGridItem>) {\n const { body } = model.useState();\n const parent = model.parent;\n\n if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {\n throw new Error('SceneGridItem must be a child of SceneGridLayout or SceneGridRow');\n }\n\n if (!body) {\n return null;\n }\n\n return <body.Component model={body} />;\n}\n\nexport function isSceneGridRow(child: SceneObject): child is SceneGridRow {\n return child instanceof SceneGridRow;\n}\n\nfunction isSceneGridLayout(child: SceneObject): child is SceneGridLayout {\n return child instanceof SceneGridLayout;\n}\n"],"names":[],"mappings":";;;;;AAUO,MAAM,sBAAsB,eAAiE,CAAA;AAEpG;AAFa,aAAA,CACJ,SAAY,GAAA,qBAAA;AAGrB,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA;AAChC,EAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AAErB,EAAI,IAAA,MAAA,IAAU,CAAC,iBAAkB,CAAA,MAAM,KAAK,CAAC,cAAA,CAAe,MAAM,CAAG,EAAA;AACnE,IAAM,MAAA,IAAI,MAAM,kEAAkE,CAAA;AAAA;AAGpF,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,OAAO,IAAM,EAAA,CAAA;AACtC;AAEO,SAAS,eAAe,KAA2C,EAAA;AACxE,EAAA,OAAO,KAAiB,YAAA,YAAA;AAC1B;AAEA,SAAS,kBAAkB,KAA8C,EAAA;AACvE,EAAA,OAAO,KAAiB,YAAA,eAAA;AAC1B;;;;"}
|
|
@@ -6,30 +6,12 @@ import { SceneGridRow } from './SceneGridRow.js';
|
|
|
6
6
|
import { SceneGridLayoutDragStartEvent } from './types.js';
|
|
7
7
|
import { fitPanelsInHeight } from './utils.js';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
var __defProps = Object.defineProperties;
|
|
11
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
12
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
13
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
14
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
15
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
16
|
-
var __spreadValues = (a, b) => {
|
|
17
|
-
for (var prop in b || (b = {}))
|
|
18
|
-
if (__hasOwnProp.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
if (__getOwnPropSymbols)
|
|
21
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
22
|
-
if (__propIsEnum.call(b, prop))
|
|
23
|
-
__defNormalProp(a, prop, b[prop]);
|
|
24
|
-
}
|
|
25
|
-
return a;
|
|
26
|
-
};
|
|
27
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
28
|
-
const _SceneGridLayout = class extends SceneObjectBase {
|
|
9
|
+
const _SceneGridLayout = class _SceneGridLayout extends SceneObjectBase {
|
|
29
10
|
constructor(state) {
|
|
30
|
-
super(
|
|
11
|
+
super({
|
|
12
|
+
...state,
|
|
31
13
|
children: sortChildrenByPosition(state.children)
|
|
32
|
-
})
|
|
14
|
+
});
|
|
33
15
|
this._skipOnLayoutChange = false;
|
|
34
16
|
this._oldLayout = [];
|
|
35
17
|
this._loadOldLayout = false;
|
|
@@ -51,7 +33,9 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
51
33
|
height: item.h
|
|
52
34
|
};
|
|
53
35
|
if (!isItemSizeEqual(child.state, nextSize)) {
|
|
54
|
-
child.setState(
|
|
36
|
+
child.setState({
|
|
37
|
+
...nextSize
|
|
38
|
+
});
|
|
55
39
|
}
|
|
56
40
|
}
|
|
57
41
|
this.setState({ children: sortChildrenByPosition(this.state.children) });
|
|
@@ -96,6 +80,9 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
96
80
|
this._skipOnLayoutChange = true;
|
|
97
81
|
};
|
|
98
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* SceneLayout interface. Used for example by VizPanelRenderer
|
|
85
|
+
*/
|
|
99
86
|
isDraggable() {
|
|
100
87
|
var _a;
|
|
101
88
|
return (_a = this.state.isDraggable) != null ? _a : false;
|
|
@@ -132,7 +119,7 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
132
119
|
const yDiff = firstPanelYPos - (rowY + 1);
|
|
133
120
|
let yMax = rowY;
|
|
134
121
|
for (const panel of rowChildren) {
|
|
135
|
-
const newSize =
|
|
122
|
+
const newSize = { ...panel.state };
|
|
136
123
|
newSize.y = (_b = newSize.y) != null ? _b : rowY;
|
|
137
124
|
newSize.y -= yDiff;
|
|
138
125
|
if (newSize.y !== panel.state.y) {
|
|
@@ -159,6 +146,9 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
159
146
|
ignoreLayoutChange(shouldIgnore) {
|
|
160
147
|
this._skipOnLayoutChange = shouldIgnore;
|
|
161
148
|
}
|
|
149
|
+
/**
|
|
150
|
+
* Will also scan row children and return child of the row
|
|
151
|
+
*/
|
|
162
152
|
getSceneLayoutChild(key) {
|
|
163
153
|
for (const child of this.state.children) {
|
|
164
154
|
if (child.state.key === key) {
|
|
@@ -179,6 +169,10 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
179
169
|
y: child.state.y + amount
|
|
180
170
|
});
|
|
181
171
|
}
|
|
172
|
+
/**
|
|
173
|
+
* We assume the layout array is sorted according to y pos, and walk upwards until we find a row.
|
|
174
|
+
* If it is collapsed there is no row to add it to. The default is then to return the SceneGridLayout itself
|
|
175
|
+
*/
|
|
182
176
|
findGridItemSceneParent(layout, startAt) {
|
|
183
177
|
for (let i = startAt; i >= 0; i--) {
|
|
184
178
|
const gridItem = layout[i];
|
|
@@ -192,6 +186,9 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
192
186
|
}
|
|
193
187
|
return this;
|
|
194
188
|
}
|
|
189
|
+
/**
|
|
190
|
+
* Helper func to check if we are dropping a row in between panels of another row
|
|
191
|
+
*/
|
|
195
192
|
isRowDropValid(gridLayout, updatedItem, indexOfUpdatedItem) {
|
|
196
193
|
if (gridLayout[gridLayout.length - 1].i === updatedItem.i) {
|
|
197
194
|
return true;
|
|
@@ -204,6 +201,9 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
204
201
|
}
|
|
205
202
|
return false;
|
|
206
203
|
}
|
|
204
|
+
/**
|
|
205
|
+
* This likely needs a slightly different approach. Where we clone or deactivate or and re-activate the moved child
|
|
206
|
+
*/
|
|
207
207
|
moveChildTo(child, target) {
|
|
208
208
|
const currentParent = child.parent;
|
|
209
209
|
let rootChildren = this.state.children;
|
|
@@ -262,14 +262,14 @@ const _SceneGridLayout = class extends SceneObjectBase {
|
|
|
262
262
|
}
|
|
263
263
|
if (width < 768) {
|
|
264
264
|
this._skipOnLayoutChange = true;
|
|
265
|
-
return cells.map((cell) =>
|
|
265
|
+
return cells.map((cell) => ({ ...cell, w: 24 }));
|
|
266
266
|
}
|
|
267
267
|
this._skipOnLayoutChange = false;
|
|
268
268
|
return cells;
|
|
269
269
|
}
|
|
270
270
|
};
|
|
271
|
+
_SceneGridLayout.Component = SceneGridLayoutRenderer;
|
|
271
272
|
let SceneGridLayout = _SceneGridLayout;
|
|
272
|
-
SceneGridLayout.Component = SceneGridLayoutRenderer;
|
|
273
273
|
function isItemSizeEqual(a, b) {
|
|
274
274
|
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
275
275
|
}
|