Feature/ace_editor #282
Feature/ace_editor #282
Conversation
| } else if (filepath.endsWith('json')) { | ||
| this.mode = 'json'; | ||
| } else { | ||
| this.mode = 'yaml'; |
There was a problem hiding this comment.
Maybe look for *.yml or *.yaml for 'yaml'
Otherwise default to text might make more sense
(Consider CWL workflows which I've seen include JS files for example)
There was a problem hiding this comment.
I'll make the changes for yaml and text. As for CWL including JS files, you can define sub grammars based on existing grammars. This would be a good future task.
There was a problem hiding this comment.
I'm actually thinking about workflows that include js files outright
https://dockstore.org/workflows/github.com/ICGC-TCGA-PanCancer/pcawg-oxog-filter
| <section [innerHTML]="fileService.highlightCode(content)"></section> | ||
| </div> | ||
| <div [hidden]="!content || !_selectedVersion?.valid"> | ||
| <app-code-editor [(content)]="content" [filepath]="getFilePath(currentFile)"></app-code-editor> |
There was a problem hiding this comment.
check number of times getFilePath() is executed
There was a problem hiding this comment.
Ya for some reason for some components we had the filepath as a variable but for others we used this. I was introducing a new dependency in this PR so I didn't want to change anything like that that may introduce some bugs while developing.
| styleUrls: ['./code-editor.component.scss'] | ||
| }) | ||
| export class CodeEditorComponent implements AfterViewInit { | ||
| _content: string; |
There was a problem hiding this comment.
https://angular.io/guide/styleguide#style-03-04
Avoid prefixing private properties and methods with an underscore.
There was a problem hiding this comment.
That's strange this comes straight from an example on the angular site for sharing between parent and child containers 🤔
|
|
||
| @Input() set content(content: string) { | ||
| this._content = content; | ||
| if (this.editor !== undefined && content !== undefined && content !== null) { |
There was a problem hiding this comment.
content !== undefined && content !== null can probably be replaced with content the other non-truthy values don't apply to strings.
| editor: any; | ||
| mode = 'yaml'; | ||
| _filepath: string; | ||
| aceId: string; |
There was a problem hiding this comment.
Could use a comment on what aceId is and why it's a random number
There was a problem hiding this comment.
This is just in case we have multiple on the same screen.
| <section [innerHTML]="fileService.highlightCode(content)"></section> | ||
| </div> | ||
| <div [hidden]="!content || !_selectedVersion?.valid"> | ||
| <app-code-editor [(content)]="content" [filepath]="getFilePath(currentFile)"></app-code-editor> |
| @@ -13,10 +13,9 @@ | |||
| * See the License for the specific language governing permissions and | |||
| * limitations under the License. | |||
| */ | |||
| import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core'; | |||
| import { AfterViewChecked, Component, Input } from '@angular/core'; | |||
There was a problem hiding this comment.
AfterViewChecked unused import
Codecov Report
@@ Coverage Diff @@
## develop #282 +/- ##
===========================================
+ Coverage 63.29% 63.37% +0.07%
===========================================
Files 120 122 +2
Lines 3621 3664 +43
Branches 399 405 +6
===========================================
+ Hits 2292 2322 +30
- Misses 1236 1252 +16
+ Partials 93 90 -3
Continue to review full report at Codecov.
|
|
@garyluu The changes have been made. |
| } | ||
|
|
||
| /** | ||
| * Changes the mode of the editor based on the filepath, fallback is text modew |
Adds Ace Editor for viewing files
-built in search, line numbers, themes
-will be very useful for hosted entry editing
-wrapped in a component so it can be added anywhere on the site
-lots of other extra features, such as custom shortcuts, autocomplete, code generation, etc
Also
For converting grammars:
https://wiki.oicr.on.ca/display/DOC/Dockstore+Primer#DockstorePrimer-CustomGrammars