Is it possible for me to identify the modifications made to the data view within Spotfire Mods?

After successfully implementing monitoring for changes in the dataview and mod properties in my D3 network chart mod on Spotfire, I found that everything is working really well. The simulation running in the D3 network chart only needs to restart when the actual data rendered changes. Is there a way to check within the dataView object for more detailed changes like axis expression changes for Color By or Size by column without rerunning the entire network simulation?

For example, updating the color or size of a node or applying markings to the network chart should not trigger the simulation restart. However, if there are changes in the data columns, then the network simulation should rerun.

An additional use case could involve updating the network only if a large amount of data has been filtered out after applying filtering.

Are there any methods in the API that can be used to check these more specific changes in the DataView passed into the reader?

This is how my reader is set up:

/**
 * Create the read function.
 */
const reader = readerWithChangeChecker(
    mod.createReader(
        mod.visualization.data(),
        mod.windowSize(),
        mod.property("network_strength"),
        mod.property("display_labels"),
        mod.property("network_type"),
        mod.property("apply_color")
    )
);

I have an updateNetwork function in the async render function which subscribes to the reader. Then, some logic checks are passed to the updateNetwork chart function:

// check what has changed
let data_requires_update = false;
let simulation_requires_update = false;
let window_requires_update = false;
let rendering_requires_update = false;

if (reader.hasValueChanged(dataView)) {
    data_requires_update = true;
    simulation_requires_update = true;
}

if (
    reader.hasValueChanged(network_strength) ||
    reader.hasValueChanged(network_type)
) {
    simulation_requires_update = true;
}

if (reader.hasValueChanged(windowSize)) {
    window_requires_update = true;
}

if (
    reader.hasValueChanged(display_labels) ||
    reader.hasValueChanged(apply_color)
) {
    rendering_requires_update = true;
}

// trigger loading network
updateNetwork(
    data_requires_update,
    simulation_requires_update,
    window_requires_update,
    rendering_requires_update
);

Is it possible to add more detail to the dataView check to detect axes changes, main data table changes, and filter events?

Answer №1

There are a variety of factors that can cause the dataview in Spotfire Mods to be invalidated and replaced, such as new axis expressions, changes in data tables, marking or filtering adjustments, introduction of new streaming data, or updates to document properties used in axis expressions.

It may not always be possible to pinpoint the exact reason for a new dataview calculation, but subscribing to changes in axis expressions can trigger a refreshed simulation when important alterations are made by the user.

In certain situations, including all axes except ColorBy and SizeBy may help achieve your objective. If a new dataview is generated without any changes to axes, updating the visualization using d3 without refreshing the entire simulation might suffice if the modifications are limited to marking, color, or size. Utilizing the key property of hierarchy leaf nodes can assist in identifying nodes and connections within the visualization.

If the new dataview is caused by filtering or updated data sources, a set of d3 enter/exit DOM elements will be present. If these sets are relatively small, opting not to refresh the simulation may be acceptable.

Consider that the connection strength measures could have new values even if the axis expression remains unchanged, making it challenging to determine whether an update is necessary. A manual refresh simulation button could provide a simple solution unless a method to compare entire data views is devised to decide on updates or complete refreshes.

In essence, while the API offers most of the information required to decide on updating the current visualization versus running a full layout pass again, creating a responsive Mod demands understanding of the visualized data.

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

Using ui-router to pass promise results to nested resolves

