Merge pull request #15 from opengrep/feature-go-to-line-on-click

feat: add scroll to line on scan result card and inspect rule click

Author: willem-delbare

package-lock.json

@@ -33,6 +33,9 @@
   "keywords": [],
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@guolao/vue-monaco-editor": "^1.5.4",
     "electron-squirrel-startup": "^1.0.1",
     "js-yaml": "^4.1.0",

package.json

@@ -25,13 +25,14 @@
 
       <!-- Results Viewer -->
       <div class="column-view resizable" style="flex-grow: 1;">
-        <RuleResults style="flex: 1; display: 'grid'; gap: '12px'" @showDataFlows="handleShowDataFlows" />
+        <RuleResults style="flex: 1; display: 'grid'; gap: '12px'" @showDataFlows="handleShowDataFlows"
+          @scrollToCodeSnippet="handleScrollToCodeSnippet" />
         <div class="resize-handle" @mousedown="startResize($event, 2)"></div>
       </div>
     </div>
     <!-- Debug Rule Area -->
     <div class="meta-section">
-      <DebugSection style="flex: 3;" class="scroll-container"/>
+      <DebugSection style="flex: 3;" class="scroll-container" @scrollToCodeSnippet="handleScrollToCodeSnippet" />
     </div>
   </div>
 </template>
@@ -43,8 +44,6 @@ import RuleResults from './components/RuleResults.vue';
 import DebugSection from './components/DebugSection.vue';
 import RuleEditor from './components/RuleEditor.vue';
 import { store } from './store';
-import { getLanguage } from './language.mapper';
-
 
 const getRootDir = inject('$getRootDir');
 const getSafeDir = inject('$getSafeDir');
@@ -117,6 +116,12 @@ function stopResize() {
   document.removeEventListener('mouseup', stopResize);
   resizingColumn.value = null;
 }
+
+function handleScrollToCodeSnippet(lineNumber) {
+  if (codeEditor.value) {
+    codeEditor.value.scrollToCodeSnippet(lineNumber)
+  }
+}
 </script>
 
 <style lang="scss">
@@ -222,13 +227,13 @@ $secondary-color: #2ecc71;
 }
 
 .empty-state {
-    font-family: monospace;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    color: #7f8c8d;
-    font-size: 14px;
-    font-style: italic;
+  font-family: monospace;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #7f8c8d;
+  font-size: 14px;
+  font-style: italic;
 }
 </style>

src/App.vue

