@osfarm/itineraire-technique 1.1.8 → 1.1.10

package/css/styles-rendering.css

@@ -1 +1 @@
-div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:none}div.mainITKContainer.withTranscript .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer.withTranscript .left-transcript{display:block}div.mainITKContainer.withTranscript .chart-div{width:50%}div.mainITKContainer.withTranscript .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer.withTranscript .left-transcript{display:block;width:40%}div.mainITKContainer.withTranscript .chart-div{width:60%}div.mainITKContainer.withTranscript .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.highlighted{box-shadow:0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));background-color:#f0f3f5}div.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}.rotation-tooltip{max-width:400px}/*# sourceMappingURL=styles-rendering.css.map */
+div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:none}div.mainITKContainer.withTranscript .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer.withTranscript .left-transcript{display:block}div.mainITKContainer.withTranscript .chart-div{width:50%}div.mainITKContainer.withTranscript .bottom-transcript{display:none}}@container myparent (min-width: 1000px){div.mainITKContainer.withTranscript .left-transcript{display:block;width:40%}div.mainITKContainer.withTranscript .chart-div{width:60%}div.mainITKContainer.withTranscript .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.highlighted{box-shadow:0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));background-color:#f0f3f5}div.mainITKContainer div.rotation_item div.step-header h4{font-size:20px;margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#000;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}.rotation-tooltip{max-width:400px;text-align:left}.rotation-tooltip div.step_dates{font-size:9px;background-color:#cdcccc;color:#000;margin:5px;padding:0px 5px;border-radius:5px;float:right}/*# sourceMappingURL=styles-rendering.css.map */

package/css/styles-rendering.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,aAIA,uDACI,cACA,qBAIR,uCAEQ,qDACI,cAGJ,+CACI,UAGJ,uDACI,cAKZ,wCAEQ,qDACI,cACA,UAGJ,+CACI,UAGJ,uDACI,cAKZ,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAIA,0DACI,gBACA,aAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,oEACI,yBAGJ,4DACI,mBAKR,mDACI,eACA,gBACA,sCAEA,oEACI,sBACA,kBACA,mBACA,aACA,eAEA,4FACI,iBAGJ,2FACI,cACA,yBACA,YAGJ,iGACI,eAKZ,kDACI,aAIR,6BACI,WACA,aACA,qBAGJ,iCACI,cACA,WACA,iBACA,kBACA,uBACA,YAIR,kBACI","file":"styles-rendering.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,aAIA,uDACI,cACA,qBAIR,uCAEQ,qDACI,cAGJ,+CACI,UAGJ,uDACI,cAKZ,wCAEQ,qDACI,cACA,UAGJ,+CACI,UAGJ,uDACI,cAKZ,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAIA,0DACI,eACA,gBACA,aAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,oEACI,yBAGJ,4DACI,mBAKR,mDACI,eACA,gBACA,sCAEA,oEACI,sBACA,kBACA,mBACA,aACA,eAEA,4FACI,iBAGJ,2FACI,cACA,yBACA,YAGJ,iGACI,eAKZ,kDACI,aAIR,6BACI,WACA,aACA,qBAGJ,iCACI,cACA,WACA,iBACA,kBACA,uBACA,YAIR,kBACI,gBACA,gBAEA,iCACI,cACA,yBACA,WACA,WACA,gBACA,kBACA","file":"styles-rendering.css"}

package/js/chart-render.js

