Sisense.connect modifies url/route
We are developing a React app and using Sisense.js. sisense.js is included using a <script> tag and then the component that renders the dashboard calls Sisense.connect() when it is mounted.
Whenever Sisense.connect is called, the route (url) displayed in the browser address bar is updated to the previous route which is affecting the behavior of the app.
Does anyone know why calling Sisense.connect() would update the route/url and if there is a way to prevent this behavior?
Note: Previously we were dynamically loading sisense.js and adding it to the DOM like the React example on gitlab does. https://gitlab.com/SisenseJS/react-sample. When we did it this way we did not have the problem but using the <script> tag makes the code much cleaner and we don't have the delay of loading the script when the component renders.
-
Hi Brian, could you post the code/a link to the code of the page where you import the .js file and execute the connect() function? (of course, sanitized of any sensitive information)
This is odd behavior and shouldn't happen, might be stemming from some conflict between the library and something else on the page. If you can't find a resolution to this issue here I do recommend opening a support ticket as well, but I hope with the code someone on the forums can spot the problem for you.
-
index.html
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<metacharset="utf-8">
<!-- Make the page mobile compatible -->
<metaname="viewport"content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<metaname="mobile-web-app-capable"content="yes">
<linkrel="icon"href="/favicon.ico"/>
<title>Ad Astra Align</title>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means
<strong>JavaScript has been disabled on your browser</strong>, please
<strong>enable JS</strong> to make this app work.</noscript>
<scriptsrc="http://mysisenseserver.com:8081/js/sisense.js"type="text/javascript"></script>
<!-- The app hooks into this div -->
<divid="app"></div>
<divid="sisenseApp"></div>
<!-- Open Sans Font -->
<linkhref="https://fonts.googleapis.com/css?family=Open+Sans:400,700"rel="stylesheet">
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically injects all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this file. Don't add any assets here! (Check out webpack.dev.babel.js and webpack.prod.babel.js if you want to know more) -->
</body>
</html> -
// Dashboard.ts
import React from 'react';
import Grid from '@material-ui/core/Grid';
import {
getSisenseApp,
setSisenseApp,
lookupDashboard,
updateFilters,
DashboardFilter,
} from 'components/Dashboard/Sisense';
const sisenseSettings = {
server: process.env.SISENSE_URL,
};
export interface IProps {
dashboardId: string;
filters?: DashboardFilter[];
}
// Sisense Dashboard component
class Dashboard extends React.Component<IProps> {
dashboard: any = null;
render() {
if (this.dashboard && this.props.filters && this.props.filters) {
updateFilters(this.dashboard, this.props.filters);
}
return (
<div>
{
<Grid container={true} spacing={24}>
{this.props.children}
</Grid>
}
</div>
);
}
componentDidMount() {
this.initSisensejs();
}
initSisensejs = () => {
const { dashboardId } = this.props;
const connect = () => {
const connected = (app) => {
setSisenseApp(app);
this.loadDashboard(dashboardId);
};
const Sisense = (window as any).Sisense;
Sisense.connect(sisenseSettings.server).then(connected.bind(this));
};
if (getSisenseApp()) {
this.loadDashboard(dashboardId);
} else {
connect();
}
}
dashboardLoaded = (dashboard) => {
this.dashboard = dashboard;
if (this.dashboard && this.props.filters && this.props.filters) {
updateFilters(this.dashboard, this.props.filters);
}
}
loadDashboard = (id) => {
const sisenseApp = getSisenseApp();
this.dashboard = lookupDashboard(sisenseApp, id);
if (this.dashboard) {
this.dashboardLoaded(this.dashboard);
} else {
sisenseApp.dashboards.load(id).then(this.dashboardLoaded);
}
}
}
export default Dashboard; -
// Sisense.ts - utility functions
let sisenseApp: any = null;
export type DashboardFilter = {
table: string,
column: string,
values: string[],
};
export const getSisenseApp = (): any => {
return sisenseApp;
};
export const setSisenseApp = (app: any) => {
sisenseApp = app;
};
export const lookupDashboard = (sisenseApp: any, id: string): any => {
if (sisenseApp) {
const dashboards = sisenseApp.$$dashboards;
for (let i = 0; i < dashboards.length; i++) {
const dashboard = sisenseApp.dashboards.get(i);
if (id === dashboard.$$id) {
return dashboard;
}
}
}
return null;
};export const lookupWidget = (dashboard: any, label: string): any => {
if (dashboard) {
for (const widget of dashboard.widgets.$$widgets) {
if (widget.$$model.astraLabel===label||
widget.$$model.title===label) {
return widget;
}
}
}
return null;
}; -
Hi Brian,
I took a look and couldn't identify where that occurs, so I've opened a support ticket for you and our engineering team will investigate - you should receive an email with a link to your ticket. If you could update that with the exact version of Sisense you're currently using that would be very helpful.
Thanks!
Please sign in to leave a comment.
Comments
6 comments