@@ -109,7 +109,7 @@ function determineHighlightLinesFromTestResult(rawTestResults) {
     if (!rawTestResults || !Object.entries(rawTestResults.results).length) return;
 
     let newDecorations = [];
-    store.jsonResult.parsedTestResults = [];    
+    store.jsonResult.parsedTestResults = [];
     let expectedSet = null;
     let reportedSet = null;
 
@@ -324,8 +324,14 @@ function highlightDebugLocationCode(locations) {
     componentState.debugLocationCodeDecorations = editorRef.value.deltaDecorations(componentState.debugLocationCodeDecorations, newDecorations);
 }
 
+function scrollToCodeSnippet(lineNumber) {
+    if (!editorRef.value) return;
+    editorRef.value.revealLineInCenter(lineNumber,0);
+    editorRef.value.setPosition({ lineNumber, column: 1 });
+}
+
 // Expose the determineCodeFlowInformation function to the parent component
-defineExpose({ determineCodeFlowInformation });
+defineExpose({ determineCodeFlowInformation, scrollToCodeSnippet });
 
 </script>
 <style>

src/components/CodeEditor.vue

@@ -2,7 +2,7 @@
   <div class="inspect-rule">
     <h3 class="title">Inspect Rule</h3>
     <div v-if="!parsedData" class="empty-state">No debugging information available.</div>
-    <TreeView v-else :data="parsedData" @node-hover="handleHover" />
+    <TreeView v-else :data="parsedData" @node-hover="handleHover" @scrollToCodeSnippet="handleScrollToCodeSnippet" />
   </div>
 </template>
 
@@ -12,6 +12,7 @@ import TreeView from "./TreeView.vue";
 import { store } from '../store'
 
 const parsedData = ref(null);
+const emit = defineEmits(['scrollToCodeSnippet']);
 
 watch(() => store.jsonResult.scanResults, (scanResults) => {
   generateDebuggingInfo(scanResults);
@@ -20,7 +21,7 @@ watch(() => store.jsonResult.scanResults, (scanResults) => {
 
 async function generateDebuggingInfo(scanResults) {
   if (!scanResults) return;
-  
+
   const explanations = scanResults.explanations || [];
   parsedData.value = parseExplanation(explanations);
 }
@@ -102,6 +103,10 @@ function handleHover(debugCodeLocation) {
   store.codeEditorDebugLocation = debugCodeLocation;
 }
 
+function handleScrollToCodeSnippet(event, lineNumber) {
+    emit('scrollToCodeSnippet', lineNumber);
+}
+
 </script>
 
 <style lang="scss" scoped>

src/components/DebugSection.vue

@@ -72,7 +72,7 @@ function getLanguageDetails(yamlContent) {
         return null
     }
 
-    if(languages.length > 1){
+    if (!getLanguage(languages[0]) && languages.length > 1) {
         return getLanguage('generic');
     }
 

src/components/RuleEditor.vue

@@ -26,14 +26,18 @@
                         <div class="result-body">
                             <p>{{ result.extra.message }}</p>
                             <div class="location-card">
-                                <p><strong>Snippet on line {{ result.start.line }}:</strong><br><br>{{
-                                    result.extra.lines.trim() }} </p>
+                                <p><strong>Snippet on line {{ result.start.line
+                                        }}:</strong><br><br>{{result.extra.lines.trim() }} </p>
                             </div>
                         </div>
-                        <div class="result-footer" v-if="result.extra.dataflow_trace">
-                            <button class="small" @click="handleShowDataFlows(result.extra.dataflow_trace)"
+                        <div class="result-footer">
+                            <button v-if="result.extra.dataflow_trace" class="small"
+                                @click="handleShowDataFlows(result.extra.dataflow_trace)"
                                 style="align-self: center;">Show
                                 dataflows</button>
+                            <button class="small" @click="scrollToCodeSnippet(result.start.line)">
+                                Go to code snippet
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -74,9 +78,9 @@
 
 <script setup>
 import { inject, defineEmits, ref, onMounted } from 'vue';
-import { store } from '../store'
+import { store } from '../store';
 
-const emit = defineEmits(['showDataFlows']);
+const emit = defineEmits(['showDataFlows', 'scrollToCodeSnippet']);
 
 const joinPath = inject('$joinPath');
 const runBinary = inject('$runBinary');
@@ -211,7 +215,11 @@ function getMatchSatusText(result) {
         return 'Untested match on';
     }
     return result.mustMatch ? 'Must match' : 'Must not match';
-} 
+}
+
+function scrollToCodeSnippet(lineNumber) {
+    emit('scrollToCodeSnippet', lineNumber);
+}
 </script>
 
 <style scoped>
@@ -221,6 +229,11 @@ function getMatchSatusText(result) {
     align-items: center;
 }
 
+.result-footer {
+    display: flex;
+    gap: 16px;
+}
+
 .results-container {
     display: flex;
     flex-direction: column;

src/components/RuleResults.vue

@@ -2,10 +2,16 @@
   <div class="tree-node">
     <div v-if="data" class="node-header" @click="toggle" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
       <span v-if="hasChildren" class="toggle-icon">{{ isOpen ? "▼" : "▶" }}</span>
-      <span class="node-name">{{ data?.name }}</span>
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <span class="node-name">{{ data?.name }}</span>
+        <font-awesome-icon :icon="['far', 'file-code']" size="xl"
+          @click="scrollToCodeSnippet($event, data?.matches[0]?.start.line)" />
+      </div>
     </div>
     <div v-if="isOpen" class="node-children">
-      <TreeView v-for="(child, index) in data?.children" :key="index" :data="child" @node-hover="handleNodeHover" />
+      <TreeView v-for="(child, index) in data?.children" :key="index" :data="child"
+        @scrollToCodeSnippet="scrollToCodeSnippet($event, child?.matches[0]?.start.line)"
+        @node-hover="handleNodeHover" />
     </div>
   </div>
 </template>
@@ -17,7 +23,7 @@ const props = defineProps({
   data: Object,
 });
 
-const emit = defineEmits(["node-hover"]);
+const emit = defineEmits(["node-hover", 'scrollToCodeSnippet']);
 
 const isOpen = ref(true);
 const hasChildren = computed(() => props.data?.children && props.data.children.length > 0);
@@ -56,6 +62,12 @@ const handleNodeHover = (location) => {
   hoveredChildData.value = location; // Store child node location
   emit("node-hover", hoveredChildData.value);
 };
+
+const scrollToCodeSnippet = (event, lineNumber) => {
+  event.stopPropagation();
+  emit('scrollToCodeSnippet', event, lineNumber);
+
+}
 </script>
 
 <style lang="scss" scoped>

src/components/TreeView.vue

@@ -9,8 +9,13 @@ import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import YamlWorker from './yaml.worker?worker';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { far } from '@fortawesome/free-regular-svg-icons';
 
 const app = createApp(App);
+library.add(far);
+app.component('font-awesome-icon', FontAwesomeIcon);
 
 app.provide('$electronAPI', window.electronAPI);
 app.provide('$getPlatform', window.electronAPI.getPlatform);