You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/06/22 10:22:58 UTC

[GitHub] [echarts] matmust opened a new issue, #17266: [Bug] Links still exists after collapse the node on Tree with large data

matmust opened a new issue, #17266:
URL: https://github.com/apache/echarts/issues/17266

   ### Version
   
   5.3.3
   
   ### Link to Minimal Reproduction
   
   https://codesandbox.io/s/echarts-tree-with-large-data-10elmq?file=/src/chart.js
   
   ### Steps to Reproduce
   
   **Here is how i create chart:**
   
   ```
   import { init, getInstanceByDom } from "echarts";
   import React, { useRef, useEffect } from "react";
   
   export function ReactECharts({ option, style, settings, theme }) {
     const chartRef = useRef(null);
   
     useEffect(() => {
       // Initialize chart
       let chart;
       if (chartRef.current !== null) {
         chart = init(chartRef.current, theme);
       }
   
       // Add chart resize listener
       // ResizeObserver is leading to a bit janky UX
       function resizeChart() {
         chart?.resize();
       }
   
       window.addEventListener("resize", resizeChart);
   
       // Return cleanup function
       return () => {
         chart?.dispose();
         window.removeEventListener("resize", resizeChart);
       };
     });
   
     useEffect(() => {
       // Update chart
       if (chartRef.current !== null) {
         const chart = getInstanceByDom(chartRef.current);
         chart.setOption(option, settings);
       }
     }, [option, settings, theme]); // Whenever theme changes we need to add option and setting due to it being deleted in cleanup function
   
     return (
       <div
         ref={chartRef}
         style={{ width: "100%", minHeight: "500px", ...style }}
       />
     );
   }
   ```
   
   **Here is the option:**
   
   ```
   const treeOption = {
       tooltip: {
         trigger: "item",
         triggerOn: "mousemove",
         formatter: (d) => {
           return d.name;
         }
       },
       series: [
         {
           type: "tree",
           data: td,
           top: "1%",
           left: "7%",
           bottom: "1%",
           right: "20%",
           initialTreeDepth: 1,
           symbolSize: 8,
           label: {
             position: "left",
             verticalAlign: "middle",
             align: "right",
             fontSize: 9
           },
           leaves: {
             label: {
               position: "right",
               verticalAlign: "middle",
               align: "left"
             }
           },
           emphasis: {
             focus: "descendant"
           },
           expandAndCollapse: true,
           animationDuration: 550,
           animationDurationUpdate: 750
         }
       ]
     };
   ```
   
   - Expand the node then collapse. 
   
   
   
   
   ### Current Behavior
   
   Expanded the one of nodes and then collapsed. Links still exists for that node after collapse.
   
   ### Expected Behavior
   
   Expanded the one of nodes and then collapse. Links should not be exists for that node after collapse.
   
   ### Environment
   
   ```markdown
   - OS: macOS Monterey (M1)
   - Browser: Chrome 101.0.4951.64 (Official Build) (arm64)
   - Framework: React@17.0.1 , React@18
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] helgasoft commented on issue #17266: [Bug] Links still exists after collapse the node on Tree with large data

Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #17266:
URL: https://github.com/apache/echarts/issues/17266#issuecomment-1465028258

   confirmed bug in v.5.4.1  
   Parameters _animation_ or _animationThreshold_ does not seem to affect it in any way.
   [Demo Code](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYCwjABAvBDaC6BYAUAMwPYCcAUBLKYA3BLgDxhEkDUVAlBAN4QoQSgBMMsLrvDPvXgDsAhgFsApgC4IAcgDCIXBNQQAsiMwBrCQBdcQgOYQA8qlS5gEzLIA0AwRAAOmiUN0zZFALQBWAAx2DoKguAA2ACaYbjKwDKKSngAK6ADOuhIREOhCEGEGOhEGJLkAzP4QESIAnql2zq7unorKqhraegbGZhZWNrZsSpHRQrHwAL7w9siOEOPTs_wzsxAJ0nIAapYSEEnRqbgRbrqmqgBCAK4HQhKpqRAAIhIAbhJh6E6S7kHLsy4jHjkPgCPxWg3CURicGCjiWYMEa2SaQyWRyeQKmWKxXKlRqdQW8NY_2Oni2Vl2-0Ox1OEEu11u9yer3en2OoMJ4OGUIQBLB8xhrCmMP5vz4AtW4nWsjJOz2typ7myqgAyiIwrd2X9GoCvGA_IFeY5QlzRnB4pKkelMtlcvkhIUsWUKlVavViU1NtsKfKjor0Cq1RqBsbIaaEJNDawRYtxYjPeS5QdfSd2jp9EZNY53TrgQbxSGRrFzYk5CkrajbRiirlsc68W7taSvYmFSnNGmuvUC9yJkLRVHI4xYxa5A9cNFgLosDS6QYGY8Xm8Pl9dJnBNnPLm17xu2Hxaw4Ry47Iyyibej7Zia07ca7B1qAZ4xxOp5gZ1c53cF8zl2z70ahlDMZ_wHcU-1maNYWHEtZFTTojEeccJEnLBtyJRsgT1EF_13Itj1Pa00TtB1rwgHEXXxBpHzkOD02MZ9kNfLtAMLOBe0HSDBEPWZj1VdVGSQlD-nFDdMP1NDOSAs18ORQjK0vasSjIus7yokk5D425EJfVDgxYnsI2FQduMcY8QAkERUVUdVLIgQw3GsER9ByCTRN1cScP0sNiylAiKwvEilP
 I-sBjc8zbP9PILKyeybkwJzcBcvSIVY8NwMcTixX7YQR1kAAJaKlQXMQRCELIAHEHPi5yhFcjD3Ow_MvNifdGBk8tz2Iq8gpUyi3IKiLVCeEqyogSq4oSpLJNSiZ_3SwRMoPaCpQGqyxswdAAHddBAOrqIavNstYXDpNyvzOqrR1lNvPr6tWoryo27bduSk0xkM7LFqHI6JRg-6zHUdt4MMPb1IOiSTridqzyIy7SOC1T-sKgHaM7V6pLSjjjOWzx_vOD8bi_Jkl1Zb5_zcrdPJS7lWp8y0YfkwLaxuht9rx2kCfnYmWRXZjqbDdijJhEyEVy9nNPxET6sppr-bws7ZP8rrFOZijWbB8XA0oyHBc-7GfuPeR0G8AAxdALjK6xQY9cGqbe06YPO2GFKuhHbv2o3TfNy3-mmgz5t4L6RZymCWhUCAAFEAA9kIufRXlOXorfJ6WsMOsFIbp0tFYul34d69WbbD1Ro9j-Odh6bZfZ1j6IMHAB6eu2HQMQV2yOPVgkKOTiEdAjggAAiM2LaOTAB9MAAlEhdHuXcIFKrJcFXe4LBjrIAEIIGwAB-Xf6GFnG5GHn3rZzNOIeah2pVSMRdBB2uMsNJBllAMAADonCuEBsBMxFcENSGwtESyC0HzN6HAg7ALCGAoCEDjLALEDAwsECIDPyjLQQgKBxgoBQB8Gq0BvqCCnOgMI-gnAyGDroTAuBDD2UwDIAeS8JBiAHoOKhNC6EmFNAPMQ5tUjMPQK8VhMIMCYBKroDI9Ct4RHoFAAAfIQlY0RdAXEwLkCIb81iYM-g4TK_DqG3BatlYOrBdDVCcOsAeVCJASGET9KougRBFmYD9VgwCpxOHqK1XC3BXF8GATkCQSCYivy-osdxm10DBNGKEtBKwH6zA8QwsAABSOxYJ1SoEBAPAA7Gk_8AAjdAEiW7JPyeKahhgQDZPYP4cpP0DBL1wGqAAKtECQTwnA7RkKUf8qRqhiCKWEZUuAABe6wA
 Ac_4wgiAKW8ChrUnBpCaTkBhmTdDpPhK8TA-hgBqgAIL5EMNwsQhwIjqk2WCNUNDuGVOqZclYGB3AjPGTIAAnOKMJUURCvFSAsvxMy5lhH-RyZwyyaoMLuRskCvBtm7IOUck5ZyLkwtYNc45ayVAbNatgn6XzmFOBACIA4fzFFggwMAK4DCjipCsGVUq2K8X_i7i4Mq-yypGzCDMpw_CZBUIuBIf8pVcDiMSkIB4qjJqml8AEIVQgRVSoldVMVABVJwDj1g5ICMKBwcTxiECAA) - collapse any node and its children edges remain, **do not** get deleted.
   One condition is **top** to have more than 10 children. Another is the **bottom** nodes to be uniform (same number of children).
   ![image](https://user-images.githubusercontent.com/13038071/224512740-8a397dca-dc16-4b2a-902e-7c402adfc87b.png)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] xuxuxusong commented on issue #17266: [Bug] Links still exists after collapse the node on Tree with large data

Posted by GitBox <gi...@apache.org>.
xuxuxusong commented on issue #17266:
URL: https://github.com/apache/echarts/issues/17266#issuecomment-1225144589

   I had the same problem, but a lower version seems to work, 4.9.0


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Petri-Oosthuizen commented on issue #17266: [Bug] Links still exists after collapse the node on Tree with large data

Posted by GitBox <gi...@apache.org>.
Petri-Oosthuizen commented on issue #17266:
URL: https://github.com/apache/echarts/issues/17266#issuecomment-1229981106

   Interestingly, if you turn animations on and set the animationThreshold high enough (higher than the number of nodes) the links disappear as expected. 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] helgasoft commented on issue #17266: [Bug] Links still exists after collapse the node on Tree with large data

Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #17266:
URL: https://github.com/apache/echarts/issues/17266#issuecomment-1502289078

   @Petri-Oosthuizen, you were right _about animationThreshold_.  
   However, it has to be way bigger than the number of nodes.  My code has 780 (13\*10\*3\*2) nodes and
   _animationThreshold:**7000**_ works, but _animationThreshold:5000_ does not.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] linghaoSu commented on issue #17266: [Bug] Links still exists after collapse the node on Tree with large data

Posted by "linghaoSu (via GitHub)" <gi...@apache.org>.
linghaoSu commented on issue #17266:
URL: https://github.com/apache/echarts/issues/17266#issuecomment-1502529189

   I am trying to fix this issue in this [pr](https://github.com/apache/echarts/pull/18491)
   
   > @Petri-Oosthuizen, you were right _about animationThreshold_. However, it has to be way bigger than the number of nodes. My code has 780 (13*10*3*2) nodes and _animationThreshold:**3000**_ works, but _animationThreshold:2000_ does not.
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org