Skip to content

Commit

Permalink
fix: show data flow order for ai fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DariusZdroba
DariusZdroba committed Dec 12, 2024
1 parent 127f4d9 commit 0807151
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 102 deletions.
176 changes: 89 additions & 87 deletions infrastructure/code/template/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,96 @@ <h2 class="severity-title">{{.IssueTitle}}</h2>
</div>
</div>
</section>
<!-- Data Flow and Fixed Code Examples -->
<div id="no-ai-fix-wrapper">
<!-- Data Flow -->
<section class="data-flow-section delimiter-top">
<h2 class="data-flow-header">
Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
</h2>
<div class="data-flow-body">
{{range $fileName := .DataFlowKeys}}
<div class="data-flow-file">
{{$.FileIcon}}
<span class="data-flow-file-name">{{$fileName}}</span>
</div>
<table class="data-flow-table">
<tbody>
{{range index $.DataFlowTable $fileName}}
<tr class="data-flow-row">
<td class="data-flow-number">
<div class="data-flow-circle">{{.Number}}</div>
<div class="data-flow-line"></div>
</td>
<td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
{{.StartLineValue}}
</td>
<td class="delimiter data-flow-delimiter">|</td>
<td class="data-flow-text">
<code>{{.Content}}</code>
</td>
</tr>
{{end}}
</tbody>

</table>
{{end}}
</div>
</section>

<!-- Fixed Code Examples -->
<section class="example-fixes delimiter-top {{if .HasAIFix}}hidden{{end}}">
<h2 class="example-fixes-header">Fixed Code Examples</h2>
{{if eq (len .ExampleCommitFixes) 0}}
<div id="info-no-examples" class="font-light">
No example fixes are available.
</div>
{{else}}
<p id="example-fixes-info-top" class="example-fixes-info-top font-light">
This type of vulnerability was fixed in {{.RepoCount}} open source projects.
</p>
<div id="example-top" class="row between">
<div id="current-example" class="repo clickable">
{{.GitHubIcon}}
<span id="example-link" class="example-repo-link">
<a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
rel="noopener noreferrer">
{{(index .ExampleCommitFixes 0).RepoName}}
</a>
</span>
</div>
<div class="examples-nav">
<span id="previous-example" class="arrow" title="Previous example">
{{.ArrowLeftDark}}
{{.ArrowLeftLight}}
</span>
<span id="example-text">
Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
</span>
<span id="next-example" class="arrow" title="Next example">
{{.ArrowRightDark}}
{{.ArrowRightLight}}
</span>
</div>
</div>

<div id="example" class="example">
{{range $index, $element := .ExampleCommitFixes}}
<div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
<div>
{{range $element.ExampleLines}}
<div class="example-line {{.LineChange}}">
<code>{{.Line}}</code>
</div>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}
</section>
</div>
<!-- AI Fix -->
<div id="ai-fix-wrapper" class="{{if not .HasAIFix}}hidden{{end}}">
<!-- AI fix buttons -->
Expand Down Expand Up @@ -225,93 +314,6 @@ <h2 class="ai-fix-header">
</div>
</section>
</div>

<!-- Data Flow and Fixed Code Examples -->
<div id="no-ai-fix-wrapper" class="{{if .HasAIFix}}hidden{{end}}">
<!-- Data Flow -->
<section class="data-flow-section delimiter-top">
<h2 class="data-flow-header">
Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
</h2>
<div class="data-flow-body">
{{range $fileName := .DataFlowKeys}}
<div class="data-flow-file">
{{$.FileIcon}}
<span class="data-flow-file-name">{{$fileName}}</span>
</div>
<table class="data-flow-table">
<tbody>
{{range index $.DataFlowTable $fileName}}
<tr class="data-flow-row">
<td class="data-flow-number">{{.Number}}</td>
<td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
line:{{.StartLineValue}}
</td>
<td class="delimiter data-flow-delimiter">|</td>
<td class="data-flow-text">
<code>{{.Content}}</code>
</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}
</div>
</section>

