deploy: e7e1008

Author: elmisback

dist/webview.bundle.js

@@ -4334,7 +4334,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.toggle-button {
   border-radius: 4px;
 } */
 
-.high-error .accuracy-col {
+.high-error .accuracy-col span {
   font-weight: 500;
   color: #b91c1c;             /* Keep the red tone */
   background-color: #fdf2f2;  /* Very subtle pink background */
@@ -4352,10 +4352,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.toggle-button {
 
 .local-error td:not(.program-col), th:not(.program-col) {
     text-align: right;
+    padding-left: 10px;
 }
 
 .local-error table {
-  border-spacing: 10px 0px;
+  border-spacing: 0px 0px;
 }
 
 .local-error td {
@@ -4369,7 +4370,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.toggle-button {
 
 .no-explanations .explanation {
   display: none;
-}`, "",{"version":3,"sources":["webpack://./src/herbie/LocalError/newLocalError.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,YAAY;EACZ,eAAe;EACf,iBAAiB;EACjB,eAAe;AACjB;;AAEA;;;GAGG;;AAEH;EACE,gBAAgB;EAChB,cAAc,cAAc,sBAAsB;EAClD,yBAAyB,GAAG,gCAAgC;EAC5D,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;EACnB,gBAAgB;EAChB,cAAc;EACd,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,+BAA+B;EAC/B,WAAW;AACb;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,aAAa;AACf","sourcesContent":[".toggle-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  margin-right: 5px;\n  font-size: 14px;\n}\n\n/* .local-error {\n  padding: 2px 6px;\n  border-radius: 4px;\n} */\n\n.high-error .accuracy-col {\n  font-weight: 500;\n  color: #b91c1c;             /* Keep the red tone */\n  background-color: #fdf2f2;  /* Very subtle pink background */\n  border-radius: 3px;\n  padding: 2px 4px;\n}\n\n.program-col {\n  white-space: nowrap;\n  overflow-x: auto;\n  display: block;\n  text-align: left;\n  max-width: 200px;\n}\n\n.local-error td:not(.program-col), th:not(.program-col) {\n    text-align: right;\n}\n\n.local-error table {\n  border-spacing: 10px 0px;\n}\n\n.local-error td {\n  font-family: 'Ruda', sans-serif;\n  color: gray;\n}\n\n.has-error td {\n  color: black;\n}\n\n.no-explanations .explanation {\n  display: none;\n}"],"sourceRoot":""}]);
+}
+
+/* slightly darken the hovered row */
+.local-error tbody tr:hover {
+  background-color: #f3f4f6; /* Light gray background on hover */
+  border-radius: 5px;
+  transition: background-color 0.2s ease;
+}
+`, "",{"version":3,"sources":["webpack://./src/herbie/LocalError/newLocalError.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,YAAY;EACZ,eAAe;EACf,iBAAiB;EACjB,eAAe;AACjB;;AAEA;;;GAGG;;AAEH;EACE,gBAAgB;EAChB,cAAc,cAAc,sBAAsB;EAClD,yBAAyB,GAAG,gCAAgC;EAC5D,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;EACnB,gBAAgB;EAChB,cAAc;EACd,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA;IACI,iBAAiB;IACjB,kBAAkB;AACtB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,+BAA+B;EAC/B,WAAW;AACb;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,aAAa;AACf;;AAEA,oCAAoC;AACpC;EACE,yBAAyB,EAAE,mCAAmC;EAC9D,kBAAkB;EAClB,sCAAsC;AACxC","sourcesContent":[".toggle-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  margin-right: 5px;\n  font-size: 14px;\n}\n\n/* .local-error {\n  padding: 2px 6px;\n  border-radius: 4px;\n} */\n\n.high-error .accuracy-col span {\n  font-weight: 500;\n  color: #b91c1c;             /* Keep the red tone */\n  background-color: #fdf2f2;  /* Very subtle pink background */\n  border-radius: 3px;\n  padding: 2px 4px;\n}\n\n.program-col {\n  white-space: nowrap;\n  overflow-x: auto;\n  display: block;\n  text-align: left;\n  max-width: 200px;\n}\n\n.local-error td:not(.program-col), th:not(.program-col) {\n    text-align: right;\n    padding-left: 10px;\n}\n\n.local-error table {\n  border-spacing: 0px 0px;\n}\n\n.local-error td {\n  font-family: 'Ruda', sans-serif;\n  color: gray;\n}\n\n.has-error td {\n  color: black;\n}\n\n.no-explanations .explanation {\n  display: none;\n}\n\n/* slightly darken the hovered row */\n.local-error tbody tr:hover {\n  background-color: #f3f4f6; /* Light gray background on hover */\n  border-radius: 5px;\n  transition: background-color 0.2s ease;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -205528,25 +205537,27 @@ function findAllErrorPaths(node, path = []) {
 function shouldExpand(currentPath, allErrorPaths) {
     return allErrorPaths.some(errorPath => currentPath.every((val, index) => errorPath[index] === val));
 }
+let valueId = 0;
 function TreeRow({ node, depth, currentPath, errorPaths, }) {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(() => shouldExpand(currentPath, errorPaths));
     const collapsedExpression = formatExpression(node);
     function renderValue(value) {
         if (value === "true" || value === "false") {
             return value;
         }
+        valueId += 1;
         const num = parseFloat(value);
         if (isNaN(num)) {
             return value;
         }
-        return herbiejs.displayNumber(num);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "number-value", "data-tooltip-id": `value-tooltip-${valueId}`, children: herbiejs.displayNumber(num) }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: `value-tooltip-${valueId}`, children: num.toString() })] });
     }
     const isHighError = parseFloat(node["percent-accuracy"]) < 50;
     const hasError = parseFloat(node["percent-accuracy"]) < 99.9;
     const rowClassName = isHighError ? "has-error high-error" : hasError ? "has-error" : "";
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { className: rowClassName, children: [(0, jsx_runtime_1.jsx)("td", { className: "program-col", children: (0, jsx_runtime_1.jsxs)("span", { style: { marginLeft: `0px`, cursor: "pointer" }, onClick: () => setIsExpanded(prev => !prev), children: [depth > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "pipe-lines", style: { marginRight: '5px' }, children: Array(depth).fill(null).map((_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "pipe-line", style: { height: '20px', borderLeft: '1px solid gray', marginLeft: `${7.5 + (i > 0 ? 5 : 0)}px` } }, i))) })), node.children.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "toggle-button", children: isExpanded ? ((0, jsx_runtime_1.jsx)("svg", { style: { width: '15px', stroke: "var(--action-color)", transform: "rotate(180deg)", verticalAlign: "middle" }, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9L12 15L18 9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: { width: '15px', stroke: "var(--action-color)", verticalAlign: "middle" }, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9L12 15L18 9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: '3px', display: 'inline-block' } })), (0, jsx_runtime_1.jsx)("div", { style: {
                                         display: "inline-block",
-                                    }, children: isExpanded ? mapOp(node.e) : collapsedExpression })] }) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["actual-value"]) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["exact-value"]) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["abs-error-difference"]) }), (0, jsx_runtime_1.jsxs)("td", { className: "accuracy-col", children: [parseFloat(node["percent-accuracy"]).toFixed(1), "%"] }), (0, jsx_runtime_1.jsx)("td", { className: "explanation", children: node.explanation ?
+                                    }, children: isExpanded ? mapOp(node.e) : collapsedExpression })] }) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["exact-value"]) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["actual-value"]) }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(node["abs-error-difference"]) }), (0, jsx_runtime_1.jsx)("td", { className: "accuracy-col", children: (0, jsx_runtime_1.jsxs)("span", { children: [parseFloat(node["percent-accuracy"]).toFixed(1), "%"] }) }), (0, jsx_runtime_1.jsx)("td", { className: "explanation", children: node.explanation ?
                             node.explanation === "cancellation" ? ((0, jsx_runtime_1.jsx)("a", { href: "https://en.wikipedia.org/wiki/Catastrophic_cancellation", target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)("span", { className: "explanation-link", title: "Click for more information about this error type", children: node.explanation }) })) :
                                 node.explanation === "oflow-rescue" ? ((0, jsx_runtime_1.jsx)("a", { href: "https://en.wikipedia.org/wiki/Floating-point_arithmetic#:~:text=including%20the%20zeros.-,overflow,-%2C%20set%20if%20the", target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)("span", { className: "explanation-link", title: "Click for more information about this error type", children: node.explanation }) })) :
                                     // TODO handle other explanations
