SAS Viya API Wrappers for JS – Building a Data Filtering and Display Application with React

[#1]

In this article, we'll walk through a React-based application that connects to the SAS Viya API to allow users to interact with data stored in SAS libraries. This application enables users to filter and display data dynamically from selected libraries, tables, columns, and filter criteria. We’ll break down the key features and discuss how the code works to achieve this.

In previous articles related to the SAS Viya API Wrappers for JS, we've seen how to use the different functions in web applications using CDN to load the library. In this article, we will see how you can integrate the library into a React-based application using NPM packages.

SAS Viya API Wrappers for JS – Integrating SAS Compute Server into a custom web application made eas...

SAS Viya API Wrappers for JS – Building dynamic prompts for SAS Viya Jobs

SAS Viya API Wrappers for JS – Building advanced dynamic prompts for SAS Viya Jobs

SAS Viya API Wrappers for JS – Building a Data Filtering and Display Application with React (this article)

 

Using SAS Viya Wrappers for JS

The SAS Viya Wrappers for JS are designed to be used as a CDN package as well as inside a NodeJS based application via npm installation. Using a CDN, you can write the application in your favorite text editor or inside SAS Studio when creating a SAS Viya job. Using the npm installation method, you need to configure NodeJS and install the required dependencies using npm. In this article, we will explain how to use the SAS Viya API Wrappers for JS within a NodeJS based application. For this application, I've used ViteJS for the development environment and React as the main library. In addition to these root components, MaterialUI has been used to build an appealing user interface using the Material design patterns. After installing these different elements using NPM, the installation of the SAS Viya API Wrappers for JS have been done using this command:

npm i sas-viya-api-wrappers-js

This command can be found on sas-viya-api-wrappers-js - npm

After installation, the dependencies section of the package.json file will look like this:

"dependencies": {

    "@emotion/react": "^11.14.0",

    "@emotion/styled": "^11.14.0",

    "@mui/icons-material": "^6.4.2",

    "@mui/material": "^6.4.2",

    "react": "^18.3.1",

    "react-dom": "^18.3.1",

    "sas-viya-api-wrappers-js": "^2.0.7"

  },

With everything installed and configured, we can go ahead and develop the application. The code of this basic application is available on GitHub

 

Setting up state and initializing the compute session

At the start of the app, the code defines various pieces of state using React's `useState` hook. These states are used to manage the session, the available libraries, tables, columns, and the selected filter criteria.

The first `useEffect` hook is used to establish a connection with the SAS Viya compute session:

const createComputeSession = async () => {
const session = await ComputeSession.init({
     baseURL: 'https://server.demo.sas.com/',
     contextName: 'SAS Job Execution compute context',
  })
  setSession(session)
}

Once the session is initialized, the app is able to interact with the SAS Viya environment, retrieving data like available libraries, tables, and columns.

 

Dynamically populating select boxes for user interaction

The next three `useEffect` hooks are responsible for dynamically updating the options available in the select dropdowns for library, table, column, and value (filter).

• Libraries: When the session is initialized, the `getLibraries` function is called to retrieve a list of available libraries from the SAS server.

const getLibraries = async () => {
  const libraries = await session?.getLibraries({}) as string[]
  const data = libraries?.map(item => { return { value: item, label: item } as SelectItem })
  if (data) {
      setLibraries(data)
  }
}

• Tables: After a library is selected, the `getTables` function fetches the tables available within that library.

const getTables = async () => {
  const tables = await session?.getTables({ libraryName: library }) as string[]
  const data = tables?.map(item => { return { value: item, label: item } as SelectItem })
  if (data) {
      setTables(data)
  }
}

• Columns: Once a table is chosen, the `getColumns` function retrieves the column names from that table.

const getColumns = async () => {
  const columns = await session?.getColumns({ libraryName: library, tableName: table }) as string[]
  const data = columns?.map(item => { return { value: item, label: item } as SelectItem })
  if (data) {
      setColumns(data)
  }
}

• Values (Filter): Finally, once a column is selected, the `getValues` function retrieves possible filter values for that column.

const getValues = async () => {
  const values = await session?.getValues({ libraryName: library, tableName: table, columnName: column }) as string[]
  const data = values?.map(item => { return { value: item, label: item } as SelectItem })
  if (data) {
      setValues(data)
  }
}

Each `SelectBox` component is rendered dynamically with the available options, enabling users to select a library, table, column, and filter.

 

Fetching and displaying data based on filter criteria

Once the user has made their selections (i.e., a library, table, column, and filter value), the app uses another `useEffect` hook to retrieve the data from SAS Viya that matches the specified criteria. This process is handled by the `getResults` function:

const getResults = async () => {
    const columns = await session?.getColumns({ libraryName: library, tableName: table, outputType: 'api' }) as Column[]
    const varInfo = columns?.find(element => element?.name === column)
    let exportStatement = `export ${library}.${table} (where=(${column} = "${filter}"));`
    if (varInfo?.type !== "CHAR") {
        exportStatement = `export ${library}.${table} (where=(${column} = ${filter}));`
    }
    const code = [
        `filename results "results.json";`,
        `proc json out=results nosastags pretty ; `,
        exportStatement,
        `run;`
    ]
    const data: any[] = await session?.executeCode({ code: code, resultName: "results" })
    setData(data)
}

This function constructs a SAS code snippet that filters the data by the selected column and filter value, executes it, and then retrieves the results. The results are returned as JSON, which is processed and displayed in the app.

 

Rendering the user interface

The user interface of the app consists of several dropdowns (`SelectBox` components) and a data table (`DataTable` component) to display the filtered results. Here’s the part of the code where the UI is structured:

<SelectBox label={"Library"} data={libraries} disabled={libraries.length === 0} handler={{value: library, setValue: setLibrary}} />

<SelectBox label={"Table"} data={tables} disabled={library === ""} handler={{value: table, setValue: setTable}} />

<SelectBox label={"Column"} data={columns} disabled={table === ""} handler={{value: column, setValue: setColumn}} />

<SelectBox label={"Value"} data={values} disabled={column === ""} handler={{value: filter, setValue: setFilter}} />

<DataTable data={data} />

This structure ensures that the select boxes are populated with appropriate options based on previous user choices, and the table displays the filtered data after the user selects a value.

I will not cover each component in this article. They are mainly receiving data and display the data using MaterialUI. If you need information about the code, please don't hesitate to contact me.

 

Demo

xab_SASViyaAPIWrappers-React.mp4

Video Player is loading.

Play Video

Play

Mute

Current Time 0:00

/

Duration 0:00

Loaded: 0%

0:00

Stream Type LIVE

Seek to live, currently behind liveLIVE

Remaining Time -0:00

1x

Playback Rate

Chapters

• Chapters

Descriptions

• descriptions off, selected

Captions

• captions settings, opens captions settings dialog
• captions off, selected

Audio Track

Picture-in-PictureFullscreen

This is a modal window.

Beginning of dialog window. Escape will cancel and close the window.

Text

ColorWhiteBlackRedGreenBlueYellowMagentaCyanTransparencyOpaqueSemi-Transparent

Background

ColorBlackWhiteRedGreenBlueYellowMagentaCyanTransparencyOpaqueSemi-TransparentTransparent

Window

ColorBlackWhiteRedGreenBlueYellowMagentaCyanTransparencyTransparentSemi-TransparentOpaque

Font Size

50%75%100%125%150%175%200%300%400%

Text Edge Style

NoneRaisedDepressedUniformDropshadow

Font Family

Proportional Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall Caps

Reset restore all settings to the default valuesDone

Close Modal Dialog

End of dialog window.

Close Modal Dialog

This is a modal window. This modal can be closed by pressing the Escape key or activating the close button.

 

Conclusion

This React app effectively integrates with the SAS Viya API to allow users to filter and display data interactively from SAS libraries. The use of `useState ` and `useEffect` hooks ensures that the app remains reactive to user inputs, making it an efficient and scalable solution for data exploration. The combination of React's declarative UI with the power of SAS Viya's analytics capabilities allows for seamless interaction with large datasets.

By understanding how to manage session states, dynamically update UI elements, and query the SAS Viya server, you can expand this app to include more advanced features like advanced filters, sorting, and data visualizations.

For more information about the SAS Viya API Wrappers for JS, please don't hesitate to contact me or read the related articles:

SAS Viya API Wrappers for JS – Integrating SAS Compute Server into a custom web application made eas...

SAS Viya API Wrappers for JS – Building dynamic prompts for SAS Viya Jobs

SAS Viya API Wrappers for JS – Building advanced dynamic prompts for SAS Viya Jobs

SAS Viya API Wrappers for JS – Building a Data Filtering and Display Application with React (this article)

Note: the library is a work in progress. Other features will be added and feedback about missing features will be more than welcomed.

Find more articles from SAS Global Enablement and Learning here.