Merge pull request #53 from MetabobProject/docs/image-updates

docs/image updates

Author: AviGopal

README.md

@@ -24,79 +24,20 @@ Metabob is an AI-based code review tool that utilizes a combination of Graph Neu
 # Settings​
 
 * To disable Metabob anlaysis from running every time code is saved, go to the extension settings and deselect the checkbox under the text "Metabob: **Analyze Document On Save**"  
-
-![](docs/img/docs-analyze-on-save.png)
 ​
 * To change the backend LLM model Metabob uses to generate problem descriptions and code recommendations, select your preferred model from the "Metabob: **Backend Selection**" drop down menu
-
-![](docs/img/docs-backend-selection.png)
 ​
 * If you prefer to use one of the openai models, you need to authenticate by inputting your openai API key into the text field under "Metabob: ChatGPT Token" text field on Metabob's extension settings 
 
-![](docs/img/docs-openai-token.png)
-
 # Usage​
-​
-1. Request an analysis
-
-Users can request Metabob to analyze the file they are currently working on by:
-* Using the "**ANALYZE**" -button on the Metabob extension side panel
-
-![analyze-document-sidepanel](docs/img/v2-analyze-sidepanel.png)
-
-
-* Opening the command palette and using the command "**Metabob: Analyze Document**"
-
-![analyze-document-commandpalette](docs/img/v2-analyzedocument-commandpalette.png)
-
-
-* Saving the file (requires "**Analyze Document On Save**" to be enabled on the extension settings
-
-
-Users can confirm that the Metabob Analysis is running by seeing a loading icon next to a text "Metabob: Analyzing Document" on the bottom left corner of the VS Code editor.
-
-![analysis-running](docs/img/v2-analysis-running.png)
-
-
-Once the analysis has finished, users can see problematic areas highlighted in red on the file they are currently viewing and requested analysis for from Metabob.
-
-![highlighted-problem](docs/img/v2-problem-highlight.png)
 
+1. Analyze code
 
-2. View problem details
+2. View detected problems
 
-Users can view problem details by hovering over the red highlighted problem regions in their code and clicking "**More Details**"
+3. Generate fixes for detected problems
 
-![more-details](docs/img/v2-view-more-details.png)
-​
-
-3. Generate code recommendations to fix detected problems
-
-Users can generate code recommendations to fix the detected problems by:
-* Hovering over the red highlighted problem regions in their and clicking "**Fix**"
-
-![fix-problem](docs/img/v2-fix-and-details.png)
-
-
-* Clicking the "**GENERATE RECOMMENDATION**" -button on the Metabob extension side panel when viewing problem details
-
-![generate-recommendation](docs/img/v2-generate-rec-sidepanel.png)
-
-
-If users think that the generated code recommendation is not correct, they can generate another recommendation by using the "**REGENERATE**" -button
-
-![regenerate-recommendation](docs/img/v2-regenerate-rec.png)
-
-
-Users can view the different generated code recommendations they have asked to generate by using the arrows below the code generated code recommendation
-
-![view-recommendations](docs/img/v2-recommendation-pagination.png)
-
-
-Users can apply the generated code recommendations to their code by clicking the "APPLY" -button
-
-![apply-recommendation](docs/img/v2-apply-recommendation.png)
-​
+![analysis-flow](docs/img/v2-analysis-flow.gif)
 
 
 # Data Policy

docs/img/v2-analysis-flow.gif

@@ -29,7 +29,7 @@ let expirationTimer: any = undefined;
 
 export function activate(context: vscode.ExtensionContext): void {
   let previousEditor: vscode.TextEditor | undefined = undefined;
-  const _debug = undefined; // vscode.window.createOutputChannel('Metabob');
+  const _debug = vscode.window.createOutputChannel('Metabob');
   bootstrapExtensionEventEmitter();
 
   initState(context);
@@ -349,7 +349,11 @@ export function activate(context: vscode.ExtensionContext): void {
       if (!e) {
         return;
       }
-      const { fileName } = Util.extractMetaDataFromDocument(e.document);
+      const { filePath, fileName } = Util.extractMetaDataFromDocument(e.document);
+
+      if (!filePath) {
+        return;
+      }
 
       if (!fileName) {
         return;
@@ -371,7 +375,7 @@ export function activate(context: vscode.ExtensionContext): void {
         return;
       }
 
-      const results: Problem[] | undefined = Util.getCurrentEditorProblems(analyzeValue, fileName);
+      const results: Problem[] | undefined = Util.getCurrentEditorProblems(analyzeValue, filePath);
       if (!results) {
         return;
       }

docs/img/v2-analysis-running.png

@@ -33,8 +33,8 @@ export const handleDocumentAnalyze = async (
   suppressRateLimitErrors = false,
   _debug?: vscode.OutputChannel,
 ) => {
-  const tomorrow = new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
+  const thirty_minutes = new Date();
+  thirty_minutes.setHours(thirty_minutes.getHours() + 0.5);
 
   const currentWorkSpaceFolder = Util.getRootFolderName();
   const editor = vscode.window.activeTextEditor;
@@ -196,12 +196,12 @@ export const handleDocumentAnalyze = async (
         isEndorsed: problem.endorsed,
         isViewed: false,
         fullFilePath: currentWorkSpaceFolder,
-        expiration: tomorrow.toISOString(),
+        expiration: thirty_minutes.toISOString(),
       };
       results[key] = { ...analyzeMetaData };
     });
 
-  _debug?.appendLine('AnalyzeDocument.ts: Document File path' + currFile.absPath);
+  _debug?.appendLine('AnalyzeDocument.ts: Document File path: ' + currFile.absPath);
   const problems = Util.getCurrentEditorProblems(results, currFile.absPath);
   _debug?.appendLine(
     'AnalyzeDocument.ts: handleDocumentAnalyze: problems: ' + JSON.stringify(problems),

docs/img/v2-analyze-sidepanel.png

@@ -2,7 +2,7 @@
   "name": "metabob",
   "displayName": "Metabob: Debug and Refactor with AI",
   "description": "Generative AI to automate debugging and refactoring Python code",
-  "version": "1.2.5",
+  "version": "1.2.10",
   "icon": "media/extension-icon.png",
   "repository": {
     "url": "https://github.com/MetabobProject/metabob-vscode",

docs/img/v2-analyzedocument-commandpalette.png

@@ -555,7 +555,7 @@ describe('AccountSettingProvider', () => {
     const mockMessageEvent = (event: MessageEvent<MessageType>) => {
       window.dispatchEvent(event);
     };
-    const payload = { fileName: '/path/to/exampleFile.git' };
+    const payload = { uri: {fsPath: '/path/to/exampleFile.git'} };
 
     render(
       <RecoilRoot>
@@ -575,7 +575,7 @@ describe('AccountSettingProvider', () => {
       mockMessageEvent(messageEvent);
     });
 
-    const expectedFilename = payload.fileName.split('/').pop()?.replace('.git', '') ?? undefined;
+    const expectedFilename = payload.uri.fsPath ?? undefined;
 
     expect(mockCurrentEditorStateHandler).toHaveBeenCalledWith(expectedFilename);
   });
@@ -596,7 +596,7 @@ describe('AccountSettingProvider', () => {
     );
 
     act(() => {
-      const payload = { fileName: '/path/to/invalidFile' };
+      const payload = { uri: {fsPath: '/path/to/invalidFile'} };
       const messageEvent = new MessageEvent<MessageType>('message', {
         data: {
           type: EventDataType.CURRENT_FILE,
@@ -624,7 +624,7 @@ describe('AccountSettingProvider', () => {
     );
 
     act(() => {
-      const payload = { fileName: '' };
+      const payload = { uri: {fsPath: ''} };
       const messageEvent = new MessageEvent<MessageType>('message', {
         data: {
           type: EventDataType.CURRENT_FILE,
@@ -798,7 +798,7 @@ describe('AccountSettingProvider', () => {
           ...IdentifiedProblems,
         },
         currentWorkSpaceFolder: 'exampleProject',
-        currentFile: { fileName: 'exampleFileName.git' },
+        currentFile: { uri: {fsPath: 'exampleProject/exampleFileName.git'} },
       };
       const messageEvent = new MessageEvent<MessageType>('message', {
         data: {
@@ -814,7 +814,7 @@ describe('AccountSettingProvider', () => {
     expect(mockHasWorkSpaceFoldersStateHandler).toHaveBeenCalledWith(true);
     expect(mockIdentifiedProblemsStateHandler).toHaveBeenCalledWith(IdentifiedProblems);
     expect(mockCurrentWorkSpaceProjectStateHandler).toHaveBeenCalledWith('exampleProject');
-    expect(mockCurrentEditorStateHandler).toHaveBeenCalledWith('exampleFileName');
+    expect(mockCurrentEditorStateHandler).toHaveBeenCalledWith('exampleProject/exampleFileName.git');
   });
 
   it('should update Recoil state correctly on INIT_DATA event with valid payload with an edge case', () => {

docs/img/v2-apply-recommendation.png

@@ -125,10 +125,7 @@ const AccountSettingProvider = ({ children }: Props): JSX.Element => {
           }
 
           if (currentFile) {
-            const filename: string | undefined = currentFile?.fileName
-              ?.split('/')
-              ?.pop()
-              ?.replace('.git', '');
+            const filename: string | undefined = currentFile?.uri?.fsPath;
 
             if (!filename) {
               setCurrentEditor(undefined);
@@ -203,10 +200,7 @@ const AccountSettingProvider = ({ children }: Props): JSX.Element => {
           }
           break;
         case EventDataType.CURRENT_FILE:
-          const filename: string | undefined = payload?.fileName
-            ?.split('/')
-            ?.pop()
-            ?.replace('.git', '');
+          const filename: string | undefined = payload?.uri?.fsPath;
 
           if (!filename) {
             setCurrentEditor(undefined);