datastake-daf 0.6.440 → 0.6.441

package/dist/components/index.js

@@ -14538,9 +14538,8 @@ DAFFooter.propTypes = {
 const PAGE_HEIGHT = 1587;
 const HEADER_HEIGHT = 100;
 const FOOTER_HEIGHT = 70;
-const GAP_BETWEEN_BLOCKS = 24; // vertical spacing inside page
-const FILL_RATIO = 0.80; // your "80% of page" rule
-
+const GAP_BETWEEN_BLOCKS = 24;
+const FILL_RATIO = 0.80;
 const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 const Row = _ref => {
   let {
@@ -14579,10 +14578,19 @@ function PdfView(_ref2) {
     documentId = "IDD-0000000",
     downloadId = "DWL-00000123"
   } = _ref2;
+  // Config actually used for rendering (may expand if we split big blocks)
+  const [expandedConfig, setExpandedConfig] = React.useState(config);
   // index -> {height, ref}
   const [sections, setSections] = React.useState({});
-  // pageMap is an array of arrays of indices, e.g. [[0,1,2],[3,4],...]
+  // [[indices for page 1], [indices for page 2], ...]
   const [pageMap, setPageMap] = React.useState([]);
+
+  // Reset expansion when the external config changes
+  React.useEffect(() => {
+    setExpandedConfig(config);
+    setSections({});
+    setPageMap([]);
+  }, [config]);
   const onChangeHeight = React.useCallback((index, conf) => {
     setSections(prev => {
       var _prev$index;
@@ -14592,48 +14600,133 @@ function PdfView(_ref2) {
     });
   }, []);
 
-  // Core paginator: greedy packing with 80% threshold
+  // --- Step 1: After measurement, split any oversized splittable blocks (one per pass) ---
+  React.useEffect(() => {
+    const keys = Object.keys(sections).map(k => Number(k)).sort((a, b) => a - b);
+    if (keys.length !== expandedConfig.length) return; // not all measured yet
+
+    for (const idx of keys) {
+      var _sections$idx$height, _sections$idx;
+      const h = (_sections$idx$height = (_sections$idx = sections[idx]) === null || _sections$idx === void 0 ? void 0 : _sections$idx.height) !== null && _sections$idx$height !== void 0 ? _sections$idx$height : 0;
+      const item = expandedConfig[idx];
+      const canSplit = (item === null || item === void 0 ? void 0 : item.splittable) && typeof (item === null || item === void 0 ? void 0 : item.splitInto) === "function";
+      if (canSplit && h > CONTENT_HEIGHT) {
+        // Split it and re-measure
+        const chunks = item.splitInto(CONTENT_HEIGHT);
+        const next = [...expandedConfig.slice(0, idx), ...chunks, ...expandedConfig.slice(idx + 1)];
+        setExpandedConfig(next);
+        setSections({}); // force re-measure since indices changed
+        setPageMap([]);
+        return; // do one split per layout pass to avoid loops
+      }
+    }
+  }, [sections, expandedConfig]);
+
+  // --- Step 2: Paginate with per-block hints (priority + keepWithNext) ---
   const paginate = React.useCallback(() => {
     const keys = Object.keys(sections).map(k => Number(k)).sort((a, b) => a - b);
-    if (keys.length !== config.length) return; // wait until all measured
+    if (keys.length !== expandedConfig.length) return;
 
+    // Build meta (read hints from config)
+    const meta = keys.map(i => {
+      var _expandedConfig$i$pri, _expandedConfig$i, _expandedConfig$i2;
+      return {
+        i,
+        h: sections[i].height,
+        priority: (_expandedConfig$i$pri = (_expandedConfig$i = expandedConfig[i]) === null || _expandedConfig$i === void 0 ? void 0 : _expandedConfig$i.priority) !== null && _expandedConfig$i$pri !== void 0 ? _expandedConfig$i$pri : 2,
+        // 1 > 2 > 3 (1 is most important)
+        keepWithNext: !!((_expandedConfig$i2 = expandedConfig[i]) !== null && _expandedConfig$i2 !== void 0 && _expandedConfig$i2.keepWithNext)
+      };
+    });
     const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
     const pages = [];
     let current = [];
     let used = 0;
-    for (let idx of keys) {
-      const h = sections[idx].height;
-      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + h;
-
-      // Oversized single block: start a new page but still place it alone
-      if (h > threshold && current.length === 0) {
-        current.push(idx);
-        pages.push(current);
+    let carryKeep = false;
+    for (let k = 0; k < meta.length; k++) {
+      const curr = meta[k];
+      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + curr.h;
+
+      // Honor keep-with-next from the previous block
+      if (carryKeep) {
+        // start current on a fresh page
+        if (current.length) pages.push(current);
+        current = [curr.i];
+        used = curr.h;
+        carryKeep = false;
+        if (curr.keepWithNext) carryKeep = true;
+        continue;
+      }
+
+      // Oversized singleton: own page
+      if (curr.h > threshold && current.length === 0) {
+        pages.push([curr.i]);
         current = [];
         used = 0;
+        carryKeep = false;
         continue;
       }
+
+      // Fits on current page?
       if (current.length === 0 || used + hWithGap <= threshold) {
-        current.push(idx);
+        current.push(curr.i);
         used += hWithGap;
       } else {
-        pages.push(current);
-        current = [idx];
-        used = h; // first item on a fresh page, no top gap
+        // Rebalance: try pushing a lower-priority block from current to next page to make room
+        let moved = false;
+        for (let j = current.length - 1; j >= 0; j--) {
+          const prevIdx = current[j];
+          const prev = meta.find(m => m.i === prevIdx);
+          if (prev.priority > curr.priority) {
+            // lower priority number = higher importance
+            const tentativeUsed = used - (j === 0 ? prev.h : prev.h + GAP_BETWEEN_BLOCKS);
+            if (tentativeUsed + hWithGap <= threshold) {
+              // move prev off this page
+              current.splice(j, 1);
+              used = tentativeUsed;
+              moved = true;
+              break;
+            }
+          }
+        }
+        if (!moved) {
+          pages.push(current);
+          current = [curr.i];
+          used = curr.h; // first element on new page (no top gap)
+        } else {
+          // we made space; place current here
+          current.push(curr.i);
+          used += hWithGap;
+        }
       }
+      if (curr.keepWithNext) carryKeep = true;
     }
     if (current.length) pages.push(current);
-    setPageMap(pages);
-  }, [sections, config.length]);
-
-  // Re-run pagination when sizes change
+    setPageMap(pages); // <-- unlimited pages; grows as needed
+  }, [expandedConfig, sections]);
   React.useEffect(() => {
     paginate();
   }, [paginate]);
   const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+
+  // Measurement layer (only shown until we have a pageMap)
+  const MeasurementLayer = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "view-content",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "daf-analysis-layout",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "sections-cont",
+        children: expandedConfig.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
+          widgets: widgets,
+          i: i,
+          onChangeHeight: onChangeHeight
+        }, "measure-".concat(i)))
+      })
+    })
+  }), [expandedConfig, onChangeHeight]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: contClassName,
-    children: [pageMap.map((indices, pageIdx) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: pageMap.length > 0 ? pageMap.map((indices, pageIdx) => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "pdf-page",
       style: {
         height: PAGE_HEIGHT,
@@ -14660,9 +14753,7 @@ function PdfView(_ref2) {
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "pdf-body",
         style: {
-          minHeight: CONTENT_HEIGHT,
-          paddingTop: 0,
-          paddingBottom: 0
+          minHeight: CONTENT_HEIGHT
         },
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
@@ -14671,7 +14762,7 @@ function PdfView(_ref2) {
             gap: GAP_BETWEEN_BLOCKS
           },
           children: indices.map(i => /*#__PURE__*/jsxRuntime.jsx(Row, {
-            widgets: config[i],
+            widgets: expandedConfig[i],
             i: i,
             onChangeHeight: onChangeHeight
           }, "row-".concat(i)))
@@ -14715,24 +14806,18 @@ function PdfView(_ref2) {
           })
         })]
       })]
