Editing/Modifying an Existing Custom Visual

[Anonymous]

Hi,

I am currently new to Power BI Custom Visual development and would like to modify an existing Power BI Visual.

I am currently trying to modify the open source Map Box Custom Visual Source Code and add several minor changes for my report.

After making the necessary changes, I have attempted to use "npm run package" on the root directory of the Custom Visual source code, but I noticed that its file size drops dramatically from 1.2 mb (Original pbiviz file) to 330 kb (Repackaged Pbiviz file).

I've tried running this and the visual comes up blank - The Fields option seems to include the expected fields, but the Format option doesn't contain the expected fields (i.e. only the default options). 

I've also tried repackaging it without any changes and it ends up with the same result (330 kb, not working).

Could someone please explain what I am doing wrong? What approach should I be taking to make it work properly?

I would greatly appreciate any help, thank you in advanced.

[dm-p · Accepted solution]

Hey @Anonymous,

When you say you have only changed the guid, does this include backing-out the minor changes you wanted to make? I'd be inclined to stash those somewhere and confirm the base visual works from checkout before packaging with the changes. The visual host suppresses runtime errors and a blank visual can also be a side-effect of such a runtime error.

Assuming you have and the guid is the only change, then my next steps to investigate would be as follows:

If you're still getting a smaller package size it sounds to me like the newer SDK is somehow still installed. Is it possible that you may have installed powerbi-visuals-tools locally to the project as well as globally? You can check this as follows:

• Confirm that package.json doesn't contain powerbi-visuals-tools in either dependencies or devDependencies.
• If it does, type npm un powerbi-visuals-tools and press [Enter].
• Confirm the entry is removed from package.json.

I'm unfortunately not in a position where I can confirm the below process will work as I have several active visual projects on the go and I can't downgrade at this time, but this used to be my process:

