fix: #59 added hash as a key to ensure that flow opens correct modal …

…100% of the time.

ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts

@@ -110,6 +110,7 @@ export class NgxFlowComponent implements OnInit {
             srcAlias: SRC,
 
             typeItem: "SIP",
+            hash: i.hash
         }
     }
 

ngx-flow/projects/ngx-flow/src/tab-flow/tab-flow.component.html

@@ -80,7 +80,7 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">No Data</h1>
         [isGroupByAlias]="_isCombineByAlias"
         [isSimplify]="isSimplify"
         [isAbsolute]="isAbsolute"
-        (itemClick)="onClickMessage($event.idx, $event.event, item)"
+        (itemClick)="onClickMessage(item.hash, $event.event, item)"
       ></app-flow-item>
       <div style="height: 60px"></div>
     </div>
@@ -114,8 +114,8 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">No Data</h1>
             [isGroupByAlias]="_isCombineByAlias"
             [isSimplify]="isSimplify"
             [isAbsolute]="isAbsolute"
-            (itemClick)="onClickMessage($event.idx, $event.event, item)"
-          >
+            (itemClick)="onClickMessage(item.hash, $event.event, item)"
+          > <!-- Decrease index by one due to spacer counting as zeroth index. -->
           </app-flow-item>
         </ng-template>
         <ng-template ngSwitchCase="bottom">

src/components/SimplePanel.tsx

@@ -24,6 +24,7 @@ import {
     Dropdown,
     Menu
 } from '@grafana/ui';
+import { hash } from 'helpers/hash';
 
 
 
@@ -222,7 +223,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
     const [flowData, setFlowData] = React.useState({ actors: [], data: [] });
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
     const [modalData, setModalData] = React.useState({});
-    const [modalDataFields, setModalDataFields] = React.useState([]);
+    const [modalDataFields, setModalDataFields] = React.useState<Map<string, any>>();
 
     const onModalClose = () => {
         setModalIsOpen(false);
@@ -351,9 +352,8 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
         if (fields) {
             const [firsField]: any = fields;
             const sortData = formattingDataAndSortIt(fields, options.sortoption);
-            setModalDataFields(sortData);
             const outData = firsField?.values;
-
+            const map = new Map();
             if (outData) {
                 valueLabelsName = Object.keys(outData?.[0] || {});
                 setFlowData({
@@ -366,6 +366,8 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
                             }
                             return labelItem[optionArr] || '';
                         };
+                        const itemHash = hash(JSON.stringify(item))
+                        map.set(itemHash, item);
                         return {
                             messageID: _(options.colorGenerator) || 'Title',
                             subTitle: options.showbody && message,
@@ -375,18 +377,19 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }: a
                             aboveArrow: _(options.aboveArrow) || '',
                             belowArrow: _(options.belowArrow) || '',
                             sourceLabel: _(options.sourceLabel) || '',
-                            destinationLabel: _(options.destinationLabel) || ''
+                            destinationLabel: _(options.destinationLabel) || '',
+                            hash: itemHash
                         }
                     })
                 })
-
+                setModalDataFields(map);
             }
         }
         /* eslint-disable-next-line */
     }, [data, options]);
 
     ngxFlowClickHandler = (e: any) => {
-        const details: any = modalDataFields[e.detail];
+        const details: any = modalDataFields?.get(e.detail)
         if (typeof details.labels === 'object') {
             details.labels = JSON.stringify(details.labels);
         }

src/helpers/hash.ts

@@ -0,0 +1,19 @@
+export function hash(str: string, lenHash = 32) {
+    lenHash = lenHash || 32;
+    str = str || "";
+    let ar = str.split('').map((a) => a.charCodeAt(0)),
+        s2alength = ar.length || 1,
+        i = ar.length ? ar.reduce((p, c) => p + c) : 1,
+        s = "",
+        A,
+        B,
+        k = 0,
+        tan = Math.tan;
+    while (s.length < lenHash) {
+        A = ar[k++ % s2alength] || 0.5;
+        B = ar[k++ % s2alength ^ lenHash] || 1.5 ^ lenHash;
+        i = i + (A ^ B) % lenHash;
+        s += tan(i * B / A).toString(16).split('.')[1].slice(0, 10);
+    }
+    return s.slice(0, lenHash);
+}