summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSunil Shetye2025-04-03 20:52:52 +0530
committerSunil Shetye2025-04-07 15:38:16 +0530
commit2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e (patch)
tree953fb9f57e2bb135b0f0727355e91fd507a6ebfe
parentee5f5939ec755901b056bb39a3afa481861c8906 (diff)
downloadCommon-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.tar.gz
Common-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.tar.bz2
Common-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.zip
convert schematicEditor action/reducer to slice
-rw-r--r--blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js12
-rw-r--r--blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js2
-rw-r--r--blocks/eda-frontend/src/redux/actions/actions.js7
-rw-r--r--blocks/eda-frontend/src/redux/actions/index.js1
-rw-r--r--blocks/eda-frontend/src/redux/actions/schematicEditorActions.js96
-rw-r--r--blocks/eda-frontend/src/redux/reducers/index.js2
-rw-r--r--blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js53
-rw-r--r--blocks/eda-frontend/src/redux/schematicEditorSlice.js169
-rw-r--r--blocks/eda-frontend/src/redux/store.js2
9 files changed, 178 insertions, 166 deletions
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index c6b42863..f028a649 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -12,7 +12,7 @@ import CloseIcon from '@material-ui/icons/Close'
import './Helper/SchematicEditor.css'
import { useDispatch, useSelector } from 'react-redux'
-import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/actions/index'
+import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/schematicEditorSlice'
import SideComp from './SideComp'
import SimulationProperties from './SimulationProperties'
const COMPONENTS_PER_ROW = 3
@@ -36,10 +36,10 @@ const searchOptions = {
export default function ComponentSidebar ({ compRef }) {
const classes = useStyles()
- const libraries = useSelector(state => state.schematicEditorReducer.libraries)
- const collapse = useSelector(state => state.schematicEditorReducer.collapse)
- const components = useSelector(state => state.schematicEditorReducer.components)
- const isSimulate = useSelector(state => state.schematicEditorReducer.isSimulate)
+ const libraries = useSelector(state => state.schematicEditor.libraries)
+ const collapse = useSelector(state => state.schematicEditor.collapse)
+ const components = useSelector(state => state.schematicEditor.components)
+ const isSimulate = useSelector(state => state.schematicEditor.isSimulate)
const dispatch = useDispatch()
const [isSearchedResultsEmpty, setIssearchedResultsEmpty] = useState(false)
@@ -239,7 +239,7 @@ export default function ComponentSidebar ({ compRef }) {
}
export function ComponentImages () {
- const componentImages = useSelector(state => state.schematicEditorReducer.component_images)
+ const componentImages = useSelector(state => state.schematicEditor.component_images)
const dispatch = useDispatch()
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index c2386016..8dcbf739 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -33,9 +33,9 @@ import mxGraphFactory from 'mxgraph'
import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, ScriptScreen } from './ToolbarExtension'
import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, editorUndo, editorRedo, saveXml, ClearGrid, renderGalleryXML } from './Helper/ToolbarTools'
import { useSelector, useDispatch } from 'react-redux'
-import { toggleSimulate } from '../../redux/actions/index'
import { closeCompProperties } from '../../redux/componentPropertiesSlice'
import { setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/saveSchematicSlice'
+import { toggleSimulate } from '../../redux/schematicEditorSlice'
import api from '../../utils/Api'
import { transformXcos, saveToFile } from '../../utils/GalleryUtils'
diff --git a/blocks/eda-frontend/src/redux/actions/actions.js b/blocks/eda-frontend/src/redux/actions/actions.js
index c40b1b6d..44ca1340 100644
--- a/blocks/eda-frontend/src/redux/actions/actions.js
+++ b/blocks/eda-frontend/src/redux/actions/actions.js
@@ -1,10 +1,3 @@
-// Actions for schematic editor
-export const COMPONENT_IMAGES = 'COMPONENT_IMAGES'
-export const FETCH_LIBRARIES = 'FETCH_LIBRARIES'
-export const TOGGLE_COLLAPSE = 'TOGGLE_COLLAPSE'
-export const FETCH_COMPONENTS = 'FETCH_COMPONENTS'
-export const TOGGLE_SIMULATE = 'TOGGLE_SIMULATE'
-
// Actions for handling and generating netlist
export const SET_NETLIST = 'SET_NETLIST'
export const SET_TITLE = 'SET_TITLE'
diff --git a/blocks/eda-frontend/src/redux/actions/index.js b/blocks/eda-frontend/src/redux/actions/index.js
index 65375ec5..10284a93 100644
--- a/blocks/eda-frontend/src/redux/actions/index.js
+++ b/blocks/eda-frontend/src/redux/actions/index.js
@@ -1,3 +1,2 @@
// Actions dispatch to change state variables inside store
-export * from './schematicEditorActions'
export * from './netlistActions'
diff --git a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js b/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
deleted file mode 100644
index 00fc1e1e..00000000
--- a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Api call for fetching component library list
-export const fetchLibraries = () => (dispatch) => {
-// SAMPLE Response from API
-// [
- // {
- // "id": 1
- // "name": "Commonly Used Blocks",
- // "sort_order": 1
- // },
-// ] -- Multiple dicts in array
- api.get('categories/')
- .then(
- (res) => {
- dispatch({
- type: actions.FETCH_LIBRARIES,
- payload: res.data
- })
- }
- )
- .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching components under specified library id
-export const fetchComponents = (libraryId) => (dispatch) => {
-// SAMPLE Response from API
-// [
- // {
- // "id": 1,
- // "blocktype": 1,
- // "name": "LOGICAL_OP",
- // "categories": [ 1 ],
- // "initial_explicit_input_ports": 2,
- // "initial_implicit_input_ports": 0,
- // "initial_explicit_output_ports": 1,
- // "initial_implicit_output_ports": 0,
- // "initial_display_parameter": "AND",
- // "p000_value_initial": "AND",
- // "p001_value_initial": "AND",
- // "p002_value_initial": "AND",
- // "p003_value_initial": "AND",
- // "p004_value_initial": null,
- // ...
- // "p039_value_initial": null,
- // },
-// ] -- Multiple dicts in array
- const url = 'newblocks/?categories=' + parseInt(libraryId)
- api.get(url)
- .then(
- (res) => {
- dispatch({
- type: actions.FETCH_COMPONENTS,
- payload: { components: res.data, id: libraryId }
- })
- }
- )
- .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching component image names
-export const fetchComponentImages = () => (dispatch) => {
-// SAMPLE Response from API
-// [
- // "palettes/LOGICAL_OP.png",
- // ...
- // "palettes/SUPER_f.png"
-// ] -- Multiple strings in array
- const url = 'block_images'
- api.get(url)
- .then(
- (res) => {
- dispatch({
- type: actions.COMPONENT_IMAGES,
- payload: { component_images: res.data }
- })
- }
- )
- .catch((err) => { console.error(err) })
-}
-
-// Action to keep only one component list dropdown open at a time
-export const toggleCollapse = (id) => (dispatch) => {
- dispatch({
- type: actions.TOGGLE_COLLAPSE,
- payload: { id }
- })
-}
-
-// Action to hide components list to display simulation parameters
-export const toggleSimulate = () => (dispatch) => {
- dispatch({
- type: actions.TOGGLE_SIMULATE
- })
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js
index f0c87843..4217a528 100644
--- a/blocks/eda-frontend/src/redux/reducers/index.js
+++ b/blocks/eda-frontend/src/redux/reducers/index.js
@@ -1,7 +1,5 @@
import { combineReducers } from 'redux'
-import schematicEditorReducer from './schematicEditorReducer'
import netlistReducer from './netlistReducer'
export default combineReducers({
- schematicEditorReducer,
netlistReducer
})
diff --git a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js b/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
deleted file mode 100644
index 2bb7ec76..00000000
--- a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as actions from '../actions/actions'
-
-const InitialState = {
- isSimulate: false,
- libraries: [],
- collapse: {},
- components: {}
-}
-
-export default function schematicEditorReducer (state = InitialState, action) {
- switch (action.type) {
- case actions.FETCH_LIBRARIES: {
- // Add 'open' parameter to track open/close state of collapse
- const collapse = {}
- const components = {}
- action.payload.forEach(element => {
- collapse[element.id] = false
- components[element.id] = []
- })
- return { ...state, libraries: action.payload, collapse, components }
- }
-
- case actions.TOGGLE_COLLAPSE: {
- const existingState = state.collapse[action.payload.id]
- const newCollapse = Object.keys(state.collapse).reduce(function (accObj, parseObj) {
- accObj[parseObj] = false
- return accObj
- }, {})
- newCollapse[action.payload.id] = !existingState
- Object.assign(state.collapse, newCollapse)
- return { ...state, collapse: { ...state.collapse, newCollapse } }
- }
-
- case actions.FETCH_COMPONENTS: {
- const newComponents = state.components
- newComponents[action.payload.id] = action.payload.components
- Object.assign(state.components, newComponents)
- return { ...state, components: { ...state.components, newComponents } }
- }
-
- case actions.COMPONENT_IMAGES: {
- const componentImages = action.payload.component_images
- return { ...state, component_images: componentImages }
- }
-
- case actions.TOGGLE_SIMULATE: {
- return { ...state, isSimulate: !state.isSimulate }
- }
-
- default:
- return state
- }
-}
diff --git a/blocks/eda-frontend/src/redux/schematicEditorSlice.js b/blocks/eda-frontend/src/redux/schematicEditorSlice.js
new file mode 100644
index 00000000..1e4380ed
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/schematicEditorSlice.js
@@ -0,0 +1,169 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import api from '../utils/Api'
+
+const initialState = {
+ isLoading: false,
+ isSimulate: false,
+ libraries: [],
+ collapse: {},
+ components: {},
+ component_images: []
+}
+
+// Api call for fetching component library list
+export const fetchLibraries = createAsyncThunk(
+ 'schematicEditor/fetchLibraries',
+ async (_, { rejectWithValue }) => {
+ // SAMPLE Response from API
+ // [
+ // {
+ // "id": 1
+ // "name": "Commonly Used Blocks",
+ // "sort_order": 1
+ // },
+ // ] -- Multiple dicts in array
+ try {
+ const res = await api.get('categories/')
+ if (res.status === 200) {
+ return res.data
+ }
+ return rejectWithValue(res.data || 'Failed to load libraries')
+ } catch (err) {
+ console.error(err)
+ const res = err.response
+ return rejectWithValue(res.data || 'Failed to load libraries')
+ }
+ })
+
+// Api call for fetching components under specified library id
+export const fetchComponents = createAsyncThunk(
+ 'schematicEditor/fetchComponents',
+ async (libraryId, { rejectWithValue }) => {
+ // SAMPLE Response from API
+ // [
+ // {
+ // "id": 1,
+ // "blocktype": 1,
+ // "name": "LOGICAL_OP",
+ // "categories": [ 1 ],
+ // "initial_explicit_input_ports": 2,
+ // "initial_implicit_input_ports": 0,
+ // "initial_explicit_output_ports": 1,
+ // "initial_implicit_output_ports": 0,
+ // "initial_display_parameter": "AND",
+ // "p000_value_initial": "AND",
+ // "p001_value_initial": "AND",
+ // "p002_value_initial": "AND",
+ // "p003_value_initial": "AND",
+ // "p004_value_initial": null,
+ // ...
+ // "p039_value_initial": null,
+ // },
+ // ] -- Multiple dicts in array
+ const url = 'newblocks/?categories=' + parseInt(libraryId)
+ try {
+ const res = await api.get(url)
+ if (res.status === 200) {
+ return { components: res.data, id: libraryId }
+ }
+ return rejectWithValue(res.data || 'Failed to load blocks')
+ } catch (err) {
+ console.error(err)
+ const res = err.response
+ return rejectWithValue(res.data || 'Failed to load blocks')
+ }
+ })
+
+// Api call for fetching component image names
+export const fetchComponentImages = createAsyncThunk(
+ 'schematicEditor/fetchComponentImages',
+ async (_, { rejectWithValue }) => {
+ // SAMPLE Response from API
+ // [
+ // "palettes/LOGICAL_OP.png",
+ // ...
+ // "palettes/SUPER_f.png"
+ // ] -- Multiple strings in array
+ const url = 'block_images'
+ try {
+ const res = await api.get(url)
+ if (res.status === 200) {
+ return res.data
+ }
+ return rejectWithValue(res.data || 'Failed to load block images')
+ } catch (err) {
+ console.error(err)
+ const res = err.response
+ return rejectWithValue(res.data || 'Failed to load block images')
+ }
+ })
+
+const schematicEditorSlice = createSlice({
+ name: 'schematicEditor',
+ initialState,
+ reducers: {
+ toggleCollapse: (state, action) => {
+ const existingState = state.collapse[action.payload.id]
+ Object.keys(state.collapse).forEach((key) => {
+ state.collapse[key] = false
+ })
+ state.collapse[action.payload.id] = !existingState
+ },
+ toggleSimulate: (state) => {
+ state.isSimulate = !state.isSimulate
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchLibraries.pending, (state) => {
+ state.isLoading = true
+ })
+ .addCase(fetchLibraries.fulfilled, (state, action) => {
+ // Add 'open' parameter to track open/close state of collapse
+ state.isLoading = false
+ const collapse = {}
+ const components = {}
+ action.payload.forEach(element => {
+ collapse[element.id] = false
+ components[element.id] = []
+ })
+ state.libraries = action.payload
+ state.collapse = collapse
+ state.components = components
+ })
+ .addCase(fetchLibraries.rejected, (state) => {
+ state.isLoading = false
+ state.libraries = {}
+ state.collapse = {}
+ state.components = {}
+ })
+ .addCase(fetchComponents.pending, (state) => {
+ state.isLoading = true
+ })
+ .addCase(fetchComponents.fulfilled, (state, action) => {
+ state.isLoading = false
+ state.components[action.payload.id] = action.payload.components
+ })
+ .addCase(fetchComponents.rejected, (state) => {
+ state.isLoading = false
+ })
+ .addCase(fetchComponentImages.pending, (state) => {
+ state.isLoading = true
+ })
+ .addCase(fetchComponentImages.fulfilled, (state, action) => {
+ state.isLoading = false
+ state.component_images = action.payload
+ })
+ .addCase(fetchComponentImages.rejected, (state) => {
+ state.isLoading = false
+ })
+ }
+})
+
+export const {
+ toggleCollapse,
+ toggleSimulate
+} = schematicEditorSlice.actions
+
+export default schematicEditorSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index c13ac5a6..b5975920 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -3,6 +3,7 @@ import authReducer from './authSlice'
import componentPropertiesReducer from './componentPropertiesSlice'
import dashboardReducer from './dashboardSlice'
import saveSchematicReducer from './saveSchematicSlice'
+import schematicEditorReducer from './schematicEditorSlice'
import simulationReducer from './simulationSlice'
const store = configureStore({
@@ -11,6 +12,7 @@ const store = configureStore({
componentProperties: componentPropertiesReducer,
dashboard: dashboardReducer,
saveSchematic: saveSchematicReducer,
+ schematicEditor: schematicEditorReducer,
simulation: simulationReducer
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware()