docs: add screenshots & details to copilot vscode demo

codemeta.json

@@ -0,0 +1,52 @@
+{
+  "@context": "https://doi.org/10.5063/schema/codemeta-2.0",
+  "@type": "SoftwareSourceCode",
+  "author": [
+    {
+      "@id": "https://orcid.org/0000-0003-3283-829X",
+      "@type": "Person",
+      "affiliation": {
+        "@type": "Organization",
+        "legalName": "Advanced Biomedical Computational Science, Frederick National Laboratory for Cancer Research, Frederick, MD 21702, USA"
+      },
+      "familyName": "Sovacool",
+      "givenName": "Kelly"
+    },
+    {
+      "@id": "https://orcid.org/0000-0002-8968-6621",
+      "@type": "Person",
+      "affiliation": {
+        "@type": "Organization",
+        "legalName": "Advanced Biomedical Computational Science, Frederick National Laboratory for Cancer Research, Frederick, MD 21702, USA"
+      },
+      "familyName": "Cauley",
+      "givenName": "Ned"
+    },
+    {
+      "@id": "https://orcid.org/0000-0002-8734-9875",
+      "@type": "Person",
+      "affiliation": {
+        "@type": "Organization",
+        "legalName": "Advanced Biomedical Computational Science, Frederick National Laboratory for Cancer Research, Frederick, MD 21702, USA"
+      },
+      "familyName": "Sevilla",
+      "givenName": "Samantha"
+    },
+    {
+      "@id": "https://orcid.org/0000-0001-8978-8495",
+      "@type": "Person",
+      "affiliation": {
+        "@type": "Organization",
+        "legalName": "Advanced Biomedical Computational Science, Frederick National Laboratory for Cancer Research, Frederick, MD 21702, USA"
+      },
+      "familyName": "Koparde",
+      "givenName": "Vishal"
+    }
+  ],
+  "codeRepository": "https://github.com/CCBR/HowTos",
+  "datePublished": "2025-10-24",
+  "license": "https://spdx.org/licenses/MIT",
+  "name": "How-To Guides for the CCR Collaborative Bioinformatics Resource",
+  "url": "https://ccbr.github.io/HowTos/",
+  "version": "v0.1.0"
+}

docs/generative-AI/gh-pilot-vs-code/demo/extract_promoters.py

@@ -64,15 +64,15 @@ def main():
     parser.add_argument("--out", required=True, help="Path to output BED file")
     args = parser.parse_args()
 
-    # Open GTF file 
+    # Open GTF file
     # TODO: handle gzipped gtf files
     with open(args.gtf, "r") as gtf_file:
 
         with open(args.out, "w") as bed_file:
             # Extract protein-coding genes and write promoter regions
             for chrom, tss, strand, gene_name, gene_id in extract_genes(gtf_file):
                 # TODO: Only include standard chromosomes
-                
+
                 # Calculate promoter region based on strand
                 if strand == "+":
                     # For positive strand: TSS - 2000 to TSS + 200

docs/generative-AI/gh-pilot-vs-code/index.qmd

@@ -6,12 +6,17 @@ resources:
     - ./demo/setup.sh
 ---
 
-CCBR members can view the recording of this demo:
+::: {.callout-tip}
+## Recording
 
