@dexteel/mesf-core 4.6.0 → 4.6.2

package/CHANGELOG.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 4.6.2
+- Save Current View changes
+## 4.6.1
+- Fix manual scales
 ## 4.6.0
 - Add Views and ViewTags functionalities to Trendings
 ## 4.5.9
@@ -84,4 +88,4 @@
 ## 2.1.5
 - Fix exportExcel method. Now it supports when sheets structure is defined. **REQUIRES mesf-core-api@1.2.2**
 ## 2.1.3
-- Implementation of **exportExcel** inside MESApiService. **REQUIRES mesf-core-api@1.2.0**
+- Implementation of **exportExcel** inside MESApiService. **REQUIRES mesf-core-api@1.2.0**

package/dist/index.esm.js

@@ -8469,6 +8469,9 @@ var TrendingsReducer = createSlice({
         setViewTags: function (state, _a) {
             var payload = _a.payload;
             state.viewTags = payload;
+        },
+        setGraphShouldUpdate: function (state) {
+            state.graphShouldUpdate = +1;
         }
     }
 });
@@ -8878,7 +8881,7 @@ var upsertViewTag = function (ViewId, TagId, Color, MinScale, MaxScale, IsVisibl
 
 var LoadViewModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose;
-    var _b = useTrendingContext(), _c = _b.state; _c.viewTags; var views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var _f = useState(''), error = _f[0], setError = _f[1];
     var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8898,21 +8901,21 @@ var LoadViewModal = function (_a) {
                         setError(viewTagsResp.message);
                     }
                     setIsLoading(false);
-                    handleClose();
+                    handleClose(true);
                     _a.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
     return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true },
                     React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
                         (React__default.createElement("div", null, "No tag views detected, please add one"))))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: handleClose }, "Cancel"),
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
                     React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
@@ -9024,7 +9027,7 @@ var SaveAsViewModal = function (_a) {
                             setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
                         }
                         else {
-                            handleClose();
+                            handleClose(true);
                         }
                     });
                     return [3 /*break*/, 4];