@@ -39,17 +39,35 @@ class RotationRenderer {
     }
 
     fixRotationData(rotationData) {
+        if (!rotationData || typeof rotationData !== 'object') return rotationData;
+        
         if (rotationData.options == undefined)
             rotationData.options = {};
 
         if (rotationData.options?.view == undefined || rotationData?.options?.view == '')
             rotationData.options.view = 'horizontal';
 
+        // Safety check for steps array
+        if (!rotationData.steps || !Array.isArray(rotationData.steps)) {
+            rotationData.steps = [];
+            return rotationData;
+        }
+
         // Map rotationData items to make sure that the startDate and endDate are proper Date objects
         rotationData.steps.map((item) => {
+            if (!item) return item;
+            
             item.startDate = new Date(item.startDate);
             item.endDate = new Date(item.endDate);
 
+            // Safety check for invalid dates
+            if (isNaN(item.startDate.getTime())) {
+                item.startDate = new Date();
+            }
+            if (isNaN(item.endDate.getTime()) || item.endDate <= item.startDate) {
+                item.endDate = new Date(item.startDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // Default to 30 days later
+            }
+
             // Add a duration in months
             item.duration = Math.round((item.endDate - item.startDate) / (30 * 1000 * 60 * 60 * 24));
 
@@ -142,7 +160,7 @@ class RotationRenderer {
                 self.noFocusUpdate = false;
             }, 1500);
 
-            element[0].scrollIntoView({ block: "start" });
+            element[0].scrollIntoView({ block: "start", block: "nearest" });
 
             self.getVisibleTranscriptDiv().find('.' + params.data.divId).closest('.rotation_item').addClass("show-all");
 
@@ -256,11 +274,14 @@ class RotationRenderer {
         let maxDate = null;
 
         steps.forEach((item) => {
-            if (!minDate || minDate > item.startDate.valueOf())
-                minDate = item.startDate.valueOf();
+            const stepStart = item.startDate.valueOf() - 86400000 * 30; // Subtract some space for the start of the arrow
+            const stepEnd = item.endDate.valueOf() + 86400000 * 50; // Add some space for the end of the arrow
 
-            if (!maxDate || maxDate < item.endDate.valueOf())
-                maxDate = item.endDate.valueOf() + 86400000 * 30; // Add some space for the end of the arrow
+            if (!minDate || minDate > stepStart)
+                minDate = stepStart;
+
+            if (!maxDate || maxDate < stepEnd)
+                maxDate = stepEnd;
         });
 
         return { min: minDate, max: maxDate };
@@ -276,6 +297,15 @@ class RotationRenderer {
             if (item.name == Number(item.name))
                 item.name = "Etape " + item.name; // Force the item name to be a string
 
+            let description = self.getHTMLFormatedDescription(item.description);
+            if (item.interventions?.length > 0 || item.attributes?.length > 0) {
+                description += '<br/>';
+                item.attributes?.forEach(attr => {
+                    description += `<br><b>${attr.name} :</b> ${attr.value}`;
+                });
+            }
+            
+
             data.push({
                 name: item.name,
                 divId: 'Step_' + index,
@@ -283,7 +313,7 @@ class RotationRenderer {
                 startDate: new Date(item.startDate.valueOf()), // Date de début
                 endDate: new Date(item.endDate.valueOf()), // Date de fin
                 duration: item.duration,
-                description: self.getHTMLFormatedDescription(item.description),
+                description: description,
                 value: [
                     1, // Parcelle (index de la série)
                     item.startDate.valueOf(), // Date de début
@@ -340,9 +370,14 @@ class RotationRenderer {
 
                 // Avoid words that are too long
                 testWidth = echarts.format.getTextRect(line).width;
-                while (testWidth > maxWidth) {
+                let trimCount = 0;
+                const maxTrimCount = line.length; // Prevent infinite loop
+                
+                while (testWidth > maxWidth && line.length > 0 && trimCount < maxTrimCount) {
                     line = line.slice(0, -1);
+                    if (line.length === 0) break; // Safety check
                     testWidth = echarts.format.getTextRect(line).width;
+                    trimCount++;
                 }
             }
 
@@ -376,101 +411,221 @@ class RotationRenderer {
         let maxXPositions = new Map();
 
         function renderItem(params, api) {
+            // Safety checks to prevent crashes
+            if (!params || !api) return null;
+            
+            try {
+                var categoryIndex = api.value(0);
+                var start = api.coord([api.value(1), categoryIndex]);
+                var end = api.coord([api.value(2), categoryIndex]);
+                var name = api.value(3);
+                var type = api.value(4);
+                let secondary_crop = api.value(5);
+                let bHasSecondaryCrops = api.value(6);
+
+                // Safety check for invalid coordinates
+                if (!start || !end || start.length < 2 || end.length < 2) return null;
+                if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) return null;
+
+                const x = start[0];
+                let y = start[1];
+
+                const style = api.style();
+                style.opacity = 0.5;
+
+                if (params.context.rendered == undefined) {
+                    // Start of a new rendering round
+                    maxXPositions = new Map();
+
+                    for (let catIndex = 0; catIndex < 3; catIndex++) {
+                        for (let track = 0; track < 3; track++) {
+                            maxXPositions.set('track_left_' + catIndex + '_' + track, params.coordSys.width);
+                        }
+                    }
+                }
 
-            var categoryIndex = api.value(0);
-            var start = api.coord([api.value(1), categoryIndex]);
-            var end = api.coord([api.value(2), categoryIndex]);
-            var name = api.value(3);
-            var type = api.value(4);
-            let secondary_crop = api.value(5);
-            let bHasSecondaryCrops = api.value(6);
+                params.context.rendered = true;
 
-            const x = start[0];
-            let y = start[1];
+                // Remove the default emphasis style
+                api.styleEmphasis({});
 
-            const style = api.style();
-            style.opacity = 0.5;
+                if (type == 'rotation_item') {
 
-            if (params.context.rendered == undefined) {
-                // Start of a new rendering round
-                maxXPositions = new Map();
+                    // start[0] // abscisse gauche de l'élément (après zoom)
+                    // start[1] // ordonnée gauche de l'élément
+                    // end[0] // abscisse droite de l'élément (après zoom)
+                    // end[1] // ordonnée droite de l'élément
+                    // height // Hauteur de l'élément
 
-                for (let catIndex = 0; catIndex < 3; catIndex++) {
-                    for (let track = 0; track < 3; track++) {
-                        maxXPositions.set('track_left_' + catIndex + '_' + track, params.coordSys.width);
+                    // params.coordSys.x // début du canva
+                    // params.coordSys.y // début du canva
+                    // params.coordSys.width, // largeur du canva
+                    // params.coordSys.height // hauteur du canva
+
+                    let height = self.barHeight - 20; // 20 px margin top and bottom
+                    let top = y - height / 2;
+                    let textXMargin = 2;
+                    let textYMargin = 10;
+
+                    if (bHasSecondaryCrops) {
+                        height = self.barHeight - 40; // 20 px margin top and bottom
+                        top = y - height / 2 - 15;
+                        textXMargin = 2;
+                        textYMargin = 10;
                     }
-                }
-            }
 
-            params.context.rendered = true;
+                    if (secondary_crop) {
+                        // Move secondary crops a bit down and reduce their size
+                        top = top + height + 5;
+                        height = height / 3;
+                        textXMargin = 5;
+                        textYMargin = 5;
+                    }
 
-            // Remove the default emphasis style
-            api.styleEmphasis({});
+                    const arrowWidth = height / 3;
+                    const border = 3;
 
-            if (type == 'rotation_item') {
+                    var points = [
+                        [x, top],
+                        [end[0] - border, top],
+                        [end[0] + arrowWidth - border, top + height / 2],
+                        [end[0] - border, top + height],
+                        [x, top + height],
+                        [x + arrowWidth, top + height / 2],
+                    ];
 
-                // start[0] // abscisse gauche de l'élément (après zoom)
-                // start[1] // ordonnée gauche de l'élément
-                // end[0] // abscisse droite de l'élément (après zoom)
-                // end[1] // ordonnée droite de l'élément
-                // height // Hauteur de l'élément
+                    //const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
+                    const itemWidth = end[0] - x;
 
-                // params.coordSys.x // début du canva
-                // params.coordSys.y // début du canva
-                // params.coordSys.width, // largeur du canva
-                // params.coordSys.height // hauteur du canva
+                    // if (itemLabelWidth > itemWidth)
+                    //     name = ''; // Hide the label as we won't have the room to show it
 
-                let height = self.barHeight - 20; // 20 px margin top and bottom
-                let top = y - height / 2;
-                let textXMargin = 2;
-                let textYMargin = 10;
+                    name = wrapText(echarts, name, itemWidth - arrowWidth, height);
 
-                if (bHasSecondaryCrops) {
-                    height = self.barHeight - 40; // 20 px margin top and bottom
-                    top = y - height / 2 - 15;
-                    textXMargin = 2;
-                    textYMargin = 10;
-                }
+                    // See this for clip regions : https://stackoverflow.com/questions/71735038/setting-border-and-label-in-custom-apache-echarts
+                    // https://stackoverflow.com/questions/73653691/how-to-draw-a-custom-triangle-in-renderitem-in-apache-echarts
 
-                if (secondary_crop) {
-                    // Move secondary crops a bit down and reduce their size
-                    top = top + height + 5;
-                    height = height / 3;
-                    textXMargin = 5;
-                    textYMargin = 5;
+                    return (
+                        {
+                            type: 'polygon',
+                            transition: ['shape'],
+                            shape: {
+                                points: points
+                            },
+                            style: style,
+                            emphasis: {
+                                style: {
+                                    shadowBlur: 4,
+                                    shadowOffsetX: 1,
+                                    shadowOffsetY: 2,
+                                    shadowColor: 'rgba(0, 0, 0, 0.2)'
+                                },
+                            },
+                            textConfig: {
+                                position: [arrowWidth + textXMargin, textYMargin]
+                            },
+                            textContent: {
+                                style: {
+                                    text: name,
+                                    fill: '#000',
+                                    width: 80,
+                                    fontWeight: 'bold'
+                                }
+                            }
+                        }
+                    );
                 }
 
-                const arrowWidth = height / 3;
-                const border = 3;
+                if (type == 'intervention_bottom' || type == 'intervention_top') {
+
+                    const height = 20;
+                    const margin = 10;
+                    const textMargin = 5;
+
+                    // Maintain a list of max x for each row. If the max x is further right than the label we try to push,
+                    // use another row. If for all rows the space is taken, just drop this item
+
+                    let trackToUse = null;
+                    const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
+
+                    for (let track = 0; track < 3; track++) {
+                        if (!maxXPositions.has('track_right_' + categoryIndex + '_' + track)) {
+                            // Situation where the track is empty
+                            trackToUse = track;
+                            break;
+                        }
+
+                        let trackLeft = maxXPositions.get('track_left_' + categoryIndex + '_' + track);
+                        if (trackLeft > (x + itemLabelWidth)) {
+                            // Situation where the drawing has started right of the current element
+                            trackToUse = track;
+                            break;
+                        }
+
+                        let trackRight = maxXPositions.get('track_right_' + categoryIndex + '_' + track);
+                        if (trackRight < x) {
+                            // Situation where the last painted element is sufficiently far on the left
+                            trackToUse = track;
+                            break;
+                        }
+                    }
+
+                    if (trackToUse == null)
+                        return null;
+
+                    let currentRight = maxXPositions.get('track_right_' + categoryIndex + '_' + trackToUse);
+                    if (currentRight == undefined || currentRight < x + itemLabelWidth)
+                        maxXPositions.set('track_right_' + categoryIndex + '_' + trackToUse, x + itemLabelWidth);
 
-                var points = [
-                    [x, top],
-                    [end[0] - border, top],
-                    [end[0] + arrowWidth - border, top + height / 2],
-                    [end[0] - border, top + height],
-                    [x, top + height],
-                    [x + arrowWidth, top + height / 2],
-                ];
+                    let currentLeft = maxXPositions.get('track_left_' + categoryIndex + '_' + trackToUse);
+                    if (currentLeft > x)
+                        maxXPositions.set('track_left_' + categoryIndex + '_' + trackToUse, x);
 
-                //const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
-                const itemWidth = end[0] - x;
+                    // A nicer solution could be to draw large items in a reduced format until there is enough space for
+                    // drawing them fully. Unfortunately that would require a two pass drawing which does not exist with Echarts ?
 
-                // if (itemLabelWidth > itemWidth)
-                //     name = ''; // Hide the label as we won't have the room to show it
+                    const arrowWidth = 3;
 
-                name = wrapText(echarts, name, itemWidth - arrowWidth, height);
+                    let arrowTop = y + 55;
+                    let arrowBottom = y - 55;
 
-                // See this for clip regions : https://stackoverflow.com/questions/71735038/setting-border-and-label-in-custom-apache-echarts
-                // https://stackoverflow.com/questions/73653691/how-to-draw-a-custom-triangle-in-renderitem-in-apache-echarts
+                    y = margin + y + trackToUse * (height + margin) - (self.barHeight / 2);
 
-                return (
-                    {
+                    var points = [];
+                    var textPosition = [];
+
+                    if (type == 'intervention_top') {
+                        textPosition = [textMargin, textMargin];
+                        points = [
+                            [x, y],
+                            [x + itemLabelWidth, y],
+                            [x + itemLabelWidth, y + height],
+                            [x + arrowWidth, y + height],
+                            [x, arrowTop]
+                        ];
+                    }
+                    else {
+                        textPosition = [textMargin, textMargin + y - arrowBottom];
+                        points = [
+                            [x, arrowBottom],
+                            [x + arrowWidth, y],
+                            [x + itemLabelWidth, y],
+                            [x + itemLabelWidth, y + height],
+                            [x, y + height]
+                        ];
+                    }
+
+                    return ({
                         type: 'polygon',
                         transition: ['shape'],
                         shape: {
                             points: points
                         },
-                        style: style,
+                        style: api.style({
+                            fill: style.fill,
+                            stroke: style.fill,
+                            textFill: '#000',
+                        }),
                         emphasis: {
                             style: {
                                 shadowBlur: 4,
@@ -480,130 +635,21 @@ class RotationRenderer {
                             },
                         },
                         textConfig: {
-                            position: [arrowWidth + textXMargin, textYMargin]
+                            position: textPosition
                         },
                         textContent: {
                             style: {
                                 text: name,
                                 fill: '#000',
-                                width: 80,
-                                fontWeight: 'bold'
                             }
                         }
                     }
-                );
-            }
-
-            if (type == 'intervention_bottom' || type == 'intervention_top') {
-
-                const height = 20;
-                const margin = 10;
-                const textMargin = 5;
-
-                // Maintain a list of max x for each row. If the max x is further right than the label we try to push,
-                // use another row. If for all rows the space is taken, just drop this item
-
-                let trackToUse = null;
-                const itemLabelWidth = echarts.format.getTextRect(name).width + textMargin * 2;
-
-                for (let track = 0; track < 3; track++) {
-                    if (!maxXPositions.has('track_right_' + categoryIndex + '_' + track)) {
-                        // Situation where the track is empty
-                        trackToUse = track;
-                        break;
-                    }
-
-                    let trackLeft = maxXPositions.get('track_left_' + categoryIndex + '_' + track);
-                    if (trackLeft > (x + itemLabelWidth)) {
-                        // Situation where the drawing has started right of the current element
-                        trackToUse = track;
-                        break;
-                    }
-
-                    let trackRight = maxXPositions.get('track_right_' + categoryIndex + '_' + track);
-                    if (trackRight < x) {
-                        // Situation where the last painted element is sufficiently far on the left
-                        trackToUse = track;
-                        break;
-                    }
-                }
-
-                if (trackToUse == null)
-                    return null;
-
-                let currentRight = maxXPositions.get('track_right_' + categoryIndex + '_' + trackToUse);
-                if (currentRight == undefined || currentRight < x + itemLabelWidth)
-                    maxXPositions.set('track_right_' + categoryIndex + '_' + trackToUse, x + itemLabelWidth);
-
-                let currentLeft = maxXPositions.get('track_left_' + categoryIndex + '_' + trackToUse);
-                if (currentLeft > x)
-                    maxXPositions.set('track_left_' + categoryIndex + '_' + trackToUse, x);
-
-                // A nicer solution could be to draw large items in a reduced format until there is enough space for
-                // drawing them fully. Unfortunately that would require a two pass drawing which does not exist with Echarts ?
+                    );
 
-                const arrowWidth = 3;
-
-                let arrowTop = y + 55;
-                let arrowBottom = y - 55;
-
-                y = margin + y + trackToUse * (height + margin) - (self.barHeight / 2);
-
-                var points = [];
-                var textPosition = [];
-
-                if (type == 'intervention_top') {
-                    textPosition = [textMargin, textMargin];
-                    points = [
-                        [x, y],
-                        [x + itemLabelWidth, y],
-                        [x + itemLabelWidth, y + height],
-                        [x + arrowWidth, y + height],
-                        [x, arrowTop]
-                    ];
-                }
-                else {
-                    textPosition = [textMargin, textMargin + y - arrowBottom];
-                    points = [
-                        [x, arrowBottom],
-                        [x + arrowWidth, y],
-                        [x + itemLabelWidth, y],
-                        [x + itemLabelWidth, y + height],
-                        [x, y + height]
-                    ];
-                }
-
-                return ({
-                    type: 'polygon',
-                    transition: ['shape'],
-                    shape: {
-                        points: points
-                    },
-                    style: api.style({
-                        fill: style.fill,
-                        stroke: style.fill,
-                        textFill: '#000',
-                    }),
-                    emphasis: {
-                        style: {
-                            shadowBlur: 4,
-                            shadowOffsetX: 1,
-                            shadowOffsetY: 2,
-                            shadowColor: 'rgba(0, 0, 0, 0.2)'
-                        },
-                    },
-                    textConfig: {
-                        position: textPosition
-                    },
-                    textContent: {
-                        style: {
-                            text: name,
-                            fill: '#000',
-                        }
-                    }
                 }
-                );
-
+            } catch (error) {
+                console.error('Error in renderItem:', error);
+                return null;
             }
         }
 
@@ -823,8 +869,29 @@ class RotationRenderer {
         ];
 
         let monthsPerYear = new Map();
+        
+        // Safety check to prevent infinite loops
+        if (!steps || steps.length === 0) {
+            series.push(months);
+            return series;
+        }
+        
         let startMonth = new Date(steps.at(0).startDate.valueOf());
-        while (startMonth < steps.at(-1).endDate) {
+        let endDate = steps.at(-1).endDate;
+        
+        // Safety check for valid dates and reasonable duration (max 20 years)
+        if (isNaN(startMonth.getTime()) || 
+            isNaN(endDate.getTime()) || 
+            startMonth >= endDate || 
+            (endDate - startMonth) > (20 * 365 * 24 * 60 * 60 * 1000)) {
+            series.push(months);
+            return series;
+        }
+        
+        let loopCount = 0;
+        const maxLoops = 240; // Max 20 years * 12 months
+        
+        while (startMonth < endDate && loopCount < maxLoops) {
             const monthName = startMonth.toLocaleDateString(undefined, { month: 'short' });
             const year = startMonth.getFullYear();
 
@@ -843,6 +910,7 @@ class RotationRenderer {
 
             // increment the current month
             startMonth.setMonth(startMonth.getMonth() + 1);
+            loopCount++;
         }
 
         series.push(months);
@@ -912,13 +980,21 @@ class RotationRenderer {
 
         option.tooltip = {
             extraCssText: "text-wrap: wrap;",
+            position: function (pos, params, el, elRect, size) {
+                    var obj = { top: 10 };
+                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
+                    return obj;
+               },
             className: "rotation-tooltip",
             formatter: function (params) {
                 if (params.data.type == 'rotation_item') {
                     let start = params.data.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
                     let end = params.data.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
+                    let duration = params.data.duration + ' mois';
+                    if (params.data.duration > 20)
+                        duration = (Math.round(params.data.duration / 1.2)/10 + ' années').replace('.', ',');
 
-                    return params.marker + params.name + ' : ' + params.data.duration + ' mois (' + start + ' ➜ ' + end + ')<br>' + params.data.description;
+                    return params.marker + ' <b>' + params.name + '</b><div class="step_dates"><b>' + duration + '</b> (' + start + ' ➜ ' + end + ')</div><br style="clear:both">' + params.data.description.replace('’', '\'');
                 }
                 else {
                     let interventionDate = params.data.interventionDate;
@@ -930,13 +1006,13 @@ class RotationRenderer {
                     else
                         dateString += ' (J' + days + ')';
 
-                    return params.marker + params.name + ' - ' + dateString + '<br>' + params.data.description;
+                    return params.marker + ' <b>'+ params.name + '</b> - ' + dateString + '<br>' + params.data.description.replace('’', '\'');;
                 }
             }
         };
 
         option.toolbox = {
-            "itemSize": 25,
+            "itemSize": 20,
             "iconStyle": {
                 "borderColor": "#AAA",
                 "borderWidth": 1
@@ -984,8 +1060,6 @@ class RotationRenderer {
 
         // If a line has a column in it, split the line in two and add bold to the first part:
         description = description.replace(/^([^:\n]+):/gm, "<b>$1:</b>");
-        description = description.replace(/\n([^:\n]+):/gm, "\n<b>$1:</b>");
-
         description = description.replace(/\n/g, '<br/>');
 
         return description;

package/js/editor-wiki-editor.js

@@ -103,5 +103,12 @@ class WikiEditor {
 
         const editData = await editResp.json();
         console.log(editData);
+
+        if (editData.edit && editData.edit.result === 'Success') { 
+            return Promise.resolve();
+        } else {
+            return Promise.reject(editData);
+        }
     }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osfarm/itineraire-technique",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
   "main": "editor.html",
   "scripts": {