<!-- Fixed Code Examples -->
<section class="example-fixes delimiter-top">
<h2 class="example-fixes-header">Fixed Code Examples</h2>
{{if eq (len .ExampleCommitFixes) 0}}
<div id="info-no-examples" class="font-light">
No example fixes are available.
</div>
{{else}}
<p id="example-fixes-info-top" class="example-fixes-info-top font-light">
This type of vulnerability was fixed in {{.RepoCount}} open source projects.
</p>
<div id="example-top" class="row between">
<div id="current-example" class="repo clickable">
{{.GitHubIcon}}
<span id="example-link" class="example-repo-link">
<a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
rel="noopener noreferrer">
{{(index .ExampleCommitFixes 0).RepoName}}
</a>
</span>
</div>
<div class="examples-nav">
<span id="previous-example" class="arrow" title="Previous example">
{{.ArrowLeftDark}}
{{.ArrowLeftLight}}
</span>
<span id="example-text">
Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
</span>
<span id="next-example" class="arrow" title="Next example">
{{.ArrowRightDark}}
{{.ArrowRightLight}}
</span>
</div>
</div>

<div id="example" class="example">
{{range $index, $element := .ExampleCommitFixes}}
<div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
<div>
{{range $element.ExampleLines}}
<div class="example-line {{.LineChange}}">
<code>{{.Line}}</code>
</div>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}
</section>
</div>
</div>
<!-- End Fix Analysis section -->

Expand Down
65 changes: 50 additions & 15 deletions infrastructure/code/template/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,16 @@
--horizontal-border-color: var();
--code-background-color: var(--vscode-editor-background);
--tab-active-background-color: var(--vscode-tab-activeBackground);
--input-border: var(--vscode-input-border)
--input-border: var(--vscode-input-border);
--input-background: var(--vscode-input-background);
/* This doesn't exist yet in VSCode*/
--border-color: var(--vscode-border-color);
--example-line-removed-color: var(--vscode-line-removed-color);
--example-line-added-color: var(--vscode-line-added-color);
--generated-ai-fix-button-background-color: var(--vscode-button-background);
--disabled-background-color: var(--vscode-foreground);
--circle-color: var(--vscode-badge-background);
--number-td-background-color: var(--vscode-editor-foldBackground);
}

::-webkit-scrollbar {
Expand Down Expand Up @@ -261,32 +264,66 @@ table {
}
table td {
background: var(--container-background-color);
border-top: 1px solid var(--border-color);
padding: 3px;
padding: 8px 8px 0 4px;
}

.data-flow-table {
background-color: var(--code-background-color);
margin-top: 5px;
margin-left: 15px;
margin-top: 4px;
}

.data-flow-row {
border-collapse: collapse;
vertical-align: baseline;
}

/* Data flow number bubbles */
.data-flow-number {
padding-left: 14px;
padding-right: 14px;
width: 0.9375rem;
text-align: right;
position: relative;
background-color: var(--background-color);
text-align: center;
padding: 4px;
}
.data-flow-circle{
width: 16px;
height: 16px;
font-size: 12px;
font-weight: 600;
border-radius: 50%;
background-color: var(--circle-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
position: inherit;
left: 0;
top: 50%;
z-index: 1;
}


.data-flow-line {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
transform: translateX(-50%);
border-left: 1px dashed var(--text-color);
z-index: 0;
}
table > tbody > tr:first-child > td:first-child .data-flow-line {
top: 50%;
height: 50%;
}

table > tbody > tr:last-child > td:first-child .data-flow-line {
top: 0;
height: 10%;
}

.data-flow-clickable-row {
color: var(--link-color);
font-weight: 400;
width: 3.9375rem;
text-align: right;
}

Expand Down Expand Up @@ -355,13 +392,11 @@ code {
text-transform: uppercase;
}

.data-flow-number,
.data-flow-clickable-row,
.data-flow-delimiter,
.data-flow-text {
background-color: transparent;
border-color: transparent;
padding-top: 0px;
padding-bottom: 0px;
}

Expand Down Expand Up @@ -440,7 +475,7 @@ code {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075));
box-shadow: 0 -1px 3px rgba(0, 0, 0, .05);
border-top: 1px solid var(--border-color);

z-index: 1;
}

#ignore-actions {
Expand Down Expand Up @@ -528,7 +563,7 @@ button {

button.generate-ai-fix,
button.sn-apply-fix {
border-radius: 3px;
border-radius: 4px;
background-color: var(--generated-ai-fix-button-background-color);
color: white;
cursor: pointer;
Expand Down Expand Up @@ -614,7 +649,7 @@ button.sn-apply-fix:hover {
}

.sn-fix-wrapper {
padding: 2rem;
padding: 16px;
margin-top: 1rem;
border-radius: 4px;
overflow: hidden;
Expand Down

0 comments on commit 0807151

Please sign in to comment.