The TreeView Schema Duplicate is an extension for VS Code

I am currently developing a custom VS Code extension that incorporates a unique viewsContainer. The activation of this container is triggered by an onView: event defined in the package JSON.

The functionality works seamlessly, with my view fetching data from a static JSON file and efficiently adding each node to the view.

The structure of my JSON data is as follows:

{
  "name": "root",
  "children": {
    "Child1": [
      { "id": "childId1", "name": "childName1" },
      { "id": "childId2", "name": "childId2" }
    ],
    "Child2": [
        { "id": "childId1", "name": "childName1" },
        { "id": "childId2", "name": "childId2" }
    ],
    ...
  }
}

The class registered as a treeviewprovider in extension.ts looks like this:

...

In summary, I have encountered an issue where expanding an item in the view results in the entire JSON schema being repeated underneath it. It seems that the getChildren() method is called both during registration and at every expand event.

My query pertains to identifying the flaw in my implementation within getValidateMenu() to prevent duplicating the schema on collapsed items and correctly grouping their child objects under the respective parent item.

Could setting commands for the immediate root.children items, linking to an onclick method for revealing their children, be a potential solution?

I would greatly appreciate any guidance or advice from individuals more knowledgeable in this area. Thank you.

Answer №1

It appears that there is an issue with how you are implementing the getChildren() method. According to the documentation, it should function as follows:

Get the children of element or root if no element is passed.

However, your implementation seems to be returning a flat list of all tree items when no element is passed, and an empty list otherwise.

To resolve this issue, make sure that you are actually returning the children of the requested element, rather than the entire tree at once for the root element.

You may find the official Tree View Sample helpful in addressing this problem.

Answer №2

After struggling with this issue for quite some time, I finally came across the GitHub repository shared by the original poster in a different question. It might be helpful to mention it here for the benefit of others.

Check out the GitHub repo here

The solution that worked for me was adding a children field to my TreeItem subclass, as recommended by @Gama11 in the comments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The variable's Ionic value is not being displayed in the HTML

I recently developed a new Ionic application and encountered an issue while attempting to display a variable value in the HTML. Without making any modifications, this is the current state of my page after creating the app. import { IonicModule } from &ap ...

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...

Amaze the little ones by staggering children using framer-motion with a custom component as the child

Looking to implement a mobile menu with a cool fading effect on the navigation items, but something seems off. The NavLink items all appear simultaneously instead of staggered loading. Initially, considered using 'delay' instead of 'delayCh ...

A universal TypeScript type for functions that return other functions, where the ReturnType is based on the returned function's ReturnType

Greetings to all TypeScript-3-Gurus out there! I am in need of assistance in defining a generic type GuruMagic<T> that functions as follows: T represents a function that returns another function, such as this example: fetchUser(id: Id) => (disp ...

developing a collection of Material UI text fields

My goal is to construct an accordion containing several textfield mui-components. I have developed a unique render function incorporating all the essential tags and syntax for creating a text field component. Now, I am looking to generate an array of text ...

Issue: Typescript/React module does not have any exported components

I'm currently facing an issue with exporting prop types from one view component to another container component and using them as state type definitions: // ./Component.tsx export type Props { someProp: string; } export const Component = (props: ...

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

Error: The AppModule is missing a provider for the Function in the RouterModule, causing a NullInjectorError

https://i.stack.imgur.com/uKKKp.png Lately, I delved into the world of Angular and encountered a perplexing issue in my initial project. The problem arises when I attempt to run the application using ng serve.https://i.stack.imgur.com/H0hEL.png ...

You cannot access the property 'subscribe' on a void type in Angular 2

fetchNews(newsCategory : any){ this.storage.get("USER_INFO").then(result =>{ this.storage.get("sessionkey").then(tempSessionKey =>{ this.email = JSON.parse(result).email; this.newSessionKey = tempSessionKey; this.authKey =JSON.stringify("Basic ...

What is the best way to enable external access to a class component method in React and Typescript?

I am currently working on a component library that compiles to umd and is accessible via the window object. However, I need to find a way to call a class component's methods from outside the class. The methods in my classes are private right now, but ...

Unable to locate a type definition file for module 'vue-xxx'

I keep encountering an error whenever I attempt to add a 3rd party Vue.js library to my project: Could not find a declaration file for module 'vue-xxx' Libraries like 'vue-treeselect', 'vue-select', and 'vue-multiselect ...

Testing Angular components with Jest's mocking capabilities

I've been grappling for a while now with trying to simulate a specific function that I need to test. Despite going through the Jest documentation, I haven't been able to piece together the solution. I couldn't find any relevant questions tha ...

Create an instance of a class from a group of subclasses, all the while retaining the ability to access static members in Types

I seem to have encountered a dilemma where I am looking to have both the static and abstract keywords used for a member of an abstract class in TypeScript, but it appears that this combination is not supported. The nearest workaround I could come up with ...

I am experiencing difficulties with my data not reaching the function in my component.ts file within Angular

My current project involves integrating Google Firebase to handle the login functionality. I encountered an issue where the data inputted from the HTML page to the component.ts file was not being processed or reaching Firebase. However, when I initialized ...

Leverage Angular2 validators beyond FormControl's limitations

As I work on developing a model-driven form in Angular2 RC5, one of the features I am implementing is the ability for users to add multiple entries either manually or by importing from a file. To display the imported data in a table, I utilize JavaScript t ...

Guide on importing an interface from an external ngModule library

Just getting started with angular 4 I've put together an ngModule package called mds.angular.bootstrap.datetimepicker and here's the content of the package.json { "name": "mds.angular.bootstrap.datetimepicker", "version": "0.9.8", "descr ...

Retrieve information for the designated page exclusively

When retrieving data from the backend using a service, I encounter an issue where the system may slow down if 2000 records are returned in one request. To address this, I would like to display only 10 records per page and fetch the next 10 records with eac ...

Using Angular to incorporate HighCharts for a gauge chart

I'm currently working on an Angular project where I need to display a statistic using a gauge chart. The thing is, I'm utilizing the HighCharts library and it's worth mentioning that I've successfully used other types of charts from Hig ...

Learn the steps to disable web page preview in Telegram bot using Node.js

Hey there everyone, just a heads up that my English might not be perfect. Currently working on some nodejs coding and trying to figure out where exactly I should include the disable_web_page_preview in my code. Any ideas? Telegram.prototype.sendIn = asyn ...

Link a list separated by commas to checkboxes in Angular 9

Within my reactive form, I am binding a checkbox list to an array using the following structure: {id:number, name:string}. TS ngOnInit(): void { this.initFCForm(); this.addCheckboxes(); } initFCForm(): void { this.fcForm = this.formBuilder.group({ fr ...