-    }, "page-".concat(pageIdx))), pageMap.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "view-content",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-analysis-layout",
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "sections-cont",
-          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
-            widgets: widgets,
-            i: i,
-            onChangeHeight: onChangeHeight
-          }, "measure-".concat(i)))
-        })
-      })
-    })]
+    }, "page-".concat(pageIdx))) : MeasurementLayer
   });
 }
 PdfView.propTypes = {
-  config: PropTypes__default["default"].array,
+  config: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    render: PropTypes__default["default"].func.isRequired,
+    style: PropTypes__default["default"].object,
+    priority: PropTypes__default["default"].oneOf([1, 2, 3]),
+    keepWithNext: PropTypes__default["default"].bool,
+    splittable: PropTypes__default["default"].bool,
+    splitInto: PropTypes__default["default"].func // (maxHeightPx) => WidgetConfig[]
+  })),
   customClassName: PropTypes__default["default"].any,
   title: PropTypes__default["default"].string,
   imgSrc: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.440",
+	"version": "0.6.441",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,13 +1,13 @@
 import moment from "moment";
 import PropTypes from "prop-types";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
 const HEADER_HEIGHT = 100;
 const FOOTER_HEIGHT = 70;
-const GAP_BETWEEN_BLOCKS = 24;     // vertical spacing inside page
-const FILL_RATIO = 0.80;           // your "80% of page" rule
+const GAP_BETWEEN_BLOCKS = 24;
+const FILL_RATIO = 0.80;
 
 const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 
