@ytsaurus/ui 0.0.4 → 0.2.0

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.js

@@ -0,0 +1,77 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { Icon, Text, List, Loader } from '@gravity-ui/uikit';
+import { useQueryList } from '../../hooks/QueriesList';
+import { useQueryNavigation } from '../../hooks/Query';
+import tutorialIcon from '../../../../../../img/svg/icons/learn.svg';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var itemCn = cn('query-tutorial-item');
+var block = cn('queries-tutorial-list');
+function renderItem(item) {
+  var _item$annotations, _item$annotations2;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: itemCn('icon'),
+      data: tutorialIcon
+    }), /*#__PURE__*/_jsx(Text, {
+      className: itemCn('text'),
+      ellipsis: true,
+      title: item === null || item === void 0 ? void 0 : (_item$annotations = item.annotations) === null || _item$annotations === void 0 ? void 0 : _item$annotations.title,
+      children: (item === null || item === void 0 ? void 0 : (_item$annotations2 = item.annotations) === null || _item$annotations2 === void 0 ? void 0 : _item$annotations2.title) || 'No name'
+    })]
+  });
+}
+export function QueriesTutorialList(_ref) {
+  var className = _ref.className;
+  var _useQueryList = useQueryList(),
+    _useQueryList2 = _slicedToArray(_useQueryList, 2),
+    items = _useQueryList2[0],
+    isLoading = _useQueryList2[1];
+  var _useQueryNavigation = useQueryNavigation(),
+    _useQueryNavigation2 = _slicedToArray(_useQueryNavigation, 2),
+    selectedId = _useQueryNavigation2[0],
+    goToQuery = _useQueryNavigation2[1];
+  var selectedIndex = useMemo(function () {
+    return items.findIndex(function (query) {
+      return query.id === selectedId;
+    });
+  }, [selectedId, items]);
+  var tutorialFilter = useMemo(function () {
+    return function (filter) {
+      return function (item) {
+        var _item$annotations3, _item$annotations3$ti;
+        return (item === null || item === void 0 ? void 0 : (_item$annotations3 = item.annotations) === null || _item$annotations3 === void 0 ? void 0 : (_item$annotations3$ti = _item$annotations3.title) === null || _item$annotations3$ti === void 0 ? void 0 : _item$annotations3$ti.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) || false;
+      };
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(List, {
+      className: block('list', {
+        loading: isLoading
+      }),
+      filterable: true,
+      filterClassName: block('filter'),
+      filterPlaceholder: 'Filter by name',
+      filterItem: tutorialFilter,
+      virtualized: false,
+      selectedItemIndex: selectedIndex,
+      sortable: false,
+      itemHeight: 32,
+      itemClassName: itemCn(),
+      items: isLoading ? [] : items,
+      renderItem: renderItem,
+      onItemClick: goToQuery
+    }), isLoading && /*#__PURE__*/_jsx("div", {
+      className: block('loader'),
+      children: /*#__PURE__*/_jsx(Loader, {
+        size: "l"
+      })
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","cn","Icon","Text","List","Loader","useQueryList","useQueryNavigation","tutorialIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","itemCn","block","renderItem","item","_item$annotations","_item$annotations2","children","className","data","ellipsis","title","annotations","QueriesTutorialList","_ref","_useQueryList","_useQueryList2","_slicedToArray","items","isLoading","_useQueryNavigation","_useQueryNavigation2","selectedId","goToQuery","selectedIndex","findIndex","query","id","tutorialFilter","filter","_item$annotations3","_item$annotations3$ti","toLocaleLowerCase","includes","loading","filterable","filterClassName","filterPlaceholder","filterItem","virtualized","selectedItemIndex","sortable","itemHeight","itemClassName","onItemClick","size"],"sources":["index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport cn from 'bem-cn-lite';\nimport {Icon, Text, List, ListItemData, Loader} from '@gravity-ui/uikit';\nimport {QueryItem} from '../../module/api';\nimport {useQueryList} from '../../hooks/QueriesList';\nimport {useQueryNavigation} from '../../hooks/Query';\nimport tutorialIcon from '../../../../../../img/svg/icons/learn.svg';\nimport './index.scss';\n\nconst itemCn = cn('query-tutorial-item');\nconst block = cn('queries-tutorial-list');\n\nfunction renderItem(item: QueryItem) {\n    return (\n        <>\n            <Icon className={itemCn('icon')} data={tutorialIcon} />\n            <Text className={itemCn('text')} ellipsis title={item?.annotations?.title}>\n                {item?.annotations?.title || 'No name'}\n            </Text>\n        </>\n    );\n}\n\nexport function QueriesTutorialList({className}: {className: string}) {\n    const [items, isLoading] = useQueryList();\n\n    const [selectedId, goToQuery] = useQueryNavigation();\n\n    const selectedIndex = useMemo(() => {\n        return items.findIndex((query) => query.id === selectedId);\n    }, [selectedId, items]);\n\n    const tutorialFilter = useMemo(() => {\n        return (filter: string) => {\n            return (item: ListItemData<QueryItem>) => {\n                return (\n                    item?.annotations?.title\n                        ?.toLocaleLowerCase()\n                        .includes(filter.toLocaleLowerCase()) || false\n                );\n            };\n        };\n    }, []);\n\n    return (\n        <div className={block(null, className)}>\n            <List\n                className={block('list', {loading: isLoading})}\n                filterable={true}\n                filterClassName={block('filter')}\n                filterPlaceholder={'Filter by name'}\n                filterItem={tutorialFilter}\n                virtualized={false}\n                selectedItemIndex={selectedIndex}\n                sortable={false}\n                itemHeight={32}\n                itemClassName={itemCn()}\n                items={isLoading ? [] : items}\n                renderItem={renderItem}\n                onItemClick={goToQuery}\n            />\n            {isLoading && (\n                <div className={block('loader')}>\n                    <Loader size=\"l\" />\n                </div>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.scss

@@ -0,0 +1,36 @@
+.queries-tutorial-list {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &__list {
+        &_loading {
+            flex: 0;
+        }
+    }
+
+     &__loader {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+    }
+
+    &__filter {
+        padding: 0 12px 8px;
+
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background: var(--main-background);
+    }
+}
+
+.query-tutorial-item {
+    padding: 0 12px;
+    cursor: pointer;
+
+    &__icon {
+        margin-right: 8px;
+        color: var(--yc-color-text-secondary);
+    }
+}

package/build/esm/ui/pages/query-tracker/QueriesList/index.css

@@ -4,10 +4,20 @@
   display: flex;
   flex-direction: column;
 }
+.queires-list__tabs {
+  padding: 0 12px;
+}
 .queires-list__content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
+.queires-list__filter {
+  padding: 12px 12px 0;
+  margin-bottom: 8px;
+}
+.queires-list__list-content {
+  flex: 1;
+}
 /*# sourceMappingURL=index.css.map */

package/build/esm/ui/pages/query-tracker/QueriesList/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,OAAA;EAEA,eAAA;EAEA,aAAA;EACA,sBAAA;ACDJ;ADGI;EACI,OAAA;EACA,aAAA;EACA,sBAAA;EACA,cAAA;ACDR","file":"index.css","sourcesContent":[".queires-list {\n    flex: 1;\n\n    max-width: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    &__content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n}\n",".queires-list {\n  flex: 1;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.queires-list__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,OAAA;EAEA,eAAA;EAEA,aAAA;EACA,sBAAA;ACDJ;ADGI;EACI,eAAA;ACDR;ADII;EACI,OAAA;EACA,aAAA;EACA,sBAAA;EACA,cAAA;ACFR;ADKI;EACI,oBAAA;EACA,kBAAA;ACHR;ADMI;EACI,OAAA;ACJR","file":"index.css","sourcesContent":[".queires-list {\n    flex: 1;\n\n    max-width: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    &__tabs {\n        padding: 0 12px;\n    }\n\n    &__content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n\n    &__filter {\n        padding: 12px 12px 0;\n        margin-bottom: 8px;\n    }\n\n    &__list-content {\n        flex: 1;\n    }\n}\n",".queires-list {\n  flex: 1;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.queires-list__tabs {\n  padding: 0 12px;\n}\n.queires-list__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.queires-list__filter {\n  padding: 12px 12px 0;\n  margin-bottom: 8px;\n}\n.queires-list__list-content {\n  flex: 1;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/build/esm/ui/pages/query-tracker/QueriesList/index.js

@@ -1,17 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _TabNames;
 // import {Tabs} from '@gravity-ui/uikit';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import block from 'bem-cn-lite';
-import { QueriesHistoryList } from '../QueriesHistoryList';
+import { Tabs } from '@gravity-ui/uikit';
+import { QueriesHistoryList } from './QueriesHistoryList';
+import { getQueriesListMode } from '../module/queries_list/selectors';
+import { useSelector, useDispatch } from 'react-redux';
+import { QueriesListMode, QueriesListModes } from '../module/queries_list/types';
+import { applyListMode, requestQueriesList } from '../module/queries_list/actions';
 import './index.css';
+import { QueriesTutorialList } from './QueriesTutorialList';
+import { QueriesHistoryListFilter } from './QueriesListFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var b = block('queires-list');
+var TabNames = (_TabNames = {}, _defineProperty(_TabNames, QueriesListMode.History, 'History'), _defineProperty(_TabNames, QueriesListMode.Tutorials, 'Tutorials'), _TabNames);
+var useQueryTabs = function useQueryTabs() {
+  var dispatch = useDispatch();
+  var selectedTab = useSelector(getQueriesListMode);
+  var setTab = useCallback(function (tab) {
+    dispatch(applyListMode(tab));
+  }, [dispatch]);
+  var tabOptions = useMemo(function () {
+    return QueriesListModes.map(function (tab) {
+      return {
+        id: tab,
+        title: TabNames[tab]
+      };
+    });
+  }, []);
+  return [tabOptions, (selectedTab || QueriesListMode.History).toString(), setTab];
+};
 export function QueriesList() {
-  return /*#__PURE__*/_jsx("div", {
+  var _useQueryTabs = useQueryTabs(),
+    _useQueryTabs2 = _slicedToArray(_useQueryTabs, 3),
+    tabs = _useQueryTabs2[0],
+    tab = _useQueryTabs2[1],
+    setTab = _useQueryTabs2[2];
+  var dispatch = useDispatch();
+  useEffect(function () {
+    dispatch(requestQueriesList());
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
     className: b(),
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      className: b('tabs'),
+      items: tabs,
+      activeTab: tab,
+      onSelectTab: setTab
+    }), /*#__PURE__*/_jsxs("div", {
       className: b('content'),
-      children: /*#__PURE__*/_jsx(QueriesHistoryList, {})
-    })
+      children: [/*#__PURE__*/_jsx(QueriesHistoryListFilter, {
+        className: b('filter')
+      }), tab === QueriesListMode.History && /*#__PURE__*/_jsx(QueriesHistoryList, {}), tab === QueriesListMode.Tutorials && /*#__PURE__*/_jsx(QueriesTutorialList, {
+        className: b('list-content')
+      })]
+    })]
   });
 }
 // #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","block","QueriesHistoryList","jsx","_jsx","b","QueriesList","className","children"],"sources":["index.tsx"],"sourcesContent":["// import {Tabs} from '@gravity-ui/uikit';\nimport React from 'react';\nimport block from 'bem-cn-lite';\nimport {QueriesHistoryList} from '../QueriesHistoryList';\n\nimport './index.scss';\n\nconst b = block('queires-list');\n\nexport function QueriesList() {\n    return (\n        <div className={b()}>\n            <div className={b('content')}>\n                <QueriesHistoryList />\n            </div>\n        </div>\n    );\n}\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAAQC,kBAAkB,QAAO,uBAAuB;AAExD,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtB,IAAMC,CAAC,GAAGJ,KAAK,CAAC,cAAc,CAAC;AAE/B,OAAO,SAASK,WAAWA,CAAA,EAAG;EAC1B,oBACIF,IAAA;IAAKG,SAAS,EAAEF,CAAC,EAAG;IAAAG,QAAA,eAChBJ,IAAA;MAAKG,SAAS,EAAEF,CAAC,CAAC,SAAS,CAAE;MAAAG,QAAA,eACzBJ,IAAA,CAACF,kBAAkB;IAAG;EACpB,EACJ;AAEd"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","block","Tabs","QueriesHistoryList","getQueriesListMode","useSelector","useDispatch","QueriesListMode","QueriesListModes","applyListMode","requestQueriesList","QueriesTutorialList","QueriesHistoryListFilter","jsx","_jsx","jsxs","_jsxs","b","TabNames","_TabNames","_defineProperty","History","Tutorials","useQueryTabs","dispatch","selectedTab","setTab","tab","tabOptions","map","id","title","toString","QueriesList","_useQueryTabs","_useQueryTabs2","_slicedToArray","tabs","className","children","items","activeTab","onSelectTab"],"sources":["index.tsx"],"sourcesContent":["// import {Tabs} from '@gravity-ui/uikit';\nimport React, {useCallback, useEffect, useMemo} from 'react';\nimport block from 'bem-cn-lite';\nimport {Tabs, TabsItemProps} from '@gravity-ui/uikit';\nimport {QueriesHistoryList} from './QueriesHistoryList';\n\nimport {getQueriesListMode} from '../module/queries_list/selectors';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {QueriesListMode, QueriesListModes} from '../module/queries_list/types';\nimport {applyListMode, requestQueriesList} from '../module/queries_list/actions';\n\nimport './index.scss';\nimport {QueriesTutorialList} from './QueriesTutorialList';\nimport {QueriesHistoryListFilter} from './QueriesListFilter';\n\nconst b = block('queires-list');\n\nconst TabNames = {\n    [QueriesListMode.History]: 'History',\n    [QueriesListMode.Tutorials]: 'Tutorials',\n};\n\nconst useQueryTabs = (): [TabsItemProps[], string, (tab: string) => void] => {\n    const dispatch = useDispatch();\n    const selectedTab = useSelector(getQueriesListMode);\n    const setTab = useCallback(\n        (tab: string) => {\n            dispatch(applyListMode(tab as QueriesListMode));\n        },\n        [dispatch],\n    );\n\n    const tabOptions = useMemo<TabsItemProps[]>(() => {\n        return QueriesListModes.map((tab) => {\n            return {\n                id: tab as unknown as string,\n                title: TabNames[tab],\n            };\n        });\n    }, []);\n    return [tabOptions, (selectedTab || QueriesListMode.History).toString(), setTab];\n};\n\nexport function QueriesList() {\n    const [tabs, tab, setTab] = useQueryTabs();\n\n    const dispatch = useDispatch();\n    useEffect(() => {\n        dispatch(requestQueriesList());\n    }, []);\n\n    return (\n        <div className={b()}>\n            <Tabs className={b('tabs')} items={tabs} activeTab={tab} onSelectTab={setTab} />\n            <div className={b('content')}>\n                <QueriesHistoryListFilter className={b('filter')} />\n\n                {tab === QueriesListMode.History && <QueriesHistoryList />}\n                {tab === QueriesListMode.Tutorials && (\n                    <QueriesTutorialList className={b('list-content')} />\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/build/esm/ui/pages/query-tracker/QueriesList/index.scss

@@ -6,10 +6,23 @@
     display: flex;
     flex-direction: column;
 
+    &__tabs {
+        padding: 0 12px;
+    }
+
     &__content {
         flex: 1;
         display: flex;
         flex-direction: column;
         overflow: auto;
     }
+
+    &__filter {
+        padding: 12px 12px 0;
+        margin-bottom: 8px;
+    }
+
+    &__list-content {
+        flex: 1;
+    }
 }

package/build/esm/ui/pages/query-tracker/QueryDuration/index.js

@@ -1,7 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { Label } from '@gravity-ui/uikit';
 import React, { useEffect, useState } from 'react';
+import { QueryStatus } from '../module/api';
 import { queryDuration } from '../utils/date';
+import { isQueryCompleted } from '../utils/query';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useQueryDuration = function useQueryDuration(query) {
   var _useState = useState(queryDuration(query)),
@@ -9,6 +11,14 @@ var useQueryDuration = function useQueryDuration(query) {
     duration = _useState2[0],
     setDuration = _useState2[1];
   useEffect(function () {
+    if (query.state === QueryStatus.DRAFT) {
+      setDuration(null);
+      return;
+    }
+    if (isQueryCompleted(query)) {
+      setDuration(query.finish_time ? queryDuration(query) : '-');
+      return;
+    }
     setDuration(queryDuration(query));
     if (query.finish_time) {
       return;
@@ -25,9 +35,10 @@ var useQueryDuration = function useQueryDuration(query) {
 export var QueryDuration = /*#__PURE__*/React.memo(function QueryDuration(_ref) {
   var query = _ref.query,
     className = _ref.className;
-  return /*#__PURE__*/_jsx(Label, {
+  var duration = useQueryDuration(query);
+  return duration && /*#__PURE__*/_jsx(Label, {
     className: className,
-    children: useQueryDuration(query)
+    children: duration
   });
 });
 // #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/QueryDuration/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Label","React","useEffect","useState","queryDuration","jsx","_jsx","useQueryDuration","query","_useState","_useState2","_slicedToArray","duration","setDuration","finish_time","timer","setInterval","clearInterval","id","state","start_time","QueryDuration","memo","_ref","className","children"],"sources":["index.tsx"],"sourcesContent":["import {Label} from '@gravity-ui/uikit';\nimport React, {useEffect, useState} from 'react';\nimport {QueryItem} from '../module/api';\nimport {queryDuration} from '../utils/date';\n\nexport type QueryDurationProps = {\n    query: QueryItem;\n    className?: string;\n};\n\nconst useQueryDuration = (query: QueryItem) => {\n    const [duration, setDuration] = useState(queryDuration(query));\n    useEffect(() => {\n        setDuration(queryDuration(query));\n        if (query.finish_time) {\n            return;\n        }\n        const timer = setInterval(() => setDuration(queryDuration(query)), 1000);\n        return () => {\n            clearInterval(timer);\n        };\n    }, [query.id, query.state, query.start_time]);\n\n    return duration;\n};\n\nexport const QueryDuration = React.memo(function QueryDuration({\n    query,\n    className,\n}: QueryDurationProps) {\n    return <Label className={className}>{useQueryDuration(query)}</Label>;\n});\n"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,OAAOC,KAAK,IAAGC,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAEhD,SAAQC,aAAa,QAAO,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO5C,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAgB,EAAK;EAC3C,IAAAC,SAAA,GAAgCN,QAAQ,CAACC,aAAa,CAACI,KAAK,CAAC,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAvDG,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC5BR,SAAS,CAAC,YAAM;IACZW,WAAW,CAACT,aAAa,CAACI,KAAK,CAAC,CAAC;IACjC,IAAIA,KAAK,CAACM,WAAW,EAAE;MACnB;IACJ;IACA,IAAMC,KAAK,GAAGC,WAAW,CAAC;MAAA,OAAMH,WAAW,CAACT,aAAa,CAACI,KAAK,CAAC,CAAC;IAAA,GAAE,IAAI,CAAC;IACxE,OAAO,YAAM;MACTS,aAAa,CAACF,KAAK,CAAC;IACxB,CAAC;EACL,CAAC,EAAE,CAACP,KAAK,CAACU,EAAE,EAAEV,KAAK,CAACW,KAAK,EAAEX,KAAK,CAACY,UAAU,CAAC,CAAC;EAE7C,OAAOR,QAAQ;AACnB,CAAC;AAED,OAAO,IAAMS,aAAa,gBAAGpB,KAAK,CAACqB,IAAI,CAAC,SAASD,aAAaA,CAAAE,IAAA,EAGvC;EAAA,IAFnBf,KAAK,GAAAe,IAAA,CAALf,KAAK;IACLgB,SAAS,GAAAD,IAAA,CAATC,SAAS;EAET,oBAAOlB,IAAA,CAACN,KAAK;IAACwB,SAAS,EAAEA,SAAU;IAAAC,QAAA,EAAElB,gBAAgB,CAACC,KAAK;EAAC,EAAS;AACzE,CAAC,CAAC"}
+{"version":3,"names":["Label","React","useEffect","useState","QueryStatus","queryDuration","isQueryCompleted","jsx","_jsx","useQueryDuration","query","_useState","_useState2","_slicedToArray","duration","setDuration","state","DRAFT","finish_time","timer","setInterval","clearInterval","id","start_time","QueryDuration","memo","_ref","className","children"],"sources":["index.tsx"],"sourcesContent":["import {Label} from '@gravity-ui/uikit';\nimport React, {useEffect, useState} from 'react';\nimport {QueryItem, QueryStatus} from '../module/api';\nimport {queryDuration} from '../utils/date';\nimport {isQueryCompleted} from '../utils/query';\n\nexport type QueryDurationProps = {\n    query: QueryItem;\n    className?: string;\n};\n\nconst useQueryDuration = (query: QueryItem) => {\n    const [duration, setDuration] = useState(queryDuration(query));\n    useEffect(() => {\n        if (query.state === QueryStatus.DRAFT) {\n            setDuration(null);\n            return;\n        }\n        if (isQueryCompleted(query)) {\n            setDuration(query.finish_time ? queryDuration(query) : '-');\n            return;\n        }\n        setDuration(queryDuration(query));\n        if (query.finish_time) {\n            return;\n        }\n        const timer = setInterval(() => setDuration(queryDuration(query)), 1000);\n        return () => {\n            clearInterval(timer);\n        };\n    }, [query.id, query.state, query.start_time]);\n\n    return duration;\n};\n\nexport const QueryDuration = React.memo(function QueryDuration({\n    query,\n    className,\n}: QueryDurationProps) {\n    const duration = useQueryDuration(query);\n    return duration && <Label className={className}>{duration}</Label>;\n});\n"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,OAAOC,KAAK,IAAGC,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAChD,SAAmBC,WAAW,QAAO,eAAe;AACpD,SAAQC,aAAa,QAAO,eAAe;AAC3C,SAAQC,gBAAgB,QAAO,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAgB,EAAK;EAC3C,IAAAC,SAAA,GAAgCR,QAAQ,CAACE,aAAa,CAACK,KAAK,CAAC,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAvDG,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC5BV,SAAS,CAAC,YAAM;IACZ,IAAIQ,KAAK,CAACM,KAAK,KAAKZ,WAAW,CAACa,KAAK,EAAE;MACnCF,WAAW,CAAC,IAAI,CAAC;MACjB;IACJ;IACA,IAAIT,gBAAgB,CAACI,KAAK,CAAC,EAAE;MACzBK,WAAW,CAACL,KAAK,CAACQ,WAAW,GAAGb,aAAa,CAACK,KAAK,CAAC,GAAG,GAAG,CAAC;MAC3D;IACJ;IACAK,WAAW,CAACV,aAAa,CAACK,KAAK,CAAC,CAAC;IACjC,IAAIA,KAAK,CAACQ,WAAW,EAAE;MACnB;IACJ;IACA,IAAMC,KAAK,GAAGC,WAAW,CAAC;MAAA,OAAML,WAAW,CAACV,aAAa,CAACK,KAAK,CAAC,CAAC;IAAA,GAAE,IAAI,CAAC;IACxE,OAAO,YAAM;MACTW,aAAa,CAACF,KAAK,CAAC;IACxB,CAAC;EACL,CAAC,EAAE,CAACT,KAAK,CAACY,EAAE,EAAEZ,KAAK,CAACM,KAAK,EAAEN,KAAK,CAACa,UAAU,CAAC,CAAC;EAE7C,OAAOT,QAAQ;AACnB,CAAC;AAED,OAAO,IAAMU,aAAa,gBAAGvB,KAAK,CAACwB,IAAI,CAAC,SAASD,aAAaA,CAAAE,IAAA,EAGvC;EAAA,IAFnBhB,KAAK,GAAAgB,IAAA,CAALhB,KAAK;IACLiB,SAAS,GAAAD,IAAA,CAATC,SAAS;EAET,IAAMb,QAAQ,GAAGL,gBAAgB,CAACC,KAAK,CAAC;EACxC,OAAOI,QAAQ,iBAAIN,IAAA,CAACR,KAAK;IAAC2B,SAAS,EAAEA,SAAU;IAAAC,QAAA,EAAEd;EAAQ,EAAS;AACtE,CAAC,CAAC"}

package/build/esm/ui/pages/query-tracker/QueryEditor/QueryEditor.d.ts

@@ -1,2 +1,4 @@
 import './QueryEditor.scss';
-export declare function QueryEditor(): JSX.Element;
+export declare function QueryEditor({ onStartQuery }: {
+    onStartQuery?: (queryId: string) => boolean | void;
+}): JSX.Element;

package/build/esm/ui/pages/query-tracker/QueryEditor/QueryEditor.js

@@ -14,18 +14,21 @@ import maximizeBlockIcon from '../../../../../img/svg/icons/square.svg';
 import minimazeBlockIcon from '../../../../../img/svg/icons/square-semifill.svg';
 import closeIcon from '../../../../../img/svg/close-icon.svg';
 import './QueryEditor.css';
+import { useCurrentQuery } from '../QueryResults/hooks/useCurrentQuery';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var b = block('query-container');
-var QueryEditorView = /*#__PURE__*/React.memo(function QueryEditorView() {
+var QueryEditorView = /*#__PURE__*/React.memo(function QueryEditorView(_ref) {
+  var onStartQuery = _ref.onStartQuery;
   var editorRef = useRef();
   var activeQuery = useSelector(getQuery);
   var text = useSelector(getQueryText);
   var engine = useSelector(getQueryEngine);
   useEffect(function () {
-    var _editorRef$current;
+    var _editorRef$current, _editorRef$current2;
     (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
+    (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.setScrollTop(0);
   }, [editorRef.current, activeQuery === null || activeQuery === void 0 ? void 0 : activeQuery.id]);
   var monacoConfig = useMemo(function () {
     return {
@@ -47,8 +50,8 @@ var QueryEditorView = /*#__PURE__*/React.memo(function QueryEditorView() {
     });
   }, [dispatch]);
   var runQueryCallback = useCallback(function () {
-    dispatch(runQuery());
-  }, [dispatch]);
+    dispatch(runQuery(onStartQuery));
+  }, [dispatch, onStartQuery]);
   return /*#__PURE__*/_jsxs("div", {
     className: b('query'),
     children: [/*#__PURE__*/_jsx(MonacoEditor, {
@@ -74,10 +77,12 @@ var QueryEditorView = /*#__PURE__*/React.memo(function QueryEditorView() {
     })]
   });
 });
-var ResultView = /*#__PURE__*/React.memo(function ResultView(_ref) {
-  var resultViewMode = _ref.resultViewMode,
-    setResultViewMode = _ref.setResultViewMode;
+var ResultView = /*#__PURE__*/React.memo(function ResultView(_ref2) {
+  var query = _ref2.query,
+    resultViewMode = _ref2.resultViewMode,
+    setResultViewMode = _ref2.setResultViewMode;
   return /*#__PURE__*/_jsx(QueryResults, {
+    query: query,
     className: b('results'),
     minimized: resultViewMode === 'minimized',
     toolbar: /*#__PURE__*/_jsxs(_Fragment, {
@@ -112,8 +117,9 @@ var ResultView = /*#__PURE__*/React.memo(function ResultView(_ref) {
     })
   });
 });
-export function QueryEditor() {
-  var query = useSelector(getQuery);
+export function QueryEditor(_ref3) {
+  var onStartQuery = _ref3.onStartQuery;
+  var query = useCurrentQuery();
   var _useState = useState('minimized'),
     _useState2 = _slicedToArray(_useState, 2),
     resultViewMode = _useState2[0],
@@ -138,7 +144,10 @@ export function QueryEditor() {
       getInitialSizes: function getInitialSizes() {
         return partSizes;
       },
-      children: [resultViewMode !== 'full' && /*#__PURE__*/_jsx(QueryEditorView, {}), isExecuted && /*#__PURE__*/_jsx(ResultView, {
+      children: [resultViewMode !== 'full' && /*#__PURE__*/_jsx(QueryEditorView, {
+        onStartQuery: onStartQuery
+      }), (query === null || query === void 0 ? void 0 : query.id) && isExecuted && /*#__PURE__*/_jsx(ResultView, {
+        query: query,
         setResultViewMode: setResultViewMode,
         resultViewMode: resultViewMode
       })]

package/build/esm/ui/pages/query-tracker/QueryEditor/QueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","MonacoEditor","block","Button","Icon","Loader","playIcon","useDispatch","useSelector","getQuery","getQueryEngine","getQueryText","isQueryExecuted","isQueryLoading","runQuery","SET_QUERY_PATCH","FlexSplitPane","QueryResults","maximizeBlockIcon","minimazeBlockIcon","closeIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","b","QueryEditorView","memo","editorRef","activeQuery","text","engine","_editorRef$current","current","focus","id","monacoConfig","fontSize","language","renderWhitespace","minimap","enabled","dispatch","upadteQueryText","type","data","query","runQueryCallback","className","children","value","onChange","view","onClick","ResultView","_ref","resultViewMode","setResultViewMode","minimized","toolbar","QueryEditor","_useState","_useState2","_slicedToArray","_useState3","_useState4","partSizes","setSize","isExecuted","isLoading","_defineProperty","direction","VERTICAL","onResizeEnd","getInitialSizes"],"sources":["QueryEditor.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport MonacoEditor, {MonacoEditorConfig} from '../../../components/MonacoEditor/MonacoEditor';\nimport block from 'bem-cn-lite';\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\n\nimport playIcon from '../../../../../img/svg/play.svg';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {\n    getQuery,\n    getQueryEngine,\n    getQueryText,\n    isQueryExecuted,\n    isQueryLoading,\n} from '../module/query/selectors';\nimport {runQuery, SET_QUERY_PATCH} from '../module/query/actions';\nimport FlexSplitPane from '../../../components/FlexSplitPane/FlexSplitPane';\nimport {QueryResults} from '../QueryResults';\nimport maximizeBlockIcon from '../../../../../img/svg/icons/square.svg';\nimport minimazeBlockIcon from '../../../../../img/svg/icons/square-semifill.svg';\nimport closeIcon from '../../../../../img/svg/close-icon.svg';\n\nimport './QueryEditor.scss';\n\nconst b = block('query-container');\n\nconst QueryEditorView = React.memo(function QueryEditorView() {\n    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();\n    const activeQuery = useSelector(getQuery);\n    const text = useSelector(getQueryText);\n    const engine = useSelector(getQueryEngine);\n\n    useEffect(() => {\n        editorRef.current?.focus();\n    }, [editorRef.current, activeQuery?.id]);\n\n    const monacoConfig = useMemo<MonacoEditorConfig>(() => {\n        return {\n            fontSize: 14,\n            language: engine,\n            renderWhitespace: 'boundary',\n            minimap: {\n                enabled: true,\n            },\n        };\n    }, [engine]);\n    const dispatch = useDispatch();\n    const upadteQueryText = useCallback(\n        function (text: string) {\n            dispatch({type: SET_QUERY_PATCH, data: {query: text}});\n        },\n        [dispatch],\n    );\n\n    const runQueryCallback = useCallback(\n        function () {\n            dispatch(runQuery());\n        },\n        [dispatch],\n    );\n    return (\n        <div className={b('query')}>\n            <MonacoEditor\n                editorRef={editorRef}\n                value={text || ''}\n                language={'yql'}\n                className={b('editor')}\n                onChange={upadteQueryText}\n                monacoConfig={monacoConfig}\n            />\n            <div className={b('actions')}>\n                <div className=\"query-run-action\">\n                    <Button\n                        className=\"query-run-action-button\"\n                        view=\"action\"\n                        onClick={runQueryCallback}\n                    >\n                        <Icon data={playIcon} />\n                        Run\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nconst ResultView = React.memo(function ResultView({\n    resultViewMode,\n    setResultViewMode,\n}: {\n    resultViewMode: ResultMode;\n    setResultViewMode: (v: ResultMode) => void;\n}) {\n    return (\n        <QueryResults\n            className={b('results')}\n            minimized={resultViewMode === 'minimized'}\n            toolbar={\n                <>\n                    {resultViewMode === 'split' ? (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('full')}\n                        >\n                            <Icon data={maximizeBlockIcon} />\n                        </Button>\n                    ) : (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('split')}\n                        >\n                            <Icon data={minimazeBlockIcon} />\n                        </Button>\n                    )}\n                    {resultViewMode !== 'minimized' && (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('minimized')}\n                        >\n                            <Icon data={closeIcon} />\n                        </Button>\n                    )}\n                </>\n            }\n        />\n    );\n});\n\ntype ResultMode = 'full' | 'minimized' | 'split';\nexport function QueryEditor() {\n    const query = useSelector(getQuery);\n\n    const [resultViewMode, setResultViewMode] = useState<ResultMode>('minimized');\n\n    const [partSizes, setSize] = useState([50, 50]);\n\n    useEffect(() => {\n        setResultViewMode('split');\n    }, [query?.id]);\n\n    const isExecuted = useSelector(isQueryExecuted);\n    const isLoading = useSelector(isQueryLoading);\n\n    return (\n        <>\n            {isLoading && (\n                <div className={b('loading')}>\n                    <Loader />\n                </div>\n            )}\n            <FlexSplitPane\n                className={b({[resultViewMode]: true})}\n                direction={FlexSplitPane.VERTICAL}\n                onResizeEnd={setSize}\n                getInitialSizes={() => partSizes}\n            >\n                {resultViewMode !== 'full' && <QueryEditorView />}\n\n                {isExecuted && (\n                    <ResultView\n                        setResultViewMode={setResultViewMode}\n                        resultViewMode={resultViewMode}\n                    />\n                )}\n            </FlexSplitPane>\n        </>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","MonacoEditor","block","Button","Icon","Loader","playIcon","useDispatch","useSelector","getQuery","getQueryEngine","getQueryText","isQueryExecuted","isQueryLoading","runQuery","SET_QUERY_PATCH","FlexSplitPane","QueryResults","maximizeBlockIcon","minimazeBlockIcon","closeIcon","useCurrentQuery","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","b","QueryEditorView","memo","_ref","onStartQuery","editorRef","activeQuery","text","engine","_editorRef$current","_editorRef$current2","current","focus","setScrollTop","id","monacoConfig","fontSize","language","renderWhitespace","minimap","enabled","dispatch","upadteQueryText","type","data","query","runQueryCallback","className","children","value","onChange","view","onClick","ResultView","_ref2","resultViewMode","setResultViewMode","minimized","toolbar","QueryEditor","_ref3","_useState","_useState2","_slicedToArray","_useState3","_useState4","partSizes","setSize","isExecuted","isLoading","_defineProperty","direction","VERTICAL","onResizeEnd","getInitialSizes"],"sources":["QueryEditor.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport MonacoEditor, {MonacoEditorConfig} from '../../../components/MonacoEditor/MonacoEditor';\nimport block from 'bem-cn-lite';\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\n\nimport playIcon from '../../../../../img/svg/play.svg';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {\n    getQuery,\n    getQueryEngine,\n    getQueryText,\n    isQueryExecuted,\n    isQueryLoading,\n} from '../module/query/selectors';\nimport {runQuery, SET_QUERY_PATCH} from '../module/query/actions';\nimport FlexSplitPane from '../../../components/FlexSplitPane/FlexSplitPane';\nimport {QueryResults} from '../QueryResults';\nimport maximizeBlockIcon from '../../../../../img/svg/icons/square.svg';\nimport minimazeBlockIcon from '../../../../../img/svg/icons/square-semifill.svg';\nimport closeIcon from '../../../../../img/svg/close-icon.svg';\n\nimport './QueryEditor.scss';\nimport {QueryItem} from '../module/api';\nimport {useCurrentQuery} from '../QueryResults/hooks/useCurrentQuery';\n\nconst b = block('query-container');\n\nconst QueryEditorView = React.memo(function QueryEditorView({\n    onStartQuery,\n}: {\n    onStartQuery?: (queryId: string) => boolean | void;\n}) {\n    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();\n    const activeQuery = useSelector(getQuery);\n    const text = useSelector(getQueryText);\n    const engine = useSelector(getQueryEngine);\n\n    useEffect(() => {\n        editorRef.current?.focus();\n        editorRef.current?.setScrollTop(0);\n    }, [editorRef.current, activeQuery?.id]);\n\n    const monacoConfig = useMemo<MonacoEditorConfig>(() => {\n        return {\n            fontSize: 14,\n            language: engine,\n            renderWhitespace: 'boundary',\n            minimap: {\n                enabled: true,\n            },\n        };\n    }, [engine]);\n    const dispatch = useDispatch();\n    const upadteQueryText = useCallback(\n        function (text: string) {\n            dispatch({type: SET_QUERY_PATCH, data: {query: text}});\n        },\n        [dispatch],\n    );\n\n    const runQueryCallback = useCallback(\n        function () {\n            dispatch(runQuery(onStartQuery));\n        },\n        [dispatch, onStartQuery],\n    );\n    return (\n        <div className={b('query')}>\n            <MonacoEditor\n                editorRef={editorRef}\n                value={text || ''}\n                language={'yql'}\n                className={b('editor')}\n                onChange={upadteQueryText}\n                monacoConfig={monacoConfig}\n            />\n            <div className={b('actions')}>\n                <div className=\"query-run-action\">\n                    <Button\n                        className=\"query-run-action-button\"\n                        view=\"action\"\n                        onClick={runQueryCallback}\n                    >\n                        <Icon data={playIcon} />\n                        Run\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nconst ResultView = React.memo(function ResultView({\n    query,\n    resultViewMode,\n    setResultViewMode,\n}: {\n    query: QueryItem;\n    resultViewMode: ResultMode;\n    setResultViewMode: (v: ResultMode) => void;\n}) {\n    return (\n        <QueryResults\n            query={query}\n            className={b('results')}\n            minimized={resultViewMode === 'minimized'}\n            toolbar={\n                <>\n                    {resultViewMode === 'split' ? (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('full')}\n                        >\n                            <Icon data={maximizeBlockIcon} />\n                        </Button>\n                    ) : (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('split')}\n                        >\n                            <Icon data={minimazeBlockIcon} />\n                        </Button>\n                    )}\n                    {resultViewMode !== 'minimized' && (\n                        <Button\n                            className={b('meta-action')}\n                            view=\"flat\"\n                            onClick={() => setResultViewMode('minimized')}\n                        >\n                            <Icon data={closeIcon} />\n                        </Button>\n                    )}\n                </>\n            }\n        />\n    );\n});\n\ntype ResultMode = 'full' | 'minimized' | 'split';\nexport function QueryEditor({onStartQuery}: {onStartQuery?: (queryId: string) => boolean | void}) {\n    const query = useCurrentQuery();\n\n    const [resultViewMode, setResultViewMode] = useState<ResultMode>('minimized');\n\n    const [partSizes, setSize] = useState([50, 50]);\n\n    useEffect(() => {\n        setResultViewMode('split');\n    }, [query?.id]);\n\n    const isExecuted = useSelector(isQueryExecuted);\n    const isLoading = useSelector(isQueryLoading);\n\n    return (\n        <>\n            {isLoading && (\n                <div className={b('loading')}>\n                    <Loader />\n                </div>\n            )}\n            <FlexSplitPane\n                className={b({[resultViewMode]: true})}\n                direction={FlexSplitPane.VERTICAL}\n                onResizeEnd={setSize}\n                getInitialSizes={() => partSizes}\n            >\n                {resultViewMode !== 'full' && <QueryEditorView onStartQuery={onStartQuery} />}\n\n                {query?.id && isExecuted && (\n                    <ResultView\n                        query={query}\n                        setResultViewMode={setResultViewMode}\n                        resultViewMode={resultViewMode}\n                    />\n                )}\n            </FlexSplitPane>\n        </>\n    );\n}\n"],"mappings":"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"}

package/build/esm/ui/pages/query-tracker/QueryResults/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { QueryItem } from '../module/api';
 import './index.scss';
 export declare const QueryResults: React.NamedExoticComponent<{
+    query: QueryItem;
     className: string;
     toolbar: React.ReactChild;
     minimized: boolean;

package/build/esm/ui/pages/query-tracker/QueryResults/index.js

@@ -11,7 +11,6 @@ import QueryMetaTable from '../QueryMetaTable';
 import { loadQueryResult } from '../module/query_result/actions';
 import { QueryResultActions } from './QueryResultActions';
 import { QueryResultTab, useQueryResultTabs } from './hooks/useQueryResultTabs';
-import { useCurrentQuery } from './hooks/useCurrentQuery';
 import { YQLStatisticsTable } from '../QueryResultsView/YQLStatistics';
 import NotRenderUntilFirstVisible from '../NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,11 +31,11 @@ function QueryResultContainer(_ref) {
   });
 }
 export var QueryResults = /*#__PURE__*/React.memo(function QueryResults(_ref2) {
-  var className = _ref2.className,
+  var query = _ref2.query,
+    className = _ref2.className,
     toolbar = _ref2.toolbar,
     _ref2$minimized = _ref2.minimized,
     minimized = _ref2$minimized === void 0 ? false : _ref2$minimized;
-  var query = useCurrentQuery();
   var _useQueryResultTabs = useQueryResultTabs(query),
     _useQueryResultTabs2 = _slicedToArray(_useQueryResultTabs, 3),
     tabs = _useQueryResultTabs2[0],

package/build/esm/ui/pages/query-tracker/QueryResults/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","block","Tabs","useDispatch","QueryResultsView","Error","QueryMetaInfo","QueryMetaTable","loadQueryResult","QueryResultActions","QueryResultTab","useQueryResultTabs","useCurrentQuery","YQLStatisticsTable","NotRenderUntilFirstVisible","jsx","_jsx","jsxs","_jsxs","b","QueryResultContainer","_ref","resultIndex","query","dispatch","result_count","id","index","QueryResults","memo","_ref2","className","toolbar","_ref2$minimized","minimized","_useQueryResultTabs","_useQueryResultTabs2","_slicedToArray","tabs","setTab","_useQueryResultTabs2$","activeTabId","category","children","hide","items","activeTab","onSelectTab","RESULT","Number","isInteger","ERROR","error","META","STATISTIC"],"sources":["index.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport block from 'bem-cn-lite';\nimport {QueryItem} from '../module/api';\nimport {Tabs} from '@gravity-ui/uikit';\nimport {useDispatch} from 'react-redux';\nimport {QueryResultsView} from '../QueryResultsView';\nimport Error from '../../../components/Error/Error';\n\nimport './index.scss';\nimport {QueryMetaInfo} from './QueryMetaRow';\nimport QueryMetaTable from '../QueryMetaTable';\nimport {loadQueryResult} from '../module/query_result/actions';\nimport {QueryResultActions} from './QueryResultActions';\nimport {QueryResultTab, useQueryResultTabs} from './hooks/useQueryResultTabs';\nimport {useCurrentQuery} from './hooks/useCurrentQuery';\nimport {YQLStatisticsTable} from '../QueryResultsView/YQLStatistics';\nimport NotRenderUntilFirstVisible from '../NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';\n\nconst b = block('query-results');\n\nfunction QueryResultContainer({resultIndex, query}: {resultIndex: number; query: QueryItem}) {\n    const dispatch = useDispatch();\n    useEffect(() => {\n        if (query.result_count) {\n            dispatch(loadQueryResult(query.id, resultIndex));\n        }\n    }, [query, resultIndex, dispatch]);\n    return <QueryResultsView query={query} index={resultIndex} />;\n}\n\nexport const QueryResults = React.memo(function QueryResults({\n    className,\n    toolbar,\n    minimized = false,\n}: {\n    className: string;\n    toolbar: React.ReactChild;\n    minimized: boolean;\n}) {\n    const query = useCurrentQuery();\n\n    const [tabs, setTab, {activeTabId, category, resultIndex}] = useQueryResultTabs(query);\n\n    return query ? (\n        <div className={b(null, className)}>\n            <div className={b('meta')}>\n                <QueryMetaInfo className={b('meta-info')} query={query} />\n                <div className={b('toolbar')}>{toolbar}</div>\n            </div>\n            <NotRenderUntilFirstVisible className={b('result', {minimized})} hide={minimized}>\n                <div className={b('header')}>\n                    <Tabs\n                        className={b('tabs')}\n                        items={tabs}\n                        activeTab={activeTabId}\n                        onSelectTab={setTab}\n                    />\n                    {category === QueryResultTab.RESULT && Number.isInteger(resultIndex) && (\n                        <div className={b('tab_actions')}>\n                            <QueryResultActions query={query} resultIndex={resultIndex ?? 0} />\n                        </div>\n                    )}\n                </div>\n                <div className={b('content')}>\n                    <NotRenderUntilFirstVisible\n                        hide={category !== QueryResultTab.RESULT && !Number.isInteger(resultIndex)}\n                        className={b('result-wrap')}\n                    >\n                        <QueryResultContainer query={query} resultIndex={resultIndex ?? 0} />\n                    </NotRenderUntilFirstVisible>\n                    {category === QueryResultTab.ERROR && <Error error={query.error} />}\n                    {category === QueryResultTab.META && <QueryMetaTable query={query} />}\n\n                    <NotRenderUntilFirstVisible hide={category !== QueryResultTab.STATISTIC}>\n                        <YQLStatisticsTable query={query} />\n                    </NotRenderUntilFirstVisible>\n                </div>\n            </NotRenderUntilFirstVisible>\n            <div></div>\n        </div>\n    ) : null;\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","block","Tabs","useDispatch","QueryResultsView","Error","QueryMetaInfo","QueryMetaTable","loadQueryResult","QueryResultActions","QueryResultTab","useQueryResultTabs","YQLStatisticsTable","NotRenderUntilFirstVisible","jsx","_jsx","jsxs","_jsxs","b","QueryResultContainer","_ref","resultIndex","query","dispatch","result_count","id","index","QueryResults","memo","_ref2","className","toolbar","_ref2$minimized","minimized","_useQueryResultTabs","_useQueryResultTabs2","_slicedToArray","tabs","setTab","_useQueryResultTabs2$","activeTabId","category","children","hide","items","activeTab","onSelectTab","RESULT","Number","isInteger","ERROR","error","META","STATISTIC"],"sources":["index.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport block from 'bem-cn-lite';\nimport {QueryItem} from '../module/api';\nimport {Tabs} from '@gravity-ui/uikit';\nimport {useDispatch} from 'react-redux';\nimport {QueryResultsView} from '../QueryResultsView';\nimport Error from '../../../components/Error/Error';\n\nimport './index.scss';\nimport {QueryMetaInfo} from './QueryMetaRow';\nimport QueryMetaTable from '../QueryMetaTable';\nimport {loadQueryResult} from '../module/query_result/actions';\nimport {QueryResultActions} from './QueryResultActions';\nimport {QueryResultTab, useQueryResultTabs} from './hooks/useQueryResultTabs';\nimport {YQLStatisticsTable} from '../QueryResultsView/YQLStatistics';\nimport NotRenderUntilFirstVisible from '../NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';\n\nconst b = block('query-results');\n\nfunction QueryResultContainer({resultIndex, query}: {resultIndex: number; query: QueryItem}) {\n    const dispatch = useDispatch();\n    useEffect(() => {\n        if (query.result_count) {\n            dispatch(loadQueryResult(query.id, resultIndex));\n        }\n    }, [query, resultIndex, dispatch]);\n    return <QueryResultsView query={query} index={resultIndex} />;\n}\n\nexport const QueryResults = React.memo(function QueryResults({\n    query,\n    className,\n    toolbar,\n    minimized = false,\n}: {\n    query: QueryItem;\n    className: string;\n    toolbar: React.ReactChild;\n    minimized: boolean;\n}) {\n    const [tabs, setTab, {activeTabId, category, resultIndex}] = useQueryResultTabs(query);\n\n    return query ? (\n        <div className={b(null, className)}>\n            <div className={b('meta')}>\n                <QueryMetaInfo className={b('meta-info')} query={query} />\n                <div className={b('toolbar')}>{toolbar}</div>\n            </div>\n            <NotRenderUntilFirstVisible className={b('result', {minimized})} hide={minimized}>\n                <div className={b('header')}>\n                    <Tabs\n                        className={b('tabs')}\n                        items={tabs}\n                        activeTab={activeTabId}\n                        onSelectTab={setTab}\n                    />\n                    {category === QueryResultTab.RESULT && Number.isInteger(resultIndex) && (\n                        <div className={b('tab_actions')}>\n                            <QueryResultActions query={query} resultIndex={resultIndex ?? 0} />\n                        </div>\n                    )}\n                </div>\n                <div className={b('content')}>\n                    <NotRenderUntilFirstVisible\n                        hide={category !== QueryResultTab.RESULT && !Number.isInteger(resultIndex)}\n                        className={b('result-wrap')}\n                    >\n                        <QueryResultContainer query={query} resultIndex={resultIndex ?? 0} />\n                    </NotRenderUntilFirstVisible>\n                    {category === QueryResultTab.ERROR && <Error error={query.error} />}\n                    {category === QueryResultTab.META && <QueryMetaTable query={query} />}\n\n                    <NotRenderUntilFirstVisible hide={category !== QueryResultTab.STATISTIC}>\n                        <YQLStatisticsTable query={query} />\n                    </NotRenderUntilFirstVisible>\n                </div>\n            </NotRenderUntilFirstVisible>\n            <div></div>\n        </div>\n    ) : null;\n});\n"],"mappings":"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"}

package/build/esm/ui/pages/query-tracker/QueryResultsView/index.css

@@ -12,17 +12,10 @@
   width: 100%;
   z-index: 1;
 }
-.query-result-table__floating-bottom-left {
-  position: sticky;
-  bottom: 20px;
-  pointer-events: none;
-  display: flex;
-  z-index: 2;
-}
-.query-result-table__padding_span {
-  flex: 1;
-}
 .query-result-table__pagination {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
   margin-right: 20px;
   background-color: var(--yc-color-base-float);
   border-radius: 8px;

package/build/esm/ui/pages/query-tracker/QueryResultsView/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,cAAA;ACCJ;ADCI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;ACCR;ADEI;EACI,gBAAA;EACA,YAAA;EACA,oBAAA;EACA,aAAA;EACA,UAAA;ACAR;ADGI;EACI,OAAA;ACDR;ADII;EACI,kBAAA;EACA,4CAAA;EACA,kBAAA;EACA,gDAAA;EACA,YAAA;EACA,mBAAA;ACFR","file":"index.css","sourcesContent":[".query-result-table {\n    height: 100%;\n    position: relative;\n    overflow: auto;\n\n    &__loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        position: absolute;\n        width: 100%;\n        z-index: 1;\n    }\n\n    &__floating-bottom-left {\n        position: sticky;\n        bottom: 20px;\n        pointer-events: none;\n        display: flex;\n        z-index: 2;\n    }\n\n    &__padding_span {\n        flex: 1;\n    }\n\n    &__pagination {\n        margin-right: 20px;\n        background-color: var(--yc-color-base-float);\n        border-radius: 8px;\n        box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n        padding: 8px;\n        pointer-events: all;\n    }\n}\n",".query-result-table {\n  height: 100%;\n  position: relative;\n  overflow: auto;\n}\n.query-result-table__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n.query-result-table__floating-bottom-left {\n  position: sticky;\n  bottom: 20px;\n  pointer-events: none;\n  display: flex;\n  z-index: 2;\n}\n.query-result-table__padding_span {\n  flex: 1;\n}\n.query-result-table__pagination {\n  margin-right: 20px;\n  background-color: var(--yc-color-base-float);\n  border-radius: 8px;\n  box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n  padding: 8px;\n  pointer-events: all;\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,cAAA;ACCJ;ADCI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;ACCR;ADEI;EACI,eAAA;EACA,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,4CAAA;EACA,kBAAA;EACA,gDAAA;EACA,YAAA;EACA,mBAAA;ACDR","file":"index.css","sourcesContent":[".query-result-table {\n    height: 100%;\n    position: relative;\n    overflow: auto;\n\n    &__loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        position: absolute;\n        width: 100%;\n        z-index: 1;\n    }\n\n    &__pagination {\n        position: fixed;\n        right: 20px;\n        bottom: 20px;\n\n        margin-right: 20px;\n        background-color: var(--yc-color-base-float);\n        border-radius: 8px;\n        box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n        padding: 8px;\n        pointer-events: all;\n    }\n}\n",".query-result-table {\n  height: 100%;\n  position: relative;\n  overflow: auto;\n}\n.query-result-table__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n.query-result-table__pagination {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  background-color: var(--yc-color-base-float);\n  border-radius: 8px;\n  box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n  padding: 8px;\n  pointer-events: all;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/build/esm/ui/pages/query-tracker/QueryResultsView/index.js

@@ -48,15 +48,10 @@ export var QueryResultsView = /*#__PURE__*/React.memo(function QueryResultsView(
     }), (result === null || result === void 0 ? void 0 : result.resultReady) && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(QueryReadyResultView, {
         result: result
-      }), result.settings.viewMode === QueryResultsViewMode.Table && /*#__PURE__*/_jsxs("div", {
-        className: b('floating-bottom-left'),
-        children: [/*#__PURE__*/_jsx("div", {
-          className: b('padding_span')
-        }), /*#__PURE__*/_jsx(ResultPaginator, {
-          className: b('pagination'),
-          queryId: query.id,
-          resultIndex: index
-        })]
+      }), result.settings.viewMode === QueryResultsViewMode.Table && /*#__PURE__*/_jsx(ResultPaginator, {
+        className: b('pagination'),
+        queryId: query.id,
+        resultIndex: index
       })]
     }), (result === null || result === void 0 ? void 0 : result.state) === QueryResultState.Error && /*#__PURE__*/_jsx(Error, {
       error: result.error