I am currently using ui-router with nested resolve configurations like this : $stateProvider .state('route', { url: '/route', templateUrl: 'mypage.aspx', resolve: { ...

Tips for adding entries to an SQL database utilizing Node.js

I am currently facing an issue with my Node.js server where I need to send a JSON object in the body request to insert data into an SQL database. When I use "INSERT INTO users(UserInfo, BitMask) Values ("value1", 1)", it works perfectly. However, when I t ...

The v-for directive fails to display the contents of the array

I would like to display some data received from the server in a loop: The JSON data that I have received looks like this (seen in the browser console): fetched data is: {projs: Array(10), page_number: 1, total_pages: 1} page_number: 1 projs: Array(10) 0: ...

Guide on incorporating mouse movement while the mouse button is held down in JavaScript

For my project, I want to activate the mouse move event only when the mouse button is held down. I specifically need the action "OK Moved" to be triggered only when both the mouse button is held down and there is mouse movement. This is the code that I h ...

Simply click and drag a document from your file explorer directly into the desired text field to instantly generate a clickable

I am interested in dragging a file from our Windows server and dropping it onto a text area on a webpage. The link that would be generated will look something like this: <a href="\\fileserver\folder\pizza_2.pdf">filename.pdf< ...

Is there a way to capture an error message in the JSON fetch response?

Here is the code snippet to consider: fetch('https://api.flickr.com/services/rest/?method=flickr.photos.search' + '&api_key=thiskeyshouldgivemeanerror&text=dog&format=json' + '&per_page=24&nojsoncallbac ...

Restrict the number of dynamic form elements to a maximum of 10 entries

I am working on a feature where users can refer their friends and the data will be saved in a database. <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' sr ...

"Master the art of curl login authentication with this step-by-step guide

Looking to authenticate using curl with PHP or another language For example, visit this site: When the curl site prompts for authentication as shown in the image below, how do I log in to retrieve data? https://i.sstatic.net/LGNgl.png ...

What methods can I employ JSON to create a dynamic Sidebar within Nextjs?

[ { "type": "root", "children": [ { "type": "file", "route": "Open-EdTech/AWS-Associate-Notes/EC2.md", "title": "EC2", ...

Exploring the order of execution for resolve and run() in AngularJS

After finding the answer on AngularJS app.run() documentation, I now understand the sequence in which Angular runs modules. This leads me to my question: Consider the following code snippet: app.config(function () { $routeProvider.when('/', ...

Moving ThreeJS model during animation (Retrieving model's position without callback function)

I'm in the process of creating a model that showcases the International Space Station orbiting around the Earth using threeJS. Everything is working perfectly except for updating the position of the ISS model. Currently, I have a sphere that orbits th ...

Timeout error occurred in Async.js because the callback was already triggered

Whenever I execute index.js, I encounter an ETIMEDOUT or ECONNRESET error followed by a Callback was already called error. Initially, my assumption was that the issue stemmed from not including a return before calling the onEachLimitItem callback. Consequ ...

Tips for launching a fresh window and embedding HTML into it with jQuery?

I'm attempting to use JavaScript to open a new window, but the HTML content is not being added: var callScriptText = $('#callScriptText').html(); var url = '/Action/CallScript/?callScript='; // Open the current call script in a n ...

Having difficulty retrieving the user list from Firebase within Angular 6

I am facing an issue with retrieving the list of users from Firebase. Despite having values already set in the database, I am getting empty arrays. The strange thing is that I can successfully add users to the Firebase database and retrieve the list of us ...

I'm having trouble with my jplayerplaylist remove feature, it's not functioning as expected

I am currently working on creating a mobile-friendly version of my website, and I have noticed that the jplayer functionality closely resembles that of my main site. The playlist is updated based on the page you are viewing, with all songs except the one c ...

Retrieving results from PostgreSQL database using pagination technique

When I'm pagination querying my data from a PostgreSQL database, each request involves fetching the data in this manner: let lastNArticles: Article[] = await Article.findAll({ limit: +req.body.count * +req.body.page, or ...

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

the ultimate guide to leveraging a single slot to edit various columns within data tables

Utilizing vuetify, I have successfully created a reusable data table. The headers and items are passed as props to allow for the data table to be used in various components. While employing slots, I have taken a unique approach by implementing a column-ba ...

Enhancing TypeScript Types with a custom method within an Angular 2 context

I am working on an Angular 2 project using the CLI. Currently, I am trying to add a custom method to the String type as shown below. interface String { customMethod(): number; } String.prototype.customMethod = function() { return 0; } Despite my ...

Experiencing difficulties when attempting to launch a React application and Express/Node.js backend on a shared port

I'm trying to set up my react front-end on localhost:5000, with API requests going to localhost:5000/api/some-path. After looking at similar questions, I've come to understand the following: Include a proxy in the package.json file Serve st ...