Sisense.connect modifies url/route

Comments

6 comments

  • Avatar
    Moti Granovsky

    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.

    0
    Comment actions Permalink
  • Avatar
    Brian Wetzel (Edited )
    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>
    0
    Comment actions Permalink
  • Avatar
    Brian Wetzel
    // 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;
    0
    Comment actions Permalink
  • Avatar
    Brian Wetzel
    // 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;
    };

     

    0
    Comment actions Permalink
  • Avatar
    Brian Wetzel

    It is not reflected in this code but we are using React Router.

    Looking at the minified sisense.js, I do see a use of replaceState but hard to tell the actual context

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    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!

    0
    Comment actions Permalink

Please sign in to leave a comment.