1. In the command prompt, type npm un powerbi-visuals-tools -g and press [Enter].
2. Type pbiviz and press [Enter] - this should return an error as tools should be uninstalled.
3. Re-attempt the install: type npm i powerbi-visuals-tools@1.13 -g  and press [Enter].
4. Once installed, type pbiviz --version and press [Enter]. This should say 1.13.x (where x will be a minor version - according to npm the latest build under 1.13 is 1.13.1 so will likely be that - as long as it's 1.13 we should be good).
5. The older version of the SDK has a 2-step cert process.
   • First type pbiviz --create-cert and press [Enter]. This will generate the file. Make note of the key.
   • Then type pbiviz --install-cert and press [Enter]. This should present the standard dialog where you can install the cert. Add in your key here as normal (remeber that the cert needs to be installed into Trusted Root Certification Authorities).

It also looks like Mapbox has their own additional steps for the dev process. It's possible if these aren't done in the right order then they might cause issues also. I would attempt the following to ensure that your checkout corresponds correctly:

• Type npm i and press [Enter].
• Type npm run build-turf and press [Enter].

Confirm that your pbiviz.json still shows "1.13.0" under the apiVersion property.

As long as pbiviz.json and the tools are in sync then pbiviz package or pbiviz start should bundle correctly.

If the guid is the only change you've made to the checkout then theoretically that should be all there is to it. If the code, minus this one change doesn't work then I would suggest creating an issue with Mapbox for advice on how to set-up the development environment correctly to match their own.

You could also try asking the visuals team at MS directly, as they don't weigh-in on the forums any more: pbicvsupport@microsoft.com. it is however possible they will direct you to Mapbox for support.

Regards,

Daniel

[dm-p]

Hi @Anonymous,

Welcome aboard to visual development!

I can't help with specifics, as the visual codebase is pretty large but from looking at pbiviz.json in the mapbox visual's code repo, this is using a really old version of the visual SDK. The version they're using is 1.13.

If you've installed the latest SDK onto your machine so that you can do development, then at time of writing this will be 3.1.x.

Version 3 introduced some huge changes to how visuals leverage other libraries, as well as optimising the package process to remove unnecessary library functions, which is why it will be smaller when you package on your machine.

If you want the Mapbox visual to work on your machine with the current codebase, you have two options:

You could re-write the code to use updated packages that are ES6 compatible. This is not a small undertaking and the likely reason why Mapbox haven't done it either.

The second (easier) option will be to downgrade your tooling and install the older version. If you followed the guide, you probably ran the following (or similar) when you installed the tools:

npm i powerbi-visuals-tools -g

That will always install the latest version. Instead, you could run the following to set your tools to the same version that Mapbox would have built the visual with:

npm i powerbi-visuals-tools@1.13 -g

Note that you will need to set up your developer certificate again as any change to the powerbi-visuals-tools package signature will invalidate any current secure connection you have to the Power BI Service.

Note that any feature you might want to add may not be present in 1.13 of the tools - check the changelog to confirm this.

The other thing to consider is that with packaged visuals, the pbiviz.json contains a guid property. If this guid matches a visual already published in AppSource (i.e. Mapbox), then Power BI will always load that one to ensure that reports are always on the latest peublished version of a known visual. You either need to change this to a different one when using in production reports as you typically won't be using Developer mode here.

Good luck,

Daniel

[Anonymous]

Hi @dm-p ,

Thank you very much for your help and reply.

I've tried the steps that you've mentioned for the 2nd option (Since I only need several minor adjustments to the existing Mapbox visual)

npm i powerbi-visuals-tools@1.13 -g

and gave it a new GUID, then I tried packaging it with "npm run package" at the root of the mapbox directory, but for some reason, the newly generated .pbiviz file still comes up as 330 Kb (and it didn't work on the Desktop version).

I've also tried creating/installing a certificate for the 1.13 version with pbiviz -- create-cert and pbiviz --install-cert , but when I tried to run it using the Developer mode, it wouldn't work either.

Please note that I haven't made any changes to the actual code outside of the GUID.

Have I missed out anything else? Thanks

[dm-p · Accepted solution]

Hey @Anonymous,

When you say you have only changed the guid, does this include backing-out the minor changes you wanted to make? I'd be inclined to stash those somewhere and confirm the base visual works from checkout before packaging with the changes. The visual host suppresses runtime errors and a blank visual can also be a side-effect of such a runtime error.

Assuming you have and the guid is the only change, then my next steps to investigate would be as follows:

If you're still getting a smaller package size it sounds to me like the newer SDK is somehow still installed. Is it possible that you may have installed powerbi-visuals-tools locally to the project as well as globally? You can check this as follows:

• Confirm that package.json doesn't contain powerbi-visuals-tools in either dependencies or devDependencies.
• If it does, type npm un powerbi-visuals-tools and press [Enter].
• Confirm the entry is removed from package.json.

I'm unfortunately not in a position where I can confirm the below process will work as I have several active visual projects on the go and I can't downgrade at this time, but this used to be my process:

1. In the command prompt, type npm un powerbi-visuals-tools -g and press [Enter].
2. Type pbiviz and press [Enter] - this should return an error as tools should be uninstalled.
3. Re-attempt the install: type npm i powerbi-visuals-tools@1.13 -g  and press [Enter].
4. Once installed, type pbiviz --version and press [Enter]. This should say 1.13.x (where x will be a minor version - according to npm the latest build under 1.13 is 1.13.1 so will likely be that - as long as it's 1.13 we should be good).
5. The older version of the SDK has a 2-step cert process.
   • First type pbiviz --create-cert and press [Enter]. This will generate the file. Make note of the key.
   • Then type pbiviz --install-cert and press [Enter]. This should present the standard dialog where you can install the cert. Add in your key here as normal (remeber that the cert needs to be installed into Trusted Root Certification Authorities).

It also looks like Mapbox has their own additional steps for the dev process. It's possible if these aren't done in the right order then they might cause issues also. I would attempt the following to ensure that your checkout corresponds correctly:

• Type npm i and press [Enter].
• Type npm run build-turf and press [Enter].

Confirm that your pbiviz.json still shows "1.13.0" under the apiVersion property.

As long as pbiviz.json and the tools are in sync then pbiviz package or pbiviz start should bundle correctly.

If the guid is the only change you've made to the checkout then theoretically that should be all there is to it. If the code, minus this one change doesn't work then I would suggest creating an issue with Mapbox for advice on how to set-up the development environment correctly to match their own.

You could also try asking the visuals team at MS directly, as they don't weigh-in on the forums any more: pbicvsupport@microsoft.com. it is however possible they will direct you to Mapbox for support.

Regards,

Daniel

[Anonymous]

Hi @dm-p 

Thank you once again for your informative reply, I really appreciate it.

I cloned a fresh copy of the latest repository and I've followed all your steps and I did miss out the npm run build-turf step.

I had a few issues and found out that the build-turf they mentioned in their instructions was actually turf-build.

However, after correcting this - I attempted to run it as-is (i.e. no changes, not even the GUID this time) using pbiviz start would give the following error:

The pbiviz --version states 1.13.1 and the apiVersion in the pbiviz.json states 1.13.0.

I found out from this post in their GitHub issues, https://github.com/mapbox/mapboxgl-powerbi/issues/347   , that someone had similar issues - the developer did respond (one of the last responses since then) and mentioned npm install -g powerbi-visuals-tools@2.6.0 .

I tried upgrading to 2.6.0 as well, but it still complained about the Invalid API v1.13.0.

Is it possible there's some sort of mismatch with the API version? Would I have to change the information in the pbiviz.json or other files?

Thanks again

[dm-p · Accepted solution]

On the older SDK, the apiVersion isn't tied to a sensible repository like npm and is managed through some other arcane means, so there are some manual steps.

BTW updating your SDK and API to 2.6.0 should be okay as this is as far as you can go on the older tooling before needing to migrate packages and code to the newer tooling.

On the older tooling, the specified apiVersion in pbiviz.json needs to be pulled down separately and stored in your project's .api folder if you update the tools in-place.

As long as you have powerbi-visuals-tools 2.6 installed, you should be able to run the following from the command line:

pbiviz update 2.6.0

This should set the apiVersion to 2.6.0 in pbiviz.json and a pbiviz start should hopefully not complain about SDK and API being out of whack.

You will also need to re-generate the certificate on the older versions if you either update the API or the tools due to a change in signature of the SDK + API.

If it's still upset, check the .api folder of your project and delete any that aren't relevant to your current specified API version. The tool should do this itself but it's possible that errant ones may remain if you've been shifting between versions.

On the newer toolchain there are separate npm packages for the API and tools so its easier to manage, and certificates only have to be generated for new versions of powerbi-visuals-tools (updating powerbi-visuals-api is safe).

The older tooling was still evolving and a lot of existing visuals still use it, which unfortunately does make experiences like these commonplace, if you're picking up someone else's work. You definitely get a better experience if you attempt to work on anything with an SDK >= 3.1.

Hopefully this should get you on track,

Daniel

[Anonymous]

Hi @dm-p ,

Thanks for your help yesterday, sorry to bother you again though...

I've just used a repackaged version of the visual (i.e. No actual changes made, only the GUID is changed) in Power BI. Everything seems to look fine (i.e. Fields, Formatting options, and Show as table in the More Options reveals the data) - However, the map itself doesn't seem to be rendering at all. I did notice that when I removed the Mapbox Access Token from the Formatting Options/Viz settings, it did have a template over the visual asking the user to create a MapboxAccess Token - But the visual itself is blank.

Is there anything that I might have missed that has affected the visual's ability to render properly by any chance?

Thanks again

[dm-p]

Hi @Anonymous,

I don't really do any geospatial analysis in Power BI so can't offer perspective on what the correct operation of the visual is, but all I can offer is that if the visual is blank, there's an error in the code somewhere.

It's likely that you'll need to follow-up on any specifics of this this with Mapbox. Debugging other peoples' visuals usually starts veering into billable work for me 😉

However, I'll provide a high-level approach that I might typically adopt.

Visuals suppress errors to the end user, particularly in Desktop, so if you want to do any kind of debugging then you will need to use your web browser's development tools. You can either start the developer visual and do that, or load the packaged visual into a report published to the Service. The former is easier as you can add/modify code and reload/verify dynamically rather than re-packaging the visual each time.

I'm not sure how much debugging Mapbox have built-in to the visual so I'd first start checking the console to see if the visual is logging any errors. This might help provide you with where it's going wrong.

If nothing comes up, I'd suggest wrapping the visual's constructor and update methods with a try / catch block and output the error to the console. This might look something like this:

constructor(options: VisualConstructorOptions) {
  try {
    ...
    [original code here]
    ...
  } catch (e) {
     console.log(e);
  }
}

This might give you something tangible in the console that you can provide to Mapbox to see if they can offer further advice.

Good luck,

Daniel

[Anonymous]

Hi @dm-p ,

Thank you again for your help, this is definitely sound advice that I can work with.

Thanks again for your help with helping me the visual up and running!

Thank you very much

[dm-p]

You're very welcome! 🙂

[Anonymous]

Hi @dm-p ,

Just wanted to update you on the situation:

After a thorough investigation, I've found out that at some point after the Power BI - Mapbox's update to 2.6.0, they actually reverted their api back to 1.13.0! 

With that in mind, I downgraded it back to 1.13.1/1.13.0 accordingly.

Everything seems to be working now, thanks again for your help!

[Anonymous]

Hi @dm-p ,

Thank you very much again for your help!

I've finally managed to get it up and running with your guidance - The map itself isn't working/rendering yet (I'll take a look into this tomorrow), but Power BI seems to recognise the Format Options and everything else.

Thank you again, really appreciate it! 

[telduzdar]

Hello,
I have installed same api version as mapbox visual "1.13.0" but i get the error below when i try pbiviz start
style/visual.less : The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined

appreciate your help, thanks