@perses-dev/dashboards 0.5.1 → 0.5.2

package/dist/cjs/components/Panel/Panel.js

@@ -18,11 +18,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const react_1 = require("react");
+const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
+const react_intersection_observer_1 = require("react-intersection-observer");
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const components_1 = require("@perses-dev/components");
 const material_1 = require("@mui/material");
 const InformationOutline_1 = __importDefault(require("mdi-material-ui/InformationOutline"));
-const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */
@@ -35,9 +36,14 @@ function Panel(props) {
             return undefined;
         return { width, height };
     }, [width, height]);
+    const { ref, inView } = (0, react_intersection_observer_1.useInView)({
+        threshold: 0.3,
+        initialInView: false,
+        triggerOnce: true,
+    });
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Card, { ref: ref, sx: {
             ...others.sx,
             width: '100%',
             height: '100%',
@@ -59,6 +65,6 @@ function Panel(props) {
                     ':last-child': {
                         padding: (theme) => theme.spacing(panelPadding),
                     },
-                }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PanelComponent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
+                }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: inView === true && (0, jsx_runtime_1.jsx)(plugin_system_1.PanelComponent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
 }
 exports.Panel = Panel;

package/dist/cjs/components/Panel/Panel.test.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const plugin_system_1 = require("@perses-dev/plugin-system");
+require("intersection-observer");
 const react_1 = require("@testing-library/react");
 const test_1 = require("../../test");
 const Panel_1 = require("./Panel");

package/dist/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAa,SAAS,EAAuC,MAAM,eAAe,CAAC;AAI1F,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoFtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAa,SAAS,EAAuC,MAAM,eAAe,CAAC;AAG1F,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}

package/dist/components/Panel/Panel.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:i,...o}=e,[r,t]=useState(null),{width:n,height:s}=useResizeObserver({ref:r}),a=useMemo((()=>{if(void 0!==n&&void 0!==s)return{width:n,height:s}}),[n,s]);return _jsxs(Card,{sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Right,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,sx:{fontSize:"1rem",position:"relative",left:"4px",cursor:"pointer"}})})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:t,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(PanelComponent,{definition:i,contentDimensions:a})})})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";export function Panel(e){const{definition:i,...o}=e,[r,n]=useState(null),{width:t,height:s}=useResizeObserver({ref:r}),a=useMemo((()=>{if(void 0!==t&&void 0!==s)return{width:t,height:s}}),[t,s]),{ref:l,inView:d}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0});return _jsxs(Card,{ref:l,sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Right,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,sx:{fontSize:"1rem",position:"relative",left:"4px",cursor:"pointer"}})})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:n,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===d&&_jsx(PanelComponent,{definition:i,contentDimensions:a})})})]})}

package/dist/components/Panel/Panel.test.d.ts

@@ -1,2 +1,2 @@
-export {};
+import 'intersection-observer';
 //# sourceMappingURL=Panel.test.d.ts.map

package/dist/components/Panel/Panel.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAeA,OAAO,uBAAuB,CAAC"}

package/dist/components/Panel/Panel.test.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}}})),it("should render name and info icon",(async()=>{(()=>{const{addMockPlugin:n,pluginRegistryProps:i}=mockPluginRegistryProps();n(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...i,children:_jsx(Panel,{...e})}))})(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")}))}));
+import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}}})),it("should render name and info icon",(async()=>{(()=>{const{addMockPlugin:n,pluginRegistryProps:i}=mockPluginRegistryProps();n(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...i,children:_jsx(Panel,{...e})}))})(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")}))}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,13 +24,17 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.5.1",
-    "@perses-dev/core": "^0.5.1",
-    "@perses-dev/plugin-system": "^0.5.1",
+    "@perses-dev/components": "^0.5.2",
+    "@perses-dev/core": "^0.5.2",
+    "@perses-dev/plugin-system": "^0.5.2",
     "immer": "^9.0.15",
+    "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
     "use-resize-observer": "^8.0.0"
   },
+  "devDependencies": {
+    "intersection-observer": "^0.12.2"
+  },
   "peerDependencies": {
     "@mui/material": "^5.5.1",
     "react": "^17.0.2"