@@ -205599,7 +205610,7 @@ function NewLocalError({ expressionId }) {
     }, (node) => node.children);
     const hasNoExplanations = explanationPaths.length === 0;
     // InfoIcon component for consistent tooltips
-    const InfoIcon = ({ tooltipId, tooltipContent }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-tooltip-id": tooltipId, "data-tooltip-content": tooltipContent, style: { marginLeft: '4px', cursor: 'help', color: 'var(--action-color)' }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), (0, jsx_runtime_1.jsx)("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fontWeight: "bold", children: "?" })] }) }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: tooltipId })] }));
+    const InfoIcon = ({ tooltipId, tooltipContent }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-tooltip-id": tooltipId, "data-tooltip-content": tooltipContent, style: { marginLeft: '4px', cursor: 'help', color: 'var(--action-color)' }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), (0, jsx_runtime_1.jsx)("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fontWeight: "bold", children: "i" })] }) }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: tooltipId })] }));
     return ((0, jsx_runtime_1.jsx)("div", { className: `local-error ${hasNoExplanations ? ' no-explanations' : ''}`, children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "program-col", children: "Program" }), (0, jsx_runtime_1.jsxs)("th", { children: ["R Value", (0, jsx_runtime_1.jsx)(InfoIcon, { tooltipId: "r-value-tooltip", tooltipContent: "The exact value computed using infinite precision arithmetic" })] }), (0, jsx_runtime_1.jsxs)("th", { children: ["FP Value", (0, jsx_runtime_1.jsx)(InfoIcon, { tooltipId: "fp-value-tooltip", tooltipContent: "The actual computed value using floating-point arithmetic" })] }), (0, jsx_runtime_1.jsxs)("th", { children: ["Difference", (0, jsx_runtime_1.jsx)(InfoIcon, { tooltipId: "difference-tooltip", tooltipContent: "The absolute difference between the exact (R) and floating-point (FP) values" })] }), (0, jsx_runtime_1.jsxs)("th", { children: ["Accuracy", (0, jsx_runtime_1.jsx)(InfoIcon, { tooltipId: "accuracy-tooltip", tooltipContent: "Percentage accuracy of the floating-point computation compared to the exact result" })] }), (0, jsx_runtime_1.jsxs)("th", { className: "explanation", children: ["Explanation", (0, jsx_runtime_1.jsx)(InfoIcon, { tooltipId: "explanation-tooltip", tooltipContent: "An explanation code, if there is significant error" })] })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(TreeRow, { node: localErrorWithExplanations, depth: 0, currentPath: [], errorPaths: errorPaths }) })] }) }));
 }
 exports["default"] = NewLocalError;