-> [CCBR TechDev meeting 2025-12-19](https://teams.microsoft.com/l/meetingrecap?driveId=b%21TFzec_Fen0CC3VBtt_DOLUi_rPnazLZHq7bJ65bJujOjWrRwPEO3S6dXSGGiG3vN&driveItemId=01P644UUBDFREJK3SODBG32DSCX3NIAZDV&sitePath=https%3A%2F%2Fnih.sharepoint.com%2Fsites%2FNCI-CCRBioinformaticsTechDev%2FShared%2520Documents%2FGeneral%2FRecordings%2FMonthly%2520TechDev%2520Meeting-20251219_120837-Meeting%2520Recording.mp4%3Fweb%3D1&fileUrl=https%3A%2F%2Fnih.sharepoint.com%2Fsites%2FNCI-CCRBioinformaticsTechDev%2FShared%2520Documents%2FGeneral%2FRecordings%2FMonthly%2520TechDev%2520Meeting-20251219_120837-Meeting%2520Recording.mp4%3Fweb%3D1&iCalUid=040000008200E00074C5B7101A82E00807E90C1356C2FC35937FD901000000000000000010000000ABE3C80E6915624FB5ACBA9D7210EB65&masterICalUid=040000008200e00074c5b7101a82e0080000000056c2fc35937fd901000000000000000010000000abe3c80e6915624fb5acba9d7210eb65&threadId=19%3AEq3jqAR95OHCUISNGsEiwWpVp02kj8U2a91MkiX-dXo1%40thread.tacv2&organizerId=b6b931cf-bac3-44d6-9530-29b83b206532&tenantId=14b77578-9773-42d5-8507-251ca2dc2b06&callId=d5acd3cb-4d4c-49e6-aeb9-ef247240bee2&threadType=space&meetingType=Recurring&channelType=Standard&replyChainId=1683319821974&subType=RecapSharingLink_RecapChiclet)
+CCBR members can view the recording of this demo at the link below:
+
+[CCBR TechDev meeting 2025-12-19](https://teams.microsoft.com/l/meetingrecap?driveId=b%21TFzec_Fen0CC3VBtt_DOLUi_rPnazLZHq7bJ65bJujOjWrRwPEO3S6dXSGGiG3vN&driveItemId=01P644UUBDFREJK3SODBG32DSCX3NIAZDV&sitePath=https%3A%2F%2Fnih.sharepoint.com%2Fsites%2FNCI-CCRBioinformaticsTechDev%2FShared%2520Documents%2FGeneral%2FRecordings%2FMonthly%2520TechDev%2520Meeting-20251219_120837-Meeting%2520Recording.mp4%3Fweb%3D1&fileUrl=https%3A%2F%2Fnih.sharepoint.com%2Fsites%2FNCI-CCRBioinformaticsTechDev%2FShared%2520Documents%2FGeneral%2FRecordings%2FMonthly%2520TechDev%2520Meeting-20251219_120837-Meeting%2520Recording.mp4%3Fweb%3D1&iCalUid=040000008200E00074C5B7101A82E00807E90C1356C2FC35937FD901000000000000000010000000ABE3C80E6915624FB5ACBA9D7210EB65&masterICalUid=040000008200e00074c5b7101a82e0080000000056c2fc35937fd901000000000000000010000000abe3c80e6915624fb5acba9d7210eb65&threadId=19%3AEq3jqAR95OHCUISNGsEiwWpVp02kj8U2a91MkiX-dXo1%40thread.tacv2&organizerId=b6b931cf-bac3-44d6-9530-29b83b206532&tenantId=14b77578-9773-42d5-8507-251ca2dc2b06&callId=d5acd3cb-4d4c-49e6-aeb9-ef247240bee2&threadType=space&meetingType=Recurring&channelType=Standard&replyChainId=1683319821974&subType=RecapSharingLink_RecapChiclet)
 
 <div style="max-width: 1280px"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><iframe src="https://nih.sharepoint.com/sites/NCI-CCRBioinformaticsTechDev/_layouts/15/embed.aspx?UniqueId=95482c23-4e6e-4d18-bd0e-42beda806475&embed=%7B%22ust%22%3Atrue%2C%22hv%22%3A%22CopyEmbedCode%22%7D&referrer=StreamWebApp&referrerScenario=EmbedDialog.Create" width="1280" height="720" frameborder="0" scrolling="no" allowfullscreen title="Monthly TechDev Meeting-20251219_120837-Meeting Recording.mp4" style="border:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; max-width: 100%;"></iframe></div></div>
 
+:::
+
 ## Why CoPilot?
 
 CoPilot is built to work seamlessly in your IDE. 
@@ -59,12 +64,13 @@ The [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=Gi
 
 #### VS Code settings
 
-You can customize CoPilot settings in VS Code by going to **Settings** > **Extensions** > **GitHub Copilot** or by using the keyboard shortcut {{< kbd Cmd , >}} on Mac.
+You can customize CoPilot settings in VS Code by going to **Settings** > **Extensions** > **GitHub Copilot** or by using the keyboard shortcut {{< kbd Cmd >}}{{< kbd , >}} on Mac.
 
 ![](img/vscode-settings.png){fig-alt="VS Code settings interface showing GitHub Copilot configuration options under the Features section. Two checkboxes are visible and enabled: Auto Fix which automatically fixes diagnostics for edited files, and Current Editor Context which includes the name of the current active editor in the context for agent mode."}
 
 :::{.callout-tip}
-GitHub CoPilot also works well in Positron, an IDE created by Posit based on VS Code.
+GitHub CoPilot also works well in [Positron](https://positron.posit.co/),
+an IDE created by Posit based on VS Code.
 :::
 
 ## Demo: a simple python script
@@ -77,12 +83,17 @@ Files:
 - [extract_promoters.py](./demo/extract_promoters.py) - Example Python script for demonstrating CoPilot
 - [setup.sh](./demo/setup.sh) - Download data files for testing the Python script
 
+Create a new directory called `extract-promoters`, download these files, and place them there.
+
 ### Open project in new window
 
-Create a new directory for your project and open it with VS Code.
+Open the directory for your project with VS Code.
 
 ![](img/open-vs-code.png)
 
+:::{.callout-tip}
+## Use git
+
 We recommend initializing git and making a commit with the existing code before you start using CoPilot.
 
 ```sh
@@ -93,44 +104,108 @@ git add extract_promoters.py setup.sh
 git commit -m 'Initial commit'
 ```
 
+:::
+
 ### Automatic inline suggestions
 
+Copilot will make suggestions automatically as you type.
+You can adjust this behavior in settings.
+
 ![How to turn automatic inline suggestions on and off](img/inline-suggest-enabled.png)
- <vscode://settings/editor.inlineSuggest.enabled>
 
-Example: ask Copilot to write a docstring.
+<vscode://settings/editor.inlineSuggest.enabled>
+
+#### Example: automatic docstring suggestion
+
+Place your cursor where a function docstring should be, wait a little bit, and see if Copilot suggests one.
+If needed, start typing `"""` and see if that triggers Copilot to suggest a docstring.
+
+![](img/auto-suggest.png){fig-alt=VS Code editor window showing GitHub Copilot automatically suggesting code as light gray text inline with the user's typing.}
+
+You can press {{< kbd Tab >}} to accept the suggestion, or {{< kbd Esc >}} to reject it.
 
 ### Inline chat
 
-Example: ask Copilot to break out a complicated line of code into a separate function.
+Press {{< kbd Cmd-I >}} to open the inline chat and ask for modifications right where your cursor is.
+
+![](img/chat-inline.png)
+
+![](img/chat-inline-suggestion.png)
+
+You can click the checkmark to accept the suggested edit if it meets your expectations.
+You can always modify it after accepting it if there are minor corrections to make.
+
+### Chat in the sidebar
+
+Sometimes you may have more long-form questions, or perhaps you'd like to have a
+record of the prompts you've given to Copilot. The sidebar Chat is great for this!
+
+You can toggle the sidebar on and off with the sidebar button in the upper right corner of the VS Code window:
 
-{{< kbd Cmd I >}}
+![Open the sidebar](img/chat-sidebar.png){width=300px}
 
-### Chat in sidebar
+You can select which Large Language Model to use for your prompts:
 
-![Open the sidebar](img/chat-sidebar.png)
+![Model selection](img/model-selection){width=300px}
 
-![Model selection](img/model-selection)
+#### Example: ask Copilot to explain how a line of code works.
 
-Example: ask Copilot to explain how a function works
+Highlight a complicated line of code and ask Copilot to explain how it works.
 
-Example: ask Copilot to explain the benefits of `yield` vs `return` in Python functions
+![](img/chat-explain-dict-compr.png)
+
+#### Example: ask Copilot to break out a complicated line of code into a separate function.
+
+![](img/chat-sidebar-func.png)
+
+![](img/chat-sidebar-func-answer.png)
+
+If you are not in Agent mode, you will need to make the modifications yourself.
+But Copilot's instructions make it very clear how to do so!
+
+#### Example: ask Copilot to explain the benefits of `yield` vs `return` in Python functions
+
+![](img/chat-question-yield.png)
+
+![](img/chat-explain-yield.png)
+
+#### Example: Writing unit tests
+
+Ask Copilot to suggest unit tests for the Python script.
+
+![](img/chat-ask-tests.png)
+
+Copilot suggested a comprehensive suite of unit tests for the script.
+
+![](img/chat-ask-tests-start.png)
+
+If you're not sure where to place the tests, Copilot has a detailed suggestion:
+
+![](img/chat-ask-tests-where.png)
+![](img/chat-ask-tests-pytest.png)
+
+Be sure to read through the unit tests, understand what they're testing and why,
+and consider if there are any gaps in test coverage that you will need to correct.
 
 ### Source Control: git GUI in VS Code
 
-Suggest commit messages
+Copilot can even suggest commit messages for you!
+Using the Source Control extension, add your script to the git staging area and
+ask Copilot to suggest a commit message.
 
 ![](img/source-ctrl-commit.png)
 
-![](img/source-ctrl-commit-msg.png)
+Click the sparkles ✨ icon on the right side of the commit message box to generate
+a commit message using Copilot.
 
-### Writing unit tests
+![](img/source-ctrl-commit-msg.png)
 
-Ask Copilot to suggest unit tests
+Read the commit message and make sure it accurately describes the changes you've
+made before you accept it.
 
 ## Tips
 
 - Always read and **understand** the AI suggestion before accepting it
-- Write tests to make sure your code works the way you think it does
 - Use git and commit your changes often
+- Write tests to make sure your code works the way you think it does
 - Periodically step back and reflect on what you're trying to accomplish