pollination-react-io 1.81.1 → 1.82.1

package/build/RunDetails/RunContent.types.d.ts

@@ -15,4 +15,5 @@ export interface RunContentProps {
     getFileCard?: (card: FileCardProps) => any;
     getFolderCard?: (card: FolderCardProps) => any;
     isCloud?: boolean;
+    isOpen?: boolean;
 }

package/build/index.esm.js

@@ -56439,17 +56439,18 @@ var FolderCard = function (_a) {
         open && React__default.createElement("div", { className: 'card-description' }, description));
 };
 
-var css_248z$2 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  --primary3: #000;\n  --success: #46A758;\n  --warning: #F76809;\n  --danger: #FF4616;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n@keyframes Animation {\n  0% {\n    background-position: 200%;\n  }\n  50% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: 0%;\n  }\n}\n.loading {\n  background: linear-gradient(45deg, transparent, var(--primary), 12%, transparent);\n  background-size: 200%;\n  animation: Animation 3s ease infinite;\n}\n\n@keyframes open {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes close {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n.collapse-content {\n  overflow: hidden;\n  font-size: inherit;\n  color: inherit;\n}\n\n.collapse-content[data-state=open] {\n  animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n  animation: close 300ms ease-out;\n}\n\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  grid-auto-rows: auto;\n  grid-gap: 1rem;\n}\n\n.cards-container {\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  padding: 10px 0 0 0;\n  margin: 10px 0 0 0;\n  border-radius: 6px;\n}\n\n.cards-container-title {\n  padding: 10px 10px 10px 10px;\n  margin: 0 0 0 10px;\n  font-size: 18px !important;\n}";
+var css_248z$2 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  --primary3: #000;\n  --success: #46A758;\n  --warning: #F76809;\n  --danger: #FF4616;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n@keyframes Animation {\n  0% {\n    background-position: 200%;\n  }\n  50% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: 0%;\n  }\n}\n.loading {\n  background: linear-gradient(45deg, transparent, var(--primary), 12%, transparent);\n  background-size: 200%;\n  animation: Animation 3s ease infinite;\n}\n\n@keyframes open {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes close {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n.collapse-content {\n  overflow: hidden;\n  font-size: inherit;\n  color: inherit;\n}\n\n.collapse-content[data-state=open] {\n  animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n  animation: close 300ms ease-out;\n}\n\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  grid-auto-rows: auto;\n  grid-gap: 1rem;\n}\n\n.cards-container {\n  border: 1px solid rgba(0, 0, 0, 0.125);\n  padding: 10px 0 0 0;\n  margin: 10px 0 0 0;\n  border-radius: 6px;\n}\n\n.cards-container-title {\n  padding: 10px 10px 10px 10px;\n  margin: 0 0 10px 10px;\n  cursor: pointer;\n  font-size: 18px !important;\n}";
 styleInject(css_248z$2);
 
 var RunContent = function (_a) {
-    var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, run = _a.run, client = _a.client, title = _a.title, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard, _b = _a.isCloud, isCloud = _b === void 0 ? true : _b;
+    var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, run = _a.run, client = _a.client, title = _a.title, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard, _b = _a.isCloud, isCloud = _b === void 0 ? true : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c;
     var getTrigger = useRuns(client).getTrigger;
-    var _c = useState([]), currData = _c[0], setCurrData = _c[1];
+    var _d = useState([]), currData = _d[0], setCurrData = _d[1];
     var fileExplorer = usePollinationPanel().fileExplorer;
-    var _d = useState([]), currParams = _d[0], setCurrParams = _d[1];
-    var _e = useState([]), currFiles = _e[0], setCurrFiles = _e[1];
-    var _f = useState([]), currFolders = _f[0], setCurrFolders = _f[1];
+    var _e = useState([]), currParams = _e[0], setCurrParams = _e[1];
+    var _f = useState([]), currFiles = _f[0], setCurrFiles = _f[1];
+    var _g = useState([]), currFolders = _g[0], setCurrFolders = _g[1];
+    var _h = useState(isOpen), open = _h[0], setOpen = _h[1];
     var trigger = useMemo(function () { return isCloud ? getTrigger(run) : false; }, [run, isCloud]);
     useEffect(function () { return setCurrData(inputData); }, [inputData]);
     useEffect(function () {
@@ -56516,18 +56517,21 @@ var RunContent = function (_a) {
         }
     };
     return React__default.createElement("div", { className: 'cards-container', style: __assign({}, style) },
-        React__default.createElement("h5", { className: 'cards-container-title' }, title || 'Something'),
-        currFiles.length > 0 && projectOwner && projectName && client && run && React__default.createElement("div", { style: { padding: '20px' } },
+        React__default.createElement("h5", { className: 'cards-container-title', role: 'button', onClick: function (e) {
+                e.stopPropagation();
+                setOpen(function (prev) { return !prev; });
+            } }, title || 'Something'),
+        open && currFiles.length > 0 && projectOwner && projectName && client && run && React__default.createElement("div", { style: { padding: '20px' } },
             React__default.createElement("div", { className: 'cards' }, currFiles.map(function (_a, index) {
                 var label = _a.label, path = _a.path, description = _a.description;
                 return React__default.createElement(FileCard, { projectOwner: projectOwner, projectName: projectName, run: run, client: client, key: "filecard-".concat(index), label: label, path: path, description: description, onClicked: onFileClicked, isCloud: isCloud });
             }))),
-        currFolders.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
+        open && currFolders.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
             React__default.createElement("div", { className: 'cards' }, currFolders.map(function (_a, index) {
                 var label = _a.label, path = _a.path, description = _a.description;
                 return React__default.createElement(FolderCard, { key: "foldercard-".concat(index), label: label, path: path, description: description, onClicked: onFolderClicked });
             }))),
-        currParams.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
+        open && currParams.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
             React__default.createElement("div", { className: 'cards' }, currParams && currParams.map(function (_a, index) {
                 var label = _a.label, value = _a.value, type = _a.type, description = _a.description;
                 return React__default.createElement(ParamCard, { key: "parmcard-".concat(index), label: label, value: value, type: type, description: description });
@@ -56569,9 +56573,9 @@ var RunDetails = function (_a) {
         outputs &&
             React__default.createElement(RunContent, { title: 'Outputs', inputData: outputs, projectName: projectName, projectOwner: projectOwner, run: run, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard, isCloud: isCloud }),
         recipeInputs &&
-            React__default.createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, run: run, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard, isCloud: isCloud }),
+            React__default.createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, run: run, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard, isCloud: isCloud, isOpen: false }),
         extraInputs && extraInputs.length > 0 &&
-            React__default.createElement(RunContent, { title: 'Extra Inputs', inputData: extraInputs, projectName: projectName, projectOwner: projectOwner, run: run, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard, isCloud: isCloud })));
+            React__default.createElement(RunContent, { title: 'Extra Inputs', inputData: extraInputs, projectName: projectName, projectOwner: projectOwner, run: run, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard, isCloud: isCloud, isOpen: false })));
 };
 
 var css_248z$1 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\n  --primary3: #000;\n  --success: #46A758;\n  --warning: #F76809;\n  --danger: #FF4616;\n  /* radix-ui/colors */\n  --slate1: hsl(206, 30.0%, 98.8%);\n  --slate2: hsl(210, 16.7%, 97.6%);\n  --slate3: hsl(209, 13.3%, 95.3%);\n  --slate4: hsl(209, 12.2%, 93.2%);\n  --slate5: hsl(208, 11.7%, 91.1%);\n  --slate6: hsl(208, 11.3%, 88.9%);\n  --slate7: hsl(207, 11.1%, 85.9%);\n  --slate8: hsl(205, 10.7%, 78.0%);\n  --slate9: hsl(206, 6.0%, 56.1%);\n  --slate10: hsl(206, 5.8%, 52.3%);\n  --slate11: hsl(206, 6.0%, 43.5%);\n  --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n.spin {\n  animation: spin 1s linear 0s infinite;\n}\n\n@keyframes Animation {\n  0% {\n    background-position: 200%;\n  }\n  50% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: 0%;\n  }\n}\n.loading {\n  background: linear-gradient(45deg, transparent, var(--primary), 12%, transparent);\n  background-size: 200%;\n  animation: Animation 3s ease infinite;\n}\n\n@keyframes open {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes close {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n.collapse-content {\n  overflow: hidden;\n  font-size: inherit;\n  color: inherit;\n}\n\n.collapse-content[data-state=open] {\n  animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n  animation: close 300ms ease-out;\n}\n\n.run-progress {\n  grid-area: runprogress;\n  font-size: 0.9rem;\n  text-align: left !important;\n}\n\n.run-link {\n  grid-area: runlink;\n  text-align: right !important;\n  font-size: 1rem;\n  white-space: nowrap;\n}\n\n.run-details {\n  grid-area: rundetails;\n  font-size: 0.9rem;\n}\n\n.study-run-container {\n  display: grid;\n  grid-template-areas: \"runprogress runprogress runprogress runprogress runprogress runlink\" \"rundetails rundetails rundetails rundetails rundetails rundetails\";\n  gap: 0.35rem;\n  border: 0.1rem solid;\n  align-items: center;\n  padding: 0.75rem;\n  transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;\n  grid-template-rows: max-content auto;\n  border-radius: 6px;\n  line-height: 1.5;\n}\n\n.study-run-container:hover {\n  cursor: pointer;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px, rgba(0, 0, 0, 0.09) 0px 5px 12px 4px;\n}\n\n.run-navigator {\n  display: grid;\n  grid-template-columns: min-content auto min-content min-content;\n  grid-auto-rows: auto;\n  align-items: center;\n  grid-gap: 0.9rem;\n}\n\n.run-pg-input {\n  margin: 0 4px 0 4px;\n  padding: 8px 8px;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.8509803922);\n  width: min-content;\n  border-radius: 2px;\n  font-size: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n}\n\n.container-scroll {\n  display: inline-flex;\n  flex-direction: row;\n  overflow-x: auto;\n  width: 100%;\n}\n\n.blink-effect {\n  animation: blinker 5s linear infinite;\n}\n\n@keyframes blinker {\n  50% {\n    border: 0.1rem solid white;\n  }\n}";