@@ -41,145 +41,222 @@ export default function PdfView({
   documentId = "IDD-0000000",
   downloadId = "DWL-00000123",
 }) {
+  // Config actually used for rendering (may expand if we split big blocks)
+  const [expandedConfig, setExpandedConfig] = useState(config);
   // index -> {height, ref}
   const [sections, setSections] = useState({});
-  // pageMap is an array of arrays of indices, e.g. [[0,1,2],[3,4],...]
+  // [[indices for page 1], [indices for page 2], ...]
   const [pageMap, setPageMap] = useState([]);
 
+  // Reset expansion when the external config changes
+  useEffect(() => {
+    setExpandedConfig(config);
+    setSections({});
+    setPageMap([]);
+  }, [config]);
+
   const onChangeHeight = useCallback((index, conf) => {
     setSections((prev) => (prev[index]?.height === conf.height ? prev : { ...prev, [index]: conf }));
   }, []);
 
-  // Core paginator: greedy packing with 80% threshold
+  // --- Step 1: After measurement, split any oversized splittable blocks (one per pass) ---
+  useEffect(() => {
+    const keys = Object.keys(sections)
+      .map((k) => Number(k))
+      .sort((a, b) => a - b);
+
+    if (keys.length !== expandedConfig.length) return; // not all measured yet
+
+    for (const idx of keys) {
+      const h = sections[idx]?.height ?? 0;
+      const item = expandedConfig[idx];
+      const canSplit = item?.splittable && typeof item?.splitInto === "function";
+      if (canSplit && h > CONTENT_HEIGHT) {
+        // Split it and re-measure
+        const chunks = item.splitInto(CONTENT_HEIGHT);
+        const next = [
+          ...expandedConfig.slice(0, idx),
+          ...chunks,
+          ...expandedConfig.slice(idx + 1),
+        ];
+        setExpandedConfig(next);
+        setSections({});    // force re-measure since indices changed
+        setPageMap([]);
+        return;             // do one split per layout pass to avoid loops
+      }
+    }
+  }, [sections, expandedConfig]);
+
+  // --- Step 2: Paginate with per-block hints (priority + keepWithNext) ---
   const paginate = useCallback(() => {
     const keys = Object.keys(sections)
       .map((k) => Number(k))
       .sort((a, b) => a - b);
+    if (keys.length !== expandedConfig.length) return;
 
-    if (keys.length !== config.length) return; // wait until all measured
+    // Build meta (read hints from config)
+    const meta = keys.map((i) => ({
+      i,
+      h: sections[i].height,
+      priority: expandedConfig[i]?.priority ?? 2,      // 1 > 2 > 3 (1 is most important)
+      keepWithNext: !!expandedConfig[i]?.keepWithNext,
+    }));
 
     const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
     const pages = [];
     let current = [];
     let used = 0;
+    let carryKeep = false;
 
-    for (let idx of keys) {
-      const h = sections[idx].height;
-      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + h;
+    for (let k = 0; k < meta.length; k++) {
+      const curr = meta[k];
+      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + curr.h;
+
+      // Honor keep-with-next from the previous block
+      if (carryKeep) {
+        // start current on a fresh page
+        if (current.length) pages.push(current);
+        current = [curr.i];
+        used = curr.h;
+        carryKeep = false;
+        if (curr.keepWithNext) carryKeep = true;
+        continue;
+      }
 
-      // Oversized single block: start a new page but still place it alone
-      if (h > threshold && current.length === 0) {
-        current.push(idx);
-        pages.push(current);
+      // Oversized singleton: own page
+      if (curr.h > threshold && current.length === 0) {
+        pages.push([curr.i]);
         current = [];
         used = 0;
+        carryKeep = false;
         continue;
       }
 
+      // Fits on current page?
       if (current.length === 0 || used + hWithGap <= threshold) {
-        current.push(idx);
+        current.push(curr.i);
         used += hWithGap;
       } else {
-        pages.push(current);
-        current = [idx];
-        used = h; // first item on a fresh page, no top gap
+        // Rebalance: try pushing a lower-priority block from current to next page to make room
+        let moved = false;
+        for (let j = current.length - 1; j >= 0; j--) {
+          const prevIdx = current[j];
+          const prev = meta.find((m) => m.i === prevIdx);
+          if (prev.priority > curr.priority) { // lower priority number = higher importance
+            const tentativeUsed = used - (j === 0 ? prev.h : (prev.h + GAP_BETWEEN_BLOCKS));
+            if (tentativeUsed + hWithGap <= threshold) {
+              // move prev off this page
+              current.splice(j, 1);
+              used = tentativeUsed;
+              moved = true;
+              break;
+            }
+          }
+        }
+        if (!moved) {
+          pages.push(current);
+          current = [curr.i];
+          used = curr.h; // first element on new page (no top gap)
+        } else {
+          // we made space; place current here
+          current.push(curr.i);
+          used += hWithGap;
+        }
       }
+
+      if (curr.keepWithNext) carryKeep = true;
     }
 
     if (current.length) pages.push(current);
-    setPageMap(pages);
-  }, [sections, config.length]);
+    setPageMap(pages); // <-- unlimited pages; grows as needed
+  }, [expandedConfig, sections]);
 
-  // Re-run pagination when sizes change
   useEffect(() => {
     paginate();
   }, [paginate]);
 
   const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
 
+  // Measurement layer (only shown until we have a pageMap)
+  const MeasurementLayer = useMemo(
+    () => (
+      <div className="view-content">
+        <div className="daf-analysis-layout">
+          <div className="sections-cont">
+            {expandedConfig.map((widgets, i) => (
+              <Row key={`measure-${i}`} widgets={widgets} i={i} onChangeHeight={onChangeHeight} />
+            ))}
+          </div>
+        </div>
+      </div>
+    ),
+    [expandedConfig, onChangeHeight]
+  );
+
   return (
     <div className={contClassName}>
-      {/* Render final paginated pages */}
-      {pageMap.map((indices, pageIdx) => (
-        <div
-          key={`page-${pageIdx}`}
-          className="pdf-page"
-          style={{ height: PAGE_HEIGHT, position: "relative", overflow: "hidden" }}
-        >
-          {/* Header */}
-          <div style={{ height: HEADER_HEIGHT }} className="flex-row dashboard-header">
-            <div className="flex flex-column justify-center flex-1">
-              <h2>{title}</h2>
-            </div>
-            <div className="flex flex-column justify-center">
-              <img src={imgSrc} alt="logo" />
-            </div>
-          </div>
+      {/* Render paginated pages (unlimited) */}
+      {pageMap.length > 0
+        ? pageMap.map((indices, pageIdx) => (
+            <div
+              key={`page-${pageIdx}`}
+              className="pdf-page"
+              style={{ height: PAGE_HEIGHT, position: "relative", overflow: "hidden" }}
+            >
+              {/* Header */}
+              <div style={{ height: HEADER_HEIGHT }} className="flex-row dashboard-header">
+                <div className="flex flex-column justify-center flex-1">
+                  <h2>{title}</h2>
+                </div>
+                <div className="flex flex-column justify-center">
+                  <img src={imgSrc} alt="logo" />
+                </div>
+              </div>
 
-          {/* Body */}
-          <div
-            className="pdf-body"
-            style={{
-              minHeight: CONTENT_HEIGHT,
-              paddingTop: 0,
-              paddingBottom: 0,
-            }}
-          >
-            <div style={{ display: "flex", flexDirection: "column", gap: GAP_BETWEEN_BLOCKS }}>
-              {indices.map((i) => (
-                <Row key={`row-${i}`} widgets={config[i]} i={i} onChangeHeight={onChangeHeight} />
-              ))}
-            </div>
-          </div>
+              {/* Body */}
+              <div className="pdf-body" style={{ minHeight: CONTENT_HEIGHT }}>
+                <div style={{ display: "flex", flexDirection: "column", gap: GAP_BETWEEN_BLOCKS }}>
+                  {indices.map((i) => (
+                    <Row key={`row-${i}`} widgets={expandedConfig[i]} i={i} onChangeHeight={onChangeHeight} />
+                  ))}
+                </div>
+              </div>
 
-          {/* Footer */}
-          <div style={{ height: FOOTER_HEIGHT }} className="dashboard-footer flex-row">
-            <div className="flex flex-column justify-center">
-              <h5>{moment().format("DD MMM YYYY")}</h5>
-            </div>
-            <div className="flex flex-column justify-center">
-              <div className="flex gap-2">
-                <h5>
-                  User ID: <strong>{userId}</strong>
-                </h5>
-                <h5>
-                  Account ID: <strong>{accountId}</strong>
-                </h5>
-                <h5>
-                  Document ID: <strong>{documentId}</strong>
-                </h5>
-                <h5>
-                  Download ID: <strong>{downloadId}</strong>
-                </h5>
+              {/* Footer */}
+              <div style={{ height: FOOTER_HEIGHT }} className="dashboard-footer flex-row">
+                <div className="flex flex-column justify-center">
+                  <h5>{moment().format("DD MMM YYYY")}</h5>
+                </div>
+                <div className="flex flex-column justify-center">
+                  <div className="flex gap-2">
+                    <h5>User ID: <strong>{userId}</strong></h5>
+                    <h5>Account ID: <strong>{accountId}</strong></h5>
+                    <h5>Document ID: <strong>{documentId}</strong></h5>
+                    <h5>Download ID: <strong>{downloadId}</strong></h5>
+                  </div>
+                </div>
+                <div className="flex flex-column justify-center">
+                  <h5>{pageIdx + 1}</h5>
+                </div>
               </div>
             </div>
-            <div className="flex flex-column justify-center">
-              <h5>{pageIdx + 1}</h5>
-            </div>
-          </div>
-        </div>
-      ))}
-
-      {/* Optional: first pass "measurement layer" for instant sizes (kept visible). 
-          If you want to avoid double-render cost, keep as-is; if you want to hide it after pagination,
-          you can track a 'measured' flag and conditionally render. */}
-      {pageMap.length === 0 && (
-        <div className="view-content">
-          <div className="daf-analysis-layout">
-            <div className="sections-cont">
-              {config.map((widgets, i) => (
-                <Row key={`measure-${i}`} widgets={widgets} i={i} onChangeHeight={onChangeHeight} />
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
+          ))
+        : MeasurementLayer}
     </div>
   );
 }
 
 PdfView.propTypes = {
-  config: PropTypes.array,
+  config: PropTypes.arrayOf(
+    PropTypes.shape({
+      render: PropTypes.func.isRequired,
+      style: PropTypes.object,
+      priority: PropTypes.oneOf([1, 2, 3]),
+      keepWithNext: PropTypes.bool,
+      splittable: PropTypes.bool,
+      splitInto: PropTypes.func, // (maxHeightPx) => WidgetConfig[]
+    })
+  ),
   customClassName: PropTypes.any,
   title: PropTypes.string,
   imgSrc: PropTypes.string,