@@ -9038,7 +9041,7 @@ var SaveAsViewModal = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: handleClose, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
@@ -9052,7 +9055,7 @@ var SaveAsViewModal = function (_a) {
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
                     React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: handleClose }, "Cancel")),
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
                     React__default.createElement(Grid$1, { item: true },
                         React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
@@ -9190,12 +9193,76 @@ var timeDifference = function (start, end) {
     return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
 };
 
+var SaveViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var _d = useTrendingContext().state, viewTags = _d.viewTags, viewSelected = _d.viewSelected;
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
+                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
+                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 2:
+                    results = _a.sent();
+                    results.forEach(function (result, index) {
+                        if (result.status === "rejected") {
+                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
+                        }
+                        else {
+                            handleClose(true);
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(Typography, null,
+                            "Do you want to save changes on ",
+                            React__default.createElement("strong", null, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
+                            " ?")))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
 var TableComponent = function (_a) {
-    var chartData = _a.chartData, cursorData = _a.cursorData;
+    var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
     var classes = useTagsTableStyles();
-    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, setViewTags = _b.actions.setViewTags;
-    var _d = useState(''), error = _d[0], setError = _d[1];
-    var _e = useState(""); _e[0]; _e[1];
+    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate;
+    var _e = useState(''), error = _e[0], setError = _e[1];
     var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
     var _f = useState({}), editableTagNames = _f[0], setEditableTagNames = _f[1];
     var handleChange = function (tagId, value, property) {
@@ -9204,6 +9271,7 @@ var TableComponent = function (_a) {
             return tag.TagId === tagId ? __assign(__assign({}, tag), (_a = {}, _a[property] = value, _a.IsAutoScale = false, _a)) : tag;
         });
         setViewTags(newTags);
+        setGraphShouldUpdate();
     };
     var handleChangeAlias = function (tagId, newName) {
         var newTags = viewTags.map(function (tag) { return (tag.TagId === tagId ? __assign(__assign({}, tag), { Alias: newName }) : tag); });
@@ -9232,10 +9300,16 @@ var TableComponent = function (_a) {
             setViewTags(newArr);
         }
     };
+    var handleAbleScales = function (tagId, checked) {
+        if (checked) {
+            handleAutoScaleChange(tagId, checked);
+        }
+    };
     var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
     var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
-    var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
-    var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
+    var _j = useState(false), saveViewModalOpen = _j[0], setSaveViewModalOpen = _j[1];
+    var _k = useState(false), saveAsViewModalOpen = _k[0], setSaveAsViewModalOpen = _k[1];
+    var _l = useState(false), loadViewOpen = _l[0], setLoadViewOpen = _l[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -9246,12 +9320,13 @@ var TableComponent = function (_a) {
             React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
     };
     // Position state for the context menu
-    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
+    var _m = useState({ x: 0, y: 0 }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
-        { id: 'saveAsView', label: 'Save as View', onClick: function () { return setSaveAsViewModalOpen(true); } },
+        { id: 'saveView', label: 'Save View', onClick: function () { setSaveViewModalOpen(true); } },
+        { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
         { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
     var handleTagSelect = function (selectedTag) {
@@ -9433,13 +9508,21 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: classes.color },
                                     React__default.createElement(ColorPicker, { onChange: handleColorChange, color: tag.Color, elementId: tag.TagId })),
                                 React__default.createElement("td", { className: classes.inputCol },
-                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.IsAutoScale, value: tag.MinScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                    React__default.createElement("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
+                                            color: 'rgba(84, 84, 84, 1)',
+                                            border: '1px solid rgba(118, 118, 118, 0.3)'
+                                        } : {})), value: tag.MinScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                             var value = e.target.value;
                                             var numericValue = Number(value);
                                             handleChange(tag.TagId, numericValue, 'MinScale');
                                         } })),
                                 React__default.createElement("td", { className: classes.inputCol },
-                                    React__default.createElement("input", { type: "text", style: { width: '100%' }, disabled: tag.IsAutoScale, value: tag.MaxScale, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
+                                    React__default.createElement("input", { type: "text", style: __assign({ width: '100%' }, (tag.IsAutoScale ? {
+                                            backgroundColor: 'rgba(239, 239, 239, 0.3)',
+                                            color: 'rgba(84, 84, 84, 1)',
+                                            border: '1px solid rgba(118, 118, 118, 0.3)'
+                                        } : {})), value: tag.MaxScale, onClick: function () { return handleAbleScales(tag.TagId, tag.IsAutoScale); }, onFocus: function (e) { return e.target.select(); }, onChange: function (e) {
                                             var value = e.target.value;
                                             var numericValue = Number(value);
                                             // Check if the value is a number and not empty
@@ -9468,8 +9551,21 @@ var TableComponent = function (_a) {
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
             React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
-            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function () { return setSaveAsViewModalOpen(false); } }),
-            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } })),
+            React__default.createElement(SaveViewModal, { open: saveViewModalOpen, handleClose: function (shouldUpdate) {
+                    setSaveViewModalOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } }),
+            React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
+                    setSaveAsViewModalOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } }),
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
+                    setLoadViewOpen(false);
+                    if (shouldUpdate)
+                        getTagsFromAPI().then(function () { });
+                } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
@@ -9868,53 +9964,62 @@ var TrendingChart = function (_a) {
     var verticalLinePlugin = useGetVerticalLinePlugin(setChartArea, setLineTabCoords);
     var xAxisDatePlugin = useXAxisDatePlugin();
     var yAxisPlugin = useYAxisPlugin();
+    var seriesVsTags = useRef({});
     useEffect(function () {
         var axes = [];
         if (!series.length) {
             return;
         }
         viewTags.forEach(function (tag, index) {
-            var _a;
-            if ((_a = series[index]) === null || _a === void 0 ? void 0 : _a.length) {
-                var existingAxis = axes.find(function (existingTag) {
-                    return areRangesSimilar(existingTag, tag);
-                });
-                if (!existingAxis) {
-                    axes.push(tag); // Add new axis if no similar one exists
-                }
+            var existingAxis = axes.findIndex(function (existingTag) {
+                return areRangesSimilar(existingTag, tag);
+            });
+            if (existingAxis === -1) {
+                axes.push(tag); // Add new axis if no similar one exists
+                seriesVsTags.current[tag.TagId] = tag.TagId;
+            }
+            else {
+                seriesVsTags.current[tag.TagId] = axes[existingAxis].TagId;
             }
         });
         // Configure yAxes based on grouped axes
-        var yAxesConfig = axes.map(function (axis, index) {
+        var yAxesConfig = axes.map(function (axis) {
             return {
-                id: "y-axis-".concat(index),
+                id: "y-axis-".concat(axis.TagId),
                 type: "linear",
-                display: axis.visible,
+                display: axis.IsVisible,
                 scaleLabel: {
                     display: true,
-                    labelString: axis.tagName
-                },
-                ticks: {
-                    min: axis.autoScale ? undefined : axis.minScale,
-                    max: axis.autoScale ? undefined : axis.maxScale
+                    labelString: axis.TagName
                 },
+                min: axis.IsAutoScale ? undefined : axis.MinScale,
+                max: axis.IsAutoScale ? undefined : axis.MaxScale,
+                suggestedMin: axis.IsAutoScale ? undefined : axis.MinScale,
+                suggestedMax: axis.IsAutoScale ? undefined : axis.MaxScale,
+                stepSize: 10,
                 grid: {
                     display: true
                 },
-                afterUpdate: function (axis) {
-                    var chart = axis.chart;
+                afterUpdate: function (a) {
+                    var chart = a.chart;
                     var keys = Object.keys(chart.scales).filter(function (sc) { return sc !== 'x'; });
+                    var counterOfDefaultsScales = 0;
                     if (keys.length > 1) {
                         for (var scaleKey in chart.scales) {
                             var scale = chart.scales[scaleKey];
                             if (scale.max === 1 && scale.min === 0) {
                                 chart.scales[scaleKey].display = false;
                                 chart.scales[scaleKey].options.display = false;
+                                counterOfDefaultsScales++;
                             }
                             else {
                                 chart.scales[scaleKey].display = true;
                                 chart.scales[scaleKey].options.display = true;
                             }
+                            if (counterOfDefaultsScales === keys.length) {
+                                chart.scales[keys[0]].display = true;
+                                chart.scales[keys[0]].options.display = true;
+                            }
                         }
                     }
                 }
@@ -9929,11 +10034,9 @@ var TrendingChart = function (_a) {
         });
         var updatedSeries = series.map(function (serie, index) {
             var tag = viewTags[index];
-            var axisIndex = axes.findIndex(function (existingTag) {
-                return areRangesSimilar(existingTag, tag);
-            });
+            var yAxisTagId = seriesVsTags.current[tag.TagId];
             return {
-                yAxisID: axisIndex >= 0 ? "y-axis-".concat(axisIndex) : undefined,
+                yAxisID: "y-axis-".concat(yAxisTagId),
                 data: serie.map(function (sample) { return ({
                     x: new Date(sample.timestamp),
                     y: sample.value
@@ -9982,7 +10085,7 @@ var TrendingChart = function (_a) {
 
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 var Trending = function (_a) {
-    _a.title;
+    _a.title; var getTagsFromAPI = _a.getTagsFromAPI;
     var _b = useTrendingContext(), state = _b.state, viewTags = _b.state.viewTags;
     var _c = useState(''), error = _c[0], setError = _c[1];
     var _d = useState(true), loading = _d[0], setLoading = _d[1];
@@ -10039,7 +10142,7 @@ var Trending = function (_a) {
             React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
                 React__default.createElement(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
             React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '40%', minWidth: "100%", paddingTop: "3rem" } },
-                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData })),
+                React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI })),
             loading && (React__default.createElement(Grid$1, { item: true, xs: 12, style: { textAlign: 'center' } },
                 React__default.createElement("p", null, "Loading...")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
@@ -10048,44 +10151,44 @@ var Trending = function (_a) {
 var TrendingsPage = function (props) {
     var _a = useState(''), error = _a[0], setError = _a[1];
     var _b = useTrendingContext().actions, setViews = _b.setViews, setViewTags = _b.setViewTags, setViewSelected = _b.setViewSelected;
+    var getTagsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewsResp, lastCreated, viewTagsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getViews(null)];
+                case 1:
+                    viewsResp = _a.sent();
+                    if (!viewsResp.ok) return [3 /*break*/, 3];
+                    setViews(viewsResp.data.tables[0].rows);
+                    lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                    //viewSelected
+                    setViewSelected(lastCreated);
+                    return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                case 2:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(viewsResp.message);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
-        var getTags = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var viewsResp, lastCreated, viewTagsResp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getViews(null)];
-                    case 1:
-                        viewsResp = _a.sent();
-                        if (!viewsResp.ok) return [3 /*break*/, 3];
-                        setViews(viewsResp.data.tables[0].rows);
-                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
-                        //viewSelected
-                        setViewSelected(lastCreated);
-                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
-                    case 2:
-                        viewTagsResp = _a.sent();
-                        if (viewTagsResp.ok) {
-                            setViewTags(viewTagsResp.data.tables[0].rows);
-                        }
-                        else {
-                            setError(viewTagsResp.message);
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        setError(viewsResp.message);
-                        _a.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        getTags();
+        getTagsFromAPI();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React__default.createElement(Paper, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
                     React__default.createElement(Grid$1, { item: true, xs: 12 },
-                        React__default.createElement(Trending, { title: "Trending Chart" }))))),
+                        React__default.createElement(Trending, { title: "Trending Chart", getTagsFromAPI: getTagsFromAPI }))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, size: "xl", title: "ERROR" })));
 };