Add info in the SVG

[clamp.git] / ui-react / src / components / loop_viewer / svg / example.svg

diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
index 2f5ebd0..a7c40ee 100644 (file)
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ b/ui-react/src/components/loop_viewer/svg/example.svg
@@ -1,444 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="start-circle"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <circle
-                                       fill="none"
-                                       r="17"
-                                       cx="18"
-                                       cy="41" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="Arrow-411c11ec-37fe-40bc-8544-417c2c05e4a7"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <line
-                                       y2="41"
-                                       fill="none"
-                                       x1="35"
-                                       x2="123"
-                                       y1="41" />
-                               <polygon
-                                       fill="none"
-                                       points=" 121 39 121 43 125 41" />
-                               <polygon
-                                       points=" 121 39 121 43 125 41"
-                                       stroke="none" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="VES"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <rect
-                                       fill="none"
-                                       x="127"
-                                       width="123"
-                                       y="1"
-                                       height="82" />
-                       </g>
-                       <g
-                               fill-opacity="0"
-                               fill="rgb(0,0,0)"
-                               text-rendering="optimizeQuality"
-                               shape-rendering="geometricPrecision"
-                               stroke="rgb(0,0,0)"
-                               stroke-opacity="0"
-                               stroke-width="2">
-                               <rect
-                                       x="127"
-                                       width="123"
-                                       y="1"
-                                       height="82"
-                                       stroke="none" />
-                       </g>
-                       <g
-                               text-rendering="optimizeQuality"
-                               stroke-width="2"
-                               shape-rendering="geometricPrecision"
-                               font-family="sans-serif">
-                               <text
-                                       x="176.5"
-                                       xml:space="preserve"
-                                       y="46.5"
-                                       stroke="none">VES</text>
-                               <line
-                                       y2="83"
-                                       fill="none"
-                                       x1="147"
-                                       x2="147"
-                                       y1="1" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="Arrow-17086665-1142-4cbf-9681-cf4462954c96"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <line
-                                       y2="41"
-                                       fill="none"
-                                       x1="250"
-                                       x2="338"
-                                       y1="41" />
-                               <polygon
-                                       fill="none"
-                                       points=" 336 39 336 43 340 41" />
-                               <polygon
-                                       points=" 336 39 336 43 340 41"
-                                       stroke="none" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="tca_k8s_aLs74_v1_0_ResourceInstanceName2_tca_2"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <rect
-                                       fill="none"
-                                       x="342"
-                                       width="123"
-                                       y="1"
-                                       height="82" />
-                       </g>
-                       <g
-                               fill-opacity="0"
-                               fill="rgb(0,0,0)"
-                               text-rendering="optimizeQuality"
-                               shape-rendering="geometricPrecision"
-                               stroke="rgb(0,0,0)"
-                               stroke-opacity="0"
-                               stroke-width="2">
-                               <rect
-                                       x="342"
-                                       width="123"
-                                       y="1"
-                                       height="82"
-                                       stroke="none" />
-                       </g>
-                       <g
-                               text-rendering="optimizeQuality"
-                               stroke-width="2"
-                               shape-rendering="geometricPrecision"
-                               font-family="sans-serif">
-                               <text
-                                       x="379.5"
-                                       xml:space="preserve"
-                                       y="46.5"
-                                       stroke="none">tca_k8s</text>
-                               <line
-                                       y2="61"
-                                       fill="none"
-                                       x1="342"
-                                       x2="465"
-                                       y1="61" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="Arrow-d48a7f5f-643d-4550-8045-ee46bb05ddfa"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <line
-                                       y2="41"
-                                       fill="none"
-                                       x1="465"
-                                       x2="553"
-                                       y1="41" />
-                               <polygon
-                                       fill="none"
-                                       points=" 551 39 551 43 555 41" />
-                               <polygon
-                                       points=" 551 39 551 43 555 41"
-                                       stroke="none" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="OperationalPolicy"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <rect
-                                       fill="none"
-                                       x="557"
-                                       width="123"
-                                       y="1"
-                                       height="82" />
-                       </g>
-                       <g
-                               fill-opacity="0"
-                               fill="rgb(0,0,0)"
-                               text-rendering="optimizeQuality"
-                               shape-rendering="geometricPrecision"
-                               stroke="rgb(0,0,0)"
-                               stroke-opacity="0"
-                               stroke-width="2">
-                               <rect
-                                       x="557"
-                                       width="123"
-                                       y="1"
-                                       height="82"
-                                       stroke="none" />
-                       </g>
-                       <g
-                               text-rendering="optimizeQuality"
-                               stroke-width="2"
-                               shape-rendering="geometricPrecision"
-                               font-family="sans-serif">
-                               <text
-                                       x="564.5"
-                                       xml:space="preserve"
-                                       y="46.5"
-                                       stroke="none">OperationalPolicy</text>
-                               <line
-                                       y2="1"
-                                       fill="none"
-                                       x1="557"
-                                       x2="618"
-                                       y1="42" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="Arrow-79f11b91-5a48-4945-9d2c-18a423105a7d"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="2">
-                               <line
-                                       y2="41"
-                                       fill="none"
-                                       x1="680"
-                                       x2="768"
-                                       y1="41" />
-                               <polygon
-                                       fill="none"
-                                       points=" 766 39 766 43 770 41" />
-                               <polygon
-                                       points=" 766 39 766 43 770 41"
-                                       stroke="none" />
-                       </g>
-               </g>
-       </g>
-       <g
-               fill-opacity="1"
-               color-rendering="auto"
-               color-interpolation="auto"
-               text-rendering="auto"
-               stroke="black"
-               stroke-linecap="square"
-               stroke-miterlimit="10"
-               shape-rendering="auto"
-               stroke-opacity="1"
-               fill="black"
-               stroke-dasharray="none"
-               font-weight="normal"
-               stroke-width="1"
-               font-family="'Dialog'"
-               font-style="normal"
-               data-element-id="stop-circle"
-               stroke-linejoin="miter"
-               font-size="12px"
-               image-rendering="auto"
-               stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
-               <defs id="genericDefs" />
-               <g>
-                       <g
-                               shape-rendering="geometricPrecision"
-                               text-rendering="optimizeQuality"
-                               stroke-width="4">
-                               <circle
-                                       fill="none"
-                                       r="17"
-                                       cx="789"
-                                       cy="41" />
-                       </g>
-               </g>
-       </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="start-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><circle fill="none" r="17" cx="18" cy="41"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-82c14603-02fc-4df7-8977-9b10e4c775d1" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="35" x2="123" y1="41"/><polygon fill="none" points=" 121 39 121 43 125 41"/><polygon points=" 121 39 121 43 125 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="VES" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="127" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="127" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="176.5" xml:space="preserve" y="46.5" stroke="none">VES</text><line y2="83" fill="none" x1="147" x2="147" y1="1"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-dbbb2d5a-e9c4-446d-92b9-c71908854434" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="250" x2="338" y1="41"/><polygon fill="none" points=" 336 39 336 43 340 41"/><polygon points=" 336 39 336 43 340 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="TCA_Jbv1z_v1_0_ResourceInstanceName1_tca" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="342" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="342" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="392" xml:space="preserve" y="46.5" stroke="none">TCA</text><line y2="61" fill="none" x1="342" x2="465" y1="61"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-3892abbc-c49c-40df-984b-8959b6df44e6" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="465" x2="553" y1="41"/><polygon fill="none" points=" 551 39 551 43 555 41"/><polygon points=" 551 39 551 43 555 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="OperationalPolicy" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><rect fill="none" x="557" width="123" y="1" height="82"/></g><g fill-opacity="0" fill="rgb(0,0,0)" text-rendering="optimizeQuality" shape-rendering="geometricPrecision" stroke="rgb(0,0,0)" stroke-opacity="0" stroke-width="2"><rect x="557" width="123" y="1" height="82" stroke="none"/></g><g text-rendering="optimizeQuality" stroke-width="2" shape-rendering="geometricPrecision" font-family="sans-serif"><text x="564.5" xml:space="preserve" y="46.5" stroke="none">OperationalPolicy</text><line y2="1" fill="none" x1="557" x2="618" y1="42"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="Arrow-44a8b77e-d0eb-4c0d-82b6-0822ff35573f" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="2"><line y2="41" fill="none" x1="680" x2="768" y1="41"/><polygon fill="none" points=" 766 39 766 43 770 41"/><polygon points=" 766 39 766 43 770 41" stroke="none"/></g></g></g><g fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" font-family="'Dialog'" font-style="normal" data-element-id="stop-circle" stroke-linejoin="miter" font-size="12px" image-rendering="auto" stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g><g shape-rendering="geometricPrecision" text-rendering="optimizeQuality" stroke-width="4"><circle fill="none" r="17" cx="789" cy="41"/></g></g></g></svg>
\ No newline at end of file