Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Maryhipp/hide use cache checkbox if disabled (#4691)

Browse Source 
* add skeleton loading state for queue lit

* hide use cache checkbox if cache is disabled

* undo accidental add

* feat(ui): hide node footer entirely if nothing to show there

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
This commit is contained in:
Mary Hipp Rogers 2023-09-25 23:26:15 -04:00 committed by GitHub
parent 358116bc22
commit f8392b2f78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
View File

@ -8,6 +8,7 @@ import InvocationNodeFooter from './InvocationNodeFooter';
import InvocationNodeHeader from './InvocationNodeHeader'; import InvocationNodeHeader from './InvocationNodeHeader';
import InputField from './fields/InputField'; import InputField from './fields/InputField';
import OutputField from './fields/OutputField'; import OutputField from './fields/OutputField';
import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
type Props = { type Props = {
nodeId: string; nodeId: string;
@ -20,6 +21,7 @@ type Props = {
const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => { const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
const inputConnectionFieldNames = useConnectionInputFieldNames(nodeId); const inputConnectionFieldNames = useConnectionInputFieldNames(nodeId);
const inputAnyOrDirectFieldNames = useAnyOrDirectInputFieldNames(nodeId); const inputAnyOrDirectFieldNames = useAnyOrDirectInputFieldNames(nodeId);
const withFooter = useWithFooter(nodeId);
const outputFieldNames = useOutputFieldNames(nodeId); const outputFieldNames = useOutputFieldNames(nodeId);
return ( return (
@ -41,7 +43,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
h: 'full', h: 'full',
py: 2, py: 2,
gap: 1, gap: 1,
borderBottomRadius: 0, borderBottomRadius: withFooter ? 0 : 'base',
}} }}
> >
<Flex sx={{ flexDir: 'column', px: 2, w: 'full', h: 'full' }}> <Flex sx={{ flexDir: 'column', px: 2, w: 'full', h: 'full' }}>
@ -74,7 +76,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
))} ))}
</Flex> </Flex>
</Flex> </Flex>
<InvocationNodeFooter nodeId={nodeId} /> {withFooter && <InvocationNodeFooter nodeId={nodeId} />}
</> </>
)} )}
</NodeWrapper> </NodeWrapper>

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
View File

@ -5,6 +5,7 @@ import EmbedWorkflowCheckbox from './EmbedWorkflowCheckbox';
import SaveToGalleryCheckbox from './SaveToGalleryCheckbox'; import SaveToGalleryCheckbox from './SaveToGalleryCheckbox';
import UseCacheCheckbox from './UseCacheCheckbox'; import UseCacheCheckbox from './UseCacheCheckbox';
import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput'; import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
import { useFeatureStatus } from '../../../../../system/hooks/useFeatureStatus';
type Props = { type Props = {
nodeId: string; nodeId: string;
@ -12,6 +13,7 @@ type Props = {
const InvocationNodeFooter = ({ nodeId }: Props) => { const InvocationNodeFooter = ({ nodeId }: Props) => {
const hasImageOutput = useHasImageOutput(nodeId); const hasImageOutput = useHasImageOutput(nodeId);
const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
return ( return (
<Flex <Flex
className={DRAG_HANDLE_CLASSNAME} className={DRAG_HANDLE_CLASSNAME}
@ -25,7 +27,7 @@ const InvocationNodeFooter = ({ nodeId }: Props) => {
justifyContent: 'space-between', justifyContent: 'space-between',
}} }}
> >
<UseCacheCheckbox nodeId={nodeId} /> {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
{hasImageOutput && <EmbedWorkflowCheckbox nodeId={nodeId} />} {hasImageOutput && <EmbedWorkflowCheckbox nodeId={nodeId} />}
{hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />} {hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
</Flex> </Flex>

35
invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
View File

@ -1,31 +1,14 @@
import { createSelector } from '@reduxjs/toolkit'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { some } from 'lodash-es';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { FOOTER_FIELDS } from '../types/constants'; import { useHasImageOutput } from './useHasImageOutput';
import { isInvocationNode } from '../types/types';
export const useHasImageOutputs = (nodeId: string) => { export const useWithFooter = (nodeId: string) => {
const selector = useMemo( const hasImageOutput = useHasImageOutput(nodeId);
() => const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
createSelector(
stateSelector, const withFooter = useMemo(
({ nodes }) => { () => hasImageOutput || isCacheEnabled,
const node = nodes.nodes.find((node) => node.id === nodeId); [hasImageOutput, isCacheEnabled]
if (!isInvocationNode(node)) {
return false;
}
return some(node.data.outputs, (output) =>
FOOTER_FIELDS.includes(output.type)
);
},
defaultSelectorOptions
),
[nodeId]
); );
const withFooter = useAppSelector(selector);
return withFooter; return withFooter;
}; };