fix: fix matched label

Author: HerringtonDarkholme

src/dump_tree.rs

@@ -9,7 +9,6 @@ use web_tree_sitter_sg::{Point, TreeCursor};
 #[derive(Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct DumpNode {
-  id: u32,
   field: Option<String>,
   kind: String,
   start: Pos,
@@ -50,7 +49,6 @@ pub fn dump_one_node(cursor: &mut TreeCursor, target: &mut Vec<DumpNode>) {
     cursor.goto_parent();
   }
   target.push(DumpNode {
-    id: node.id(),
     field,
     kind,
     start,

src/utils.rs

@@ -30,7 +30,7 @@ pub struct WasmNode {
 
 #[derive(Serialize, Deserialize)]
 pub struct WasmMatch {
-  pub id: usize,
+  pub kind: String,
   pub node: WasmNode,
   pub env: BTreeMap<String, WasmNode>,
   pub message: String,
@@ -47,12 +47,12 @@ fn get_message(rule: &RuleConfig<WasmLang>, node: &NodeMatch) -> String {
 impl WasmMatch {
   pub fn from_match(nm: NodeMatch, rule: &RuleConfig<WasmLang>) -> Self {
     let node = nm.get_node().clone();
-    let id = node.node_id();
+    let kind = node.kind().to_string();
     let node = WasmNode::from(node);
     let env = nm.get_env().clone();
     let env = env_to_map(env);
     let message = get_message(rule, &nm);
-    Self { node, env, message, id }
+    Self { node, env, message, kind }
   }
 }
 

website/src/components/QueryEditor.vue

@@ -27,9 +27,14 @@ watchEffect(() => {
   }
 })
 
+// this assumes the node can be tracked by range + kind
+// it will break if multiple same-kind nodes have the same range
 const matchedIds = computed(() => {
   const matches = props.matches || []
-  return new Set(matches.map(m => m.id))
+  return new Set(matches.map(match => {
+    const [startRow, startCol, endRow, endCol] = match.range
+    return `${match.kind}-${startRow}-${startCol}-${endRow}-${endCol}`
+  }))
 })
 
 let cursorPosition = shallowRef<Pos>()

website/src/components/astGrep/lang.ts

@@ -55,12 +55,12 @@ export type Match = {
   message: string,
   rule: string,
   env: any,
-  id: number,
+  kind: string,
   range: [number, number, number, number],
 } | {
   type: 'simple',
   env: any,
-  id: number,
+  kind: string,
   range: [number, number, number, number],
 }
 
@@ -72,11 +72,23 @@ function shouldDisplayDiagnostic(rule: any) {
   )
 }
 
+interface WasmNode {
+  text: string
+  range: [number, number, number, number]
+}
+
+interface WasmMatch {
+  kind: string
+  node: WasmNode
+  env: Map<string, WasmNode>
+  message: string
+}
+
 export async function doFind(src: string, json: any[]): Promise<[Match[], string]> {
   if (!src || !json) {
     return [[], src]
   }
-  const result = await findNodes(src, json)
+  const result: Map<string, WasmMatch[]> = await findNodes(src, json)
   let matches: Match[] = []
   for (let [ruleId, nodes] of result.entries()) {
     for (let rule of json) {
@@ -92,7 +104,7 @@ export async function doFind(src: string, json: any[]): Promise<[Match[], string
             message: nm.message,
             range: nm.node.range,
             env: nm.env,
-            id: nm.id,
+            kind: nm.kind,
           })
         }
       } else {
@@ -101,7 +113,7 @@ export async function doFind(src: string, json: any[]): Promise<[Match[], string
             type: 'simple',
             range: nm.node.range,
             env: nm.env,
-            id: nm.id,
+            kind: nm.kind,
           })
         }
       }

website/src/components/dump/TreeNode.vue

@@ -3,10 +3,11 @@ import { PropType } from 'vue'
 import { DumpNode, Pos, deepReactiveNode } from './dumpTree'
 import { showToast } from '../utils/Toast.vue'
 import GeneralNode from './GeneralNode.vue'
+import { computed } from 'vue';
 
 const props = defineProps({
   matchedIds: {
-    type: Set as PropType<Set<number>>,
+    type: Set as PropType<Set<string>>,
     required: true,
   },
   node: {
@@ -21,7 +22,6 @@ const props = defineProps({
 })
 
 let {
-  id,
   field,
   kind,
   start,
@@ -30,6 +30,15 @@ let {
   isNamed,
 } = deepReactiveNode(props)
 
+// also see how matchedIds is computed
+// track nodes by range + kind
+const id = computed(() => {
+  const k = kind.value
+  const { row: startRow, column: startCol } = start.value
+  const { row: endRow, column: endCol } = end.value
+  return `${k}-${startRow}-${startCol}-${endRow}-${endCol}`
+})
+
 function copyKind(kind: string) {
   navigator.clipboard.writeText(kind)
   showToast('Node kind copied!')

website/src/components/dump/dumpTree.ts

@@ -16,7 +16,6 @@ export interface GeneralNode {
   start: Pos
   end: Pos
   children: this[]
-  id: number
 }
 
 /** stub wasm DumpNode */