Develop web applications series: Build a web application using SAS Micro Analytic Service
In earlier articles of this series, I've explained how you can populate a table with data coming from SAS Viya. You can see how to get data from the CAS Server, from the Compute Server and using SAS Viya Jobs. For this article, you will discover how to build a page to access data from the SAS Micro Analytic Service. We will reuse the same basic web application which was built in Build a React application. But this time, it will require a bit more preparation work as the SAS Micro Analytic Service (MAS) is designed for model scoring.
This article is the sixth one in the Develop web applications series:
- Present the options for extracting data
- Build a React application
- Build a web application using SAS Viya Jobs
- Build a web application using SAS Cloud Analytic Service
- Build a web application using SAS Compute Server
- Build a web application using SAS Micro Analytic Service (this article!)
The page we will build in this article will look like this.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
The model
In the SAS Viya world, you have different options to publish a model to the SAS Micro Analytic Service (MAS). You can create a model using SAS Visual Analytics or SAS Model Studio. You can write your own code using SAS Studio or import existing open-source models or SAS Enterprise Miner models (from SAS 9).
As the main purpose of this article is to describe the web development part, we will assume that you have already published a model to MAS. If you want to see how you can create and publish the model using SAS Visual Analytics, please watch this video. The video covers the steps to explore your data and create a model using SAS Visual Analytics, how to register the model in a project using SAS Model Manager and to publish it to MAS. The video also demos the web application we will build in this article. If you prefer to import the model, the model is available in the git repository related to this article and the process to import the model and publish is described in the next section.
To give you a better view on the model that we are using, it is gradient boosting model which evaluates the risk of a heart attack based on these health factors:
- Cholesterol level
- Diastolic level
- Systolic level
- Cigarettes consumption per day
- Age at start
- Weight
- Sex
The model is developed using the SASHELP.HEART data set. It has been registered in a SAS Model Manager project and published to MAS with the following name: heart_attack_prediction. As a result, the MAS endpoint to be used when scoring data, is:
microanalyticScore/modules/heart_attack_prediction/steps/score
Import the model
The model can be downloaded here.
After downloading the model, open SAS Model Manager and import the model.
In the Import Models window, select the zip file you downloaded earlier and keep the default values. When done, press Import button.
The model should now be imported. We will create a project named: Viya_app.
In the New Project window, specify the following information:
We can now add the model to the project.
Select the model, we imported earlier.
Now that the model is imported, we can publish it.
Specify the following name and make sure that you are publishing to MAS.
As the model is available for scoring by MAS, we can now focus on the web application.
Reusable components
If you have been through the previous articles in the series, you should know by now that we are building a React application and that one of the major benefits of React is that we can reuse components. In the articles covering SAS Viya Jobs, CAS and Compute Server, we have created different components that can be reused. The only component we will reuse in this article will be the loader that will be displayed whenever the application is waiting for data from the SAS Viya environment. This is because when we submit an API request to MAS we will be getting a single score returned and not a table with columns and rows like in the previous examples.
If you want to see the code for these elements, please check the Reusable components section of the Build a web application using SAS Viya Jobs article.
Specific components for the MAS page
As we can only reuse the Loading component, we will need to create new components:
- MASForm: a form which will be used to pass the values for scoring
- MASResults: a result section which will include the scoring result but also the detailed statistics for the scoring
Let's create a new file named MASForm.js under components folder. The file has multiple sections:
- The Import statements
This section imports the components provided natively by React and react-bootstrap. - The MASForm function definition and the form elements
This section defines the MASForm function and the information about the elements that will be displayed in the form. - The handlers function
This section defines two functions which are used to handle the evaluation and the changes in the form elements. - The generation of the form elements
This section creates the content of the form which will be rendered by the return section. When defining the elements, the handleChange function is also defined as the onChange handler for the different elements. - The return statement of the MASForm function
This section defines the layout of the form component using the elements defined in previous section and assigns the handleEvaluate function to the onSubmit event. - The export statement
This section is closing the function and exporting the component for later use.
The other component that we need to define is MASResults. Create another file named MASResults.js under components folder with the following content.
This component displays the results of the scoring. It imports the react-bootstrap components and returns a formatted HTML details tag populated with the data passed to it in the properties.
MAS page
Now we have all the components needed to build the MAS page. It is time to update the Mas.js file under pages directory. Once again the file has multiple sections:
- The import statements
As earlier, we are here importing all the components that are used in the page. - The Mas function definition
This section defines the function and defines the different variables that are needed to get the authentication context, handles the states and history. - Within the function, the React hook to validate the authentication
The React hook checks whether the user is authenticated or not. If he is not, he is routed to the logon page. - Within the function, the function to score the data passed from the form
The handleEvaluate function retrieves the information filled in the form and sends a request to MAS in order to score the data. After execution, the scoreData object is populated with the scoring result. - The return statement of the Mas function
- The export statement
Conclusion
In this article, we’ve seen how to call a model published to the SAS Micro Analytic Service. This technique can be applied to call any model published to MAS. If you want to know more about the MAS related related REST APIs, please refer to the following documentation.
If you followed along with the different articles in this series, you should now have a fully functional web application which can access different data source types from SAS Viya. This application should not be used as-is in production, you should for example add a functionality to handle token expiration. You can of course tweak the interface to get the look and feel that you prefer.
You can download the code for this article.
This article is the sixth one in the Develop web applications series:
- Present the options for extracting data
- Build a React application
- Build a web application using SAS Viya Jobs
- Build a web application using SAS Cloud Analytic Service
- Build a web application using SAS Compute Server
- Build a web application using SAS Micro Analytic Service (this article!)
